Reactハンズオンラーニング読んだメモ

const sandwich = {
  bread: "dutch crunch",
  meat: "tuna",
  cheese: "swiss",
  toppings: ["lettuce", "tomato", "mustard"]
};

const { bread, meat } = sandwich;

console.log(bread, meat); // dutch crunch tuna”

const [firstAnimal] = ["Horse", "Mouse", "Cat"]
console.log(firstAnimal) // Horce

...param

const peaks = ["Test1", "Test2", "Test3"]
const revercePeaks = [...peaks].reverse()

let color_lawn = {
  title: "lawn",
  color: "#00FF00",
  rating: 0
}

function rateColor(color, rating) {
  color.rating = rating
  return color
}

console.log(rateColor(color_rawn, 5).rating) // 5
console.log(color_lawn.rating) // 5 元のオブジェクトにも影響が出ている

let color_lawn = {
  title: "lawn",
  color: "#00FF00",
  rating: 0
}

const rateColor = (color, rating) => ({
  ...color,
  rating
})

console.log(rateColor(color_lawn, 5).rating) // 5
console.log(color_lawn.rating) // 0 元のオブジェクトに変更がない(破壊されていない)

let list = [{ title: "Rad Red" }, { title: "Lawn" }, { title: "Party Pink" }]

const addColot = function(title, colors) {
  colors.puch({ title: title })
  return colors
}

console.log(addColor("Green").length) // 4
console.log(list.length) // 4 元の変数が更新されてしまっている

let list = [{ title: "Rad Red" }, { title: "Lawn" }, { title: "Party Pink" }]

const addColor = (title, list) => [...list, { title }]

console.log(addColor("Green", list).length) // 4
console.log(list.length) // 3 元の変数が変更されていない

const frededick = {
  name: "Frederick Douglass",
  canRead: false,
  canWrite: false
}

function selfEducate () {
  frededick.canRead: true,
  frededick.canWrite: true,
}

selfEducate()
console.log(frededick)
// {
//  name: "Frederick Douglass",
//  canRead: true,
//  canWrite: true
//  }

const frededick = {
  name: "Frederick Douglass",
  canRead: false,
  canWrite: false
}

const selfEducate = person => {
  person.canRead = true
  person.canWrite = true
  
  return person
}


// 引数が直接変更されている
console.log(selfEducate(frededick))
// {
//  name: "Frederick Douglass",
//  canRead: true,
//  canWrite: true
//  }
console.log(frededick)
// {
//  name: "Frederick Douglass",
//  canRead: true,
//  canWrite: true
//  }

const frededick = {
  name: "Frederick Douglass",
  canRead: false,
  canWrite: false
}

const selfEducate = person => ({
  ...person,
  canRead: true,
  canWrite: true
})

console.log(selfEducate(frededick))
// {
//  name: "Frederick Douglass",
//  canRead: true,
//  canWrite: true
//  }
console.log(frededick)
// {
//  name: "Frederick Douglass",
//  canRead: false,
//  canWrite: false
//  }

  const cutSchools = (cut, list) => list.filter((school) => school !== cut);
  console.log(cutSchools("Washington & Liberty", schools));
  // Yorktown, Wakefield

  console.log(schools.join("/n"));
  // Yorktown
  // Washington & Liberty
  // Wakefield

  const userLogs = (userName) => (message) =>
    console.log(`${userName} -> ${message}`);
  const log = userLogs("john");

  getFakeMembers(20)
    .then((members) => log(`success: ${members.length} members`))
    .catch((error) => log(`error: ${error.message}`));

React.createElement("h1", { id: "recipe-0" }, "Baked Salmon")

<h1 id="recipe-0">Baked Salmon</h1>

const dish = React.createElement("h1", { id: "recipe-0" }, "Baked Salmon")
ReactDOM.render(dish, document.getElementById("root"))

Reactではコンポーネントが複数の要素を戻り値として直接返すことができない理由は、ReactのコンポーネントアーキテクチャとJSXの仕様に基づいています。Reactのコンポーネントは、単一の要素ツリーを構築するように設計されています。これは、コンポーネントが一つの要素を返す必要があるという制約につながります。その主な理由は以下の通りです。

1. **DOMツリーの整合性**: Reactは仮想DOMを使用して実際のDOMとの差分を計算し、最小限の更新を行います。コンポーネントが複数の要素を直接返すと、この仮想DOMツリーの構築と更新のプロセスが複雑になり、パフォーマンスの低下やバグの原因になり得ます。

2. **JSXの仕様**: JSXはReactでUIを宣言的に記述するための構文ですが、JavaScriptの関数と同様に、一つの式として評価される必要があります。複数の要素を含むJSXを返す場合、それらをグループ化して一つの式として扱う必要があります。

3. **コンポーネントの責務と再利用性**: Reactのコンポーネントは、独立して再利用可能なUIの単位として設計されています。コンポーネントが複数の要素を直接返すと、それらの要素の関係が不明瞭になり、コンポーネントの再利用性と保守性が低下します。

この制約に対処するために、Reactでは以下のいくつかの方法が提供されています。

- **フラグメント**: React Fragmentを使用すると、複数の要素をグループ化して返すことができますが、追加のDOM要素を挿入することなく、これらを一つの要素として扱うことができます。
  
- **配列**: 複数の要素を配列として返し、それぞれの要素に一意の`key`プロパティを割り当てることもできます。

これらの方法を使用することで、Reactのコンポーネントが複数の要素を返すときの制約を回避しつつ、整理されたDOMツリーを維持し、アプリケーションのパフォーマンスと保守性を向上させることができます。

import React, { useRef, type FormEvent } from "react";

// uncontrolled component
export default function AddColorForm({
	onNewColor,
}: { onNewColor: (title: string, color: string) => void }) {
	const txtTitle = useRef<HTMLInputElement | null>(null);
	const hexColor = useRef<HTMLInputElement | null>(null);

	const submit = (e: FormEvent<HTMLFormElement>) => {
		e.preventDefault();
		const title = txtTitle.current?.value ?? "";
		const color = hexColor.current?.value ?? "";
		onNewColor(title, color);
		if (txtTitle.current) {
			txtTitle.current.value = "";
		}
		if (hexColor.current) {
			hexColor.current.value = "";
		}
	};
	return (
		<form onSubmit={submit}>
			<input ref={txtTitle} type="text" placeholder="color title..." required />
			<input ref={hexColor} type="color" required />
			<button type="button">ADD</button>
		</form>
	);
}

import { useState } from "react";

export default function AddColorForm({
	onNewColor,
}: { onNewColor: (title: string, color: string) => void }) {
	const [title, setTitle] = useState<string>("");
	const [color, setColor] = useState<string>("#000000");

	const submit = (e: React.FormEvent<HTMLFormElement>) => {
		e.preventDefault();
		onNewColor(title, color);
		setTitle("");
		setColor("");
	};

	return (
		<form onSubmit={submit}>
			<input
				value={title}
				onChange={(event) => setTitle(event.target.value)}
				placeholder="color title..."
				required
			/>
			<input
				value={color}
				onChange={(event) => setColor(event.target.value)}
				required
			/>
			<button type="button">ADD</button>
		</form>
	);
}

import { v4 } from "uuid";

const uuid = v4()

import { useState } from "react";

export const useInput = (
	initialValue: string,
): [
	{ value: string; onChange: (e: React.ChangeEvent<HTMLInputElement>) => void },
	() => void,
] => {
	const [value, setValue] = useState(initialValue);
	return [
		{
			value,
			onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
				setValue(e.target.value),
		},
		() => setValue(initialValue),
	];
};

const rateColor = (id: string, rating: number) => {
    setColors(
        colors.map((color) => (color.id === id ? { ...color, rating } : color)),
    );
};

const a = [1, 2, 3]
const b = [1, 2, 3]
console.log(a === b) // false


const c = d = [1, 2, 3]
console.log(c === d) // true

import { useEffect, useReducer } from "react";

function Checkbox() {
	// useStateからuseReducerに変更
	// const [checked, setChecked] = useState(false);
	const [checked, setChecked] = useReducer((checked) => !checked, false);

	useEffect(() => {
		alert(`checked: ${checked.toString()}`);
	});

	return (
		<>
			<input
				type={"checkbox"}
				value={checked.toString()}
				onChange={setChecked}
			/>
			{checked ? "checked" : "not checked"}
		</>
	);
}

import { useReducer } from "react";

type UserType = {
	id: string;
	firstName: string;
	lastName: string;
	city: string;
	state: string;
	email: string;
	admin: boolean;
};

const firstUser: UserType = {
	id: "0391-3233-3201",
	firstName: "Bill",
	lastName: "Wilson",
	city: "Missoula",
	state: "Montana",
	email: "bwilson@mtnwilsons.com",
	admin: false,
};

export const User = () => {
	const [user, setUser] = useReducer(
		(user: UserType, newDetails: Partial<UserType>) => ({
			...user,
			...newDetails,
		}),
		firstUser,
	);

	return (
		<div>
			<h1>
				{user.firstName} {user.lastName}
			</h1>
			<p>
				{user.city}, {user.state}
			</p>
			<p>{user.email}</p>
			<p>{user.admin ? "Admin" : "Not Admin"}</p>
			<button
				onClick={() =>
					setUser({
						admin: true,
					})
				}
				type="button"
			>
				Make Admin
			</button>
		</div>
	);
};