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})
}