inflearn logo

Bite-Sized React (React.js): From Basics to Practice

Master JavaScript and React all at once with this course, covering everything from core concepts to unique projects. An all-in-one, 18-hour course designed for short learning and long application!

(4.9) 1,374 reviews

14,537 learners

Level Basic

Course period Unlimited

JavaScript
JavaScript
React
React
Node.js
Node.js
JavaScript
JavaScript
React
React
Node.js
Node.js

Reviews from Early Learners

Reviews from Early Learners

4.9

5.0

23

88% enrolled

I actually applied for the course before the renewal and completed it once, but after that, I stopped studying for about 1-2 years due to various circumstances, and then I came back because I felt the need to learn React again. When I came back, it was completely renewed this year! I remember that it was well-organized overall before, but the renewed version is easier to understand, and I feel like it has been supplemented in more detail. Usually, in cases of overall renewal like this, I only saw cases where it was opened as a new lecture, but I am grateful that existing students can continue to watch the renewed version. I can feel your sincerity towards the lecture and students, so I am moved by each episode. Only the final distribution stage is left, but I will watch the remaining 3 lectures well, review them diligently, and make them my own. Thank you so much.

5.0

지지지지지

100% enrolled

I really wanted to finish the React course before the end of this year... I'm so happy to have achieved my personal goal!!! I strongly recommend this course to anyone who is still hesitating to buy it (I doubt there are any..?) I was a beginner who was interested in the front-end but didn't know what to do when I was about to graduate from college, so I quickly stopped the course because it was too difficult. Then, I realized that it would be a bit too much to take a React course without knowing JavaScript, so I took a Vanilla JavaScript course from my neighbor, Hyobin, bought a JS book separately, and took this course again with a basic understanding... I really had a great experience where I could understand everything so well!!!!! (Of course, it would be fine to just take Jeong-Hwan's class, but I wanted to dig deeper into the basics...) I wondered if the day would ever come when I would understand the code... But that day has come for me too... Of course, I'm still a super beginner, I've forgotten some of the content from the beginning of the course, and there are definitely parts that are difficult to code on my own, but by taking this React course, I got a feel for overall web development and I don't regret the time I spent taking this course. Above all, the clean visual materials + code + the diction that keeps you on your toes... You just have to buy this course. (Not an advertisement ;;) Jeong-Hwan, please keep teaching for a long time... Thank you! I'll go to the next TypeScript course now!!! Jeong-Hwan's class is one that you can trust and listen to.

5.0

서지현

100% enrolled

I really enjoyed the class. It's the first time in my life that I've taken a tough online class. 😊😊 The biggest reason I was able to stick with it was because the quality of the lecture was so good. The instructor's diction is also very good, and above all, the lecture content is very rich. It's made up of really necessary content, and it's explained in a friendly way, so it was easy to follow and practice. After following the basic CRUD two sets (Todo, emotion diary), I felt that I had a good grasp of the concepts and that it would be of great help in the future in practical work. The after-service lecture on the React Router V7 version upgrade after the lecture was also good. If I encountered an error, I could search the community and find reference articles written by other people who had made mistakes like me, such as typos, which were helpful. I think that explaining things in such an easy and understandable way is a great quality for an instructor. Looking at the way you've created such a solid lecture, I think you must be a great developer as well~. Please make more lectures. I'm a backend developer, and I had some time left at the end of the year, so I decided to study React, and I'm proud of myself for choosing this lecture. 😊😊 I wish you the best of luck, instructor~ Stay healthy and please make good lectures in 2025 as well~.

What you will gain after the course

  • [JavaScript] Fast-paced and never boring! Acquire solid core knowledge of JavaScript

  • [Node.js] Mastering core concepts of Node.js for running JavaScript

  • [React.js] Mastering Core Concepts and Usage of React.js

  • [CS Knowledge] CS knowledge beyond the frontend domain, such as network and cloud.

  • [Project] Real-world project deployed via Vercel - Emotion Diary

  • [Community] Join the exclusive community for 2,000+ students

Click the image to go to the roadmap.
> Roadmap Link: https://link.onebitefe.com/r/3wokpi

Series Lecture Links
> React from the Ground Up:https://inf.run/v3XAj
>
TypeScript from the Ground Up: https://inf.run/FpLm4
Next.js from the Ground Up: https://inf.run/v3XAj


Even in the AI era, React is still the key, and you can master it with just one course.
I'll help you learn it in bite-sized pieces. 🔥

Thanks to the love from so many students, I was able to publish this course as a book with Insight Publishing.
Once again, I would like to express my sincere gratitude to all the students and everyone who showed interest.

 


Renewal Version 
React in One Bite
Towards the kindest and easiest React course in the world

Real skills that work even in the AI era,
From JavaScript basics to practical React.js projects

React.js is a JavaScript library that runs in a Node.js environment.
Therefore, React.js is ultimately just a tool that helps you utilize JavaScript more effectively.

Even in an era where AI writes code for you, this remains unchanged.
If you don't properly understand JavaScript and Node.js, you cannot utilize React.js to its full potential.

This course covers everything from JavaScript basics to Node.js and then React.js.
But learning it the ordinary way is no fun! You will learn React.js through a total of three projects.
Through this process, you will transform into a frontend developer with a solid foundation,
capable of reading and fixing AI-generated code without hesitation.

18 hours of content
A total of 3 React.js projects

This course goes beyond simple usage instructions that an AI might provide.
It covers various CS knowledge surrounding React.js, and through a total of three projects
—a Counter App, a Todo List, and an Emotion Diary—you will also develop your programming thinking skills.


Curriculum

📌 Section 1–2. JavaScript Basics and Advanced Concepts

Before learning React.js, we will cover the basic and advanced concepts of JavaScript.
From basic concepts like data types and operators to
advanced topics such as array methods and asynchronous operations.

Even if you already know JavaScript, it is a great way to review and refresh your knowledge.

 

📌 Section 3. Node.js

React.js is a technology that operates based on Node.js. Therefore, you cannot understand React.js without knowing Node.js.
In Section 3, we will explore what Node.js is, why it was created, and what features it has through hands-on practice.

 

📌 Section 4. Introduction to React.js

We will explore what React.js is and what makes it distinct from other technologies, taking a detailed look at how it overcomes the limitations of existing technologies. Through this process, we will gain a deeper understanding of React.js.

 

📌 Section 5. Introduction to React.js

We will create a new React App and explore basic features such as React's Component, State, and Props.
We will try out all the basic features through hands-on practice and achieve a perfect visual understanding with the help of diagrams.

 

⛳️ Section 6. React.js Project 1. Counter App

We will build our first React project, the "Counter App," ourselves.
It is a simple project, but a great way to get a glimpse into the operating principles and design philosophy of React.js.

 

📌 Section 7. Lifecycle

Just as every human being is born and passes through infancy, adolescence, youth, and old age to reach their twilight years, every React component is also born, changed, and disappears. This life cycle of a component is called its "lifecycle."

Once you understand and can control the lifecycle of a component, you will be able to perform desired actions at the desired timing. Therefore, in Section 7, we will explore the lifecycle and learn how to control it through hands-on practice.

 

⛳️ Section 8. React.js Project 2. Todo List

We will build the second React project, the "Todo List App," ourselves.
While implementing this project, we will explore various ways to handle array-type data in React, such as data CRUD (Create, Read, Update, Delete) and
search functionality.

 

📌 Section 9. useReducer - Separating State Management Logic

Separating code based on roles is always a virtue in software development.
We will explore useReducer, which helps separate complex state management code,
and practice by applying it directly to the Todo List project.

 

📌 Section 10. Optimization

What if there are unnecessary operations in our project? We should boldly remove them!
We will explore various optimization techniques for React Apps to eliminate wasted operations
and practice by applying them directly to the Todo List project.

 

📌 Section 11. Context

We will explore Context, which provides data to various components more concisely and cleanly,
and practice by applying it directly to the Todo List project.

 

⛳️ Section 12. React.js Project 3. Emotion Diary

We will create the final project, the Emotion Diary, by applying all the concepts learned so far.
Additionally, we will use the browser's database and deploy the project so that users can access it.
Demo Link: https://emotion-diary.winterlood.com/

 

📌 Section 13. Closing

The lecture ends, but our learning does not.
Let's talk about what direction we should take moving forward.


4 Principles for the
World's Kindest React Course

📣 Principle 1. Must be easy and kind, explaining visually

No matter how complex or difficult the content may be!
I have made constant efforts to explain it kindly and easily with visual aids.
Since all the images were created by me, you are welcome to capture and use them for your study blog posts. 😃

 

📣 Principle 2. Pronounce clearly so that everything can be heard even when played at double speed

If you are listening again for review or are in a hurry, try listening at a faster speed!
I took extra care to ensure the pronunciation remains clear even at up to 2x speed. 😎
(Check out the video below playing at 1.5x speed!)

📣 Principle 3. Save code so it is easy to find

It would be a shame to store the practice codes you worked so hard on just anywhere, wouldn't it?
I took extra care to organize and store the code by section so that you can refer back to it at any time.
Code Repository Link: https://github.com/winterlood/onebite-react-v2

📣 Principle 4. Communicate Constantly

Students gather in an exclusive community to share knowledge and news, growing together.

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

Frequently Asked Questions Q&A 💬

Q. Who is the target audience for this course?

This course is optimized for those who have an understanding of HTML and CSS.
However, since explanations are provided throughout the lectures, you don't need to have a perfect mastery of the content!

Q. I'm just about to start. I don't know much about JavaScript or Node.js, is it okay for me to take this course?

Yes, you are more than welcome! 🙋‍♂️
This course covers the essential JavaScript and Node.js knowledge required to learn React.
Therefore, with this single course, you can first learn the necessary foundational knowledge and then move on to learning React itself.

Q. To what level of depth does this course cover?

We cover everything from the reasons why React was created to its basic usage and performance optimization techniques for actual production development.
Additionally, it contains all the knowledge needed to develop a web project from start to finish, including actual deployment using Vercel and finishing with Open Graph settings.


Portfolio and Personal Videos

 

Recommended for
these people

Who is this course right for?

  • Beginners new to React

  • People who don't know much about JavaScript or Node.js but want to learn React.js!

  • People who want to study with many other students through initiatives like course completion challenges.

  • People who want to create a result they can be proud of upon completing the course.

  • Anyone who has experience writing HTML & CSS at least once (you don't need to be an expert!)

Need to know before starting?

  • 👋 Very basic knowledge of HTML and CSS

Hello
This is winterlood

38,230

Learners

2,818

Reviews

1,635

Answers

4.9

Rating

19

Courses

Shall we take a bite-sized look at Web Front-end?!

Hello 🙇‍♂

I am someone who believes there is a way to explain anything easily and in an entertaining way, and

I am someone who wants to create the warmest developer community in the world.

 

More

Curriculum

All

98 lectures ∙ (18hr 33min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

1,374 reviews

4.9

1,374 reviews

  • sunjune18284435님의 프로필 이미지
    sunjune18284435

    Reviews 28

    Average Rating 4.7

    5

    100% enrolled

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

    • inchestry님의 프로필 이미지
      inchestry

      Reviews 5

      Average Rating 5.0

      5

      64% enrolled

      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

        Reviews 2

        Average Rating 5.0

        5

        100% enrolled

        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 :) !!

        • samgangjumak님의 프로필 이미지
          samgangjumak

          Reviews 8

          Average Rating 4.9

          5

          76% enrolled

          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.

          • hm52073678님의 프로필 이미지
            hm52073678

            Reviews 3

            Average Rating 5.0

            5

            32% enrolled

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

            winterlood's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!

            $37.40