一步一步写web之react实战（三-新建项目与代码分析）

这一篇及以后的react实战都是基于新的项目，与（一）、（二）是两种不同的构建项目方式。前两篇是为了加深理解，先写自己摸索的过程，这一篇才真正开始react实践！

虽然没系统写过react项目，但是react native也使用了不短的时间，总觉得接下来做的我将会很熟悉，可以很快上手。构建好项目又是一个脑袋空白期，不知道该写写什么内容了。

参考官网文档installtion章节构建项目。

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

将hello-world换成自己的文件夹作为根目录，注意文件夹名不能带大写字母，否则报错！npm start后就启动项目了，大家可以自己在App.js中修改代码，修改后的代码浏览器会自动编译更新（超爽）！明天按照reactjs.cn的 入门教程来实践吧，自己想真的不知道怎么写好。要注意区分这里的 入门教程和刚才的 installtion章节是两个不同的网站。后者才是正宗的官网！不过两个都是很好的教程。今天就分析下代码吧。

首先从npm start开始，npm start这个start哪里来的呢？为什么要用start，用其他的单词行ma ？我们带着这个疑问来看代码，搜一下会发现在package.json中有一个地方有start：

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

这里会发现不但有start 还有build、test、eject。这几个是都可以用吗？我们试一下，首先build

运行后发现真的可以运行，还没错，证明这个是可以使用的，再看下一个test，跳转了几下，最终是下图这样

也是可以运行的那么最后一个不出意外也是可以运行的了，也试下

果然，这四个都是可以运行的，也就是说我们如果要自己定义命令的话应该也写在这里。json数据以键值对的形式出现，“:”前是名字，那后面就是值，这个“值”又该从哪里取呢，我们接着找，这次搜“react-scripts”，发现有38处

仔细看下搜索的结果会发现README.md出现好多次，那我们看看README里面都有什么，我这里就用记事本打开了

- [Available Scripts](#available-scripts)
  - [npm start](#npm-start)
  - [npm test](#npm-test)
  - [npm run build](#npm-run-build)
  - [npm run eject](#npm-run-eject)

这里就介绍了可用的脚本，这样就发现刚才后来两个命令用错了，下面才是正确的用法！

接着看

- [Troubleshooting](#troubleshooting)
  - [`npm start` doesn’t detect changes](#npm-start-doesnt-detect-changes)
  - [`npm test` hangs on macOS Sierra](#npm-test-hangs-on-macos-sierra)
  - [`npm run build` silently fails](#npm-run-build-silently-fails)
  - [`npm run build` fails on Heroku](#npm-run-build-fails-on-heroku)
- [Something Missing?](#something-missing)

还教你怎么查找问题，接下来就是对整个初始化的项目进行详细说明，还有用法，举例，真的是实用啊。就不一一分析了，接着看“react-script”，发现查找的好像都不是很符合我们的预期，不过，别忘了，还有一个地方，node_modules！所有npm install的东西都在这里，package.json只是告诉npm我需要那些东西，相当于购物清单。那再来这里查找

只对node_modules这个文件查找，单击右键在查找里选择目录，得到如下结果

很好，这就是我们要找的结果，打开它

我们越来越接近真相了，下面五个js文件，我们在构建项目时用到了init，剩下的四个使我们在找的，文件找到了，那引用地方呢，进入bin，打开react-scripts.js，

var spawn = require('cross-spawn');
var script = process.argv[2];
var args = process.argv.slice(3);

switch (script) {
case 'build':
case 'eject':
case 'start':
case 'test':
  var result = spawn.sync(
    'node',
    [require.resolve('../scripts/' + script)].concat(args),
    {stdio: 'inherit'}
  );

首先映入眼帘的就是我们要找的东西！好了大功告成，我们已经明白了为什么可以使用这几个命令了。在回顾下：首先在json里引用了脚本，npm install时会把脚本下载到本地，并存放在默认查找的路径下。分析完毕!下一篇对react项目添加内容。