Logo

Nextjs 中文doc 介紹 React 部分

在沒有 react 前如何透過JS在 div 加入一個 h1

<script type="text/javascript">
  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const headerContent = document.createTextNode('Develop. Preview. Ship. 🚀');
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

若引入 React

<html>
  <body>
    <div id="app"></div>

    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

    <script type="text/javascript">
      const app = document.getElementById('app');
      ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
    </script>
  </body>
</html>

element, props, state

element

0

props

1

2

3

State

4

Lib 介紹

react: 核心庫，像是 React.createElement、useState、useEffect ，與平台無關的，渲染到網頁用 react-dom、用在跨平台react-native

react-dom : 將react 元件渲染到 dom樹 上面，ReactDOM.render、ReactDOM.createPortal 等等，react-dom是專門為web 平台設計