搭建开发环境
npx create-react-app boss
cd boss
yarn start
删除src文件下的文件,保留index.js并新建一个APP.js
App.js
import React from 'react'
class App extends React.Component{
render () {
return <h1>Hello, React!</h1>
}
}
export default App
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.js'
ReactDOM.render( // 这里是ReactDOM.render,不是React.createElement()
<App/>
, document.getElementById('root')
)
在浏览器现在可以正常显示Hello, React!
添加路由
yarn add react-router-dom
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter, Switch, Route} from 'react-router-dom' // 添加这一行
import App from './App.js'
ReactDOM.render(
// 添加浏览器路由,注意这里不是RouterBrowser
// Switch只匹配到第一个path
// exact完全匹配
<BrowserRouter>
<Switch>
<Route path="/" exact component={App}></Route>
</Switch>
</BrowserRouter>
, document.getElementById('root')
)
添加redux
yarn add redux
yard add react-redux
src目录下新建reducer.js