React 第一天直接先來個打招呼「Hello World !」用程式碼進入React世界。

建立React環境

1. CDN

   最快速的方式開始使用React，很適合練習時使用，但真正的專案不會使用，線上的CDN可能因某些原因而消失，這樣一來專案也會無法正常運行。

   <!-- React 環境 -->
   <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>
   <!-- 解析 JSX -->
   <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
   

2. npm

   npm install -g create-react-app
   

怎麼運作Hello World

<div id="root"></div>

const root =ReactDOM.createRoot(document.querySelector('#root'))
root.render(<h1>Hello, world!</h1>)

以上短短的程式碼就可以讓React在畫面呈現「Hello, world!」，他是怎麼辦到的呢?

1. ReactDOM

   他是React的入口，與html之間建立一個互通門，讓React寫出來的東西可以進入到html世界

2. createRoot

   如同字面的意思，進入入口後找到一個地點後開始建立地基

3. render

   在地基上蓋房子，也就是渲染出Hello, world!

認識React第一步完成!!!