react有两种使用方式，一种是如同jquery的方式引入，不过还需要babel.js的解析，这个过程比较缓慢，我们在实际开发一般会最后合并打包，如：webpack+vue-cli构建vue项目的方式，把src下的main.js打包合并成build.js（一些介绍：http://www.jb51.cc/article/p-edtjtioe-brc.html，如何安装：https://gitee.com/dgx/admin-vue 详细在readme）。

npm是nodejs的集成工具，可以帮助我们完成很多工作。

webpack支持模块化引入，最后打包合并，如何使用webpack：http://www.jb51.cc/article/p-cdgiinzh-brc.html

1.创建react项目，使用 create-react-app

1.安装nodejs （下载安装） （win10 64位系统操作）

node -v （监测安装）

npm -v （监测安装）

2.安装webpack （npm install -g webpack）

webpack -v （监测安装）

3.安装create-react-app (npm install -g create-react-app)

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

执行上面命令，创建我们名称为my-app的项目

2.分析create-react-app创建的项目结构

安装后的目录机构：

package.json包文件，我们可以看到使用了哪些依赖，我们打开node_modules可以看到所有安装的依赖

public/index.html：id=root是实际插入结构的根节点

src/index.js:核心文件，也是主要文件，在index.js是使用这个js，实现react的处理

src/app.js:组件文件，我们要显示的结构

3.显示helloworld

npm start

启动项目，我们可以看到默认界面：

我们已经知道，我们的页面结构是在app.js里面，我们修改这个文件即可：

import React,{ Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        hellworld
      </div>
    );
  }
}

export default App;

界面变成如下：

4.总结

依据结构，我们可以大致的知道，npm start启动之后，会打开我们的index.html，然后里面会引入build.js（webpack工作）,

build.js是找到src/index.js然后打包合并生成，index.js作为核心文件，会使用导入导出的es6语法加载使用模块。

app.js存放的就是我们要显示的html结构，也是插入到id=root里面的结构。

5.打包合并项目

不知道怎么终止运行：ctrl+c 然后y即可

执行：

npm run build

和vue-cli+webpack打包合并文件命令一样，我们等待完成......

完成后会有一个build目录，我们打开build目录，直接双击打开indx.html，纯静态浏览器访问这个页面：

会出现错误提示，不能找到资源，是因为我们是静态处理，我们修改一下index.html就可以了：

这是生成的默认index.html，我们红框勾出来就可以看出问题所在，在静态文件页面，路径多了一个/，我们删除这个/

刷新就可以看到helloworld了。