【React入門】完全初心者OK！１から簡単なTodoアプリを作ってReactの１歩を踏み出してみよう ~Reactチュートリアル~
Vložit
- čas přidán 6. 09. 2024
- #入門 #React #Javascript #初心者 #プログラミング #ライブラリ #開発
【さらに詳しく学びたい方へ。Udemy90%割引クーポン発行中🚀】
↓↓↓↓↓
shincode.info/2...
＼ShinCode_Camp開校しました／
プログラミング講座＆副業・起業＆就職・転職が学べるプラットフォーム🚀
🎁月額2500円で全講座が見放題
🎁分からない箇所は質問し放題
🎁7日間無料キャンペーン実施中
🎁コミュニティ機能付き
🎁いつでも解約可能etc...
↓↓↓↓↓
code-s-school-...
-----------------------------------------------------------------------------------------------------------------------------
【この動画を視聴するメリット】
・React初心者がReactの１歩を踏み出すことができる
・JavascriptのライブラリであるReactが簡単に学べる
・Reactを使って簡単なTodoアプリが自作できる(React18)
・簡単なコンポーネント管理が学べる
・useState等のHooksが学べる
・Jsx記法が学べる
【信頼性】
・Udemy講師
・講師レビュー評価94.6%
・Udemy受講生延べ300人突破
・Webアプリ/サイト開発数：200以上
★チャンネル登録はこちらから★
/ @programming_tutorial_...
★今回のソースコード★
github.com/Shi...
★運営者SNS★
Twitter： / shin_engineer
★この動画で使用している機材★
キーボード(Keychron K6 赤軸)：amzn.to/3F4zca5
マウス(Logicool G ロジクール G ゲーミングマウス)：amzn.to/3DZaaYB
マイク(サンワダイレクト USBマイク PCマイク)：amzn.to/30AVwJF
マイクスタンド(Luling Arts マイクスタンド マイクアーム スタンド)：
amzn.to/3se5onZ
※アフィリエイトリンクになります。
ユーデミーでもお世話になってます。どの講座も世界一わかりやすくて、めちゃくちゃ助かってます!！
ポートフォリオで初めてReactを使うのに参考にさせていただいたのがこちらの方の別に動画でした。
今回の動画も非常に分かりやすく、専門用語の解説も丁寧で、理解がとても進みました。
ありがとうございます。
手書きの矢印、上手くて草
13:25 rafce は react arrow functional component （exportを末尾記述）という雰囲気の意味らしい
たいへん分かりやすくて、とても勉強になりました。これ以上役に立つビデオ見たことがない。
インドから応援します。
インドからどうもありがとうございます！！
応援もどうもありがとうございます。これからも地道に投稿がんばりますね。
すげー綺麗な髪型だなーと思ったらニット帽か😂
こんにちわ。C#/Javaの様な静的型付け言語を主に仕事で扱ってる者です。ReactどころかJavascriptもあまり良くわかってなかった身なのですが、この動画でかなり雰囲気が掴めて、大変重宝しました。ありがとうございます。
気になったことがあるのですが、「部品化」を意識する割に、その部品に対する振る舞いがその部品からかなり離れた外（親？）などで既定されている点が気になりました。（オブジェクト間の結合度合いが高い？）例えばですが、Todoの増減の振る舞いをAppに書いている所とか。これだとAppがTodoの内容などを知っている必要があると思うのですが、実際にはTodoListがTodoの内容の増減を操作・管理していれば、Appはその様なロジックを知る必要が無いように感じます。 言語的に可能か否かは存じないのですが、TodoListに「完了チェックの状態変化メソッド」「Todoを増やすメソッド」「（完了した）Todoを消すメソッド」があり、App内のボタンでのイベント発火時にそれらが呼び出される動きの方が自分的にはしっくり来ます。この辺りReact/JSの文化的なものなのでしょうか？（もし的外れな質問であればご放念いただければ幸いです）
ありがとう！今日半日かかったこの動画をみって自分も同じことをやって、やっとtodolistが完成しました。全部は理解切れないけど、また夢を一歩近くになってる気がする。ちなみに私は日本人じゃないですが、今もJavaScript初めて二ヶ月未満、shinさんの説明はとってもわかりやすい！！！
Davidさん、ありがとうございます。
少しずつ理解していきましょうね。日本語なので理解が難しいとは思いますが、頑張っていきましょ🚀
出身は聞いてないぞ
where u from ?
はじめまして！ reactのチュートリアルめちゃくちゃわかりやすく、todoリスト実装できました。大変ありがとうございます。今後も拝見させてください。本当にありがとうございます。
丁寧な説明を聞きながら写経して、やっとReact初心者になれました。
とても分かりやすかったです。ありがとうございます！
IT未経験新卒一年目です
めちゃくちゃ助かります。ありがとうございます。
VScodeやintellijといったエディタの便利な使い方とか、Javaのこのような解説とかも頼みたい！！！！！
JavaScriptを学び始めた超初心者です♪ とても楽しくReactを学べました！ありがとう😀 UdemyのDiscordクローン作りに挑戦してみます💨
はい！ぜひ頑張ってくださいね。
Discordクローンと言ってもメッセージ機能やルーム作成の機能を作っています。電話などの機能は作っていないので、ご了承ください
非常に分かりやすい解説ありがとうございます。一番すんなり入ってくる動画なので、コーディングしてて楽しい内容でした！今後の発信も楽しみにしています！
ありがたいです！環境構築、エラーの連続でしたがクリアできました。繰り返し見て落とし込みます。
とても分かりやすく、Reactの理解がかなり深まりました！
最後の宅配笑いましたｗ
勉強になります。応援してます。そして、癒されます😍
とても分かりやすく完全に全てフォローできました。ありがとうございました。
倍速でもしっかり聞き取れるので助かります！
ヨッ！Udemy講師！
めちゃくちゃわかりやすいです！！
ありがとうございました
こういう動画を作成いただいてとても感謝です!
これはありがたィィィ....！
フロントにReactxTS バックにRailsとかも見てみたいです...！
まあ何ができるってのはわかったけど理解は難しい これをクリアできたら就職できると考えたらがんばれる！
Reactの学習がんばってください！
就職の方も応援していますね
大好きです❤️
サイコウのスタートがきれた！ナイスな動画ありがとうございます！
25:40ここまで！勉強しました～mm
最高です！CZcams頑張ってください🔥
とても参考になりました。有難うございます。
reactで制作したプロジェクトを実際にデプロイする動画などが有りましたら幸いです。
와 !!! 대박이다 1시간이면 리액트가 된다니 !!
ありがとうございます！
これはとてもありがたい！！
プログラミングを独学しているものです。動画大変参考になりました。
pythonのフレームワークであるDjangoと、動画のReactどちらが習得しやすいでしょうか？
Djangoをちょっとやってみましたが、掴みづらくて挫折しました。
バックエンドにこだわりがあるわけではないので、フロントエンドへ方向転換しようか迷っています。
自分用メモ
toggleTodoが分からん。
引数にid使ってるけど、どっから出てきた？
setTodosの書き方は配列全体を上書きせず、先頭に一つ追加したいときにスプレッド使う感じかな。
map関数に戻り値はあるのか？が戻り値として戻らないとのreturnにならないように思うのだけど、Linqのforeach()みたいなものだと思うので、処理行うだけの戻り値voidなんじゃないかと・・。ごめん、実はmap関数よく知らないで書いてます。
map関数は関数型プログラミングでよく使用されるコレクション汎用メソッドで、そのコレクションの要素を変換した新しいコレクションを返します。引数として与えるコールバック関数の返り値がそのコレクション要素の型。
今回でいえばコレクションは配列であり、返り値はArray(要素であるオブジェクトの型は省略してる)になります。
@@yayuyo7188 ありがとうございます。C#のlistに.whereという同様の関数があって、それと同じタイプだと思います。mapという名称から、元のコレクション自体（参照型）の値をかえて値はvoidなのかな？と思ったので。
なんで徹子みたいな髪型しているのかと思ったら帽子か
すげー講座みつけた
reactの案件にはいることが決まったのできました
よかったらVueもやってほしいです！
動画有難うございます！uuid導入の時点で、どうやらファイルが無いか、バージョンに関する警告のようなものが出てたのですが、動くので、とりあえずそのまま無視して進めてました。最終的にな状態では、vsコード上ではエラーなかったのですが、ブラウザのコンソール部分でエラー吐きまくって動かなくなってしまいました。もう一度最初からやってみて、流れを理解していこうと思います。
手書き矢印すごい
CODE .を入力してもエラーになってしまうのですが、どうしたら上手く行くのでしょうか？
素人質問で恐縮なのですが、なぜtodoコンポーネントとtodolistコンポーネントに分ける必要があるのでしょうか？
いい質問だと思います！
正直分けなくても大丈夫ですが、たとえば後でTodoListとTodoコンポーネント2つを使いまわす可能性があれば、分けるといいですね。
あとは基本的にコンポーネントは分割する癖をつけておいた方がいいです。パフォーマンスチューニングや責務の分離という考え方がありますので。
ホームページ作成に当たってReactやvueを使った方が今時は良いと聞いたのですがHTMLとどちらがおすすめですか？
HP制作はReactでもVueでもHTMLとCSSを使うことになるので、HTMLの学習からはじめた方が良いと思いますね。
@@programming_tutorial_youtube ありがとうございます！！！
すみません、、初心者ですどうやったらコードの色がカラフルになりますか？
uuidをインストールするとup to date, audited 3 packages in 493msとなりインストールできませんが原因ってわかりますでしょうか？
.mapの代わりにforEachを使って第2引数にインデックス番号で、uuid?なしでも行ける気がするんですがだめなんでしょうな？
ソース長くなりますね...
cannot use foreach, foreach returns null.
@@aacv mapとforeachの違いですね
学校よりわかりやすい
質問です！
17:00あたりからjavascriptファイル内でhtmlタグを書くときに予測変換が現れると思うのですが、自分はhtmlファイル内で出ないと予測変換が現れません。
どのようにすればjavascriptファイル内でhtmlの予測変換が現れるのでしょうか？
拡張機能とかがあれば、お教えいただけると幸いです。
確かsetting.jsonファイルをいじったような気がします。react htmlタブ補間 setting.json等で検索すると出てくると思います。
name = null じゃダメなんですか?
問題無いです！ ただ、今回はconst(定数)で定義しているので、こういう記述になっていると思います。
完全初心者OKなのについていけないからプログラミングは向いていないかもしれない
最初はProgateなどで学習すれば良いかもです。
完全初心者はちょっと言い過ぎたかもしれません、、
ReactはJavaScriptを理解しとくのが前提だから…
大丈夫分からなくて普通だから
めちゃくちゃわかりやすかったです！ありがとうございました✨