Click the image to go to the roadmap.
> Roadmap Link: https://link.onebitefe.com/r/3wokpi
Series Lecture Links
> Bite-sized React:https://inf.run/v3XAj
> Bite-sized TypeScript: https://inf.run/FpLm4
> Bite-sized Next.js: https://inf.run/v3XAj
Even in the AI era, it's still React after all; 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.
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.
Even in an era where AI writes code for you, this remains unchanged.
If you don't properly understand JavaScript and Node.js, you cannot fully utilize React.js.
This course covers everything from JavaScript basics to Node.js and then 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 code generated by AI without hesitation.
This course goes beyond simple usage at the level an AI would teach.
It covers various CS knowledge surrounding React.js, and through a total of 3 projects
—a counter app, a to-do list, and an emotion diary—you can also develop your programming thinking skills.
Before learning React.js, we will cover the basic and advanced concepts of JavaScript.
From basic concepts like data types and operators,
we will also explore advanced topics such as array methods and asynchronous operations.
Even if you already know JavaScript, it is a great way to review and refresh your knowledge.
| 
|
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.
| 
|
We will explore what React.js is and what makes it distinct compared to other technologies, looking closely at how it resolved the limitations of existing technologies. Through this process, we will gain a deeper understanding of React.js.
| 
|
We will create a new React App and explore basic features such as React's Components, State, and Props.
We will use all the basic features through hands-on practice and gain a perfect visual understanding with the help of diagrams.
| 
|
We will build our first React project, the "Counter App," ourselves.
It is a simple project, but it is a great way to get a glimpse into the operating principles and design philosophy of React.js.
Just as every human being is born and passes through infancy, adolescence, adulthood, and old age before reaching their twilight years, every React component is born, changes, and 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 the desired timing. Therefore, in Section 7, we will look into the lifecycle and explore how to control it through hands-on practice.
| 
|
We will build the second React project, the "Todo List App," ourselves.
While implementing this project, we will explore various ways to handle array-type data in React, such as data CRUD (Create, Read, Update, Delete) and search functions.
Separating code according to its role 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.
| 
|
What if there are unnecessary operations in our project? We should boldly remove them!
We will explore various optimization techniques for React Apps to eliminate wasted operations
and practice by applying them directly to the Todo List project.
|
|
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.
| 
|
We will create 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/
| 
|
The lecture may be over, but our learning does not end here.
Let's talk about which direction we should take moving forward.
No matter how complex and difficult the content is!
I have made constant efforts to explain it kindly and easily with visual materials.
Since all the images were created by me, you are free to capture and use them for your study blog posts. 😃
| 
|
| 
|
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. 😎
(Take a listen to the video below playing at 1.5x speed!)
It would be a shame to just store the practice codes you worked so hard on anywhere, wouldn't it?
I took extra care to organize and store the codes by section so that you can refer back to them at any time.
Code Repository Link: https://github.com/winterlood/onebite-react-v2
We gather in a student-exclusive community to grow together by sharing knowledge and news.
디스코드 채널 참가 : https://discord.gg/YDqhkH8XkNQ. 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 course, 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 learn React.
Q. To what level of depth will the lessons cover?
We cover everything from the reasons behind React's creation 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 finalizing with Open Graph settings.
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!
It feels like eating meat wrapped in perilla leaves. The lecture content is delicious and not greasy~
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 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... 😭😭
![[VOD] 6-Week Complete! High-Concentration Vibe Coding for Development Practice (Cursor AI, Figma)Course Thumbnail](https://cdn.inflearn.com/public/files/courses/338156/cover/01k4c77bftwd8ec4k0yakavbrc?w=420)
![# [Electron #1] Building a Timer App with Electron + React (With Zustand)Course Thumbnail](https://cdn.inflearn.com/public/files/courses/336817/cover/01jwx9ttbwnetdsbt5qrxgxb3x?w=420)
![[Renewal] Creating a NodeBird SNS with ReactCourse Thumbnail](https://cdn.inflearn.com/public/course-325637-cover/d5fd6216-71d1-490e-8759-594cbbdc1973?w=420)
![[PROKIT] Vibe Coding/Frontend Practice Workbook: Building a Timer AppCourse Thumbnail](https://cdn.inflearn.com/public/files/courses/339612/cover/01ke6d974hx4y1esmd9p80w7cx?w=420)
