画像をクリックするとロードマップに移動できます。 > ロードマップリンク : https://link.onebitefe.com/r/3wokpi
シリーズ講義リンク > 一口サイズでかじるReact: https://inf.run/v3XAj > 一口サイズでかじるTypeScript: https://inf.run/FpLm4 > 一口サイズでかじるNext.js: https://inf.run/v3XAj
AI時代でも結局はReact、一つの講義で完結できます。 一口サイズで食べやすく(理解しやすく)お手伝いします。 🔥
多くの受講生の皆様に愛していただいたおかげで、インサイト出版社と共に講義を本として出版することができました。 改めてすべての受講生の皆様、関心を寄せてくださった皆様に心より感謝申し上げます。
リニューアル版 一口サイズでかじりつくReact 世界で最も親切で、世界で最も分かりやすいReact講座を目指して AI時代にも通用する本物の実力、 JavaScriptの基礎からReact.jsの実践プロジェクトまで React.jsはNode.js環境で駆動するJavaScriptのライブラリです。 したがって、React.jsは結局のところ、JavaScriptをより上手く活用できるように助けてくれるツールに過ぎません。
AIがコードを代わりに書いてくれる時代になっても、これは変わりません。 JavaScriptとNode.jsを正しく理解していなければ、React.jsを使いこなすことはできません。
この講義では、JavaScriptの基礎からNode.jsを経てReact.jsを学びます。 ですが、ただ学ぶだけでは面白くないですよね! 計3回のプロジェクトを通じてReact.js を学びます。 このような過程の中で、皆さんはAIが作成したコードも迷いなく読み、修正できる、 基礎のしっかりしたフロントエンドエンジニアへと生まれ変わることでしょう。
18時間のボリューム 計3回のReact.jsプロジェクト この講義はAIが教えるレベルの単純な使い方にとどまりません。 React.jsを取り巻く様々なCS知識 も共に扱い、計3回のプロジェクト カウンターアプリ、ToDoリスト、感情日記帳を作りながらプログラミング的思考力 も一緒に養うことができます。
講義の構成 📌 セクション 1~2. JavaScriptの基礎および深化 React.jsを学ぶ前に、JavaScriptの基礎および応用の概念を確認します。 データ型や演算子のような基本的な概念から、 配列メソッドや非同期処理のような発展的な内容まで一緒に見ていきます。 もしJavaScriptをすでに知っているとしても、復習として改めて見直すのに最適です。
📌 セクション 3. Node.js React.jsはNode.jsをベースに動作する技術です。そのため、Node.jsを知らずにReact.jsを理解することはできません。 セクション3では、Node.jsとは何か、なぜ誕生したのか、どのような機能を持っているのかを実習とともに見ていきます。
📌 セクション 4. React.js 概論 React.jsとは何なのか、他の技術と比較してどのような差別化ポイントがあるのかを学び、既存の技術が抱えていた限界をどのように解決したのかを詳しく見ていきます。この過程を通じて、私たちはReact.jsについてより深く理解することになるでしょう。
📌 セクション 5. React.js 入門 新しいReact Appを作成し、ReactのComponent、State、Propsなどの基本的な機能について見ていきます。 実習とともにすべての基本機能を使用してみて、図解資料とともに視覚的に完璧に理解します。
⛳️ セクション 6. React.js プロジェクト 1. カウンターアプリ 最初のReactプロジェクト「カウンターアプリ」を実際に作ってみます。 シンプルですが、React.jsの動作原理と設計哲学を垣間見ることができる素晴らしいプロジェクトです。
📌 セクション 7. ライフサイクル すべての人間が生まれ、乳幼児期、青少年期、青年期、老年期を経て黄昏に達するように、すべてのReactコンポーネントもまた、生まれ、変化し、消えていきます。このようなコンポーネントの生涯周期を「ライフサイクル」と表現します。
コンポーネントのライフサイクルを理解し制御できるようになると、望むタイミングで望む動作を実行させることができるようになります。 したがって、セクション7ではライフサイクルについて学び、実習とともにこれを制御する方法を見ていきます。
⛳️ セクション 8. React.js プロジェクト 2. To-Doリスト 2つ目のReactプロジェクト「ToDoリストアプリ」を実際に作ってみます。 このプロジェクトを実装しながら、データのCRUD(追加、参照、更新、削除)および検索機能など、 Reactで配列形式のデータを扱う様々な方法について学びます。
📌 セクション 9. useReducer - 状態管理ロジックの分離 役割に応じたコードの分離は、常にソフトウェア開発における美徳です。 複雑な状態管理コードを分離できるようにサポートしてくれるuseReducerについて学び、 ToDoリストプロジェクトに直接適用しながら実習します。
📌 セクション 10. 最適化 私たちのプロジェクトに不必要な演算が存在するとしたら?思い切って除去すべきですよね! 無駄な演算を除去するReact Appの様々な最適化手法を学び、 ToDoリストプロジェクトに直接適用しながら実習します
📌 セクション 11. Context より簡潔に、よりスマートに様々なコンポーネントへデータを供給するContextについて学び、 ToDoリストプロジェクトに直接適用しながら実習します
⛳️ セクション 12. React.js プロジェクト 3. 感情日記帳 これまで学んだ概念を総動員して、最終プロジェクトの感情日記を実際に作ってみます。 さらに、ブラウザのデータベースを使用し、プロジェクトをデプロイしてユーザーがアクセスできるようにします。 デモリンク:https://emotion-diary.winterlood.com/
📌 セクション 13. おわりに 講義は終わりますが、私たちの学習は終わりません。 これからどのような方向性を持って進んでいくべきかについてお話しします。
世界で一番親切な React講座のための4つの原則 📣 原則1. 必ず分かりやすく 親切に、視覚的に説明すること どんなに複雑で難しい内容であっても! 視覚資料とともに親切かつ分かりやすく説明するために、たゆまぬ努力を重ねました。すべて自作の画像ですので、キャプチャして学習ブログの投稿に使用していただいても構いません。 😃
📣 原則 2. 倍速で再生してもすべて聞き取れるように発音すること 復習のために聞き直している場合や、お急ぎの場合は倍速で聞いてみてください! 最大2倍速まで発音がしっかり聞き取れるよう、格別に気を配りました 😎 (下の1.5倍速で再生される動画を一度聞いてみてください!)
VIDEO
よくある質問 Q&A 💬 Q. 講義の受講対象はどのようになりますか?
HTML、CSSについての理解がある方に最適化された講義です。 ただし、講義の端々に説明があるため、内容を完璧に熟지していなくても大丈夫です!
Q. これから始めようとしています。JavaScriptやNode.jsについてはよく知らないのですが、受講しても大丈夫でしょうか?
はい、大歓迎です! 🙋♂️ 本講義では、リミットを学習するのに不可欠なJavaScriptの知識やNode.jsの知識までお教えします。 したがって、本講義一つでリアクトに必要な基礎知識をまず学習し、リアクトまで学習することができます。
Q. 授業ではどの程度のレベルまで扱われますか?
Reactが誕生した理由から基本的な使い方、実際のプロダクション開発のための性能最適化手法までを扱います。 また、Vercelを利用して実際にデプロイし、Open Graphの設定で仕上げることで、 ウェブプロジェクトの最初から最後まで開発できるすべての知識を盛り込んでいます。
ポートフォリオおよび個人動画 VIDEO
VIDEO
VIDEO