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