CodePenを使ってReact.jsを学ぶ練習log

2020-11-16

18:18:10 ここで作業している

https://codepen.io/takker99/pen/NWrJbaM

これcode保持されるのか？

上書きすると消えるのかな？

わからん

18:23:19 これで動いた

code:html

code:jsx

const element =

<p id="the-text"

className="text">

Hello world

</p>;

ReactDOM.render(element, document.getElementById('app'));

18:24:23 引き続きここを参考にいろいろやってみる

18:32:56 こうなった

code:jsx

const Element = () =>

<p id="the-text"

className="text">

Hello world

</p>;

const Text = props =>

<p id={props.id}

className="text">

{props.children}

</p>;

const App =

<Text id="the-text">Hello, React</Text>

</>;

ReactDOM.render(App, document.getElementById('app'));

18:35:39 2つの違うHTML風objectがある

↑正式名称わからん

code:jsx

const App = <h1>Hello, world</h1>;

ReactDOM.render(App, document.getElementById('app'));

と

code:jsx

const App = () => <h1>Hello, world</h1>;

ReactDOM.render(<App />, document.getElementById('app'));

後者がFunctionalComponent<>と呼ばれるやつ

前者はReact要素と呼べばいいみたい

仮想DOMとみなせばいいかな？

18:43:12 練習問題を解いてみる

問題1

以下の HTML に表される DOM を出力する React コードを書いてください。

（JSX を使用します。）

18:46:06 簡単だった

code:jsx

const Text = props =>

<p id={props.id}

className="text">

{props.children}

</p>;

const Gif = ({id, src}) => <img id={id} src={src} />;

const App = () =>

<Text id="the-text">Hello, React</Text>

</>;

ReactDOM.render(<App />, document.getElementById('app'));

問題2

以下の HTML に表される DOM を出力する React コードを書いてください。

（JSX を使用します。）

code:html

<h1 class="title">React</h1>

<dt class="definition-title">Initial release</dt>

<dt class="definition-title">Github stars</dt>

</dl>

</section>

<dt class="definition-title">Initial release</dt>

<dt class="definition-title">Github stars</dt>

</dl>

</section>

<h1 class="title">Angular</h1>

<dt class="definition-title">Initial release</dt>

<dt class="definition-title">Github stars</dt>

</dl>

</section>

こうかな？

code:jsx

const items = [

{

title: "react",

info: [

{ title: "Initial release", content: "2013/5" },

{ title: "Github stars", content: "147,940" }

]

{

title: "vue",

info: [

{ title: "Initial release", content: "2014/2" },

{ title: "Github stars", content: "163,165" }

]

{

title: "angular",

info: [

{ title: "Initial release", content: "2016/9" },

{ title: "Github stars", content: "60,571" }

]

}

];

const Title = ({ children }) => <h1 className="title">{children}</h1>;

const Definition = (props) => (

{props.info.map(({ title, content }) => (

<React.Fragment key={title}>

<dt className="definition-title">{title}</dt>

<dd className="definition-content">{content}</dd>

</React.Fragment>

))}

</dl>

);

const Box = ({ id, title, info }) => (

<Title>{title}</Title>

</section>

);

const App = () =>

items.map((item) => (

));

ReactDOM.render(<App />, document.getElementById("app"));

19:06:52 時間かかった

20minか

scrapboxで書くとlinter効かないからつらい

19:08:22 React入門チュートリアル (3) 属性と状態をやる

19:09:15 問題

今度は最初から/emoji/codepen.iconで書く

19:16:59 できた

code:jsx

// GIF 共有サイト　GIPHY から持ってきた GIF ID

const gifIds = [

'10dU7AN7xsi1I4', 'tBxyh2hbwMiqc', 'ICOgUNjpvO0PC',

'33OrjzUFwkwEg', 'MCfhrrNN1goH6', 'rwCX06Y5XpbLG'

];

// 上記配列の要素をランダムに返す

function getGifId() {

const max = gifIds.length;

const index = Math.floor(Math.random() * Math.floor(max));

return gifIdsindex;

}

const Gif = ({ id }) => <img id={id} src={https://media.giphy.com/media/${id}/giphy.gif} />;

const App = () => {

// ??? GIF ID を表す state を生成する

// 初期値として gifIds0を渡す

const id, setId = React.useState(gifIds0);

// ??? ボタンが押されると GIF 画像が切り替わる

const handleClick = () => setId(getGifId());

return (

<p>

</p>

</>

);

};

ReactDOM.render(<App />, document.getElementById('app'));

GIPHYというサイトがあるのか

便利だな

使ったもの

useState()

20:18:36 CodePenより高機能なCodeSandboxを発見した。以降はこれを使うことにする

すっごい便利なweb serviceが作られるようになったなー

21:15:31 つくった

https://codesandbox.io/s/cool-wu-0kn2u?fontsize=14&hidenavigation=1&theme=dark

21:15:57 抜粋

code:tsx

import * as React from "react";

const input = document.createElement("input");

export const FormText = () => {

const name, setName = React.useState("John");

EventHandlerの型がnative DOMのwrapperになっていることに注意

code:tsx

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>

setName(e.target.value);

return (

<h1>Hello, {name}</h1>

</>

);

};

21:24:53 問題1

logicが絡んできた

これは今度やるか

一度hintに沿ってやった後、もっといい感じにlogicを分離させたい

custom Hooksとか参考になるか。

21:56:41 sand box

https://codesandbox.io/s/hardcore-franklin-uk4qu?fontsize=14&hidenavigation=1&theme=dark

2020-11-19 16:30:13 できた

code:questionaire.tsx

import * as React from "react";

import { options } from "./options";

export const Questionaire = ({ question }: { question: string }) => {

const val, setVal = React.useState(options0.value);

const text, setText = React.useState("");

const getAnswer = () => (val === "" ? text : val);

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>

setVal(e.target.value);

const onTextChanged = (e: React.ChangeEvent<HTMLInputElement>) =>

setText(e.target.value);

return (

<p>{question}</p>

<p>

{options.map((option) => (

<label>

<input

type="radio"

value={option.value}

checked={val === option.value}

onChange={handleChange}

{option.label}

</label>

))}

</p>

<label>

自由回答欄:<span> </span>

</label>

</p>

<hr />

<p>

回答: <span>{getAnswer()}</span>

</p>

</>

);

};

code:options.ts

export const options = [

{ value: 'js', label: 'JavaScript' },

{ value: 'py', label: 'Python' },

{ value: 'rb', label: 'Ruby' },

{ value: '', label: 'その他' },

];

refactoringしたほうが良い箇所はあるが、やらないで次に行く

refactoringするより先の問題をときたい

16:32:21 問題2

https://codesandbox.io/s/gifted-monad-mc0hq

password入力欄とボタンをセットにするとよさそう

16:56:20 できた

code:PasswordForm.tsx

import * as React from "react";

export const PasswordForm = () => {

const password, setPassword = React.useState("");

const visible, setVisible = React.useState(false);

return (

<input

type={visible ? "text" : "password"}

value={password}

onChange={(e) => setPassword(e.target.value)}

<button

type="button"

children={"view"}

onClick={() => setVisible(!visible)}

</>

);

};

event handlerに直接関数を書き込めば、e: React.ChangeEvent<HTMLInputElement>と書かずに済む

2020-11-20 01:44:42 password情報を外部に置く

このままだとpasswordの取り出しがしにくい

てかViewとLogicが分離できていない

Logic: passwordの保持と変更処理

View: passwordの入力・表示

伏せ字に切り替えるか否かも

いわゆる依存性の注入をやって、ViewからLogicを分離する

単一責任の原則にも該当する？

依存性逆転の原則ではないか。

01:59:10 できた

code:PasswordForm.tsx

import * as React from "react";

lint errorを取り除くために、型定義を作る必要がある

React.jsのeventの型

code:PasswordForm.tsx

type Props = {

password: string;

onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;

};

code:PasswordForm.tsx

export const PasswordForm = ({ password, onChange }: Props) => {

const visible, setVisible = React.useState(false);

return (

<input

type={visible ? "text" : "password"}

value={password}

onChange={onChange}

<button

type="button"

children={"view"}

onClick={() => setVisible(!visible)}

</>

);

};

code:App.tsx

import * as React from "react";

import "./styles.css";

import { PasswordForm } from "./PasswordForm";

export default function App() {

const password, setPassword = React.useState("");

return (

<p>password</p>

<PasswordForm

password={password}

onChange={(e) => setPassword(e.target.value)}

<p>{password.length}characters</p>

</div>

);

}

02:12:47 問題3: 数あてゲーム

https://codesandbox.io/s/gallant-bash-l8vcx?file=/src/App.tsx

02:31:27 入力欄はこれでいいかな？

code:Guess_old.tsx

// 入力欄

import * as React from "react";

type Props = {

prediction: number;

setPrediction?: (prediction: number) => void;

};

これだと数値が変更されない

code:Guess_fail.tsx

export const Guess = ({ prediction, setPrediction }: Props) => {

return (

<button

type="button"

children={"predict"}

onClick={() => setPrediction(prediction)}

常にpredictionで固定されてしまう

onChangeを指定する必要がある

とすると、useStateで状態を持つ必要が出てくるのか。

03:41:24 buttonを押すまで<App />に値を伝えられないので、代わりに<Guess />で保持しておく必要がある、とも考えられる

from https://www.hypertextcandy.com/react-tutorial-05-wrap-up-with-todo-app#コンポーネント設計

02:41:33 変えた

02:46:26 onChangeに直接setValue(e.target.valueAsNumber)を入れると、無効な値を入力したときに入力欄が空になってしまう。

それを防ぐためにe.target.checkValidity()で入力値を検証し、無効な値のときは何もしないようにする

errorを表す赤枠が表示されなくなる

無効な値をそもそも入力できなくなるため

code:Guess.tsx

const value, setValue = React.useState(prediction);

return (

<input

type="number"

value={value}

onChange={(e) =>

e.target.checkValidity()

? setValue(e.target.valueAsNumber)

: undefined

}

<button

type="button"

children={"predict"}

onClick={() => setPrediction?.(value)}

code:Guess_old.tsx

</>

);

};

02:52:34 最小値と最大値を外から設定できるようにした

あとplacefolderも設定した

code:Guess.tsx

// 入力欄

import * as React from "react";

type Props = {

prediction: number;

onSubmit?: (prediction: number) => void;

max?: number;

min?: number;

};

export const Guess = ({

prediction,

onSubmit: setPrediction,

max,

min

}: Props) => {

const value, setValue = React.useState(prediction);

return (

<input

type="number"

value={value}

max={max}

min={min}

placeholder={from ${min} to ${max}}

onChange={(e) =>

e.target.checkValidity()

? setValue(e.target.valueAsNumber)

: undefined

}

<button

type="button"

children={"predict"}

onClick={() => setPrediction?.(value)}

</>

);

};

03:21:40 本体完成

要件から少し変えた

英語にした

勝敗が決まった後のメッセージを追加した

code:App.tsx

import * as React from "react";

import "./styles.css";

import { Guess } from "./Guess";

import { random } from "./random";

const max = 50;

const initialCount = 5;

export default function App() {

const prediction, setPrediction = React.useState(0);

const answer, setAnswer = React.useState(random(max));

const message, setMessage = React.useState("");

const count, setCount = React.useState(initialCount);

↓勝敗が確定していない状態を表現するためにundefinedを使った

本当は専用の型を使うのがbest

enum JudgeState = {Playing, Won, Lost};など

code:App.tsx

const isWinner, setIsWinner = React.useState<boolean | undefined>(

undefined

);

const judge = (num: number) => {

if (count === 0 || isWinner !== undefined) {

setMessage(

`You already ${

isWinner ? "won" : "lost"

}. To replay, please click the "replay" button below.`

);

return;

}

setCount(count - 1);

if (num === answer) {

setMessage("correct!");

setIsWinner(true);

} else if (count === 1) {

setMessage(You lose! The answer is ${answer});

setIsWinner(false);

} else if (num > answer) {

setMessage(The answer is less than ${num});

} else if (num < answer) {

setMessage(The answer is more than ${num});

}

};

const replay = () => {

setAnswer(random(max));

setCount(initialCount);

setMessage("");

setIsWinner(undefined);

};

return (

<Guess

prediction={prediction}

onSubmit={(value) => {

setPrediction(value);

judge(value);

ここでjudgeにpredictionを渡してはならない

この段階のpredictionはまだ更新前の値が入っている

setXXで更新されるのは、次のrenderingのとき。すぐには更新されない

code:App.tsx

}}

max={max}

min={0}

<p hidden={message === ''}>{message}</p>

<p>You can challenge predict {count} times.</p>

</div>

);

}

一旦ご飯食べる

04:22:04 React入門チュートリアル (5) ToDoアプリを作ってみよう | Hypertext Candyを始める

https://codesandbox.io/s/aged-smoke-n9cnr

Bulmaを使用する

style.cssでimportした

04:35:48 App.tsxつくった

04:37:21 最低限度を作る

小さくてもとにかくdeployできるMinimum Valuable Productを素早く作る

keyをSubtleCrypto.digest()で作ってみる

from https://developer.mozilla.org/ja/docs/Web/API/SubtleCrypto/digest

04:46:48 なぜかCodeSandboxだとString.prototype.padStart()が入力候補にでてこない

仕方ないので別な関数を使う

05:21:38 やめた

async/awaitが必要

async/awaitはReactの属性内で使えない

もろに副作用扱い

05:31:54 できた

code:Todo.tsx

import * as React from "react";

import { ToDoData } from "./TodoData";

export const Todo = () => {

const items, setItems = React.useState([

new ToDoData("Learn JavaScript"),

new ToDoData("Learn React"),

new ToDoData("Get some good sleep")

]);

return (

<span>⚛</span>️ React ToDo

</div>

{items.map((item) => (

{item.text}

</label>

))}

<div className="panel-block">{items.length} items</div>

</div>

);

};

code:TodoData.ts

export class ToDoData {

constructor(text: string, done: boolean = false) {

this._object = { text: text, done: done };

this._key = "";

this.updateKey();

}

get text() {

return this._object.text;

}

get done() {

return this._object.done;

}

get key() {

return this._key;

}

private updateKey() {

this._key = Math.random().toString(32).substring(2);

}

private _key: string;

private _object: { text: string; done: boolean };

}

これで最低限度を表示できた

05:34:27 componentsにばらしていく

まずはTodoを表示する項目から

05:55:19 できた

code:TodoItem.tsx

import * as React from "react";

import { TodoData } from "./TodoData";

type Props = {

item: TodoData;

onCheck: (item: TodoData, checked: boolean) => void;

};

export const TodoItem = ({ item, onCheck }: Props) => {

return (

<input

type="checkbox"

checked={item.done}

onChange={(e) => onCheck(item, e.target.checked)}

{item.text}

</span>

</label>

);

};

code:Todo.tsx

import * as React from "react";

import { TodoData } from "./TodoData";

import { TodoItem } from "./TodoItem";

export const Todo = () => {

const items, setItems = React.useState([

new TodoData("Learn JavaScript"),

new TodoData("Learn React"),

new TodoData("Get some good sleep")

]);

const onCheck = (item: TodoData, checked: boolean) => {

// 該当するitemを更新

const newItems = items.map((value) => {

if (value.key !== item.key) return value;

return new TodoData(value.text, checked);

});

setItems(newItems);

};

これ毎描画ごとにTodoDataを全部精査して値を変更することになるのか

dataが多くなったら更新が大変そうだ

まあ、実際には全部/icons2/firestore.iconとかに任せるだろうから、そんなに気にすることでもないんだと思うけど。

code:Todo.tsx

return (

<span>⚛</span>️ React ToDo

</div>

{items.map((item) => (

))}

<div className="panel-block">{items.length} items</div>

</div>

);

};

06:11:07 Todoの入力部分を実装する

06:22:18 できた

code:Input.tsx

import * as React from "react";

type Props = { onAdd: (text: string) => void };

export const Input = ({ onAdd }: Props) => {

const text, setText = React.useState("");

const sendText = (e: React.KeyboardEvent<HTMLInputElement>) => {

if (e.key !== "Enter") return;

onAdd(text);

setText("");

};

return (

<input

className="input"

type="text"

placeholder="Enter to add a task"

value={text}

onChange={(e) => setText(e.target.value)}

onKeyDown={sendText}

</div>

);

};

onChangeはそとに出したほうが良いかも？

logicとUIを分離させる

まあそのへんはcustom Hooksとかをつかって考えるべきだろう。

06:23:30 もうこの時点で簡単なTodo appは完成している

すごいな

見た目は/icons2/Bulma.iconが全部やってくれている

あとtutorial形式だから、予め設計済みなのもあるかも

その設計通り、もしくはそこにアレンジを加えた形でコードを書いていけばいい

06:28:33 Filterを作る

href="#"ってなんだろう？

設計を変更する

FilterTodoList内にTodoItemを表示するようにする

filter方法の切り替え欄はFilterToggleFilterに表示させる

typescriptではenumではなくunionを使う方が良いみたい

07:13:21 できた

これで完成

code:Filter.tsx

import * as React from "react";

const filterState = "All", "Done", "Todo" as const;

export type FilterState = typeof filterStatenumber;

type Props = {

value: FilterState;

onChange: (value: FilterState) => void;

};

export const Filter = ({ value, onChange }: Props) => {

const handleClick = (

key: FilterState,

e: React.MouseEvent<HTMLAnchorElement>

) => {

e.preventDefault();

onChange(key);

};

return (

{filterState.map((state) => (

ここで何故かhref="#"が不正だと警告が出る

なぜだかはわからない

code:Filter.tsx

href="#"

onClick={(e) => handleClick(state, e)}

className={state === value ? "is-active" : ""}

code:Filter.tsx

{state}

</a>

))}

</div>

);

};

code:TodList.tsx

import * as React from "react";

import { TodoData } from "./TodoData";

import { TodoItem } from "./TodoItem";

import { Filter, FilterState } from "./Filter";

type Props = {

items: TodoData[];

onCheck: (item: TodoData, checked: boolean) => void;

};

export const TodoList = ({ items, onCheck }: Props) => {

const state, setState = React.useState<FilterState>("All");

const displayItems = items.filter((item) => {

if (state === "All") return true;

if (state === "Done" && item.done) return true;

if (state === "Todo" && !item.done) return true;

return false;

});

return (

<Filter value={state} onChange={(key) => setState(key)} />

{displayItems.map((item) => (

))}

<div className="panel-block">{displayItems.length} items</div>

</>

);

};

<Todo>→<TodoList>→<TodoItem>へと、<TodoList>を経由して値と更新関数を渡している

更新関数はそのまま素通し

値は表示内容に応じてfilteringしている

つまり中抜き

code:Todo.tsx

import * as React from "react";

import { TodoList } from "./TodoList";

import { TodoData } from "./TodoData";

import { Input } from "./Input";

export const Todo = () => {

const items, setItems = React.useState([

new TodoData("Learn JavaScript"),

new TodoData("Learn React"),

new TodoData("Get some good sleep")

]);

const onCheck = (item: TodoData, checked: boolean) => {

// 該当するitemを更新

const newItems = items.map((value) => {

if (value.key !== item.key) return value;

return new TodoData(value.text, checked);

});

setItems(newItems);

};

const onAdd = (text: string) => setItems(...items, new TodoData(text));

return (

<span>⚛</span>️ React ToDo

</div>

</div>

);

};

07:24:40 React入門チュートリアル (6) 副作用 | Hypertext Candy

useEffect()の話に入る

大量にコード書いているからだんだんページが重くなってきた……

分けるか？

07:31:49 分けた

CodePenを使ってReact.jsを学ぶ練習log その2

#2020-11-19 16:32:18

#2020-11-16 18:18:46