inflearn logo
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,292개

강의소개.상단개요.수강생.short

난이도 초급

수강기한 무제한

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% 수강 후 작성

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% 수강 후 작성

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% 수강 후 작성

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

강의상세_배울수있는것_타이틀

  • [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

> Apply for One Bite Challenge 8th Cohort (~until Feb 22nd) : https://link.onebitefe.com/r/btok4i


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

Series Lecture Links
> One Bite React:https://inf.run/v3XAj
>
One Bite TypeScript: https://inf.run/FpLm4
One Bite Next.js: 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 take it in bite-sized pieces. 🔥

Thanks to the love from many students, I was able to publish this lecture 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 One Bite at a Time
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.

This remains true even in an era where AI writes code for you.
If you don't properly understand JavaScript and Node.js, you won't be able to fully utilize React.js.

This course covers everything from JavaScript basics to Node.js and React.js.
But just learning it would be boring! You will learn React.js through a total of three projects.
Through this process, you will be reborn as 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 3 projects
—a Counter App, a Todo List, and an Emotion Diary—you will also develop your programming thinking skills.


Curriculum Structure

📌 Section 1~2. JavaScript Basics and Advanced

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, we will look at them together.

Even if you already know JavaScript, it is a great way to review the material.

 

📌 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 how it differs 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

Create a new React App and explore basic features such as React's Components, State, and Props.
Try out all the basic features through hands-on practice and gain 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 goes through infancy, adolescence, youth, and old age before reaching their twilight years, every React component is also born, changed, and eventually disappears. This life cycle of a component is referred to as its "Lifecycle."

Once you understand and can control the lifecycle of a component, you will be able to perform desired actions at specific timings. 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

Build your second React project, a "Todo List App," from scratch.
Through implementing this project, you'll explore various methods of handling array-type data in React,
including data CRUD operations (Create, Read, Update, Delete) and search functionality.

 

📌 Section 9. useReducer - Separating State Management Logic

Separating code according to roles is always a virtue in software development.
We will look into 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 computations in our project? We should boldly remove them!
We will explore various optimization techniques for React apps to eliminate wasted computations
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 build the final project, an 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 Friendliest React Course

📣 Principle 1. Must be easy, kind, and explained 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 if you are busy, 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 proceed to master React.

Q. To what level will the material be covered in class?

We cover everything from the reasons behind the creation of React to 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

 

강의소개.콘텐츠.추천문구

학습 대상은 누구일까요?

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

선수 지식, 필요할까요?

  • 👋 Very basic knowledge of HTML and CSS

강의소개.지공자소개

37,695

수강생

2,648

수강평

1,622

답변

4.9

강의 평점

19

강의_other

Shall we take a bite-sized piece of Web Front-end?!

Hello 🙇‍♂

I am someone who believes there is a way to explain anything easily and enjoyably,

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

 

더보기

커리큘럼

전체

98개 ∙ (강의상세_런타임_시간 강의상세_런타임_분)

해당 강의에서 제공: [object Object]
강의 게시일: 
마지막 업데이트일: 

수강평

전체

1,292개

4.9

1,292개의 수강평

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

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

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

        • hm52073678님의 프로필 이미지
          hm52073678

          수강평 3

          평균 평점 5.0

          5

          32% 수강 후 작성

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

          • 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!

            winterlood님의 다른 강의

            지식공유자님의 다른 강의를 만나보세요!

            비슷한 강의

            같은 분야의 다른 강의를 만나보세요!

            강의상세.할인문구

            $33,880.00

            30%

            $37.40