Lala Code

Lala 的前端大補帖,歡迎一起鑽研前端技術😊

0%

React基本入門

React
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

1
2
3
4
5
6
7
function Item() {
return (
<li>123</li>
)
}

export default Item;

src/List.js

1
2
3
4
5
6
7
8
9
import Item from "./Item";
function List() {
return(
<ol>
<Item/>
</ol>
)
}
export default List;



渲染組件到畫面

React18 使用 createRoot
src/index.js

1
2
3
4
5
6
7
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

1
2
3
4
5
6
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,幫助開發人員開發



🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課,即使你對程式碼沒有概念也能上手!Lala 會帶你一起做出一個個人品牌形象網站,帶你快速了解前端的開發流程,快跟我們一起玩轉 Web 吧!



🚀線上課程分享

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

Hahow

Hahow 有各式各樣類型的課程,而且是無限次數觀看,對學生或上班族而言,不用擔心被時間綁住



六角學院

如果你是初學者,非常推薦六角學院哦!
剛開始轉職也是上了六角的課,非常的淺顯易懂,最重要的是,隨時還有線上的助教幫你解決問題!


Udemy

Udemy 裡的課程非常的多,品質普遍不錯,且價格都滿實惠的,CP值很高!
也是很多工程師推薦的線上課程網站。
❤️