簡單的 React 練習頁

一些 React 的介紹文會把開發所需的環境說的太完整，對新同學來說就變得複雜了，工具鏈中要有 node 要安裝 webpack … 等套件，還有一堆設定要做，感覺很難上手。

其實，如果只是要試試 React 的核心功能，只需要一個 html 檔掛上 3支 JavaScript 就可以了。

React html 範例

原始碼如下：

所需的工具為 React 及 Babel

React 的 CDN 在此，照著用就可以。

要有 crossorigin 才能在本機正確載入。

1 2	<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>

Babel 負責把 JSX 轉成 JS，如果要用最原始的 React.createElement() API 方式建頁面元素，連 Babel 都不用掛入，但用 JSX 才是有生產力的方式也是官方建議的方式。

Babel 的 CDN 在此，點 [In the browser] 從 With babel-standalone 中可取得。

1	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

在我們的 <script> 程式區加上 type="text/babel" 即可讓 babel 自動對當中的程式做轉譯。

不想直接在 html 裡寫 js，可以把 js 放在獨立檔中，再利用 script 的 src 引入，babel 也會處理。

index.html

<body>
    <div id="container"></div>
    <script type="text/babel" src="index.js"></script>
</body>

index.js

ReactDOM.render(
    <h1>Hello React with JSX</h1>,
    document.getElementById("container")
);