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 | <p></p> |
每個標籤都可以 self close
1 | <div className /> |
className / htmlFor
class、for 因與 JS 語法撞名
css 的 class 需叫 className
html 的 for 需叫 htmlFor
1 | <div className='red' /> |
需用駝峰式命名
1 | <div onChange='change'> |
可以用 { } 括號塞值或表達式
1 | <div onClick={ this.onClick }> |
建立組件
src/Item.js
1 | function Item() { |
src/List.js
1 | import Item from "./Item"; |
渲染組件到畫面
React18 使用 createRoot
src/index.js
1 | import React from "react"; |
React17 使用 ReactDom
1 | import React from "react"; |
如果在 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,幫助開發人員開發
🚀實體工作坊分享
玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課
最近時賦學苑開了實體體驗課,即使你對程式碼沒有概念也能上手!Lala 會帶你一起做出一個個人品牌形象網站,帶你快速了解前端的開發流程,快跟我們一起玩轉 Web 吧!🚀線上課程分享
線上課程可以加速學習的時間,省去了不少看文件的時間XD,以下是我推薦的一些課程想學習更多關於前後端的線上課程,可以參考看看。
Hahow
Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住六角學院
如果你是初學者,非常推薦六角學院哦!剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!
Udemy
Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!也是很多工程師推薦的線上課程網站。