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 底下有沒有 ReactReactDOM 的物件


渲染 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>
Summary
[React Js] React 入門:安裝 與 渲染 HTML 元素
Article Name
[React Js] React 入門:安裝 與 渲染 HTML 元素
Description
React 入門筆記,紀錄 實際安裝 與初步 渲染 HTML 元素 的筆記紀錄 :
Author

Facebook 功能: