コーディングの定理

フックを返します.
関数構成部品にクラス構成部品機能を持たせる機能
菓子処理:
暗い
レンダリング:
開発者が作成したドキュメントをブラウザに出力するプロセスを示します.
構成部品:
複数の関数からなる小さな単位で、1つの機能を実行できます.
コンポーネントの利点:
コードは再利用可能で、メンテナンスが容易です.
Javaスクリプトでは、classは保持語ではなくclassNameを使用します.
cmd
npx create-react-app voca
vscodeにvocaファイルを開く

// App.js
function App() {
return (
	<div className="App">
		<h1
		 style={{
			color: "#f0f",
    		backgroundColor : "green",
          	}}
         	>
         	Hello, Mike.
        	</h1>
      	</div>
	);
   }

// App.js
function App() {
const name = "Tom";
return (
	<div className="App">
		<h1
		 style={{
			color: "#f0f",
    		backgroundColor : "green",
          	}}
         	>
         	Hello, {name}.<p> {2+3} </p>
        	</h1>
      	</div>
	);
   }

// App.js
function App() {
const name = "Tom";
const naver = {
	name: "네이버",
    url: "https://naver.com",
    };
return (
	<div className="App">
		<h1
		 style={{
			color: "#f0f",
    		backgroundColor : "green",
          	}}
         	>
         	Hello, {name}.<p> {2+3} </p>
        	</h1>
            <a href={naver.url}>{naver.name}</a>
      	</div>
	);
   }
   
   
 //Hello.js

const Hello = function () {
	<p>Hello</p>;
};

export default Hello;

3種類のcss作成方法

行の内側スタイル

を使用

// Hello.js

<h1
	style={{
    	color: "#f00",
        borderRight: "12px solid #000",
        marginBottom: "50px",
        opacity: 0.5,
    }}
>

cssファイル

を利用

// App.css

.box {
	width: 100px;
    height: 100px;
    background-color: red;
}

cssモジュールの利用
最も推奨される方法ですが、授業中はあまり要素が必要なく、ページも何枚もないので、2つ目の方法を使います.

端末を使用してnpm install react-router-domをインストール

// Daylist.js

import { Link } from "react-router-dom";
import dummy from "../db/data.json";

export default function Daylist() {
    return (
    <ul className="list_day">
        {dummy.days.map((day) => (
            <li key={day.id}>
                <Link to={`/day/${day.day}`}>Day {day.day}</Link>
            </li>
        ))}
        </ul>
        );
}

import { useState } from "react"

export default function Word({ word }){
    const [isShow, setIsShow] = useState(false);
    const [isDone, setIsDone] = useState(word.isDone);

    function toggleShow() {
        setIsShow(!isShow);
    }
    
    function toggleDone() {
        setIsDone(!isDone);
    }

    return (
        <tr className={isDone ? 'off' : ""}>
        <td>
            <input type="checkbox" checked={isDone} onChange={toggleDone} />
        </td>
        <td>{word.eng}</td>
        <td>{isShow && word.kor}</td>
        <td>
            <button onClick={toggleShow}>
                뜻 {isShow ? 'Show' : 'Hide'}
            </button>
            <button className="btn_del">delete</button>
        </td>
    </tr>
    )
}

ターミナルで
npm install-g json-serverを入力してインストール
インストールに成功したと表示されたら、
json-server --watch ./src/db/data.json--port 3001をインストールします(ポート3000はすでに使用中です)
では.
{^-^}/hi! 表示、
http://localhost:3001/days
http://localhost:3001/words
一時
REST APIとは?
create: post
read: get
update: put
delete: delete
useEffet & fitch()

import { useEffect, useState } from "react";
import { Link } from "react-router-dom";

export default function Daylist() {
  const [days, setDays] = useState([0]);

  useEffect(() => {
    fetch("http://localhost:3001/days")
      .then((res) => {
        return res.json();
      })
      .then((data) => {
        setDays(data);
      });
  }, []);

  return (
    <>
      <ul className="list_day">
        {days.map((day) => (
          <li key={day.id}>
            <Link to={`/day/${day.day}`}>Day {day.day}</Link>
          </li>
        ))}
      </ul>
    </>
  );
}

custom hook

import { useParams } from "react-router-dom";
import useFetch from "../hooks/useFetch";
import Word from "./Word ";

export default function Day() {
  const { day } = useParams();

  const words = useFetch(`http://localhost:3001/words?day=${day}`);

  return (
    <>
      <h2>Day {day}</h2>
      <table>
        <tbody>
          {words.map((word) => (
            <Word word={word} key={word.id} />
          ))}
        </tbody>
      </table>
    </>
  );
}

実习を终えてノートをして疲れました...次回からノートの練習をします...