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

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

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

You can master React with just one course. I'll help you break it down into bite-sized pieces. 🔥 Thanks to the love from many students, Insight Publishing

You can master React 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 Press.
Once again, I sincerely thank all the students and everyone who showed interest.

Thanks to you all, I was able to publish the lecture as a book together with Insight Publishing. Once again, I sincerely thank all the students and everyone who showed interest.

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

From JavaScript basics,
to React.js hands-on 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 better.
Thus, if you don't properly understand JavaScript and Node.js, you cannot properly utilize React.js.

This course covers JavaScript fundamentals, Node.js, and then 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
3 React.js projects in total

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 basic and advanced concepts of JavaScript.
From fundamental 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.

I notice the `` tags are empty - there is no Korean text between them to translate. Based on the surrounding context provided, would you like me to translate those sections? Or did you mean to include different text between the `` tags?

📌 Section 3. Node.js

React.js is a technology that operates based on Node.js. Therefore, you can't know React.js without knowing Node.js
In Section 3, we'll explore what Node.js is, why it was created, and what features it has, along with hands-on practice.

I notice that the `` tags are empty - there is no Korean text provided between them to translate. Based on the surrounding context, it appears you're looking at course content about Node.js and React.js. If you'd like me to translate something, please provide the Korean text between the `` tags.

📌 Section 4. Introduction to React.js

We'll explore what React.js is, 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.

I notice the `` tags are empty - there is no Korean text between them to translate. Based on the surrounding context provided, if you need those sections translated: **Before:** "We'll explore and examine in detail how it solved the limitations of existing technologies. Through this process, we will gain a deeper understanding of React.js." **After:** "📌 Section 5. Introduction to React.js Create a new React App and explore basic features such as Components, State, Props, etc. Use all basic features with hands-on practice" However, since there's no content between the `` tags, there is nothing to translate. Please provide the Korean text you'd like translated.

📌 Section 5. Introduction to React.js

Create a new React App and explore React's basic features such as Components, State, and Props.
Practice using all the basic features hands-on and gain a complete visual understanding with illustrated materials.

Looking at the context, the text to translate appears to be empty (just whitespace between the `` tags). However, based on the surrounding context, if you need translations of the "Before" and "After" sections: **Before:** We'll explore basic features such as Component, State, and Props. Through hands-on practice, you'll use all the basic features and gain a complete visual understanding with diagrams. **After:** ⛳️ Section 6. React.js Project 1. Counter App - Create your first React project, a "Counter App," from scratch. Though simple, it provides insight into React.js's operating principles and design philosophy.

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

Build your first React project, a "Counter App."
It's simple, but a great project to get a glimpse of React.js's operating principles and design philosophy.

I notice the `` tags are empty - there is no Korean text between them to translate. The "Before" and "After" sections show surrounding context, but the actual content to translate is missing. Could you please provide the Korean text that needs to be translated between the `` tags?

📌 Section 7. Lifecycle

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

Once you understand and can control a component's lifecycle, you'll be able to perform desired actions at desired timings. Therefore, in Section 7, we'll examine the lifecycle and learn how to control it through hands-on practice.

Section 7. React.js Lifecycle

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

Build your second React project, a "To-Do List App," from scratch.
While implementing this project, you'll explore various ways to handle array-type data in React,
including data CRUD operations (Create, Read, Update, Delete) and search functionality.

Looking at the context, the text to translate appears to be empty or contains only whitespace between the `` tags. If you intended to include text for translation, please provide it and I'll be happy to translate it from Korean to English.

📌 Section 9. useReducer - Separating State Management Logic

Separating code by role is always a virtue in software development.
We'll explore useReducer, which helps separate complex state management code,
and practice by directly applying it to a todo list project

Looking at the context, the text to translate appears to be empty or contains only whitespace/special characters between the `` tags. Based on the surrounding context which discusses React hooks (useReducer) and optimization techniques, if there was meant to be content there, I cannot provide a translation without visible Korean text. If you intended to include Korean text for translation, please provide it again.

📌 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 the todo list project

Looking at the content to translate, I notice that the `` tags are empty - there is no Korean text between them to translate. The surrounding context shows: - Before: Korean text about React optimization techniques - After: Korean text about Section 11 on Context But the actual `` section contains only whitespace. (empty/whitespace only - nothing to translate)

📌 Section 11. Context

We'll explore Context, which supplies data to various components in a more concise and cleaner way,
and practice by directly applying it to the Todo List project

Looking at the content between the `` tags, I can see they are empty. There is no Korean text to translate. The surrounding context shows: - Before: Korean text about Context and a todo list project - After: Korean text about Section 12, a React.js emotion diary project But the actual `` section contains only whitespace, so there is nothing to translate. **Output:** (empty - no content to translate)

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

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

The section to translate appears to be empty (only contains whitespace). Based on the surrounding context: Before: "Additionally, we use the browser's database and deploy the project so users can access it. Demo link: https://emotion-diary.winterlood.com/" After: "📌 Section 13. In Closing - The course ends, but our learning doesn't end. Let's talk about what direction we should take moving forward. The most..." Since the `` tags contain only whitespace, the translation is:

📌 Section 13. Closing

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

4 Principles for the World's Most Friendly
React Course

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

No matter how complex or difficult the content may be!
I've made continuous efforts 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. 😃

I've worked diligently to explain things kindly and easily along with the materials. Since all the images were created by me directly, feel free to capture and use them for your study blog posts. 😃

Anticipated Questions Q&A 💬

Portfolio and Personal Videos

Based on the surrounding context provided, here is the English translation: It contains all the knowledge needed to develop a web project from start to finish, including actual deployment and finalizing with Open Graph settings. Portfolio and personal videos