React脚手架

React脚手架

  • 和vue一样,react也有它开发用的脚手架,能够快速的创建一个项目结构,并下载部分依赖。

安装之前的准备

  • 准备好node.js运行环境,大家可以去搜索node的安装和配置,这里不做详细介绍,整篇文章默认大家已经安装并配置了nodejs及其全局环境;
  • 全局安装create-react-app工具:npm install create-react-app -g;
  • 可能要花上几分钟,因为要下很多插件和依赖,如果因为下载npm官方的包比较慢,可以安装淘宝的cnpm镜像:
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    然后用cnpm代替npm即可。

整好开干

  • 打开你喜欢的一种可以使用控制台指令的工具,可以是git的bash,可以是vscode的终端,也可以是系统自带的cmd控制台;
  • cd到你的项目文件夹下;
  • 注意文件夹不要用中文,不然户很麻烦。
  • create-react-app [项目名]创建你的项目,项目名小写,不要包含中文(因为脚手架创建项目的时候会使用npm init,而默认-y参数会以文件夹名作为packge.json里的一个参数值,在生成这个值的时候中文会引发报错)。
  • 等待几分钟后你可以看到这样一个结构:

React脚手架

  • 项目创建完成会提示你修改的指令(即script属性里的指令替换),以及怎么运行这个项目的方法:

React脚手架

  • 根据目录创建的这些文件,这些命令分别是用来运行不同的文件的:
npm start #运行开发环境服务
npm run build #将项目打包捆绑成用于生产环境的静态文件
npm test #运行测试文件
npm run eject #  ↵
#将所有工具和包移动并将其配置为项目的依赖,这样会把这些文件都差到package.json文件的dependences下
#为的是开发时使用了自定义的第三方库能被准确标记。
  • 可以看到项目创建的时候有两个app.js 和app.test.js 这就是两个用于生产和开发的文件,在测试代码无误后可以添加进入生产使用文件里。
  • 按照提示运行项目:
cd [项目文件夹内]
npm start
  • 运行成功会有这样的提示:

React脚手架

你可以通过下面提供的两个地址:本地地址local: http://localhost:3000访问当前项目,或者网络中的地址:http://192.168.43.252:3000进行访问。

它一般会自动打开你的默认浏览器并默认访问local的地址:
React脚手架

如果加载过慢,可能是默认加载了node_moduls里的依赖,这里文件非常多,那么请在设置里忽略加载这些文件。