강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

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

From concepts to unique projects, master JavaScript and React all at once with this course. Short learning, long application - a 17-hour All-in-one course!

(4.9) 1,185 reviews

13,805 learners

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

Reviews from Early Learners

What you will gain after the course

  • # Developing an Emotion Diary Project for Real Deployment

  • JavaScript, Node.js, and How the Web Works All-in-One

  • Clean React Code Writing and Performance Optimization Techniques

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

Series Course Links
> React in Bite-Sized Pieces:https://inf.run/v3XAj
>
TypeScript in Bite-Sized Pieces: https://inf.run/FpLm4
>
Next.js in Bite-Sized Pieces: https://inf.run/v3XAj



React, you can master it with just one course.
I'll help you break it down into bite-sized pieces. 🔥

Thanks to the love and support from many students, I was able to publish this course as a book with Insight Publishing.
Once again, I sincerely thank all the students and everyone who showed interest.


2024 Renewed Version
React in Bite-Sized Pieces
Towards the world's most friendly and easiest React course

From JavaScript Basics,
To Real-World 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.
Thus, if you don't properly understand JavaScript and Node.js, you won't be able to use React.js effectively.

This course covers JavaScript fundamentals, Node.js, and React.js.
But just learning would be boring, right! You'll learn React.js through a total of 3 projects.
Through this process, you'll become a frontend developer with solid fundamentals.

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

This course is not just about teaching you how to use React.js.
It also covers various CS knowledge surrounding React.js, and through three projects
—a counter app, a to-do list, and an emotion diary—you can develop your programming thinking skills as well.


Course Structure

📌 Section 1-2. JavaScript Basics and Advanced

Before learning React.js, we'll explore the fundamental and advanced concepts of JavaScript.
From basic concepts like data types and operators,
to advanced topics like array methods and asynchronous operations.

Even if you already know JavaScript, it's great to review these concepts again.

📌 Section 3. Node.js

React.js is a technology that operates based on Node.js. Therefore, you cannot know 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, along with hands-on practice.

📌 Section 4. Introduction to React.js

We'll explore what React.js is and what differentiates it from other technologies, and examine in detail how it solved 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 the basic features of React such as Components, State, and Props.
Practice using all the basic features hands-on and achieve a complete visual understanding with illustrated materials.

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

Create your first React project, a "Counter App."
It's a simple yet excellent project that gives you insight into React.js's operating principles and design philosophy.

📌 Section 7. Lifecycle

Just as all humans are born and go through infancy, adolescence, adulthood, and old age before reaching their twilight years, all React components are born, change, and disappear. This life cycle of components is expressed as the lifecycle.

Once you understand and can control a component's lifecycle, you'll be able to perform desired actions at the exact timing you want.Therefore, in Section 7, we'll 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 "To-Do 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 by role is always a virtue in software development.
Let's explore useReducer, which helps separate complex state management code,
and practice by directly applying it to a todo list project

📌 Section 10. Optimization

If there are unnecessary operations in our project? We should boldly remove them!
We'll explore various optimization techniques for React Apps that eliminate wasted operations
and practice by directly applying them to a todo list project

📌 Section 11. Context

We'll explore Context, which supplies data to various components more concisely and cleanly,
and practice by directly applying it to a todo list project

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

Let's put all the concepts we've learned so far to use and create the final project: an Emotion Diary.
Additionally, we'll use the browser's database and deploy the project so users can access it.
Demo link: https://emotion-diary.winterlood.com/

📌 Section 13. Closing

The course may end, but our learning never stops.
Let's discuss what direction we should take moving forward.


4 Principles for the Kindest
React Course in the World

📣 Principle 1. Always explain in an easy, kind, and visual way

No matter how complex and difficult the content may be!
I have continuously strived to explain it kindly and easily with visual materials.
All images are created by me, so feel free to capture and use them for your learning blog posts. 😃

📣 Principle 2. Pronounce clearly so everything is audible even at increased playback speed

If you're listening again for review or if you're busy, try listening at a faster speed!
I took special care to ensure the pronunciation is clear even at up to 2x speed 😎
(Try listening to the video below playing at 1.5x speed!)

📣 Principle 3. Store code in an easily searchable way

It would be a shame to store the practice code you worked hard on carelessly, right?
I've taken care to ensure you can organize and store your code by sections so you can revisit it anytime.
Code repository link: https://github.com/winterlood/onebite-react-v2

📣 Principle 4. Communicate Constantly

Students gather in the exclusive community to share knowledge and news while growing together.

Join Discord Channel: https://discord.gg/YDqhkH8XkN
(You can find the open chat room in the course materials)

Anticipated Q&A 💬

Q. Who is this course for?

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

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

Yes, welcome! 🙋‍♂️
This course teaches you the essential JavaScript knowledge and Node.js knowledge needed to learn React.
Therefore, with this one course, you can first learn the foundational knowledge required for React, and then learn React itself.

Q. What level of content is covered in the class?

This course covers everything from the origins of React to basic usage and performance optimization techniques for actual production development.
Additionally, it includes deployment using Vercel and finishes with Open Graph configuration,
providing 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?

  • Beginners who are new to React

  • Someone who doesn't know JavaScript and Node.js well, but wants to learn React.js!

  • People who want to learn together with many other students through completion challenges and similar activities

  • People who want to create impressive results upon completing the course

  • Anyone who has written HTML & CSS at least once (You don't need to be good at it!)

Need to know before starting?

  • 👋 Very Basic Knowledge of HTML and CSS

Hello
This is

35,903

Learners

2,397

Reviews

1,540

Answers

4.9

Rating

13

Courses

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

안녕하세요 🙇‍♂

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

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

 

Curriculum

All

98 lectures ∙ (18hr 33min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

1,185 reviews

4.9

1,185 reviews

  • sunjune18284435님의 프로필 이미지
    sunjune18284435

    Reviews 27

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

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

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

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

            Limited time deal

            $4,290.00

            29%

            $37.40

            winterlood's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!