脚手架创建react项目

脚手架创建react项目

确认node版本

查看node版本：node --version
顺便查看npm版本：npm --version

如果没有node版本，请安装node版本并配置相关的环境变量
安装Node只需要进入Node网站，进行响应版本的下载，然后进行双击安装就可以了。
Node中文网址：http://nodejs.cn/ (建议你在这里下载，速度会快很多)
需要你注意的是，一定要正确下载对应版本，版本下载错误，可是没有办法使用的哦。
Node安装好以后，如果是Windows系统，可以使用 Win+R打开运行，然后输入cmd，打开终端（或者叫命令行工具）。

脚手架的安装

确认Node版本后，你就可以使用npm命令来安装脚手架工具了，方法很简单，只要打开终端，然后输入下面的命令就可以了。
npm install -g create-react-app

创建React项目

脚手架安装好以后，就可以创建项目了，我们在D盘创建一个ReactDemo文件夹，然后进入这个文件夹，创建新的React项目。

D: //进入D盘
mkdir ReactDemo //创建ReactDemo文件夹
create-react-app demo01 //用脚手架创建React项目
cd demo01 //等创建完成后，进入项目目录
npm start //预览项目，如果能正常打开，说明项目创建成功

项目目录介绍

README.md :这个文件主要作用就是对项目的说明，已经默认写好了一些东西，你可以简单看看。你可以把文件中的内容删除，自己来写这个文件，编写这个文件可以使用Markdown的语法来编写。

package.json: 是webpack配置和项目包管理文件，项目中依赖的第三方包（包的版本）和一些常用命令配置都在这个里边进行配置，当然脚手架已经为我们配置了一些了，目前位置，我们不需要改动。

package-lock.json：这个文件是锁定安装时的版本号，并且需要上传到git，以保证其他人再npm install 时大家的依赖能保证一致。

gitignore : 是git的选择性上传的配置文件，比如一会要介绍的node_modules文件夹，就需要配置不上传。

node_modules :是我们项目的依赖包，到目前位置，脚手架已经都给我们下载好了，你不需要单独安装什么。

public ：公共文件，里边有公用模板和图标等一些东西。

src ： 主要代码编写文件，这个文件夹里的文件对我们来说最重要，都需要我们掌握。

public文件夹介绍
这个文件都是一些项目使用的公共文件，也就是说都是共用的。

favicon.ico : 网站或者说项目的图标，一般在浏览器标签页的左上角显示。

index.html : 首页的模板文件。

mainifest.json：移动端配置文件。

src文件夹介绍
这个目录里边放的是我们开放的源代码，我们平时操作做最多的目录。

index.js : 项目的入口文件。

index.css ：是index.js里的CSS文件。

app.js : 这个文件相当于一个方法模块，也是一个简单的模块化编程。

serviceWorker.js: 这个是用于写移动端开发的，PWA必须用到这个文件，有了这个文件，就相当于有了离线浏览的功能。