【React入門】完全初心者OK！１から簡単なTodoアプリを作ってReactの１歩を踏み出してみよう ~Reactチュートリアル~

[@nihongomaxtweet]

たいへん分かりやすくて、とても勉強になりました。これ以上役に立つビデオ見たことがない。 インドから応援します。

[@programming_tutorial_youtube]

インドからどうもありがとうございます！！ 応援もどうもありがとうございます。これからも地道に投稿がんばりますね。

[@secondlife4337]

この人の声、とても聞きやすいし内容もわかりやすい。 いつもありがとう🎉お世話になってまーす。

[@爆撃機コメント]

ユーデミーでもお世話になってます。どの講座も世界一わかりやすくて、めちゃくちゃ助かってます!！

[@best4life098]

はじめまして！　reactのチュートリアルめちゃくちゃわかりやすく、todoリスト実装できました。大変ありがとうございます。今後も拝見させてください。本当にありがとうございます。

[@NANA-KUN]

ポートフォリオで初めてReactを使うのに参考にさせていただいたのがこちらの方の別に動画でした。 今回の動画も非常に分かりやすく、専門用語の解説も丁寧で、理解がとても進みました。 ありがとうございます。

[@MichisukeP]

とても分かりやすかったです。ありがとうございます！

[@淀川謙次]

丁寧な説明を聞きながら写経して、やっとReact初心者になれました。

[@coz9691]

すげー綺麗な髪型だなーと思ったらニット帽か😂

[@生き生きノッポさん]

とても分かりやすく、Reactの理解がかなり深まりました！

[@orangelulu1783]

勉強になります。応援してます。そして、癒されます😍

[@nekogrammer]

ありがたいです！環境構築、エラーの連続でしたがクリアできました。繰り返し見て落とし込みます。

[@kメルト]

非常に分かりやすい解説ありがとうございます。一番すんなり入ってくる動画なので、コーディングしてて楽しい内容でした！今後の発信も楽しみにしています！

[@tsendo]

とても分かりやすく完全に全てフォローできました。ありがとうございました。

[@David-mj9st]

ありがとう！今日半日かかったこの動画をみって自分も同じことをやって、やっとtodolistが完成しました。全部は理解切れないけど、また夢を一歩近くになってる気がする。ちなみに私は日本人じゃないですが、今もJavaScript初めて二ヶ月未満、shinさんの説明はとってもわかりやすい！！！

[@programming_tutorial_youtube]

Davidさん、ありがとうございます。 少しずつ理解していきましょうね。日本語なので理解が難しいとは思いますが、頑張っていきましょ🚀

[@EpicTogekiss]

出身は聞いてないぞ

[@aacv]

where u from ?

[@no.30chapta46]

IT未経験新卒一年目です めちゃくちゃ助かります。ありがとうございます。 VScodeやintellijといったエディタの便利な使い方とか、Javaのこのような解説とかも頼みたい！！！！！

[@birthday0422]

手書きの矢印、上手くて草

[@satopelli]

JavaScriptを学び始めた超初心者です♪ とても楽しくReactを学べました！ありがとう😀 UdemyのDiscordクローン作りに挑戦してみます💨

[@programming_tutorial_youtube]

はい！ぜひ頑張ってくださいね。 Discordクローンと言ってもメッセージ機能やルーム作成の機能を作っています。電話などの機能は作っていないので、ご了承ください

[@masashiy_9420]

こういう動画を作成いただいてとても感謝です!

[@ニッケ-i3j]

倍速でもしっかり聞き取れるので助かります！ ヨッ！Udemy講師！

[@kurobosiyt]

こんにちわ。C#/Javaの様な静的型付け言語を主に仕事で扱ってる者です。ReactどころかJavascriptもあまり良くわかってなかった身なのですが、この動画でかなり雰囲気が掴めて、大変重宝しました。ありがとうございます。 　気になったことがあるのですが、「部品化」を意識する割に、その部品に対する振る舞いがその部品からかなり離れた外（親？）などで既定されている点が気になりました。（オブジェクト間の結合度合いが高い？）例えばですが、Todoの増減の振る舞いをAppに書いている所とか。これだとAppがTodoの内容などを知っている必要があると思うのですが、実際にはTodoListがTodoの内容の増減を操作・管理していれば、Appはその様なロジックを知る必要が無いように感じます。　言語的に可能か否かは存じないのですが、TodoListに「完了チェックの状態変化メソッド」「Todoを増やすメソッド」「（完了した）Todoを消すメソッド」があり、App内のボタンでのイベント発火時にそれらが呼び出される動きの方が自分的にはしっくり来ます。この辺りReact/JSの文化的なものなのでしょうか？（もし的外れな質問であればご放念いただければ幸いです）

[@gst123]

大好きです❤️

[@정양엽]

25:40ここまで！勉強しました～mm

[@GCO4946]

これはありがたィィィ....！ フロントにReactxTS バックにRailsとかも見てみたいです...！

[@ふぃお-d3c]

めちゃくちゃわかりやすかったです！ありがとうございました✨

[@masan6396]

サイコウのスタートがきれた！ナイスな動画ありがとうございます！

[@tdrk-e4p]

最高です！KZbin頑張ってください🔥

[@user-xj8uz4qd5f]

最後の宅配笑いましたｗ

[@kisiaaaaaa5973]

ありがとうございます！

[@parksangdonews]

와 !!! 대박이다 1시간이면 리액트가 된다니 !!

[@kazuki6787]

とても参考になりました。有難うございます。 reactで制作したプロジェクトを実際にデプロイする動画などが有りましたら幸いです。

[@hayato571]

これはとてもありがたい！！

[@12rrrr4]

まあ何ができるってのはわかったけど理解は難しい　これをクリアできたら就職できると考えたらがんばれる！

[@programming_tutorial_youtube]

Reactの学習がんばってください！ 就職の方も応援していますね

[@シンジ-j7w]

疑問に思ったことがあったのでご質問です（お時間あれば回答いただけるとありがたいです） handleClear関数の処理の流れについて質問させてください🙇 処理の流れとしては、 ・タスク完了ボタンを押す ・現在表示中のtodoリスト全体を見にいく ・チェックされていないtodoのみに絞り込む ・上記情報を元にtodo情報を全て更新する という流れで合っていますでしょうか？ 伺った背景として、完了という処理をイメージしたとき ・タスク完了ボタンを押す ・現在表示中のtodoリスト全体を見にいく ・チェックされているtodoを削除する という流れを想像していたので、なぜ削除ではなく絞り込んで情報を全て更新する処理にされたのが気になったためです🙇

[@programming_tutorial_youtube]

フィルタリング＝配列からの削除で、filter関数を使うのも割と一般的かなと思っております。 また、本来であればDBからの削除なので、その際はDBの削除クエリを投げるのが普通です。 今回はサンプルということもあって、fillterで削除を実現しました。

[@シンジ-j7w]

@@programming_tutorial_youtube ご返信ありがとうございます🙇 背景理解いたしました。 プラスで、アプリケーションとしてのTodoであれば、DBに保存されて削除の際も削除指示を投げる必要があるなと学びになりました。 改めてありがとうございます！

[@hakusai3325]

すげー講座みつけた

[@ぷけぷけ-k8n]

よかったらVueもやってほしいです！

[@riri2750]

プログラミングを独学しているものです。動画大変参考になりました。 pythonのフレームワークであるDjangoと、動画のReactどちらが習得しやすいでしょうか？ Djangoをちょっとやってみましたが、掴みづらくて挫折しました。 バックエンドにこだわりがあるわけではないので、フロントエンドへ方向転換しようか迷っています。

[@animelife5166]

自分用メモ toggleTodoが分からん。 引数にid使ってるけど、どっから出てきた？ setTodosの書き方は配列全体を上書きせず、先頭に一つ追加したいときにスプレッド使う感じかな。

[@k.a4040]

reactの案件にはいることが決まったのできました

[@rybroco4687]

手書き矢印すごい

[@FumaGameOtaku]

なんで徹子みたいな髪型しているのかと思ったら帽子か

[@yu-gr7ko]

map関数に戻り値はあるのか？が戻り値として戻らないとのreturnにならないように思うのだけど、Linqのforeach()みたいなものだと思うので、処理行うだけの戻り値voidなんじゃないかと・・。ごめん、実はmap関数よく知らないで書いてます。

[@yayuyo7188]

map関数は関数型プログラミングでよく使用されるコレクション汎用メソッドで、そのコレクションの要素を変換した新しいコレクションを返します。引数として与えるコールバック関数の返り値がそのコレクション要素の型。 今回でいえばコレクションは配列であり、返り値はArray(要素であるオブジェクトの型は省略してる)になります。

[@yu-gr7ko]

@@yayuyo7188 ありがとうございます。C#のlistに.whereという同様の関数があって、それと同じタイプだと思います。mapという名称から、元のコレクション自体（参照型）の値をかえて値はvoidなのかな？と思ったので。

[@楠木セキト]

すみません、、初心者ですどうやったらコードの色がカラフルになりますか？

[@洋平小松-r8m]

CODE .を入力してもエラーになってしまうのですが、どうしたら上手く行くのでしょうか？

[@45248]

動画有難うございます！uuid導入の時点で、どうやらファイルが無いか、バージョンに関する警告のようなものが出てたのですが、動くので、とりあえずそのまま無視して進めてました。最終的にな状態では、vsコード上ではエラーなかったのですが、ブラウザのコンソール部分でエラー吐きまくって動かなくなってしまいました。もう一度最初からやってみて、流れを理解していこうと思います。

[@染川達-r4v]

素人質問で恐縮なのですが、なぜtodoコンポーネントとtodolistコンポーネントに分ける必要があるのでしょうか？

[@programming_tutorial_youtube]

いい質問だと思います！ 正直分けなくても大丈夫ですが、たとえば後でTodoListとTodoコンポーネント2つを使いまわす可能性があれば、分けるといいですね。 あとは基本的にコンポーネントは分割する癖をつけておいた方がいいです。パフォーマンスチューニングや責務の分離という考え方がありますので。

[@otoruri]

ホームページ作成に当たってReactやvueを使った方が今時は良いと聞いたのですがHTMLとどちらがおすすめですか？

[@programming_tutorial_youtube]

HP制作はReactでもVueでもHTMLとCSSを使うことになるので、HTMLの学習からはじめた方が良いと思いますね。

[@otoruri]

@@programming_tutorial_youtube ありがとうございます！！！

[@dm_99]

.mapの代わりにforEachを使って第2引数にインデックス番号で、uuid?なしでも行ける気がするんですがだめなんでしょうな？

[@dm_99]

ソース長くなりますね...

[@aacv]

cannot use foreach, foreach returns null.

[@HANEKAWAhaorenoyome]

@@aacv mapとforeachの違いですね

[@yy-iz8rb]

uuidをインストールするとup to date, audited 3 packages in 493msとなりインストールできませんが原因ってわかりますでしょうか？

[@小さなぷぅさん]

学校よりわかりやすい

[@橘柚樹]

質問です！ 17:00あたりからjavascriptファイル内でhtmlタグを書くときに予測変換が現れると思うのですが、自分はhtmlファイル内で出ないと予測変換が現れません。 どのようにすればjavascriptファイル内でhtmlの予測変換が現れるのでしょうか？ 拡張機能とかがあれば、お教えいただけると幸いです。

[@programming_tutorial_youtube]

確かsetting.jsonファイルをいじったような気がします。react htmlタブ補間 setting.json等で検索すると出てくると思います。

[@金メダルかじり河村]

name = null　じゃダメなんですか?

[@竹田篤史-b1p]

問題無いです！　ただ、今回はconst(定数)で定義しているので、こういう記述になっていると思います。

[@komasann927]

めちゃくちゃわかりやすいです！！ ありがとうございました