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

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

React html 範例

原始碼如下:

簡單說明

所需的工具為 React 及 Babel

React

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

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 屬性

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

分離程式碼

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

index.html

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

index.js

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

以上,開工吧!