iT邦幫忙

2022 iThome 鐵人賽

DAY 7
1

寫過 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;

二、React 專案資料夾的架構

https://ithelp.ithome.com.tw/upload/images/20220922/20140920V51UFsRufr.png
範例專案結構圖

三、如何渲染出一個畫面的?

總和上述兩點,可以發現網頁其實是一層一層的元素組合而成。以首頁為例,整個專案的渲染流程就如下圖所示:

https://ithelp.ithome.com.tw/upload/images/20220922/20140920Am1vjdTYak.png
React 渲染大致流程示意圖

不知道這樣簡單的陳述,初學者能順利理解 React 頁面的組成嗎?下一篇開始我們將會更進一步說明細節。

複習先前文章:
Day02:直接來一個 component 了啦
Day05:React router 之路由設定


上一篇
Day06:在 React 裡面善用 history
下一篇
Day08:React 的組成-第二篇
系列文
你終究都要...學會 React ,何不一開始就看我一眼? 9
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
kk00915
iT邦新手 4 級 ‧ 2022-10-03 13:23:37

又回到最初的起點...

我要留言

立即登入留言