강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Front-end

一口サイズに切って食べるReact(React.js):基礎から実戦まで

概念からユニークなプロジェクトまでを一緒に扱いながら、JavaScriptとReactをこの講座で一度に習得しましょう。 学習は短く、応用は長く。17時間分のオールインワン講座!

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

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

こんなことが学べます

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

  • ジャバスクリプト、Node.js、Web 動作方式 オールインワン

  • React クリーンコード作成、パフォーマンス最適化手法

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

シリーズ講義リンク
>一口サイズにカットするリアクト: https://inf.run/v3XAj
>
一口サイズにカットするタイプスクリプト: https://inf.run/FpLm4
>
一口サイズにカットするネクスト: https://inf.run/v3XAj


リアクト、一講義で終わらせられますよ。
一口サイズでカットできるようにお手伝いします。 🔥

多くの受講生の皆さんが愛してくださったおかげで、インサイト出版社と一緒に講義を図書にまとめることができました。
もう一度、すべての受講生の皆さん、関心を持ってくださった皆さんに心から感謝します。


2024リニューアルバージョン
一口サイズにカットするリアクト
世界で最も親切で、世界で最も簡単なリアクト講義に向けて

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回のプロジェクト
カウンターアプリ、ツーリスト、感情日記帳を作ってみて、プログラミング思考力も一緒に育てることができます。


講義構成

📌セクション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.jsの動作原理と設計哲学を垣間見ることができる良いプロジェクトです。

📌セクション7.ライフサイクル

すべての人間が生まれ、幼児期、青年期、青年期、老年期を経て夕暮れに達するように、すべてのリアクトコンポーネントも生まれ、変化し、消えます。このようなコンポーネントのライフサイクルをライフサイクルと表現します。

コンポーネントのライフサイクルを理解して制御できるようになると、希望のタイミングで所望の動作を実行できるようになります。 したがって、セクション7では、ライフサイクルを見て、練習でそれを制御する方法を学びます。

⛳️セクション8. React.jsプロジェクト2.ツーリスト

2番目のリアクトプロジェクト「ツーリストアプリ」を自分で作成します。
このプロジェクトを実装しながら、データCRUD(追加、照会、修正、削除)や検索機能などの
Reactで配列形式のデータを扱うさまざまな方法を見てください。

📌セクション9. useReducer - 状態管理ロジックを分離する

役割に応じたコードの分離は、常にソフトウェア開発のおかげです。
複雑な状態管理コードを分離するのに役立つuseReducerを見てください。
ツーリストプロジェクトに直接適用して実践します

📌セクション10.最適化

私たちのプロジェクトに不要な操作がある場合は?思い切って取り除かなければなりません!
無駄な操作を排除するReact Appのさまざまな最適化手法を見てください。
ツーリストプロジェクトに直接適用して実践します

📌 セクション 11. Context

より簡潔でよりきれいに、さまざまなコンポーネントにデータを供給するコンテキストについて見てください。
ツーリストプロジェクトに直接適用して実践します

⛳️セクション12. React.jsプロジェクト3.感情日記

これまでに学んだ概念を総動員して、最終プロジェクト感情日記帳を直接作ってみます。
さらにブラウザのデータベースを使用し、プロジェクトを展開してユーザーがアクセスできるようにします。
デモリンク:https: //emotion-diary.winterlood.com/

📌セクション13.終わりに

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


世界で最もキンド
リアクト講義のための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プロジェクトの最初から最後まで開発できるすべての知識が含まれています。


ポートフォリオと個人映像

こんな方に
おすすめです

学習対象は
誰でしょう?

  • リアクトに初めて触れる入門者

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

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

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

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

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

  • 👋 HTML、CSSのごく基本的な知識

こんにちは
です。

31,065

受講生

1,777

受講レビュー

1,355

回答

4.9

講座評価

5

講座

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

안녕하세요 🙇‍♂

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

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

 

カリキュラム

全体

98件 ∙ (18時間 33分)

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

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

受講レビュー

全体

944件

4.9

944件の受講レビュー

  • 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 the lottery... But it really feels like I won the lottery. I feel bad that I'm able to listen to and study such a good lecture at almost no cost... The lecture is so kind, and the examples are explained so clearly that I really love it. Thank you so much, and I love you... 😭😭

    • hm52073678님의 프로필 이미지
      hm52073678

      受講レビュー 2

      平均評価 5.0

      5

      32% 受講後に作成

      It feels like eating meat wrapped in perilla leaves. The lecture content is delicious and not greasy~

      • samgangjumak님의 프로필 이미지
        samgangjumak

        受講レビュー 8

        平均評価 4.9

        5

        76% 受講後に作成

        I took React in English on a third-party site first. Since I was taking the course without a 100% understanding of English, I misunderstood the concepts or had problems with the explanations. So I looked for a React course on Inflearn and it looked good, so I took it. The course started from JavaScript again, so I was able to study JavaScript as well, which was great. I also learned a lot about React because it explained the concepts well. One thing that was disappointing was that when explaining A->C, there were a few parts where it would have been much easier to understand if the course had explained B in the middle, like A->B->C. Many other people also left questions about these in the Q&A section of the lecture. If only these parts could be improved, I think this would have been a perfect course.

        • inchestry님의 프로필 이미지
          inchestry

          受講レビュー 5

          平均評価 5.0

          5

          64% 受講後に作成

          I haven't watched them all yet, but from my perspective of having purchased several React lectures, this lecture is the best. Other lectures must have been created by experienced JavaScript developers. However, there is a problem. Experienced people give lectures while already having an image of how the code works in their heads. So, they give lectures while writing code like Uncle Bob. However, for beginners, it is frustrating to just follow the code without being able to visualize what is happening at all, and it is difficult to even grasp the concepts. In this lecture, before the code, the concept is explained by first visualizing what happens when a certain function is used, and then the code is shown, so I also get an image of the code working in my head while looking at the code. Most instructors are developers, not educators/education majors, so I feel that there are too many lectures being mass-produced without a standard for this effective teaching method, but this lecture is really the best. I have already purchased TypeScript before I have even watched the entire lecture. The quality is good, but the lecture fee is too much. I even bought the book so that I could have another cup of coffee. I don't often use the expression 'thank you' for lectures that I pay for with my own money, because it feels strange. Nevertheless, this lecture is 'very grateful'. If possible, I think it would be good if you also give lectures on Express.js, Next.js, and TDD!

          • parkhj9291187님의 프로필 이미지
            parkhj9291187

            受講レビュー 2

            平均評価 5.0

            5

            100% 受講後に作成

            This price is ridiculous for such an explanatory power and content. I think I could have paid double, but it's really a lecture like "The boss is crazy".. It's hard to say that I've digested it all yet, but I'll try to master it through repeated study. Thank you for making such a great lecture :) !!

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

            ¥29

            23%

            ¥5,689

            winterloodの他の講座

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

            似ている講座

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