react脚手架的建立——小白入门

桃扇骨 2023-02-14 15:40 6阅读 0赞

一、介绍：React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。

做出来以后，发现这套东西很好用，就在2013年5月开源了。

二、React脚手架：create-react-app

React 的环境搭建，是比较繁琐的，有很多的依赖：`react`、`react-dom`、`babel`、`webpack` ... 需要很多的前置知识，很容易让人从入门到放弃。

于是就诞生了 `脚手架` 这种东西，`create-react-app` 就是一个 React 的脚手架，用它可以很方便的就创建了整个 React 的环境搭建，它解决了所有的依赖问题。

越上层的建筑，越方便的工具，也说明了我们对底层的定制性越差。不过对于新手学习的同学，把应用的东西先做起来之后，有必要再去理解底层环境的东西，也是种不错的学习的路径。

三、建立脚手架：

（1）电脑要先装上最新版的Node.js    [https://www.runoob.com/nodejs/nodejs-install-setup.html][https_www.runoob.com_nodejs_nodejs-install-setup.html]

它会直接包括住：npm   npm是个啥？[https://blog.csdn.net/qq\_37696120/article/details/80507178][https_blog.csdn.net_qq_37696120_article_details_80507178]

（2）装好了Node.js后配置一下环境变量，然后就可以使用npm 下载 create-react-app 了：

## 　　使用淘宝 NPM 镜像 ##

大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。

淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了：

$ cnpm install [name]

接着：
      cnpm isntall -g create-react-app  就是下载这个了脚手架了

create-react-app my-app  创建一个名为my-app的项目（可以先进入cd想部署的文件夹，然后创建这个项目，否则默认c盘）
    
      慢慢等待安装
    
      安装好了之后，接下来进入这个目录 cd my-app
      然后安装依赖（脚手架都差不多） npm install
      启动项目：npm start 
    
      项目跑起来的话，就用默认用你的3000端口打开构建的本地服务器，如果你的3000端口被占用，就会用其他端口打开啦
    
    
    　项目查看 可以用 webstorm或者vsCode打开，然后编写，运行。
    
      写好了上传github 然后可以部署到github page 上面，免费访问。教程： https://www.jianshu.com/p/02c86540d324
    
    参考博客：
    https://www.runoob.com/nodejs/nodejs-npm.html
    https://www.jianshu.com/p/e16a9da931ec
    
    
    遇到问题：
    1.【构建React-app应用时create-react-app卡住超慢的解决办法 - Edluminary的blog - CSDN博客】https://blog.csdn.net/qq_40197828/article/details/86823985

2.React 项目文件结构解析：https://my.oschina.net/korabear/blog/1815170
    
    3.利用webstorm创建react项目：https://blog.csdn.net/qq_39207948/article/details/79467144

[https_www.runoob.com_nodejs_nodejs-install-setup.html]: https://www.runoob.com/nodejs/nodejs-install-setup.html
[https_blog.csdn.net_qq_37696120_article_details_80507178]: https://blog.csdn.net/qq_37696120/article/details/80507178