create-react-app脚手架使用

1.安装脚手架和路由

npm i -g create-react-app

npm i -S react-router react-router-dom

2.创建新项目

create-react-app 项目名称

3.运行项目

npm start

4.开始开发

跟vue-cli和ng-cli很不同的是，react就算用了cli和原来引入

1）书写组件

例如一个简单的组件：

//test.component.js
import React,{Component} from React
import './test.css'

class Test extends Component {
    constructor(...args){
        super(...args)
    }    
    render(){
        return (
            <div className="test">
                test123
            </div>
        )
    }
}
export default Test

2）引入书写路由

//App.js
import React,{Component} from React
import {BrowserRouter,Switch,Route,Link} from 'react-router-dom'
import Test1 from './test1.js'
import Test2 from './test2.js'
import Test3 from './test3.js'

class App extends Component {
    render(){
        return (
            <BrowserRouter>
                <div>
                    <Link to="/test3/123/">切换到test3</Link>
                    <Test1></Test1>
                    <Switch>
                        <Route path="/" component={Test2}></Route>
                        <Route path="/test3/:id/" component={Test3}></Route>
                    </Switch>
                </div>
            </BrowserRouter>
        )
    }
}
export default App

3）ajax请求用es6的fetch

//组件挂载完成时访问接口
async componentDidMount(){
     let data = await (await fetch('http://localhost:8088/api/getData',
        // options
        {  method: 'POST',
            headers: { 
                'Accept': 'application/json', 
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ 
                user: 'miemie', 
                pass: '123456'
            }) 
        }
    ).json())
    this.setState({myList: data})
}