一、创建一个react项目

一、全局安装react

npm install create-react-app -g

二、 在桌面创建一个react项目

create-react-app ‘文件名’

注： 文件名中不能含有大写字母【name can no longer contain capital letters】
如图：

执行这一命令，会有提示信息，将安装react，react-dom，react-scripts。

创建完后，会提供4个命令，如图：

npm start ==== 启动开发服务器
npm run build ==== 打包上线。将应用程序绑定到静态文件中进行生产。
npm test ==== 启动测试运行程序。
npm run eject ==== 移除所有工具。删除此工具并复制构建依赖项和配置文件并将脚本放入app目录中。注意：如果这么做了，就不能回去了!!!执行此命令后，无法回退！！！

而后，提示进入创建的react项目文件夹，运行打开项目
三、进入项目，运行打开项目

cd '文件名'
npm start

二、react项目结构

node-modules: 依赖的安装包，第三方包
public：
favicon.ico ---- 一个react-logo小图标，删即可。
index.html ---- 首页模板（此中自动注入src文件夹中的index.js）
manifest.json ---- 与src文件夹中的serviceWorker.js相配合，其中可设置图标或网址[地址]，使可在app应用中通过图标或网址直接进入应用
src：
index.js ---- 主要js文件，其中引入react、react-dom、index.css、App.css、serviceWorker.js
App.css ---- 样式，删即可
App.js ---- 渲染在页面中的，被引入index.js中
App.test.js ---- 帮助实现自动化测试，删即可
index.css ---- 样式，删即可
logo.svg ---- 一个图片文件，首页模板中的react的LOGO图，删即可
servicWorkwe.js ---- 作用：http://www.cnblogs.com/CCxi/p/9784901.html【与public文件中manifest.json】

三、有些写法也可如下修改：

1、

ReactDOM.render(<App />, document.getElementById('root'));
//  以上写法可改为：
let div = <div>杜鲁阳</div>
ReactDOM.render(div, document.getElementById('root'));
//  如下图所示：

改为：

2、

import ReactDOM from 'react-dom';
let div = <div>杜鲁阳</div>
ReactDOM.render(div, document.getElementById('root'));
//  以上写法可改为：
import {  render  } from 'react-dom';
let div = <div>杜鲁阳</div>
render(div, document.getElementById('root'));
//  如下图所示：

改为：

页面渲染效果：