初心者向け。React.jsで作る超簡単なtodoアプリ
227 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
今回はReact.js製の簡単なtodoアプリの作り方の解説をします。
仕様とデモ
リストを追加していくだけの簡単な内容になっていてリストを削除する機能はありません。
最初が↓です。
やることを追加すると↓になりやる事が増えていきます。
デモはここから見ることができます。
簡単にやりたいのでnpm インストールはせずバベルでやります。
最初のコード
まずは↓をコピペしてください。
20行目と31行目に「TodoApp」がありますが名前が同じでないとエラーになるので必ず同じ名前にしてください。
それでは解説スタートです。
まずはやることを入力するボックスと登録ボタンを作ります。
やることを入力するボックスと登録ボタンの作成
コードを↓にします。
10行目のvalue属性が{value}になっているのは後で使うからです。
inputタグに入力した値を受け取ることができる(変更できる)ようにするのでuseStateを使います。
入力した内容を受け取ることができるようにする
コードを↓にします。
2行目のvalueが16行目のvalueに対応しています。
本当に値を受け取っているかを確認するために入力した値を表示する方法があります。
「<button>追加する</button>」の下に<p>{value}</p>として下さい。
inputタグに文字を書き込むと下に表示されます、↓みたいな感じです。
確認ができたら<p>{value}</p>を消してください。
次は「追加する」ボタンを押すとやることが表示されるようにします。
やることを追加できるようにする
コードを↓にします。
3行目のuseStateですがやることを追加できるようにするために初期値を[ ](配列)にしています。
12行目の…todoListはスプレッド演算子ですが配列に値を追加していくので使いました。
それではやることを表示します。
やることの表示
コードを↓にします。
表示する内容をmapメソッドを使って埋め込みます。
29行目に(todo,i)がありますがReactではliタグに表示する時に表示した内容に対して番号を付けないといけません。
例えば「りんご→みかん→バナナ→もも」の順にリストを追加するなら「1:りんご→2:みかん→3:バナナ→4:もも」のように番号をつけないといけないということです。
そのために29行目に(todo,i)の「i」と30行目に「key={i}」があります。(2つのiは対応しているので必ず同じにしてください)
これでほとんど完成ですがこのままだと「やることを入力」と書いてある所にやることを入力して「追加する」を押すとやることは追加されますがフォームに入力した内容は残っています。
「やることを入力」の所は消えないと不自然なので消しますがやり方は簡単でコードを↓にします。
setValue関数の中身を「”」にするだけです。
これで完成ですが完成形のコードを載せます。