【React基礎編】#01 たった1hで完全理解! 現役エンジニアと Reactを用いたTODOアプリ作成

  Рет қаралды 3,428

プログラミングコーチ | いしだ

プログラミングコーチ | いしだ

Күн бұрын

🏆登録者限定13大特典🏆
utage-system.com/line/open/aE...
【「アプリで開く」を押してください)】
今回の動画のソースコードになります。
github.com/issiyda/react-todo...
✅0からフロントエンドエンジニアを目指すロードマップ
✅プログラミング初心者向けおすすめ教材
✅現役のエンジニア/エージェントとのリアル対談動画18本
✅LINE限定のプログラミング学習動画 38本
✅3万円相当の1hキャリア無料相談
✅LINE追加者限定の講義動画5本
✅VSCodeショートカット34選まとめシート
✅時給単価7200円エンジニアのスキルシート
✅【高単価の出る】フリーランスエンジニアエージェントまとめ
✅【知らなきゃ大損】フリーランスエンジニアの単価を10万円上げる方法
Etc…
lin.ee/GpF1W6f
【「アプリで開く」を押してください)】
✅受講生の声
【動画】
/ @ishida-coaching
【個別相談感謝の言葉】
note.com/issiyrun/n/ne27ca611...
多くの人に感謝の言葉をいただいています。
期間限定で3万円相当の無料相談実施中。
◆━━━━━━━━━━━━━━━━━━◆
⬇️いしだの公式LINE⬇️
◆━━━━━━━━━━━━━━━━━━◆
✅10秒で終わる質問に回答するだけで
🏆豪華12大特典🏆
╋━━━━━━━━╋
🏆豪華特典1個目🏆
0から半年でフロントエンドエンジニア
になるためのロードマップ
╋━━━━━━━━╋
╋━━━━━━━━╋
🏆豪華特典2個目🏆
初心者でも始められる
おすすめ学習教材7選
╋━━━━━━━━╋
╋━━━━━━━━╋
🏆豪華特典3個目🏆
エンジニア/エージェント
との対談動画18本
╋━━━━━━━━╋
╋━━━━━━━━╋
🏆豪華特典4個目🏆
普段の思考やルーティン
いしだの裏側動画5本
╋━━━━━━━━╋
╋━━━━━━━━╋
🏆豪華特典5個目🏆
Node.js&Git
徹底解説動画38本
╋━━━━━━━━╋
╋━━━━━━━━╋
🏆豪華特典6個目🏆
いしだに直接
1hキャリア無料相談
╋━━━━━━━━╋
╋━━━━━━━━╋
🏆豪華特典7個目🏆
面接で問われる質問
20選と回答の電子書籍
╋━━━━━━━━╋
╋━━━━━━━━╋
🏆豪華特典8個目🏆
VSCodeショートカット
34選まとめシート
╋━━━━━━━━╋
╋━━━━━━━━╋
🏆豪華特典9個目🏆
時給単価6000円エンジニア
のスキルシート
╋━━━━━━━━╋
╋━━━━━━━━╋
🏆豪華特典10個目🏆
【高単価の出る】エージェントまとめシート
╋━━━━━━━━╋
╋━━━━━━━━╋
🏆豪華特典11個目🏆
フリーランスエンジニアの
単価を10万円/月上げる
解説動画
╋━━━━━━━━╋
╋━━━━━━━━╋
🏆豪華特典12個目🏆
エンジニアなら絶対に
揃えるべき機器4選
╋━━━━━━━━╋
【⬇️無料登録はこちら⬇️】
utage-system.com/line/open/aE...
【「アプリで開く」を押してください)】
もしくは
@420tzvlx
で友達ID検索!
【「@」を忘れずに!!】
✅ React学習講座
【React基礎編】#01 たった1hで完全理解! 現役エンジニアと Reactを用いたTODOアプリ作成
• 【React基礎編】#01 たった1hで完...
【React基礎編 】#02 現役エンジニアと学ぶReactの主要な関数(hooks)を完全マスターしてフロントエンドエンジニアへ
• 【React基礎編 】#02 現役エンジニア...
【React基礎編】#03 現役エンジニアと学ぶ現代フロントエンド必須のTypescriptを使ってReactTODOアプリを堅牢に!!
• 【React基礎編】#03 現役エンジニアと...
【React基礎編】#04 簡単にReactでUI実装 現役エンジニアが使う ChakraUIで簡単にUI実装
• 【React基礎編】#04 簡単にReact...
【React基礎編】#05 ReactとTypeScriptとChakraUIで見た目がリッチなTODOを爆速で開発
• 【React基礎編】#05 ReactとTy...
✅Twitter
/ issiyrun
よかったらフォローしてください!
ご視聴いただきありがとうございました。
◆━━━━━━━━━━━━━━━━━━◆
00:00 現役フロントエンドエンジニアと Reactを用いたTODOアプリ作成
02:13 仮想DOMの解説
04:57 Reactプロジェクト作成前の準備
05:50 npx crate-react-appで雛形の作成
07:47 Reactのフォルダ/ディレクトリの用途解説
12:59 コンポーネントを作るメリット/デメリット
15:50 jsxの書き方
16:30 コンポーネントの呼び出し方 ToDo
20:40 コンポーネントは必ず一つのタグでWrapを行う
21:25 具体的なコンポーネントのメリットデメリット
22:48 ReactのuseStateの解説
28:33 Map関数の解説
31:40 ReactのPropsで関数やパラメータの受け渡し
34:10 変更するとidが渡せなくなってしまう??
35:17 スプレッド構文の書き方
36:57 Keyの解説
37:00 三項演算子の解説
38:08 Todoのチェックボックス追加
42:14 jsのfilter関数でtodo達成個数の取得
43:33 親側のパラメータをuseStateに変える
46:00 doneのステータスを変更する関数
48:37 titleの文言を変更する関数
51:57 TODOのDoneの個数を取得する関数(filter)
55:11 ReactTODOアプリのまとめ
55:55 特別なプレゼントの案内
#無料LINE登録アンケート回答で12個の豪華特典

Пікірлер: 10
@user-hd5ju3bb9f
@user-hd5ju3bb9f 10 ай бұрын
事故りながらやっている感じが、下調べせずにすごい現実味があってよかったです
@frontendishida
@frontendishida 10 ай бұрын
コメントありがとうございます👍👍 今後もよろしくお願いします!
@user-qj1kr5bk6y
@user-qj1kr5bk6y 11 ай бұрын
いまjsのメカニズムをudemyで勉強中なのでそれが一区切り付いたらまたしっかり見させていただきます!😊
@frontendishida
@frontendishida 11 ай бұрын
コメントありがとうございます!動画投稿の励みになります!! 今後もフロントエンド周りの動画投稿していくので楽しみにしていただけると!
@frontendishida
@frontendishida Жыл бұрын
感想の他にもこういう動画欲しいとかあればコメントにもらえるとありがたいです!
@user-qj1kr5bk6y
@user-qj1kr5bk6y 11 ай бұрын
JSのメカニズムを学んでいて実際の開発でどのように運用されているのかのイメージがつきにくいので例などを上げて説明していただきたいです! よろしくお願いします!
@frontendishida
@frontendishida 11 ай бұрын
@@user-qj1kr5bk6y 実際のWEBサービスを見ながらどう使われているのか説明する動画は作成予定でした! 楽しみにしておいていただけると😎
@frontendishida
@frontendishida Жыл бұрын
🏆登録者限定12大特典🏆 utage-system.com/line/open/aE... 【「アプリで開く」を押してください)】 ✅0からフロントエンドエンジニアを目指すロードマップ ✅プログラミング初心者向けおすすめ教材 ✅現役のエンジニア/エージェントとのリアル対談動画18本 ✅LINE限定のプログラミング学習動画 38本 ✅3万円相当の1hキャリア無料相談 ✅LINE追加者限定の講義動画5本 ✅VSCodeショートカット34選まとめシート ✅時給単価6000円エンジニアのスキルシート ✅【高単価の出る】フリーランスエンジニアエージェントまとめ ✅【知らなきゃ大損】フリーランスエンジニアの単価を10万円上げる方法 Etc…
@Kld-oz5le
@Kld-oz5le Жыл бұрын
もう一段階文字を大きく見せてほしかったです
@frontendishida
@frontendishida Жыл бұрын
貴重なご意見ありがとうございます!!次回以降の動画ではもう少し大きくしますね!助かります😎
ReactでCSS書くならどれ使う?
18:16
ムーザルちゃんねる
Рет қаралды 9 М.
Best father #shorts by Secret Vlog
00:18
Secret Vlog
Рет қаралды 22 МЛН
100❤️
00:19
MY💝No War🤝
Рет қаралды 22 МЛН
【React基礎編】#04 簡単にReactでUI実装  現役エンジニアが使う ChakraUIで簡単にUI実装
1:19:30
Is ChatGPT outdated? The latest AI is too advanced! [Claude]
23:48
アーロン【上京したい大学生】
Рет қаралды 3 М.
現代のフロントエンド開発でReactが使われる理由
8:05
ReactとReduxを使って掲示板アプリを構築してみよう【Redux Toolkit実践】
42:14
プログラミングチュートリアル
Рет қаралды 11 М.
【完全解説】Pythonを使った自動化例46選【業務効率化できること】
34:58
はやたす | Python・データサイエンスコーチ
Рет қаралды 182 М.
これからReact Nativeが流行ります。理由を述べます。
12:43
しまぶーのIT大学
Рет қаралды 17 М.
Это Сделает Вас Миллионером 🤯
0:23
MovieLuvsky
Рет қаралды 11 МЛН
УТОПИЛА ДОРОГУЩИЙ ТЕЛЕФОН 😭
1:01
Аня Панкова
Рет қаралды 10 МЛН
ПРОСТОЙ ТОРТИК
0:17
KINO KAIF
Рет қаралды 4,5 МЛН