要在您的專案中使用 React，您可以從名為 unpkg.com 的外部網站加載兩個 React 腳本：
<!-- index.html -->
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script type="text/javascript">
const app = document.getElementById('app');
</script>
</body>
</html>您可以使用 react-dom 中的 ReactDOM.render() 方法來告訴 React 在我們的 #app 元素中呈現我們的h1，而不是直接使用純 JavaScript 操作 DOM。
<!-- index.html -->
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script type="text/javascript">
const app = document.getElementById('app');
ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
</script>
</body>
</html>但是如果你嘗試在瀏覽器中運行這段程式碼，你會得到一個語法錯誤：
這是因為 <h1>...</h1> 不是有效的 Javascript。 這段程式碼是 JSX。
JSX 是 JavaScript 的擴展語法，它允許您以熟悉的類似 HTML 的語法來描述您的 UI。 JSX 的好處在於，除了遵循三個 JSX 規則之外，您不需要學習 HTML 和 JavaScript 之外的任何新符號或語法。
請注意，瀏覽器無法直接理解 JSX，因此您需要一個 JavaScript 編譯器，例如 Babel，將您的 JSX 代碼轉換為常規 JavaScript。
要將 Babel 添加到您的專案中，請將以下腳本複製並貼到您的 index.html 文件中：
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>此外，您需要通過將腳本類型更改為 type=text/jsx 來告知 Babel 要轉換的程式碼。
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- Babel Script -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx">
const app = document.getElementById('app');
ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
</script>
</body>
</html>然後，您可以在瀏覽器中運行您的程式碼以確認其正常工作。
比較您剛剛編寫的聲明式 React 程式碼：
<script type="text/jsx">
const app = document.getElementById("app")
ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app)
</script>到您在上一節中編寫的命令式 JavaScript 程式碼：
<script type="text/javascript">
const app = document.getElementById('app');
const header = document.createElement('h1');
const headerContent = document.createTextNode('Develop. Preview. Ship. 🚀');
header.appendChild(headerContent);
app.appendChild(header);
</script>您可以開始了解如何通過使用 React 來減少大量重複程式碼。
這正是 React 所做的，它是一個包含可重用程式碼片段的函式庫，可以為您執行任務—在這種情況下，更新 UI。
在下一節我們將介紹 React 的基本 JavaScript 與核心概念
© Copyrights 從想像到創造. All Rights Reserved.
