之前一直用VUE来进行项目开发。刚刚看了react的生态圈，真的是很厉害。单单脚手架就有传统创建单页面程序的create-react-app，有进行服务器端渲染的Next.js，还有快速创建网站的Gatsby。那就先从create-react-app开始说起。

1. 创建项目

create-react-app是react中最简单的创建单页面程序的方式。在使用它之前先保证你的机器上安装了Node环境，并且Node >= 6 ，npm >= 5.2

# 全局安装create-react-app$ npm install -g create-react-app# 或 临时安装create-react-app$ npx create-react-app my-app# 创建项目create-react-app app02cd my-appnpm start

这样，一个react单页面程序项目就创建好了。

2. 目录结构

react目录结构更加清晰一下，src是我们编码的主要目录，这里我把一些不是特别重要的数据删除了，整理成如下

那么比较关键代码就是index.js与App.js了，其中，index.js为入口文件，这里导入了react,react-dom,App.js并且在root元素上开始渲染App

index.js

// 导入react react-domimport React from 'react';import ReactDOM from 'react-dom';// 导入全局cssimport './index.css';// 导入根组件import App from './App';// 在root元素上渲染根组件ReactDOM.render(
    , document.getElementById('root'));

App.js为一个组件，为了创建组件，需要继承创建类，并且继承React.Component，组件中的写法就与我们之前的学到的没什么区别了。如果需要用的css样式可以提前引入。

App.js

import React, { Component } from 'react';import './App.css';class App extends Component {  render() {    return (      
    
        
     
          
      
            hello world          
        
     
      
    
    );  }}export default App;

3. 集成react-router

上面的代码中仅仅可以显示出helloworld，要想完成单页面程序的开发，需要在页面中进行页面局部刷新，加载各种子页面。这就就离不开路由。

1) 列表项目

安装react-router-dom

cnpm install react-router-dom --save

2) 定义路由页面

import React,{Component} from 'react'class List extends Component{  render(){    return (      
this is List
    )  }}export default List;

3) 在App.js中引入，并且使用

import React, { Component } from 'react';import { BrowserRouter as Router,Route ,Link} from 'react-router-dom'import './App.css';// 加载组件import List from './List'import About from './About'class App extends Component {  render() {    return (      
            
     
          
      
App
          
      
            
       
        List
            
       
        About
          
      
          
      
          
                
              
     
      
        );  }}export default App;

后面我们会重点说到react-router的应用