React項目搭建

環境搭建

推薦使用npm搭建項目環境，若是網速過慢，但是使用cnpm進行項目的搭建（cnpm是淘寶的npm鏡像，與npm有些差別，有些模塊沒法下載或沒法正常使用）。

cnpm install -g create-react-app
create-react-app my-app
cd my-app
npm start
複製代碼

打開瀏覽器，輸入http://localhost:3000能夠看到系統默認生成的頁面了。

注：node版本最好8.0版本以上

目錄結構

路由配置

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { BrowserRouter } from 'react-router-dom'
import Root from './router/Router'
import * as serviceWorker from './serviceWorker'

const mountNode = document.getElementById('root')
ReactDOM.render(
  <BrowserRouter>
    <Root />
  </BrowserRouter>,
  mountNode
)
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister()
複製代碼

app.js

/*
   App 應用總容器
*/
import React, { Component } from 'react'

class App extends Component {
  render() {
    return <div>{this.props.children}</div>
  }
}
export default App

複製代碼

Router.js

/*
   Root, Router 配置
*/
import React from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'

import App from './../App'

import Test from './../containers/Test'
import Home from './../containers/Home'
import Message from './../containers/Message'

const Root = () => (
  <div>
    <Switch>
      <Route
        path="/"
        render={props => (
          <App>
            <Switch>
              <Route path="/" exact component={Home} />
              <Route path="/home" component={Home} />
              <Route path="/test" component={Test} />
              <Route path="/message/:id" component={Message} />
              {/*路由不正確時，默認跳回home頁面*/}
              <Route render={() => <Redirect to="/" />} />
            </Switch>
          </App>
        )}
      />
    </Switch>
  </div>
)

export default Root

複製代碼

containers中的三個文件

/*
   Home 主頁
*/
import React, { Component } from 'react'
import { Link } from 'react-router-dom'

class Home extends Component {
  render() {
    return (
      <div id="home-container">
        {/*search,state能夠自定義，獲取方法：this.props.location.search，this.props.location.state*/}
        <Link
          to={{
            pathname: '/test',
            search: '?name=homename',
            state: { mold: 'add' },
            aa: 'dddd'
          }}
          className="home-link"
        >
          點擊跳轉到路由參數search，state使用
        </Link>
      </div>
    )
  }
}

export default Home
/*
   Message 主頁
*/
import React, { Component } from 'react'

class Message extends Component {
  // constructor(props) {
  //   super(props)
  // }

  render() {
    return <h3>Message{this.props.match.params.id}</h3>
  }
}

export default Message
/*
   Test 主頁
*/
import React, { Component } from 'react'
import { Link } from 'react-router-dom'

class Test extends Component {
  // constructor(props) {
  //   super(props)
  // }

  render() {
    return (
      <div id="test-container">
        <p>search:{this.props.location.search} </p>
        <p>state:{this.props.location.state.mold} </p>
        <div onClick={() => this.props.history.goBack()}>返回上一頁</div>
        <Link to={`/message/12`}>message頁面1</Link>
        <div onClick={() => this.props.history.push('/message/12')}>
          message頁面2
        </div>
      </div>
    )
  }
}
export default Test

複製代碼