Let's tackle JavaScript and React all at once with this course, covering everything from concepts to unique projects.
Learn briefly, apply extensively! A 17-hour All-in-one course!
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. Alwaysexplain 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. 😃
📣 Rule 2. Pronounce it so that it can be heard even when played at high speed.
If you're listening again to review, or if you're in a hurry, listen at high speed! We took special care to ensure that your pronunciation is audible up to 2x speed 😎 (Take a listen to the video below, played at 1.5x speed!)
📣 Rule 3. Save your code so it’s easy to find
Wouldn't it be a shame to just keep the practice codes you worked so hard to write? I took care to organize the code into sections so that I could always go back and look at it again. Code repository link: https://github.com/winterlood/onebite-react-v2
📣 Rule 4. Communicate constantly
Gather in a student-only community to share knowledge and news with one another and grow.
This lecture is optimized for those who have an understanding of HTML and CSS. However, since there are explanations throughout the lecture, you don't have to memorize the content thoroughly!
Q. I'm just getting started. I don't know much about JavaScript or Node.js. Is it okay for me to join?
Yes, welcome! 🙋♂️ This course will teach you the JavaScript and Node.js knowledge essential to learning React. Therefore, with this one lecture, you can first learn the basic knowledge required for React and then learn React itself.
Q. To what extent is this covered in class?
We cover everything from why React was born, to basic usage, and performance optimization techniques for actual production development. Also, we actually deploy it using Vercel and finish it with Open Graph settings. It contains all the knowledge you need to develop a web project from start to finish.
Portfolio and personal videos
Recommended for these people
Who is this course right for?
First-time React learner
Someone who doesn't know JavaScript and Node.js well, but wants to learn React.js!
Person wanting to learn with many students through full-course challenges, etc.
A person who wants to create a result to be proud of upon completing the course.
Someone with any experience writing HTML & CSS (no need to be an expert!)
I actually bought the course for 1,000 won on April Fool's Day, just in case... like a lottery ticket... but it feels like I've really won the lottery. I feel bad that I'm listening to and studying such a great course for almost free... The lectures are so kind, and the examples are explained so clearly, it's really, really good. Thank you so much, and I love you... 😭😭
Tôi chưa xem hết, nhưng theo quan điểm của tôi sau khi mua một số khóa học React, đây là khóa học hay nhất.
Các bài giảng khác có thể được tạo ra bởi các nhà phát triển JavaScript có kinh nghiệm. Nhưng có một vấn đề.
Những người có kinh nghiệm giảng bài khi họ đã có sẵn hình ảnh về cách hoạt động của mã trong đầu. Vì vậy, tôi vừa giảng bài vừa nói và viết mã giống như chú Bob.
Tuy nhiên, từ góc nhìn của người mới bắt đầu, thật khó chịu khi làm theo mã mà không có một bức tranh rõ ràng về những gì đang diễn ra trong đầu bạn và thậm chí bạn còn không hiểu khái niệm này.
Trong bài giảng này, khái niệm này trước tiên được giải thích thông qua hình ảnh để giải thích điều gì sẽ xảy ra khi bạn sử dụng một chức năng nhất định trước mã, sau đó mã sẽ được hiển thị trong đầu.
Hầu hết người hướng dẫn là nhà phát triển. Vì tôi không phải là nhà giáo dục/chuyên ngành giáo dục nên tôi cảm thấy có quá nhiều bài giảng được biên soạn không theo tiêu chuẩn về phương pháp giảng dạy hiệu quả, nhưng bài giảng này thực sự là hay nhất.
Tôi thậm chí còn chưa xem toàn bộ bài giảng nhưng tôi đã mua TypeScript.
Chất lượng tuyệt vời nhưng giá cả của khóa học cũng rất hợp lý. Tôi cũng mua một cuốn sách để có thể uống thêm một tách cà phê nữa. 'Cảm ơn bạn' vì những bài giảng mà tôi đã trả bằng tiền của mình. Đó là một cách diễn đạt kỳ lạ nên tôi không sử dụng nó thường xuyên.
Tuy nhiên, bài giảng này ' Cảm ơn bạn rất nhiều'.
Nếu có thể, sẽ thật tuyệt nếu bạn cũng có thể cung cấp các bài giảng về Express.js, Next.Js và TDD!
Lần đầu tiên tôi lấy React bằng tiếng Anh từ một trang web khác. Vì tôi đang tham gia khóa học mà không hiểu 100% tiếng Anh nên tôi gặp vấn đề với việc hiểu nhầm các khái niệm hoặc không hiểu lời giải thích. Vì vậy, tôi đã tìm kiếm một khóa học React tại Infrun và nó có vẻ tốt nên tôi đã tham gia. Bài giảng bắt đầu bằng JavaScript nên thật tuyệt khi có thể học được JavaScript. Tôi đã học được rất nhiều về React vì nó giải thích rõ ràng các khái niệm. Một điều đáng thất vọng là khi giải thích A->C, có một số phần ở giữa sẽ dễ hiểu hơn nhiều nếu A->B->C cũng được giải thích cho đến B. . Nhiều người khác cũng để lại thắc mắc về những điều này trong phần hỏi đáp của bài giảng. Nếu chỉ cải thiện những phần này thì tôi nghĩ đó thực sự sẽ là một bài giảng 100 điểm.
Nó có khả năng giải thích và nội dung như vậy, nhưng mức giá này chẳng có ý nghĩa gì.
Tôi nghĩ bạn có thể trả gấp đôi số tiền đó, nhưng bài giảng thực sự có vẻ như ông chủ bị điên.
Thật khó để nói rằng tôi đã lĩnh hội được mọi thứ nhưng tôi sẽ thành thạo nó thông qua việc học hỏi nhiều lần.
Cảm ơn bạn đã làm một bài giảng tuyệt vời :) !!