react-app 脚手架快速搭建项目教程（1--构建初始项目）

React 团队为了方便我们进行项目开发，专门提供了一个用来构建 React 项目的脚手架工具，这个工具的使用很简单，无需我们进行多余的配置，只需要我们通过命令的方式来创建项目即可，具体的操作方法如下：

1.npm install -g create-react-app（全局安装create-react-app脚手架工具，然后就可以使用命令创建新的react项目）

2. 需要输入的代码（逐个输入）：
    create-react-app my                  ---创建react项目
    

   创建项目的时候对node版本有要求,需要升级到node 8版本或者更高的版本，

   最新版本进入官网下载http://nodejs.cn/download/

    cd myApp                             ---进入项目
    cnpm init（然后一路回车）              ---初始化
    cnpm install --save react react-dom  ---在该目录下导入react和react-dom
    cnpm install --save react-router-dom ---react路由，以后会用到
    cnpm start                           ---启动项目.

就这样，第一步搭建项目初始的基础框架差不多就算完成了

项目文件结构说明：

node_moodule:存放node模块及依赖包

public:存放公共的html模板,图标等

src:用来盛放你自己代码的文件夹，默认生成app.js代码也在里面

四个文件

.gitignore  // 这个是用来定义那些在提交到远程代码库时要忽略的文件

package.json //用来声明项目的各种模块安装信息，脚本信息等

package-lock.json //用来锁定模块安装版本的，能确保大家安装的模块版本一致

README.md  //盛放关于这个项目的说明文件

src文件夹

然后我们来重点看看src文件夹，因为我们的react组件代码待会也会写在里面。

这里面的文件也不多，就四部分

1、APP相关的js，css文件   //自动给我们创建的一个组件

2、index相关的js，css文件

3、一个logo.svg图标            //默认的一个简单图标文件

4、 一个registerServiceWorker.js文件 //此文件能进行缓存一些资源，一般是用到生产环境的，主要是用来加快访问速度，

大致的分析下组件结构

主要说些比较重要的文件

1. 首先是public目录下盛放着index.html模板，如果开发单页应用，那么所有的代码都会渲染在这里。【index.html文件中也就三部分内容。1.通过meat标签引入的主页一个自适应的viewport声明。2. 通过link标签引入的一个项目基本 m配置文件anifest.json和图标，3. 一个用来让react组件渲染的div标签

2. 也是在public目录下的manifest.json文件，此文件记录着这个react的APP应用的基本配置信息，他类似于Android的AndroidManifest.xml

3. 然后就是在scr目录下的index.js文件，他不是一个react组件，他是链接react与htnl模板的桥梁，所有的react组件最终都是由他进行渲染到html模板中。然后整个文件中引入了一个系统默认生成的组件APP,有index.js进行渲染。

4. registerServiceWorker.js文件，这个文件是用于生产环境的，它可以缓存些资源，让用户在离线模式下也能访问缓存的内容，以给用户更好的体验，开发环境中没什么用处。。。

5. 最后还有个app.test.js文件，主要是用来组件测试的，有兴趣可以取好好了解下，这里就不多讲这个。
原文：https://blog.youkuaiyun.com/tiangongkaiwu152368/article/details/80847494