iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 4
1
Modern Web

給初入JS框架新手的React.js入門系列 第 4

【React.js入門 - 04】 HelloWorld! - 從ReactDOM開始

這個系列和我在12屆鐵人賽的React.js系列文,已經在修訂後和深智數位合作出版成實體書,在天瓏開始預購了,想學React的朋友可以參考看看:
https://www.tenlong.com.tw/products/9789860776188?list_name=srh

Part.1 - HelloWorld

現在,我們的專案結構應該是這個樣子:

(.vscode)
|____ (launch.json)
    
public
|____ index.html
|____ favicon.ico
|____ manifest.json

src
|____ index.js
|____ index.css
|____ App.js
|____ App.css
    
node_modules
package.json
package-lock.json
README.md
.gitignore
  1. 請打開src資料夾下的index.js
  2. 將下面這一行
ReactDOM.render(<App />, document.getElementById('root'));

修改為

ReactDOM.render(
    <h1> Hello world!</h1>, 
    document.getElementById('root')
);
  1. 現在打開localhost:3000,就會看到

    我們的第一個React程式就完成了。

Part.2 - React運作原理 - 拆解HelloWorld

咦? 我到底做了什麼?
為什麼要呼叫ReactDOM ?
為什麼js裡面出現了html ?

你現在心裡可能這麼想著
現在,我們就來解析這個Hello world的運作流程。
建議先到前一篇稍微了解DOM再開始往下閱讀歐~

Part.2-1 - React virtual DOM

前面提過,我們以往在寫網頁時常常直接對DOM操作
而React特別的地方在,當我們寫React時,是對React自己的DOM操作

React DOM函式ReactDOM.render()是React的程式進入點,正確的說法是React的 virtual DOM 。
那什麼是virtual DOM ? 這是React官方的解釋:

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

React不是像過去我們操作DOM時一樣「一個指令一個動作」,而是先用js做出一個模擬的DOM,當畫面產生改變,React會把更改的地方放入virtual DOM,和原本的DOM比較後,再去更改DOM上「必須更改的地方」。

一開始會有點難理解,這邊先簡單知道這件事就好。我們會在最後一篇回過頭來談virtual DOM更詳細的原理、為什麼要這樣做...等。

Part.2-2 - 程式流程

總體來說,React運作的流程是這樣的

把要渲染的內容丟入ReactDOM -> ReactDOM整理要渲染的內容 -> 對原始綁定的div在DOM上的位置做渲染 -> 完成畫面渲染

我們從程式碼來看這個過程。首先請打開src資料夾下的index.js,你會看到:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
    <h1> Hello world!</h1>, 
    document.getElementById('root')
);

// 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: https://bit.ly/CRA-PWA
serviceWorker.unregister();

其中

ReactDOM.render(
    <h1> Hello world!</h1>, 
    document.getElementById('root')
);

就是React的程式進入點。
在這裡我們呼叫一個物件「ReactDOM」的render函式
此函式接收兩個參數:
第一個參數<h1> Hello world!</h1>是我們所渲染到畫面上的內容。
第二個參數document.getElementById('root')是React所綁定的原始div元素。

*註: 容易搞混的是這裡是使用已定義好的函式,照平常的排版習慣來看應該是:

ReactDOM.render( <h1> Hello world!</h1> ,  document.getElementById('root'));

只是因為render函式通常有很多參數,到最後會變很長,所以排版上習慣換行。

整體程式碼來說
上面的

import React from 'react';
import ReactDOM from 'react-dom';

是引入用npm載下來的React和ReactDOM
css檔不解釋,js檔在後面會用到
下面的serviceWorker.unregister();是和PWA有關,在這邊我們先不理他。

接下來我們回過頭來看這個div在哪。打開public資料夾底下的 index.html,你會看到: (為方便閱讀,註解我先拿掉)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

你會發現在body內只有一個 id 為 root 的「div」標籤,React就是被綁定在這裡。

小結

等等,你還是沒有解釋為什麼js裡面出現了html啊?

在這裡我只是把很簡單的hello world程式碼貼出來,並沒有講很多東西。因為我希望先讓讀者了解到React使用上並沒有很困難,只是有很多觀念需要慢慢搞清楚。

我們會在下一篇解釋為什麼在js函式裡面出現了html。


上一篇
【React.js入門 - 03】 開始之前應該要知道的DOM和ES6
下一篇
【React.js入門 - 05】 JSX (上)
系列文
給初入JS框架新手的React.js入門31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
mangochu
iT邦新手 5 級 ‧ 2021-10-20 15:01:03

看過官方文件後再來看筆者的文章覺得寫得真的超清楚~ 感謝分享!

Andy Chang iT邦研究生 4 級 ‧ 2021-10-20 19:14:28 檢舉

感謝你的肯定~ 另外目前class componment目前正在被社群逐漸淘汰中,建議本篇看完之後可以再去看我去年的參賽系列,學習使用function component並做為主要React開發模式喔

mangochu iT邦新手 5 級 ‧ 2021-10-25 16:42:00 檢舉

恩恩,感恩~

我要留言

立即登入留言