[2024] React (React.js) to eat in bite-sized pieces: from basics to practice

React, you can finish it in one lecture.
I'll help you cut it into bite-sized pieces. 🔥

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

2024 Renewal Version
React cut into bite-sized pieces
Towards the world's friendliest and easiest React course

From JavaScript basics,
React.js real-world project

React.js is a JavaScript library that runs on Node.js.
So, in the end, React.js is just a tool to help you get better use out of JavaScript.
Therefore, if you do not have a good understanding of JavaScript and Node.js, you cannot utilize React.js properly.

This course will teach you JavaScript basics, Node.js, and React.js.
But it’s not fun if you just learn it! You will learn React.js through a total of 3 projects .
Through this process, you will develop into a front-end developer with solid fundamentals.

18 hours worth
A total of 3 React.js projects

This course is not just about teaching you how to use React.js.
We also cover various CS knowledge surrounding React.js, and a total of 3 projects.
You can develop your programming thinking skills while creating a counter app, to-do list, and emotion diary.

Lecture Structure

📌 Section 1~2. JavaScript Basics and Advanced

Before learning React.js, let's look at the basic and advanced concepts of JavaScript.
From basic concepts such as data types and operators,
We will also look at more advanced topics such as array methods and asynchronous tasks.
Even if you already know JavaScript, it's a good idea to look through it again for a refresher.

📌 Section 3. Node.js

React.js is a technology that operates on top of Node.js. Therefore, you cannot know React.js without knowing Node.js.
In Section 3, we will look at what Node.js is, why it was created, and what features it has, with hands-on experience.

📌 Section 4. Introduction to React.js

Let's find out what React.js is, how it differs from other technologies, and take a closer look at how it solved the limitations of existing technologies. In the 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.
You will learn all the basic functions with hands-on exercises and fully understand them visually with illustrated materials.

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

Let's create our first React project, "Counter App".
It's a simple project, but it's a good way to get a glimpse into how React.js works and its design philosophy.

📌 Section 7. Life Cycle

Just as all humans are born and go through infancy, adolescence, youth, old age, and reach twilight, all React components are born, change, and disappear. This life cycle of a component is called a life cycle.

Understanding and controlling the lifecycle of a component will allow you to perform the actions you want at the time you want. So in Section 7, we will look at the lifecycle and how to control it with practice.

⛳️ Section 8. React.js Project 2. To-do List

Let's create our second React project, "Todo List App".
While implementing this project, we implemented data CRUD (add, lookup, modify, delete) and search functions.
We'll look at several ways to handle array-like data in React.

📌 Section 9. useReducer - Separating state management logic

Separation of code by role is always a virtue in software development.
Let's take a look at useReducer, which helps separate complex state management code.
Practice by applying it directly to a to-do list project.

📌 Section 10. Optimization

If there are any unnecessary operations in our project, we should remove them boldly!
Let's take a look at several optimization techniques for React Apps that eliminate wasteful computation.
Practice by applying it directly to a to-do list project.

📌 Section 11. Context

Let's take a look at Context, which provides data to various components in a more concise and clean way.
Practice by applying it directly to a to-do list project.

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

Let's create our own final project emotional diary using all the concepts we've learned so far.
Additionally, we use the browser's database and deploy the project to make it accessible to users.
Demo link: https://emotion-diary.winterlood.com/

📌 Section 13. In conclusion

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

The kindest in the world
4 Principles for React Teaching

📣 Rule 1. Always explain in a simple, friendly, and visual way.

No matter how complex and difficult the content is!
We have worked hard to make it easy to understand and friendly with visual aids.
These are all images I created myself, so you can capture them and use them in your learning blog posts. 😃

Expected Questions Q&A 💬

Portfolio and personal videos