反応学習 01 - クイックスタート

クイックスタート – React (docschina.org)

React コンポーネントは大文字で始める必要がありますが、HTML タグは小文字にする必要があります。

JSXを使用してタグを記述する

1. JSX は HTML よりも厳密です。タグを閉じる必要があります
2. 複数の JSX タグを返すことはできません。共有の親 (ルート要素) でラップする必要があります。
3. JSX に移植する必要がある HTML が大量にある場合は、オンライン コンバータを使用できます。

スタイルを追加する

1. className指定された使用

<img className="avatar" />

表示データ

1. ブレースラップ
2. JSX 属性を JavaScript にエスケープする場合は、引用符の代わりに中括弧を使用します。

# 标签内容
return {
    
    <h1> {
    
     user.name } </h1>}
# 属性
return {
    
    <img src={
    
    user.image} />}
return {
    
    img style={
    
    {
    
    width: user.imageSize,height: user.imagesize}} />

条件付きレンダリング

1. 通常の JavaScript コードを使用する

<div>{
    
    isShow? (<Component1/>) : (<Component2/>)}</div>
<div>{
    
    isShow&& <Component/>}</div>

レンダーリスト

export default function ShopList() {
    
    
    const listItem = list.map(it => <li key={
    
    it.id}>{
    
    it.name}</li>)
	return (<ul>{
    
    listItem}</ul>)
}

li には key 属性があります

応答イベント

# 组件
funciton BtnClick() {
    
    
    function handleClick() {
    
    alert('1')}
    return (<button onClick={
    
    handleClick}>click me</button>)
}
#使用
export default function myApp() {
    
    
    return (<BtnClick/>)
}

インターフェースを更新する

1. React から useState をインポートする

import {
    
    useState} from 'react'
function myBtn() {
    
    
    const [count, setCount] = useState(0)
}

命名規則: [something, setSomething]

同じコンポーネントを複数回レンダリングし、それぞれに子状態を含めます

フックを使用する

1. で始まる関数useをフックと呼びます
2. useState は React の組み込みフックです。
3. フックは通常の関数より厳密であり、コンポーネントのトップレベルでのみ呼び出すことができます。

コンポーネント間でのデータの共有

1. 状態は JSX 中括弧を使用して渡され、渡された情報は prop と呼ばれます。
2. サブコンポーネントは関数パラメータを介して受信します

#父
return {
    
    <MyBtn count={
    
    count} onClick={
    
    handleClick} />}
#子
function MyBtn({
     
     count, onCLick}) {
    
    
    return (<button onClick={
    
    onCLick})>{
    
    count}</button>
}