inflearn logo
inflearn logo

一口サイズでかじり取るReact.js:基礎から実践まで

概念からユニークなプロジェクトまで一緒に扱いながら、JavaScriptとReactをこの講義で一度に終わらせましょう。 学習は短く、応用は長く、18時間のボリュームを誇るAll-in-one講義!

難易度 初級

受講期間 無制限

JavaScript
JavaScript
React
React
Node.js
Node.js
Good for Gifting
Good for Gifting
JavaScript
JavaScript
React
React
Node.js
Node.js
Good for Gifting
Good for Gifting

学習した受講者のレビュー

学習した受講者のレビュー

4.9

5.0

23

88% 受講後に作成

私は実際にリニューアル前に受講申請してすでに一度頑張っていました。 それ以来、いろいろな状況で1~2年ほど勉強を手放している。 またリアクトを煮る必要性を感じて帰ってきました。 振り返ってみると今年の芽リニューアルになりましたよ! 昔も全体的に充実した構成だったと思います。 リニューアル版はより分かりやすくなりました より繊細にあれこれ補充してくれた感じがします。 普通こんなに全体的にリニューアルする場合には新しい講義でオープンする場合だけ見たのに 既存の受講生も継続してリニューアル版を見ることができるようにしていただきありがとうございます。 講義や受講生への本気が感じられ、各編ごとに感動しながら見ています。 最後の展開段階だけを残しています。 残りの3講義をよく見て、復習を頑張りながら 私のものでよく作ってみましょう。 本当に本当にありがとうございます。

5.0

지지지지지

100% 受講後に作成

今年中にReactを必ず修了したかったのですが...個人的な目標を達成できてとても嬉しいです!!!この講義を購入しようかまだ迷っている方が(まさか...)いらっしゃるかもしれないので、強くお勧めします...大学卒業を控えてフロントに興味を持ち、中途半端な初心者だった私は急いで講義を中断しましたが、とても難しくて何度も聴きました。その後、JavaScriptも知らないのにReactを聴くのは無理だと思い、隣のクラスのヒョビン先生のVanilla JavaScript講義を聴きながら、別途JSの本を購入し、基礎を身につけた状態でこの講義を聴き直したら...本当に理解がスッと入りました!!!!!(もちろん、ジョンファン先生の授業だけでも問題ありませんが、私はもっと念入りに基礎から掘り下げてみたいという欲求が生まれたので...)コードを理解できる日が本当に来るのだろうか...と思いましたが、そんな日が私にも来ました...もちろん、まだ超初心者で、講義で使われた前半の内容を忘れていたり、一人でコードを書くのは難しい部分も間違いなくありますが、このReact講義を聴きながら、全体的なWeb開発の感覚がつかめて、この講義を聴いた時間は後悔していません。何よりも、見やすい視覚的資料+コード+集中力を高めてくれる発音...この講義は絶対に買うべきです。(広告ではありません;)ジョンファン先生、ずっと教えてください...ありがとうございます!それでは、私はこれでおしまいにして、次のTypeScript講義に移ります!!!信頼できるジョンファン先生の講義。

5.0

서지현

100% 受講後に作成

本当に素晴らしい授業でした。人生で初めて、最後までやり遂げたオンライン授業です。😊😊 最後までやり遂げられた最大の理由は、授業の質が非常に良かったからです。 講師の発音もとても良く、何より授業の内容が非常に充実しています。 本当に必要な内容で構成されており、親切に説明してくださるので、それに従って実践するのが簡単でした。 基本CRUDの2セット(Todo、感情日記)を試してみましたが、概念も理解でき、今後の実務でも大いに役立つと思いました。 授業制作後、React Router V7のバージョンアップに関する授業アフターサービスも良かったです。 エラーが発生した場合は、コミュニティで検索すると、私と同じようにスペルミスなどの間違いを犯した他のユーザーが投稿した参考記事があるので、役に立ちました。 このように簡単に、わかりやすく説明するのは、講師としての素晴らしい資質だと思います。このようにしっかりとした授業を作ったのを見ると、開発も非常に上手いと思います。~ たくさんの授業を作ってください。私はバックエンド開発者ですが、年末に少し時間が空いたので、Reactを勉強してみようと思い、この授業を選びましたが、この授業を選んだ自分自身を褒めたいと思います。😊😊 講師の先生、幸せに暮らしてください。健康で、2025年も素晴らしい授業をお願いします。~

受講後に得られること

  • [JavaScript] 退屈しないようにスピーディーに!確かなJavaScriptコア知識の習得

  • [Node.js] JavaScriptを駆動するNode.jsの核心概念の習得

  • [React.js] React.jsの核心概念および使い方の習得

  • [CS知識] フロントエンド領域を超えたネットワーク、クラウドなどのCS知識

  • [プロジェクト] Vercelを通じてデプロイされる実践プロジェクト - 感情日記帳

  • [コミュニティ] 2,000人以上の受講生専用コミュニティへの参加

> 一口チャレンジ8期に申し込む(〜2月22日まで) : https://link.onebitefe.com/r/btok4i


画像をクリックするとロードマップに移動できます。
> ロードマップリンク : 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. ToDoリスト

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倍速で再生される動画を一度聞いてみてください!)

📣 原則 3. コードを後で探しやすく保存しておくこと

せっかく作成した実習コードを適当に保管してしまうのはもったいないですよね?
いつでも見返せるように、コードをセクションごとにしっかり分けて保管できるよう工夫しました。
コードリポジトリのリンク:https://github.com/winterlood/onebite-react-v2

📣 原則4. 絶えずコミュニケーションすること

受講生専用のコミュニティに集まり、お互いに知識や情報を共有しながら共に成長します。

디스코드 채널 참가 : https://discord.gg/YDqhkH8XkN
(오픈채팅방은 수업 자료에서 확인하실 수 있습니다)

予想される質問 Q&A 💬

Q. 講義の受講対象はどのようになりますか?

HTML、CSSについて理解がある方が受講するのに最適化された講義です。
ただし、講義の合間に説明があるため、内容を完璧に熟지していなくても大丈夫です!

Q. これから始めようとしています。JavaScriptやNode.jsについてはよく知らないのですが、受講しても大丈夫でしょうか?

はい、大歓迎です! 🙋‍♂️
本講義では、リアクトを学習する上で欠かせないJavaScriptの知識やNode.jsの知識までお教えします。
そのため、本講義一つでリアクトに必要な基礎知識をまず学習し、リアクトまで習得することができます。

Q. 授業ではどの程度のレベルまで扱いますか?

Reactが誕生した理由から基本的な使い方、実際のプロダクション開発のためのパフォーマンス最適化手法までを扱います。
また、Vercelを利用して実際にデプロイし、Open Graphの設定で締めくくることで、
Webプロジェクトの最初から最後まで開発できるすべての知識を盛り込んでいます。


ポートフォリオおよび個人動画

 

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Reactを初めて学ぶ入門者

  • JavaScriptやNode.jsはよく知らないけれど!React.jsを学んでみたい人

  • 完走チャレンジなどを通じて、多くの受講生と一緒に学習したい人

  • 講義を完走した際に、自慢できるような成果物を作りたい方

  • HTML & CSSを一度でも書いたことがある方(得意である必要はありません!)

前提知識、
必要でしょうか?

  • 👋 HTML, CSSに関するごく初歩的な知識

こんにちは
winterloodです。

37,762

受講生

2,651

受講レビュー

1,623

回答

4.9

講座評価

19

講座

ウェブフロントエンドを一口サイズでかじってみましょうか?!

こんにちは 🙇‍♂

私は、どんなことでも簡単で楽しく説明する方法があると信じている人間であり、

世界で最も温かい開発者コミュニティを作りたいと思っている人間です。

 

もっと見る

カリキュラム

全体

98件 ∙ (18時間 33分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

1,294件

4.9

1,294件の受講レビュー

  • hm52073678님의 프로필 이미지
    hm52073678

    受講レビュー 3

    平均評価 5.0

    5

    32% 受講後に作成

    茂みをゴマの葉に包む感じ 講義内容を感じずに美味しいです〜

    • samgangjumak님의 프로필 이미지
      samgangjumak

      受講レビュー 8

      平均評価 4.9

      5

      76% 受講後に作成

      他サイトで英語で先にリアクトを受講しました。英語を100%理解していない状態で受講してみると、概念を誤って理解したり説明したりして理解できない問題がありました。それでインフラでリアクト講義を探し、より良く見えて聞くようになりました。講義はJavaScriptから再度教えていただき、JavaScriptまで勉強することができてよかったです。リアクトについても概念をよく教えてくれて勉強がたくさんなりました。ひとつ残念なことは、A->Cを説明する際、途中でA->B->C こうしてBまで説明していただいたら理解するのがずっと良かったような部分もいくつかありました。そんなことは講義質問答弁欄で他の方々も質問をたくさん残してくれました。こんな部分だけ補完になれば本当に100点講義のようです。

      • sunjune18284435님의 프로필 이미지
        sunjune18284435

        受講レビュー 27

        平均評価 4.7

        5

        100% 受講後に作成

        I actually bought the lecture for a thousand won on April Fool's Day, just in case... like a lottery ticket... but I feel like I really won the lottery. I feel bad that I'm studying such a good lecture at almost a free price... The lecture is so kind and the examples are explained in a way that's easy to understand, so it's really great. Thank you so much, I love you... 😭😭

        • inchestry님의 프로필 이미지
          inchestry

          受講レビュー 5

          平均評価 5.0

          5

          64% 受講後に作成

          まだ見ていませんが、複数のリアクト講義を購入してみた立場で、この講義がワントップです。 他の講義も熟練したJavaScript開発者の方々が作りました。しかし、問題があります。 熟練した方々は、自分の頭の中ですでにコードがどのように動作しているかについてのイメージが頭にある状況で講義をします。だから、おじさんのように話しながらコードを書いて講義をします。 しかし、初心者の立場では、一体何が起こるのか頭の中でまったく描かれていない状態で、コードだけに従うので、苦しい気持ちはもちろん、概念すらうまくいかないんです。 このレッスンの場合、コードの前にどのような機能を使うと、どのようなことが起こるのかをイメージとして先に解いて概念を説明し、その後にコードを見せると、あのやはりコードを見ながら頭の中でコードが動作するイメージが一緒に描かれます。 ほとんどの講師が開発者です。教育者/教育専攻者ではないので、このような効果的な教育方式に対するスタンダードなしであまりにも多くの講義が量産されていると感じますが、この講義は本当に最高ですね。 講義を見たこともありませんでしたが、すでにタイプスクリプトも購入しています。 クオリティがイ・ジョンドンデ講義値はまたあまりにも恵者です。コーヒーでももう一杯飲むと本も買いました。私のお金を与えて生きる講義に'ありがとう'という表現がおかしくてよく使わないのですが。 それでも、この講義は'非常にありがとう'。 可能であれば、Express.js、Next.Jsのレッスン、そしてTDDのレッスンも提供してください。

          • parkhj9291187님의 프로필 이미지
            parkhj9291187

            受講レビュー 2

            平均評価 5.0

            5

            100% 受講後に作成

            これらの説明力とその内容は含まれていますが、この価格は言葉ではありません。 倍増してもらえそうなのに本当に上司が狂ったような講義.. まだすべて消化したとは言い難いですが、繰り返し学習しながらマスターしてみます。 良い講義を作ってくれてありがとう:)!

            winterloodの他の講座

            知識共有者の他の講座を見てみましょう!

            似ている講座

            同じ分野の他の講座を見てみましょう!

            期間限定セール、あと5日日で終了

            ¥33,880

            30%

            ¥5,887