Day07：React 的組成

2022 iThome 鐵人賽

DAY 7

自我挑戰組

你終究都要...學會 React ，何不一開始就看我一眼？系列第 7 篇

14th鐵人賽

Annie

2022-09-22 23:12:01

408 瀏覽

分享至

寫過 HTML 的大家，一定都知道它的組成結構是下面這樣...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body id="root">
    <!-- 開始放你的網頁內容 -->
</body>
</html>

那剛入門 React 的你，隨著官方文件的練習，有發現它的組成架構是什麼了嗎？在前面幾篇的系列文，我們學會了怎麼做一個 component、並使用 component 來組成畫面；我們也學會了怎麼正確使用 react-router 來切換路由，接下來我們來推敲整個 React 專案是如何組成並運行的。(以下程式碼以 16.9 版本為例說明)

一、整個專案的進入點

你當然也會擁有一個 .html 檔案，接著就和沒有使用框架時一樣，你會給你的 body tag 一個 id，讓 JavaScript 與它產生連結。

1. 最初的起點(index.js)

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import createStore from 'src/Stores';

// 我會獨立出 App 這個 layout
import App from './Containers/AppContainer';

const Providers = (props) => (
  <Provider store={store}>
    <React.Fragment>
      {props.children}
    </React.Fragment>
  </Provider>
);

ReactDOM.render(
  <Providers>
    <App renderer={new WebGLRenderer({ antialias: true })} />
  </Providers>,
  document.getElementById('root'),
);

2. 開始組成頁面(App.js)

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

// 通常你會有一個檔案用來整理路由
import RoutesPage from './routes/RoutePage';

class App extends Component {
  render() {
    return (
      <div>
        <RoutesPage />
      </div>
    );
  }
}

export default connect(
  (state) => ({}), // 引用 props 和 state 值的地方
  (dispatch) => bindActionCreators(dispatch), // 引用 action 的地方
)(App);

3. 規劃路由與對應的畫面(RoutePage.js)

這邊先假設我們有一個首頁(home)和文章列表、新增和編輯文章頁。

import React, { Fragment } from 'react';
import { Switch, Redirect, Route, BrowserHistory  } from 'react-router';

import HomeLayout from 'src/Layout/HomeLayout';
import HomeScreen from 'src/Containers/Home/HomeScreen';

class Routers extends React.Component {
  render() {
    return (
      <HomeLayout>
        <BrowserHistory >
          <Switch>
            <Route exact path="/blogs/update/:id" component={BlogDetailScreen} />
            <Route exact path="/blogs/create" component={BlogDetailScreen} />
            <Route exact path="/blogs" component={BlogListScreen} />
            <Route exact path="/home" component={HomeScreen} />
            <Redirect from="/" to="/home" />
          </Switch>
        </BrowserHistory>
      </HomeLayout>
    )
  }
}

class RoutesPage extends React.Component {
  render() {
    return (
      <Fragment>
        <Routers />
      </Fragment>
    );
  }
}

export default RoutesPage;