React教程：Helloworld项目解析

先了解一下整个项目的目录结构，其实这一步的详细教学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 [email protected]
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 (
      

        

          
          
Welcome to React
        
        

          To get started, edit src/App.js and save to reload.
        
      
    );
  }
}

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(
  ,
  document.getElementById('root')
);