More than 3 years have passed since last update.

Reactで作る簡要Todoアプリの作成

Posted at 2021-11-17

Reactに触ってみたいけど何から始めたらいいか分からない、そんな人必見です。
今回のTodoアプリ作成でConnect（コンポーネント）の使い方や
useState(ユーズステイト)の使い方やprops（プロップス）について学ぶことができます。

私が作成したTodoアプリ

![写真２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2055577/0b7e6f34-8f5c-13ef-3696-aece66a386ae.png)

今回、タスクを追加するための追加ボタン。
未完了リストから完了リストに移行するための完了ボタン。
不要になったタスクを削除するための削除ボタンが入ったTodoリストを作成しました。

Connectとはサイトに必要な要素を細かく部品分けしてサイトを作成する方法です。これをするこ事で他のページで部品の使いまわしができます。

Connectファイルを他のファイルで使うには
ファイル上部に
import ファイル名 from "ファイルの相対パス";
と記入し、
適応したい場所に　<ファイル名 />　を入れる。

useStateを使う事で文字やボタンなどに追加や削除などの動きを付けたいときに使う。各タグに関数を割り当て動きのあるサイトにできる。

propsとはConnectで他のページにUIをインポートした後にuseStateで動きを付けた関数を他のファイルにも使いたい場合に使用する。注意点としては親コンポーネントから子コンポーネントにしか渡せないという事。

https://www.udemy.com/course/modern_javascipt_react_beginner/?src=sac&kw=%E3%83%A2%E3%83%80%E3%83%B3Java

Udemyの講座動画で有料ですが、
Reactを始めたばかりの人にも分かりやすく解説されているのでおすすめです。