React 是一個陳述式、高效且具有彈性的 JavaScript 函式庫，用以建立使用者介面，這篇介紹基本的 React 入門

安裝React

安裝最新版本 + 專案名稱

1	npx create-react-app@latest myapp

啟動

1	npm run start

JSX語法: 用 JS 寫 HTML 語法

React 定義的 HTML 模板，跟 HTML 幾乎相同，只有幾個點不太一樣

must close 每個標籤需close

1 2	<p></p> <img src="" />

每個標籤都可以 self close

1	<div className />

className / htmlFor
class、for 因與 JS 語法撞名
css 的 class 需叫 className
html 的 for 需叫 htmlFor

1
2
3

<div className='red' />
<label htmlFor='check'>
<input type='checkbox' id='check'>

需用駝峰式命名

1 2	<div onChange='change'> <div onClick='click'>

可以用 { } 括號塞值或表達式

1	<div onClick={ this.onClick }>

建立組件

src/Item.js

function Item() {
  return (
    <li>123</li>
  )
}

export default Item;

src/List.js

import Item from "./Item";
function List() {
  return(
    <ol>
      <Item/>
    </ol>
  )
}
export default List;

渲染組件到畫面

React18 使用 createRoot
src/index.js

import React from "react";
import { createRoot } from 'react-dom/client';
import List from "./List";

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<List />);

React17 使用 ReactDom

import React from "react";
import ReactDom from 'react-dom';
import List from "./List";

const container = document.getElementById('root');
ReactDom.render(<List/>, container);

如果在 React18 用 ReactDom，雖然會成功渲染，但會出現改使用 createRoot 的警告，用 createRoot 才能使用新的 API
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

React Developer Tools

安裝瀏覽器擴充 React Developer Tools，幫助開發人員開發

Hey！想學習更多前端知識嗎?

最近 Lala 開了前端課程 👉【實地掌握RWD - 12小時新手實戰班】👈
無論您是 0 基礎新手，又或是想學 RWD 的初學者，
我們將帶你從零開始，深入了解並掌握 RWD 響應式網頁設計的核心技術，快來一起看看吧 😊

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Lala Code

React基本入門