react进阶（一）——脚手架搭建react项目

声明

 从这一章开始，我们开始使用脚手架搭建项目，一步步地带大家深入学习react。若还未了解清除react入门相关的一些事情，可以查看我以前发的博客，这些博客都有很详细的讲解和例子，博客地址 https://blog.csdn.net/qq_40566547

怎么使用和安装脚手架？

 安装脚手架之前请确保自己的设备有node环境。

• 安装node，配置环境变量
   这里我就不多叙述了，安装和配置node环境在网上都有教程，推荐地址 https://blog.csdn.net/antma/article/details/86104068
• 安装yarn命令

npm install -g yarn

• 安装webpack，webpack-cli
   安装之前由于npm自己的库下载很慢，所以请切换仓库，或安装cnpm。之后运行命令

npm install -g webpack webpack-cli

• 安装脚手架

npm install -g create-react-app

• 检查脚手架是否安装上
   之前所有 -g 的命令都是全局安装，会在全局生成一个命令，再cmd上输入命令 create-react-app 检查是否安上，若没有会出现类似 create-react-app 不是内部命令，否则安装成功

脚手架搭建项目

 在安装之前，选择一个目录进行项目搭建，运行命令

create-react-app 项目名字

 因为create-react-app是facebook公司生产的，所以他实际上用的是自己公司的yarn命令进行下载，到时候会在根目录生成一个yarn.lock

项目目录详解

 | public：存放公共资源
  —| favicon.ico：网站图标
  —| index.html：网站首页
  —| manifest.json：RN项目配置文件
 | src：存放源代码
 | .gitigonre：git忽略进行版本控制的文件
 | package.json：项目依赖
 | README.md：简述项目的文件

项目怎么运行？

 首先我们来查看package.json文件

 start：运行项目的相关命令
 build：打包项目的相关命令
使用命令

npm start / yarn start(已安装yarn)

 接下来项目就会自动启动浏览器，我们就可以看到项目的样子。并且项目已经能够实现热更新（一旦文件发生了改变并且保存了或切换桌面等，都会引起热更新）。
 好了，今天的项目环境搭建就简述到这里，若有问题请留言，谢谢。