React的渲染特性

2018 iT 邦幫忙鐵人賽

DAY 3

Modern Web

React系列第 4 篇

2018鐵人賽

s1410432026

團隊i.m.a.c_wishing_well

2017-12-24 01:54:07

2646 瀏覽

React要怎麼產生畫面呢?首先我們在專案目錄底下的public找到index.html這個檔案，你會發現它除了一個id叫root的空div什麼都沒有，那它是如何顯示出東西的呢

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

打開專案資料夾底下的src資料夾並在裡面找到index.js，這個檔案可以說是程式的進入點，它會把包在ReactDOM.render裡面的東西渲染在html檔裡面的root標籤內，現在它將App這個元件渲染出來所以你會看到一個React的標誌在轉，關於元件之後會說到

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

你可以試著在render加一點東西然後存檔看看，也會被渲染出來，順帶一提React自己有Hot Loader工具，當你修改完code並儲存的時候它就會幫你刷新畫面，就不用自己再去重整一次囉

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <App />,
  <div>Hello World!</div>,
  document.getElementById('root')
);

對不起，我因為自己的疏忽，忘記要發文，結果30天挑戰失敗了，各位imac團隊的隊友對不起QQ