先了解一下整个项目的目录结构，其实这一步的详细教学Facebook已经帮我写好了，你只要找到hello-world目录下的README.md文件，把里面的内容理一遍就清楚了。
只有几个简单的文件在public和src目录下，我们先了解一下每个文件的作用。
package.json
package.json定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。
{
"name": "hello-world",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-scripts": "0.8.4"
},
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
package.json文件内部就是一个JSON对象，该对象的每一个成员就是当前项目的一项设置。比如name就是项目名称，version是版本。dependencies表示依赖的其他JS库，devDependencies表示只有dev环境依赖的库。
index.html
浏览器访问的就是这个页面，React的组件都是附加到“root”这个div元素上的。
PUBLIC_URL：this feature is available with react-scripts@0.5.0
and higher.
react-scripts
create-react-app是通过react-scripts来创建项目的，而react-scripts是安装在项目的node_modules下的，每次创建时都会下载最新的react-scripts。react-scripts是一个基于开发环境的React项目生成工具。
npm run build: 会生成可部署的文件，在build目录下，可以直接把这个目录下的文件复杂到你的网站空间，就可以通过HTTP访问刚创建的Helloworld项目。
npm run eject: 这个命令是不可逆的，会使用Webpack, Babel来替换react-scripts Build和运行项目的工作。从载图或者package.json你可以观查到有什么变化。
对于目前处于练习阶段的我们，其实不需要使用eject，暂时不要去管Webpack, Babel等新的概念，我们先把注意力放在学习React的特性和规范上。
App组件
- public/index.html是网页的模板，只有在public目录的文件才能被index.html访问到。
- src/index.js是JavaScript的入口
真正显示的内容在React组件：App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
import & export：虽说从字面上很容易看懂import和export的作用，特别是Java程序员对import再熟悉不过了。不过要理解JavaScript的import和export还需要选搞清楚JavaScript模块相关的知识，关于这一点我们以后再深入。现在我们只要知道，一个JavaScript文件要使用另一个JavaScript文件需要import，而一个JavaScript文件要提供一些函数或属性给别的JavaScript文件使用的话，需要export。
Index.js通过ReactDOM.render装App组件和Index.html中的root元素整合（绑定）在一起。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
