项目前的准备

首先需要下载Node.js和npm(下载Node.js自带npm)，下载完Node.js后，由于npm的速度较慢，可以考虑使用下面的命令下载cnpm

  1. npm install cnpm -g

npm是什么，为什么会需要npm：

想要知道npm是什么，那就要先从共享代码说起，程序员自古以来就有社区文化，加入社区最大的好处之一是，你可以使用别人贡献的代码，你也可以贡献代码给别人用。

前端是怎么共享代码的呢?

在 GitHub 还没有兴起的年代，前端是通过网址来共享代码，比如你想使用 jQuery，那么你点击 jQuery 网站上提供的链接就可以下载 jQuery，放到自己的网站上使用，GItHub 兴起之后，社区中也有人使用 GitHub 的下载功能。

当一个网站依赖的代码越来越多，程序员发现这是一件很麻烦的事情，比如你要下载BootStrap，你就必须下载jQuery，因为BootStrap依赖jQuery，所以你需要一个网站一个网站的去下代码。如果遇到依赖比较多的情况，这个库依赖另一个库，另一个库又依赖另一个库，如此当依赖关系十分复杂时，你根本不知道要下哪些库，这对程序员来说简直就是个灾难。

有些程序员就受不了了，一个程序员叫 Isaac Z. Schlueter(以下简称Isaaz)给出一个解决方案：用一个工具把这些代码集中到一起来管理吧!这个工具就是他用 JavaScript(运行在Node.js上)写的 npm，全称是 Node Package Manager。

NPM 的思路大概是这样的：

  1. 买个服务器作为代码仓库(registry)，在里面放所有需要被共享的代码
  2. 发邮件通知 jQuery、Bootstrap、Underscore等作者使用npm publish 把代码提交到registry上，分别取名 jquery、bootstrap和underscore(注意大小写)
  3. 社区里的其他人如果想使用这些代码，就把jquery、bootstrap和underscore写到package.json里，然后运行 npm install，npm就会帮他们下载代码
  4. 下载完的代码出现在 node_modules 目录里，可以随意使用了。

这些可以被使用的代码被叫做「包」(package)，这就是 NPM名字的由来：Node Package(包) Manager(管理器)。 但是npm叫别人这么干，别人不一定会这么干啊，所以npm是怎么火的呢?npm的发展是跟Node.js的发展相辅相成的。Node.js是由一个在德国工作的美国程序员Ryan Dahl写的。他写了Node.js，但是Node.js缺少一个包管理器，于是他和 npm的作者一拍即合、抱团取暖，最终Node.js内置了npm。

后来的事情大家都知道，Node.js火了。随着Node.js的火爆，大家开始用 npm来共享JS代码了，于是jQuery作者也将 jQuery发布到npm了。所以现在，你可以使用npm install jquery来下载jQuery代码。 现在用npm来分享代码已经成了前端的标配。

接下来下载搭建React项目的脚手架create-react-app

  1. cnpm install create-react-app -g

什么是脚手架：

随着前端工程化的概念越来越深入人心，脚手架的出现就是为减少重复性工作而引入的命令行工具，摆脱ctrl + c, ctrl + v，此话zenjiang? 现在新建一个前端项目，已经不是在html头部引入css，尾部引入js那么简单的事了，css都是采用Sass或则Less编写，在js中引入，然后动态构建注入到html中；除了学习基本的js，css语法和热门框架，还需要学习构建工具webpack，babel这些怎么配置，怎么起前端服务，怎么热更新；为了在编写过程中让编辑器帮我们查错以及更加规范，我们还需要引入ESlint；甚至，有些项目还需要引入单元测试(Jest)。对于一个刚入门的人来说，这无疑会让人望而却步。而前端脚手架的出现，就让事情简单化，一键命令，新建一个工程，再执行两个npm命令，跑起一个项目。在入门时，无需关注配置什么的，只需要开心的写代码；另外，对于很多系统，他们的页面相似度非常高，所以就可以基于一套模板来搭建，虽然是不同的人开发，但用脚手架来搭建，相同的项目结构与代码书写规范，是很利于项目的后期维护的；以上就是为什么脚手架存在的意义， 让项目从”搭建-开发-部署”更加快速以及规范。

接着使用create-react-app搭建一个React项目，这里的项目名称就命名为blog

  1. create-react-app blog

使用该命令会在本地生成一个文件夹blog，里面的内容如下
项目前的准备 - 图1
其中src就是我们开发的文件夹，其中index.js是入口文件，里面的内容为

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import './index.css';
  4. import App from './App';
  5. import * as serviceWorker from './serviceWorker';
  7. ReactDOM.render(<App />, document.getElementById('root'));
  9. // If you want your app to work offline and load faster, you can change
  10. // unregister() to register() below. Note this comes with some pitfalls.
  11. // Learn more about service workers: https://bit.ly/CRA-PWA
  12. serviceWorker.unregister();

现在我们将里面的内容改为

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  4. ReactDOM.render(<div>Hello React</div>, document.getElementById('root'));

然后npm start就可以看到下面的页面
项目前的准备 - 图2
这时可以将src下除index.js的文件全部都删掉了，因为没有用到他们。