React筆記（一）

陈嗯嗯發表於2024-04-13
React筆記

基礎型

export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3Am.jpg"
      alt="Katherine Johnson"
    />
  )
}

預設	
export default function Button() {}	
import Button from './Button.js';
具名	
export function Button() {}	
import { Button } from './Button.js';

react專案基本結構

src檔案

components，存放可複用的React元件，每個元件通常包含一個單獨的資料夾，其中包含元件的JSX檔案、樣式檔案和可能的
測試檔案。
containers，存放容器元件，這些元件負責管理資料和狀態，並將它們傳遞給展示元件。
assets，存放專案所需的靜態資源，如圖片、字型檔案等。
styles，存放全域性樣式檔案或者樣式變數檔案。
utils，存放專案所需的工具函式或者幫助類。
services，存放與後端互動的服務檔案。
routes，存放路由配量檔案，用於管理頁面之間的跳轉關係。
App.js，專案的主元件，通常包含路由配置和全域性狀態管理的Provider。
index. js，專案的入口檔案，通常用於渲染根元件並掛載到DOM上。

其他

public目錄，這是存放靜態資源的目錄，如HTML檔案、favicon. ico等。
config目錄，存放專案的配置檔案，如webpack配置、eslint配置 等。
tests目錄，存放專案的測試檔案。
node_ modules目錄， 存放專案依賴的第三方模組。

JSX: 將標籤引入 JavaScript

將一個按鈕的渲染邏輯和標籤放在一起可以確保它們在每次編輯時都能保持互相同步。反之，彼此無關的細節是互相隔離的，例如按鈕的標籤和側邊欄的標籤。這樣我們在修改其中任意一個元件時會更安全。
JSX 規則:只能返回一個根元素 
如果你不想在標籤中增加一個額外的 <div>，可以用 <> 和 </> 元素來代替：

由於渲染邏輯和標籤是緊密相關的，所以 React 將它們存放在一個元件中。
JSX 類似 HTML，不過有一些區別。如果需要的話可以使用 轉化器 將 HTML 轉化為 JSX。
錯誤提示通常會指引你將標籤修改為正確的格式。

在 JSX 中透過大括號使用 JavaScript

想要動態地指定 src 或 alt 的值呢？你可以 用 { 和 } 替代 " 和 " 以使用 JavaScript 變數

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

在 JSX 中，只能在以下兩種場景中使用大括號：

用作 JSX 標籤內的文字：
<h1>{name}'s To Do List</h1> 是有效的，但是 
<{tag}>Gregorio Y. Zara's To Do List</{tag}> 無效。
用作緊跟在 = 符號後的 屬性：
src={avatar} 
會讀取 avatar 變數，但是 
src="{avatar}" 
只會傳一個字串 {avatar}。

注意項

  1. React 元件是常規的 JavaScript 函式，但 元件的名稱必須以大寫字母開頭，否則它們將無法執行！
  2. 元件可以渲染其他元件，但是 請不要巢狀他們的定義：
export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}
  1. 無論是 './Gallery.js' 還是 './Gallery'，在 React 裡都能正常使用，只是前者更符合 原生 ES 模組。
  2. 因為react其實是透過js的reader函式渲染的頁面，所以直接寫src=“路徑”是無法引入圖片
我們可以像引入模組一樣引入圖片
1
import img from './../../../../asset/img/user.png'
需要用下面的方式引入
1
<img src={require('../images/picture.png')} alt="標籤"/>

相關文章