Inflearn brand logo image
Inflearn brand logo image

N

Inflearn brand logo image
BEST
Programming

/

Front-end

(2025 Latest Update) React: The Last Step to Becoming a Front-End Developer

For those who aspire to become front-end developers, this is an essential course to learn React and even create a portfolio project.

(4.6) 25 reviews

346 learners

  • codingnuna10082706
React
Redux
Web API

Reviews from Early Learners

What you will learn!

  • React (router, lifecycle, state ...)

  • Redux (Redux middleware)

  • Zustand state management

  • Tanstack Query (Asynchronous Call Management)

  • React Router

New update for 2025!😄
A fun React lecture with no time to get bored!

Welcome to my lecture!

Hello, I am the sister who teaches coding !

Finally, the React lecture has been released, following the JavaScript lecture.
This lecture is for those who are preparing to become a front-end developer👨‍💻 or those who want to learn React, the hottest🔥 framework .

Many companies use React. React has become a prerequisite for front-end developers. Since it is an in-depth course that goes beyond JavaScript, the content is definitely not easy.
But if you just bring your will and effort, I will guide you through the rest😉

Wait! This course requires basic understanding of JavaScript .
If you don't know JavaScript, check out the <JavaScript: All-in-one from Basics to Practice> course!

What are you learning? ✨

React

React is the most used language in front-end development!

Essential React concepts to become a front-end developer
Learn with lots of examples.

State management library

Learn both Zustand and Redux , the most widely used state management libraries in the industry!

(Is this the only place where you can learn both?)

Tanstack Query

Learn how to handle asynchronous calls efficiently with Tanstack Query, the most popular library for calling APIs.

(The trendiest combination when used with Zustand!)

React library

We will introduce you to all the various React libraries that are widely used when developing React!

And even how to choose and use it yourself!

The ability to solve things on one's own

Rather than simply following the code,

Develop your own abilities through a variety of tasks.

5 projects

Even if you only learn one thing, it will be fun and practical!

It contains the core concepts of React, such as Netflix, shopping malls, and rock-paper-scissors games.
We are working on 5 projects.

Learn by making it yourself
5 key projects!

First project: Rock Paper Scissors game

Second project: Creating a weather app

Third Project: Creating a Shopping Mall Website

Fourth Project: Creating a Contact Page

Final Project: Creating Netflix

I recommend this to these people!

  • People who hate boring coding lectures : No to difficult explanations that only developers can understand! People who are looking for lectures that can be understood even if they don't know anything
  • For those who want to become a front-end developer : Those who know HTML/CSS JavaScript but don't know what it takes to become a front-end developer
  • People who want to learn while making : People who enjoy learning by making things themselves through various problems and assignments that can be done in real life, rather than just listening to lectures.

After the lecture,
You can expect something like this.

You can create your own project using React.

State management + asynchronous call management with Zustand + TanstackQuery, the most trendy combination these days.

Improve your practical development skills through 5 projects!

Knowledge sharer
Sister who teaches coding ✒️

  • 🚀 Based on my experience teaching over 100 liberal arts students while working as an overseas boot camp instructor for 2 years, I will impart knowledge to you using the optimal teaching method.
  • 🧐 I worked as a web developer for 6 years and graduated with honors from Dankook University's Department of Computer Engineering.
  • ✨ I run a YouTube channel called Coding Sister, and I share free classes and information for those who want to learn coding.

Reviews with an average rating of 5.0★ prove it.

I am a beginner developer who has been working for 3 months. I am listening to the lectures well. I will work hard to reach intermediate and advanced levels.

It's so much fun, it's amazing how boring classes can be so much fun. When I see a beginner, I can understand it right away. 😊😊

I was able to study quickly and easily until the end :)

I'm a junior developer and I had a lot of fun completing the course.

JavaScript: This is a review left for the all-in-one course from basics to practice 💌

Expected Questions Q&A 💬

Q. I had a question while watching the lecture!

Feel free to come and ask questions anytime in the Slack channel my sister runs!

Q. Is 1:1 personal coaching included in the tuition fee?

A. The course fee does not include the price of personal coaching 😣 However, if you have any questions during the course, please feel free to use the Slack community! Your colleagues or this older sister will be happy to answer! 👨🏿‍🤝‍👨🏿

Recommended for
these people

Who is this course right for?

  • Someone with a basic understanding of JavaScript

  • Someone who wants to be a front-end developer

  • Someone who wants to create an awesome portfolio

Need to know before starting?

  • JavaScript

Hello
This is

1,034

Learners

90

Reviews

79

Answers

4.8

Rating

2

Courses

Curriculum

All

119 lectures ∙ (17hr 46min)

Published: 
Last updated: 

Reviews

All

25 reviews

4.6

25 reviews

  • 105k님의 프로필 이미지
    105k

    Reviews 24

    ∙

    Average Rating 4.9

    5

    100% enrolled

    数百万ウォンの3ヶ月のブートキャンプよりもはるかに良く、基本的にしっかりと握ってください。 そしてReduxが理解できなかったのですが、ここで概念すべてを捉えました。 \(❁´◡`❁)/ 残念なことは特にありませんが、本当にあえて〜〜 1. styled-componentsではなくCSS 2. reduxのアップデートと推奨事項（本当の問題はありません。 3. [サッと初心者基準] すべて教えてくれる講義ではない → 残りの機能本人が作らなければならない（ちょっと多い） → 返信 旗ハブ 参考できない（特に、初心者なら！ 私は私の方法で（関数型バージョン＆推奨ライブラリを使用せず、元々使用していたライブラリを使用＆モバイルレスポンス＆プライベートポートフォリオ）機能をすべて作成しましたが、ヘディングされる方ならオススメ..! ✨ただし、このような場合は別の講義を見てください。 （リアクトサット初心者基準）✨ 1. 私は最初から一緒に従いながらやろうとしましたが？ 2. 私は答えを見ながら分析しなければわかりませんか？

    • codingnuna10082706
      Instructor

      こんにちは最後の課題を除いては各プロジェクトごとに完全な完成プロジェクトの旗ハブリンクがあり、コード参照可能です！

  • yhu53258333님의 프로필 이미지
    yhu53258333

    Reviews 2

    ∙

    Average Rating 5.0

    5

    100% enrolled

    レアルはあなたが好きです~~

    • hght123007님의 프로필 이미지
      hght123007

      Reviews 1

      ∙

      Average Rating 4.0

      4

      100% enrolled

      私はRedoxの講義を見ていますが、私は現在やっているとは少し違うと思います...講義に出てきたようにしました

      • codingnuna10082706
        Instructor

        こんにちは！ redux toolkit講義も一緒に更新しました！

    • e89cokr5994님의 프로필 이미지
      e89cokr5994

      Reviews 13

      ∙

      Average Rating 5.0

      5

      57% enrolled

      リアクトの概念をつかみます。この講義を聞いて、いくらでも応用が可能だと思います。 クラスコンポーネントと関数型コンポーネントの違いとライフスタイルを正確に知らせます。 ルータ、Reduxを理解するのに多くの助けになります。 良い講義ありがとうございます。

      • kdjsanh02173667님의 프로필 이미지
        kdjsanh02173667

        Reviews 3

        ∙

        Average Rating 5.0

        5

        30% enrolled

        簡単に教えてくれてとても良いです〜

        $121.00

        codingnuna10082706's other courses

        Check out other courses by the instructor!

        JavaScript：基礎から本番までのオールインワン강의 썸네일

        JavaScript：基礎から本番までのオールインワン

        codingnuna10082706

        JavaScriptの基礎講義、応用講義、ポートフォリオ専用講義を別々に探すのではなく、講義ひとつでJavaScriptの基礎から現業が書く様々な応用技術、ポートフォリオまですべて終わりたい方のための講義です。

        초급

        초급

        JavaScript, HTML/CSS

        JavaScript：基礎から本番までのオールインワン강의 썸네일

        JavaScript：基礎から本番までのオールインワン

        codingnuna10082706

        Similar courses

        Explore other courses in the same field!

        ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）강의 썸네일

        ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）

        aftercamp

        Reactレンダリングの原則、最適化を習得し、実践的な活用とインタビューの準備をしましょう！

        중급이상

        중급이상

        React, react-usememo, Tech Interview

        ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）강의 썸네일

        ブートキャンプで教えてくれないもの（リアクトレンダリング最適化編）

        aftercamp

        Redux vs MobX（両方を学ぼう！）강의 썸네일

        Redux vs MobX（両方を学ぼう！）

        zerocho

        RedoxとMob Xを選ぶのを心配していますか？ 一度、両方を学んでから悩みましょう！

        초급

        초급

        Redux, MobX

        Redux vs MobX（両方を学ぼう！）강의 썸네일

        Redux vs MobX（両方を学ぼう！）

        zerocho

        フロントエンドマスタークラス강의 썸네일

        フロントエンドマスタークラス

        hoonyhan

        ウェブ開発最低1年以上の学生及び実務者のための上級フロントエンド講座です。最も良い対象は現場で2〜3年以上の経験を積み、実力の停滞期または大企業で考慮すべき製品構造について学びたい方のために作られました。

        중급이상

        중급이상

        JavaScript, React, Functional Programming

        フロントエンドマスタークラス강의 썸네일

        フロントエンドマスタークラス

        hoonyhan

        Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク강의 썸네일

        Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

        codecamp

        Web開発を活用して、AndroidとIOSでサービス可能なモバイルアプリ開発ができるようにする講座です。

        초급

        초급

        React, Next.js, expo

        Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク강의 썸네일

        Web開発者の年収を上げるハイブリッドアプリ with Expoフレームワーク

        codecamp

        [リニューアル] ReactでNodeBird SNSを作成する강의 썸네일

        [リニューアル] ReactでNodeBird SNSを作成する

        zerocho

        リアクト＆amp;ネクスト＆amp;リダックス＆amp;リダックスサーガ＆amp; ExpressスタックでTwitterに似たSNSサービスを作成します。 最後に、検索エンジンの最適化後にAWSにデプロイします。

        중급이상

        중급이상

        React, Redux, Node.js

        [リニューアル] ReactでNodeBird SNSを作成する강의 썸네일

        [リニューアル] ReactでNodeBird SNSを作成する

        zerocho

        iOS/Androidアプリ開発のための本番 React Native - Basic강의 썸네일

        iOS/Androidアプリ開発のための本番 React Native - Basic

        wintho

        Mobile App Front-End開発のためのReact Nativeの基礎知識の習得を目指しています。進入障壁の低い言語/APIの活用により、非専門家も簡単にNative Mobile Appを開発できるように作られた講義です。

        초급

        초급

        React Native, React, ES6

        iOS/Androidアプリ開発のための本番 React Native - Basic강의 썸네일

        iOS/Androidアプリ開発のための本番 React Native - Basic

        wintho

        フルスタックリアクトトイプロジェクト - REST, GraphQL (for FE開発者)강의 썸네일

        フルスタックリアクトトイプロジェクト - REST, GraphQL (for FE開発者)

        jaenam

        ReactベースのシンプルなSNSサービスを作成しながら、REST APIとGraphQLを練習します。 フロントエンド開発のためのバックエンド環境を簡単かつ簡単にする方法を紹介します。

        초급

        초급

        REST API, GraphQL, React

        フルスタックリアクトトイプロジェクト - REST, GraphQL (for FE開発者)강의 썸네일

        フルスタックリアクトトイプロジェクト - REST, GraphQL (for FE開発者)

        jaenam

        フォローして学ぶリアクト、ファイアベース - チャットアプリケーションを作る[2023.12リニューアル]강의 썸네일

        フォローして学ぶリアクト、ファイアベース - チャットアプリケーションを作る[2023.12リニューアル]

        johnahn

        この講義を通じてリアクトとファイアベースを利用してチャットアプリケーションを作成することができます。

        초급

        초급

        React, Firebase, Web Application

        フォローして学ぶリアクト、ファイアベース - チャットアプリケーションを作る[2023.12リニューアル]강의 썸네일

        フォローして学ぶリアクト、ファイアベース - チャットアプリケーションを作る[2023.12リニューアル]

        johnahn

        これが本当のバイブコーディング - 開発者のためのバイブコーディング編강의 썸네일

        これが本当のバイブコーディング - 開発者のためのバイブコーディング編

        codecamp

        No Code, Only Prompt 10分でバイブコーディングで作れる単純なサービスはもう捨てましょう！ 企画とデザイン通りに実サービスレベルの高度化されたサービスをカーソルAI NCOPで作る 「本物の」実務適用バイブコーディングを学ぶことができます。

        입문

        입문

        React, Next.js, cursor

        これが本当のバイブコーディング - 開発者のためのバイブコーディング編강의 썸네일

        これが本当のバイブコーディング - 開発者のためのバイブコーディング編

        codecamp

        生産性を向上させるSpring BootベースのAPIテンプレートプロジェクトの実装강의 썸네일

        生産性を向上させるSpring BootベースのAPIテンプレートプロジェクトの実装

        bgh79465479

        プロジェクトを開始するための全体的な設定を実装し、テンプレートプロジェクトとして登録して生産性を最大化します。

        초급

        초급

        Spring Boot, JPA, Web API

        生産性を向上させるSpring BootベースのAPIテンプレートプロジェクトの実装강의 썸네일

        生産性を向上させるSpring BootベースのAPIテンプレートプロジェクトの実装

        bgh79465479

        C# Xamarin Forms ジャマリン フォームズ API 講義 + 簡単な API を作成する강의 썸네일

        C# Xamarin Forms ジャマリン フォームズ API 講義 + 簡単な API を作成する

        nodeep777

        ザマリン(Xamarin)でSQLのデータにどのようにアクセスして修正、削除、追加、照会できるかを説明する講義です。 WEB APIも一緒に作成しながら、APIをどのように活用するかを知ることができます。

        초급

        초급

        Web API, Xamarin

        C# Xamarin Forms ジャマリン フォームズ API 講義 + 簡単な API を作成する강의 썸네일

        C# Xamarin Forms ジャマリン フォームズ API 講義 + 簡単な API を作成する

        nodeep777

        アプリ開発入門のためのReact Native完璧基礎クラス강의 썸네일

        アプリ開発入門のためのReact Native完璧基礎クラス

        junghw

        アプリ開発をしたいけど、どこから始めたらいいか途方に暮れている方々のために準備しました。 この講座で、その悩み、もう終わりにしましょう！

        입문

        입문

        JavaScript, React, Node.js

        アプリ開発入門のためのReact Native完璧基礎クラス강의 썸네일

        アプリ開発入門のためのReact Native完璧基礎クラス

        junghw

        [JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)강의 썸네일

        [JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)

        dakgangjung123

        React, Electron, Zustandを活用しタイマーアプリを直接制作、クロスプラットフォーム（Windows、macOS、Linux）へデプロイまで行う実践講義です。 慣れ親しんだReactウェブ開発を皮切りに、Zustandを通じたグローバル状態管理と最終的なGUIデプロイまで、デスクトップアプリ開発の全体的な流れを学ぶことができます！

        초급

        초급

        React, Electron, GUI

        [JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)강의 썸네일

        [JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)

        dakgangjung123

        TypeScript Korea：React with TypeScriptセミナー강의 썸네일

        TypeScript Korea：React with TypeScriptセミナー

        woongjae

        タイプスクリプトとリアクト関連講座です。

        중급이상

        중급이상

        React, TypeScript

        TypeScript Korea：React with TypeScriptセミナー강의 썸네일

        TypeScript Korea：React with TypeScriptセミナー

        woongjae

        Next.js つけ麺フルコース (英語音声 & 韓国語字幕)강의 썸네일

        Next.js つけ麺フルコース (英語音声 & 韓国語字幕)

        ludgi

        Next.jsフルコースをディップして食べよう！ GraphQL、Redis、RabbitMQ、Prisma、TailwindCSS、Docker Compose、Cypress、Prometheus、Grafanaなど、最新技術で実践プロジェクトを完成させ、App RouterとPage Routerの両方を経験できます。

        중급이상

        중급이상

        Next.js, React, GraphQL

        Next.js つけ麺フルコース (英語音声 & 韓国語字幕)강의 썸네일

        Next.js つけ麺フルコース (英語音声 & 韓国語字幕)

        ludgi