安装 react脚手架

React官方提供的脚手架工程Create React App：https://github.com/facebook/create-react-app

npm install create-react-app -g 全局安装
create-react-app my-react (my-react为项目名称，可以自定义)
cd my-react
启动项目：npm start
成功如下图：

my-react.jpg

react脚手架目录结构

react.jpg

可以把脚手架目录结构精简为如下图：

react-1.jpg

入口文件：index.js

// 导入核心模块
import React from 'react'
import ReactDOM from 'react-dom'
// 入口组件
import App from './App.jsx'ReactDOM.render(<App />, document.getElementById('root'))

存放组件的文件夹：component

入口组件：App.jsx

// 根目录
import React from 'react'
import Home from './component/Home.jsx'
class App extends React.Component {render() {return (<Home />)}
}
export default App

Home.jsx

import React from 'react'
export default class Home extends React.Component {render() {return <div>首页</div>}
}