安裝 (React 16 一)

寫這篇時，官網的版本是15.5.4
本來是0.14，後面直接升級到15，現在最新是16，原文件
官網文件，中文文件

※安裝

可以下載 js 使用，也可以使用 Node.js

React Developer Tools：chrome 到這裡下載，如果執行的是 react，按 F12 會有 React的活頁標籤，但我試的時候，使用 Node.js 執行沒有問題；但使用下載 js 的方式，按下活頁標籤會出現「Uncaught TypeError: Cannot read property 'nativeObjectCreate' of undefined」的警告

．原本執行 react 時，沒出現警告，但一按 React 活頁標籤出現警告時，連原本的也會出現警告，並不是 react 寫錯了，重新整理沒有用，必需將此 js 關掉，重開即可
反正使用下載 js 的方式就不要用 React Developer Tools

※下載 js

使用 BootCDN，下載四個東西
．react：react 的核心庫
https://cdn.bootcss.com/react/16.3.2/umd/react.development.js

．react-dom：操作 dom
https://cdn.bootcss.com/react-dom/16.3.2/umd/react-dom.development.js

．babel-standalone：使用 JSX
https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js

．prop-types：可以為欄位定義型態、是否必輸，不是強制的，但 console 會有警告
https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js

複製網址到新開的頁面，然後整個複製成一份新文件
也可用官網安裝教學的 CDN Links，但必需上網才能使用，或者學 BootCDN 的做法，複製下來也是可以，但只有看到 react 和 react dom


※

<script src="../js/react.development_16.3.2.js"></script>
<script src="../js/react-dom.development_16.3.2.js"></script>
<script src="../js/babel-standalone_7.0.0-beta.3.js"></script>
<script src="../js/prop-types._15.6.1.js"></script>
    
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
    
<script type="text/babel">
    const dom1 = React.createElement('h1', '', 'aaa')
    ReactDOM.render(
        dom1, document.querySelector("#div1")
    );
    
    ReactDOM.render(
        <h1>bbb</h1>, document.querySelector("#div2")
    );
    
    const dom3 = <h1>ccc</h1>;
    ReactDOM.render(
        dom3, document.querySelector("#div3")
    );
</script>

※要注意下語法的 script 是 babel，不是 javascript

※以上三種方法都可以，但要小心第二和第三種方法，不能用「'」或「"」包起來

※createElement 參數依序為標籤名、標籤的屬性、內容

※jsx 的根標籤必需只有一個，如上只有一個 h1，如果有很多個 h1，那就不行，解法可在 h1上面加個根標籤，如 div 之類的

※使用自訂標籤

class Dom1 extends React.Component {
    render() {
        return <h1>aaa</h1>
    }
}
    
const Dom2 = _ => {
    return <h1>bbb</h1>
}
    
ReactDOM.render(
    <Dom2 />, document.querySelector("#div1")
);

※有兩種方法，注意一定要大寫開頭

※render 的第一個參數也是用標籤

※使用 Node.js

安裝好 Node.js 後，如下操作
1.npm install -g create-react-app：安裝 create-react-app 指令
2.create-react-app 專案名稱：新增一個專案
3.進入新專案，內容如下(src backup 是我加的)：

4.下 npm start：下完會自動跳出瀏覽器 localhost:3000

改port：package.json，scripts有個start
原本是 react-scripts start，改成set PORT=9000 && react-scripts start，如下：

使用 Node.js 的方式，必需將 react 和 html分開

public 的 index.html 寫 html
src 的 index.js 寫react 語法
package.json 設定可參考這裡或這裡

※src\index.js

import React from 'react';
import ReactDOM from 'react-dom';
    
ReactDOM.render(<h1>Yeah</h1>, document.querySelector("#d1"))

※雖然已經 import，但 ReactDOM 還是要寫

※public\index.html 內容就不貼了，反正一定要有個 id 是 d1 即可

※如果要使用其他組件，如下面 App.js (放在和 index.js 同層) 的語法

import React, { Component } from 'react';
    
class Xxx extends React.Component {
    render() {
        return <h1}>xxx</h1>
    }
}
    
export default Xxx;

※React.Component 可以只寫 Component

※匯出名稱是 Btn

※

import React from 'react';
import ReactDOM from 'react-dom';
import Xxx from './App';
    
ReactDOM.render(<Xxx />, document.querySelector("#d1"))

※引用時也是用 Btn，但 from 是寫 App 的路徑