Bite-Sized React (React.js): From the Basics to Real-World Practice
Master JavaScript and React all at once with this course, covering everything from the fundamentals to unique projects.
Learn briefly, apply extensively—an 18-hour All-in-one course!
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] Learn solid JavaScript core knowledge quickly, without getting bored
[Node.js] Learn the core concepts of Node.js for running JavaScript
[React.js] Learn the core concepts and usage of React.js
[CS Knowledge] Knowledge of computer science topics such as networking and cloud computing beyond the frontend domain
[Project] A Hands-On Project Deployed via Vercel - Emotion Diary
[Community] Join the exclusive community for 2,000+ students
The entire ONEBITE series is on sale
For those who unfortunately couldn’t participate
Encore 35% OFF!
Last chance for those who missed it · Automatically ends when the period expires
Even in the age of AI, you can master React once and for all with a single course. I’ll help you digest it in bite-sized pieces. 🔥
Thanks to the love and support from so many students, we were able to publish the course as a book together with Insight Publishing. Once again, we sincerely thank all the students and everyone who showed interest.
Renewed version React in Bite-Sized Pieces Toward the kindest and easiest React course in the world
Real skills that remain valuable in the AI era, from JavaScript fundamentals to hands-on React.js projects
React.js is a JavaScript library that runs in the Node.js environment. Therefore, React.js is ultimately nothing more than a tool that helps you make better use of JavaScript.
This remains unchanged even in an era when AI writes code for you. If you don’t properly understand JavaScript and Node.js, you can’t make full use of React.js.
This course teaches JavaScript from the basics, followed by Node.js and React.js. But simply learning them would be boring, right? You’ll learn React.js through a total of three projects. Throughout this process, you’ll grow into a frontend developer with a solid foundation who can confidently read and fix even AI-generated code.
18 hours of content A total of 3 React.js projects
This course goes beyond the basic usage explained by AI. It also covers various computer science concepts related to React.js, and through three projects in total —a counter app, a to-do list, and a mood diary—you can also develop your computational thinking skills.
Course Structure
📌 Sections 1–2. JavaScript Fundamentals and Advanced Concepts
Before learning React.js, we’ll explore the basic and advanced concepts of JavaScript. We’ll cover everything from fundamental concepts such as data types and operators, to advanced topics such as array methods and asynchronous operations. Even if you already know JavaScript, this is a great opportunity to review it.
📌 Section 3. Node.js
React.js is a technology that runs on Node.js. Therefore, you can’t understand React.js without knowing Node.js. In Section 3, we’ll explore what Node.js is, why it was created, and what features it offers, along with hands-on practice.
📌 Section 4. Introduction to React.js
We’ll learn what React.js is, how it differs from other technologies, and how it addresses the limitations of existing technologies. Through this process, we’ll gain a deeper understanding of React.js.
📌 Section 5. Introduction to React.js
Create a new React App and explore React’s basic features, including Components, State, and Props. Use all the basic features through hands-on practice and gain a complete visual understanding with illustrations.
⛳️ Section 6. React.js Project 1. Counter App
Build your first React project, "Counter App," yourself. Although simple, it is a great project for gaining insight into how React.js works and its design philosophy.
📌 Section 7. Lifecycle
Just as every human is born and reaches old age after passing through infancy, adolescence, adulthood, and their later years, every React component is also born, changes, and disappears. This life cycle of a component is referred to as its lifecycle.
Once you understand and can control a component's lifecycle, you can make it perform the desired actions at the desired times. Therefore, in Section 7, we will examine the lifecycle and learn how to control it through hands-on practice.
⛳️ Section 8. React.js Project 2. To-Do List
Build the second React project, "To-Do List App," yourself. As you implement this project, you will explore various ways to handle array data in React, including CRUD (create, read, update, and delete) and search functionality.
📌 Section 9. useReducer - Separating State Management Logic
Separating code based on its role is always a virtue in software development. Learn about useReducer, which helps you separate complex state management logic, and practice by applying it directly to a to-do list project.
📌 Section 10. Optimization
What if our project contains unnecessary computations? We should remove them without hesitation! We will explore various optimization techniques for React apps that eliminate wasted computations and practice by applying them directly to the todo list project.
📌 Section 11. Context
We will explore Context, which lets you provide data to various components more concisely and cleanly, and practice by applying it directly to the to-do list project.
⛳️ Section 12. React.js Project 3. Emotion Diary
Put all the concepts you have learned so far into practice by building the final project, an emotion diary, yourself. Additionally, you will use the browser's database and deploy the project so users can access it. Demo link: https://emotion-diary.winterlood.com/
📌 Section 13. Wrapping Up
The course may be over, but our learning is not. Let's discuss what direction we should take moving forward.
4 Principles for the Most Friendly React Course in the World
📣 Principle 1. Always explain things simply and kindly and visually
No matter how complex or difficult the content may be! I’ve worked tirelessly to explain it clearly and easily with visual materials. Since all the images were created by me, feel free to capture them and use them in your study blog posts. 😃
📣 Principle 2. Pronounce everything clearly enough to be heard even when played at increased speed
If you’re listening again for review or are short on time, try listening at an increased speed! I took special care to ensure that the pronunciation remains clear at up to 2x speed 😎 (Try listening to the video below, which plays at 1.5x speed!)
📣 Principle 3. Store your code so it’s easy to find
It would be a shame to store the practice code you worked hard on haphazardly, wouldn’t it? We made sure to organize and store the code by section so you can revisit it anytime. Code repository link:https://github.com/winterlood/onebite-react-v2
📣 Principle 4. Communicate constantly
We come together in a community exclusively for students, sharing knowledge and updates with one another as we grow.
This course is optimized for those who understand HTML and CSS. However, explanations are provided throughout the course, so you don't need to have mastered the material completely!
Q. I’m just getting started. I don’t know much about JavaScript or Node.js—is it okay for me to take this course?
Yes, you’re welcome! 🙋♂️ This course covers the JavaScript and Node.js knowledge you need to learn React. So, with this one course, you can first learn the foundational knowledge required for React and then learn React itself.
Q. What level of proficiency does the course cover?
We cover everything from why React was created and its basic usage to performance optimization techniques for real-world production development. We also deploy an actual project using Vercel and wrap up by configuring Open Graph, so you gain all the knowledge needed to develop a web project from start to finish.
Portfolio and personal videos
Recommended for these people
Who is this course right for?
A beginner encountering React for the first time
Someone who doesn’t know much about JavaScript or Node.js but wants to learn React.js!
People who want to learn together with many students through challenges such as completing all the lectures
People who want to create something worth showing off upon completing the course
Anyone who has experience writing HTML & CSS, even just once (you don’t need to be good at it!)
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... 😭😭
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 :) !!
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.
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!
