2 min read javascript

[React Js] React 入門：安裝 與 渲染 HTML 元素

[React Js] React 入門：安裝 與 渲染 HTML 元素

React 入門筆記，紀錄 實際安裝 與初步 渲染 HTML 元素 的筆記紀錄 ：

安裝：

React 官網上，提供了不少的安裝方式，包含：Yarn、Npm、CDN…等等

官方網站：官方安裝說明

這邊以 CDN 來來引用，比較不會由環境上的問題而比較簡單使用：

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

可以使用 console.log(window) 來查看 window 底下有沒有 React 與 ReactDOM 的物件

渲染 HTML 的元素

接著我們可以使用 React 提供的方法，createElement()，來產生一個 React Element

var el = React.createElement('h1',null,'Hello World!');

React 官方文件 ： createElement()

React.createElement('型態','屬性','子元件')

之後在使用 ReactDOM 物件裡 render() 的方法，將 React Element 渲染在畫面中就可以了

ReactDOM.render(
 el,
 document.getElementById('root')
)

React 官方文件 ： ReactDOM.render and the Top Level React API

ReactDOM,render('React Element','渲染的母元素')

完整代碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React</title>

    <!--  Reate CDN-->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  </head>
  <body>
    <div id="root"></div>
  </body>

  <script type="text/javascript">
    var el = React.createElement('h1','null','React Tilte');
    ReactDOM.render(
      el,
      document.getElementById('root')
    )
  </script>
</html>

Facebook 功能：