강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

一口サイズで学ぶReact.js:基礎から実践まで

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

  • winterlood
꽉꽉 채워낸
뉴비 탈출
JavaScript
React
Node.js
kakao-tech

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

受講後に得られること

  • # 実際にデプロイされる感情日記プロジェクト開発

  • JavaScript、Node.js、Web動作方式 All-in-One

  • React クリーンなコード作成、パフォーマンス最適化テクニック

画像をクリックするとロードマップに移動できます。
> ロードマップリンク:https://link.onebitefe.com/r/3wokpi

シリーズ講義リンク
> 一口サイズに切って食べるReact :https://inf.run/v3XAj
>
一口サイズに切って食べるTypeScript : https://inf.run/FpLm4
>
一口サイズに切って食べるNext : https://inf.run/v3XAj



Reactは、一つの講座で完璧にマスターできます。
一口サイズに切り分けて学べるようサポートします。🔥

多くの受講生の皆様に愛していただいたおかげで、インサイト出版社と共に講義を書籍として出版することができました。
改めて、すべての受講生の皆様、関心を持ってくださった皆様に心より感謝申し上げます。


2024年リニューアル版
一口サイズで学ぶReact
世界一親切で、世界一わかりやすいReact講座を目指して

JavaScriptの基礎から、
React.js実戦プロジェクトまで

React.jsは、Node.js環境で動作するJavaScriptのライブラリです。
したがって、React.jsは結局JavaScriptをより効果的に活用できるようにサポートするツールに過ぎません。
そのため、JavaScriptとNode.jsを正しく理解していなければ、React.jsを適切に活用することはできません。

このコースはJavaScriptの基礎からNode.jsを経てReact.jsを学びます。
でも、ただ学ぶだけではつまらないですよね!合計3回のプロジェクトを通じてReact.jsを学びます。
このような過程の中で、皆さんはしっかりとした基礎力を備えたフロントエンド開発者へと生まれ変わることになるでしょう。

18時間のボリューム
合計3つのReact.jsプロジェクト

この講座は、React.jsの単純な使い方だけを教える講座ではありません。
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. 終わりに

Online Classesは終わりますが、私たちの学習は終わりません。
今後どのような方向性を持って進むべきか、お話しします。


世界で最も親切な
React講座のための4つの原則

📣 原則1. 必ず簡単で親切に、視覚的に説明すること

どんなに複雑で難しい内容でも!
視覚資料とともに親切で分かりやすく説明するために絶えず努力しました。
すべて自分で作成した画像なので、キャプチャして学習ブログの投稿に利用していただいても構いません。😃

📣 原則2. 倍速再生でも全て聞き取れるように発音すること

復習のために再度聞いている方や、お忙しい方は倍速で聞いてみてください!
最大2倍速まで発音がよく聞こえるように特に気を配りました😎
(下記の1.5倍速で再生される映像を一度聞いてみてください!)

📣 原則3. コードを見つけやすく保存すること

苦労して作成した実習コードを適当に保管するのはもったいないですよね?
いつでも振り返れるように、コードをセクション別にきちんと分けて保管できるよう配慮しました。
コード保管庫リンク:https://github.com/winterlood/onebite-react-v2

📣 原則4. 絶え間なくコミュニケーションを取ること

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

Discordチャンネル参加:https://discord.gg/YDqhkH8XkN
(オープンチャットルームは授業資料でご確認いただけます)

想定される質問 Q&A 💬

Q. この講座の受講対象者はどのような方ですか?

HTML、CSSについての理解がある方が聞くのに最適化された講義です。
ただし、講義の途中途中に説明が存在するため、内容の把握が完璧でなくても大丈夫です!

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

はい、ようこそ!🙋‍♂️
本講義では、Reactを学習するのに必ず必要なJavaScriptの知識とNode.jsの知識までお教えします。
したがって、本講義一つでReactに必要な基礎知識をまず学習し、Reactまで学習することができます。

Q. 授業ではどのレベルまで扱われますか?

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


ポートフォリオおよび個人映像

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Reactを初めて触れる入門者

  • JavaScriptとNode.jsはよく分からないけど!React.jsを学んでみたい人

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

  • 講座を完走した際に自慢できる成果物を作りたい人

  • HTML & CSSを一度でも書いた経験がある方(上手である必要はありません!)

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

  • 👋 HTML、CSSに関する非常に基礎的な知識

こんにちは
です。

36,006

受講生

2,411

受講レビュー

1,542

回答

4.9

講座評価

13

講座

웹 프론트엔드 한 입 크기로 잘라먹어 볼까요?!

안녕하세요 🙇‍♂

저는 무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 사람이자

세상에서 가장 따뜻한 개발자 커뮤니티를 만들고자 하는 사람입니다.

 

カリキュラム

全体

98件 ∙ (18時間 33分)

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

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

受講レビュー

全体

1,189件

4.9

1,189件の受講レビュー

  • 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... 😭😭

    • hm52073678님의 프로필 이미지
      hm52073678

      受講レビュー 3

      平均評価 5.0

      5

      32% 受講後に作成

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

      • samgangjumak님의 프로필 이미지
        samgangjumak

        受講レビュー 8

        平均評価 4.9

        5

        76% 受講後に作成

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

        • inchestry님의 프로필 이미지
          inchestry

          受講レビュー 5

          平均評価 5.0

          5

          64% 受講後に作成

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

          • parkhj9291187님의 프로필 이미지
            parkhj9291187

            受講レビュー 2

            平均評価 5.0

            5

            100% 受講後に作成

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

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

            ¥716,237

            29%

            ¥6,049

            winterloodの他の講座

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

            似ている講座

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