React 入門
要在生產環境中使用 React，你需要 npm，它是 Node.js 的一部分。
要了解 React 的概述，你可以直接在 HTML 中編寫 React 程式碼。
但是，為了在生產環境中使用 React，你需要安裝 npm 和 Node.js。
直接在 HTML 中使用 React
開始學習 React 最快的方法是直接在 HTML 檔案中編寫 React 程式碼。
首先，包含三個指令碼，前兩個允許我們在 JavaScript 中編寫 React 程式碼，第三個 Babel 允許我們在舊瀏覽器中編寫 JSX 語法和 ES6。
你將在 React JSX 章節中瞭解更多關於 JSX 的資訊。
示例
在 HTML 檔案中包含三個 CDN
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="mydiv"></div>
<script type="text/babel">
function Hello() {
return <h1>Hello World!</h1>;
}
const container = document.getElementById('mydiv');
const root = ReactDOM.createRoot(container);
root.render(<Hello />)
</script>
</body>
</html>這種使用 React 的方式對於測試目的來說是可以的，但對於生產環境，你需要設定一個React 環境。
設定 React 環境
如果你已安裝 npx 和 Node.js，則可以使用 create-react-app 來建立 React 應用程式。
如果你之前全域性安裝過 create-react-app，建議你解除安裝該包，以確保 npx 始終使用最新版本的 create-react-app。
要解除安裝，請執行此命令： npm uninstall -g create-react-app。
執行此命令來建立一個名為 my-react-app 的 React 應用程式
npx create-react-app my-react-app
create-react-app 將設定執行 React 應用程式所需的一切。
執行 React 應用程式
現在你已準備好執行你的第一個真實的 React 應用程式！
執行此命令以進入 my-react-app 目錄
cd my-react-app
執行此命令以執行 React 應用程式 my-react-app
npm start
一個新的瀏覽器視窗將彈出顯示你新建立的 React App！如果不行，請開啟你的瀏覽器並在位址列輸入 localhost:3000。
結果
修改 React 應用程式
到目前為止一切順利，但如何更改內容呢？
檢視 my-react-app 目錄，你會找到一個 src 資料夾。在 src 資料夾中有一個名為 App.js 的檔案，開啟它，它看起來會像這樣
/myReactApp/src/App.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org.tw"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;嘗試更改 HTML 內容並儲存檔案。
請注意，在你儲存檔案後，更改會立即顯示，你無需重新載入瀏覽器！
示例
將 <div className="App"> 中的所有內容替換為 <h1> 元素。
點選“儲存”後，在瀏覽器中檢視更改。
function App() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
export default App;請注意，我們已刪除不需要的匯入（logo.svg 和 App.css）。
結果
下一步是什麼？
現在你的計算機上已經有了 React 環境，並且你已準備好學習更多關於 React 的知識。
在本教程的其餘部分，我們將使用我們的“顯示 React”工具來解釋 React 的各個方面以及它們如何在瀏覽器中顯示。
如果你想在自己的計算機上遵循相同的步驟，請先剝離 src 資料夾，使其只包含一個檔案： index.js。你還應該刪除 index.js 檔案中的任何不必要的程式碼行，使其看起來像下面的“顯示 React”工具中的示例
示例
點選“執行示例”按鈕檢視結果。
index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
const myFirstElement = <h1>Hello React!</h1>
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myFirstElement);
