강의

멘토링

로드맵

BEST
Programming

/

Front-end

Bite-sized React.js: From Basics to Practice

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!

(4.9) 1,041 reviews

13,118 learners

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

Reviews from Early Learners

What you will learn!

  • Deployable Emotion Diary Project Development

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

  • React Clean Code Writing, Performance Optimization Techniques

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

Series Lecture Links
> React in bite-sized pieces: https://inf.run/v3XAj
>
TypeScript in bite-sized chunks: https://inf.run/FpLm4
>
Next cut into bite sizes: https://inf.run/v3XAj


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

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

Join our Discord channel: https://discord.gg/YDqhkH8XkN
(You can check the open chat room in the class materials)

Expected Questions Q&A 💬

Q. Who is eligible to take this course?

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

Need to know before starting?

  • 👋 Very basic knowledge about HTML, CSS

Hello
This is

32,309

Learners

1,964

Reviews

1,396

Answers

4.9

Rating

6

Courses

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

안녕하세요 🙇‍♂

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

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

 

Curriculum

All

98 lectures ∙ (18hr 33min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

1,041 reviews

4.9

1,041 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 a lottery ticket... but I feel like I really won the lottery. I feel bad that I'm studying such a good lecture at almost a free price... The lecture is so kind and the examples are explained in a way that's easy to understand, so it's really great. Thank you so much, I love you... 😭😭

    • hm52073678님의 프로필 이미지
      hm52073678

      Reviews 2

      Average Rating 5.0

      5

      32% enrolled

      茂みをゴマの葉に包む感じ 講義内容を感じずに美味しいです〜

      • inchestry님의 프로필 이미지
        inchestry

        Reviews 5

        Average Rating 5.0

        5

        64% enrolled

        まだ見ていませんが、複数のリアクト講義を購入してみた立場で、この講義がワントップです。 他の講義も熟練したJavaScript開発者の方々が作りました。しかし、問題があります。 熟練した方々は、自分の頭の中ですでにコードがどのように動作しているかについてのイメージが頭にある状況で講義をします。だから、おじさんのように話しながらコードを書いて講義をします。 しかし、初心者の立場では、一体何が起こるのか頭の中でまったく描かれていない状態で、コードだけに従うので、苦しい気持ちはもちろん、概念すらうまくいかないんです。 このレッスンの場合、コードの前にどのような機能を使うと、どのようなことが起こるのかをイメージとして先に解いて概念を説明し、その後にコードを見せると、あのやはりコードを見ながら頭の中でコードが動作するイメージが一緒に描かれます。 ほとんどの講師が開発者です。教育者/教育専攻者ではないので、このような効果的な教育方式に対するスタンダードなしであまりにも多くの講義が量産されていると感じますが、この講義は本当に最高ですね。 講義を見たこともありませんでしたが、すでにタイプスクリプトも購入しています。 クオリティがイ・ジョンドンデ講義値はまたあまりにも恵者です。コーヒーでももう一杯飲むと本も買いました。私のお金を与えて生きる講義に'ありがとう'という表現がおかしくてよく使わないのですが。 それでも、この講義は'非常にありがとう'。 可能であれば、Express.js、Next.Jsのレッスン、そしてTDDのレッスンも提供してください。

        • samgangjumak님의 프로필 이미지
          samgangjumak

          Reviews 8

          Average Rating 4.9

          5

          76% enrolled

          他サイトで英語で先にリアクトを受講しました。英語を100%理解していない状態で受講してみると、概念を誤って理解したり説明したりして理解できない問題がありました。それでインフラでリアクト講義を探し、より良く見えて聞くようになりました。講義はJavaScriptから再度教えていただき、JavaScriptまで勉強することができてよかったです。リアクトについても概念をよく教えてくれて勉強がたくさんなりました。ひとつ残念なことは、A->Cを説明する際、途中でA->B->C こうしてBまで説明していただいたら理解するのがずっと良かったような部分もいくつかありました。そんなことは講義質問答弁欄で他の方々も質問をたくさん残してくれました。こんな部分だけ補完になれば本当に100点講義のようです。

          • parkhj9291187님의 프로필 이미지
            parkhj9291187

            Reviews 2

            Average Rating 5.0

            5

            100% enrolled

            これらの説明力とその内容は含まれていますが、この価格は言葉ではありません。 倍増してもらえそうなのに本当に上司が狂ったような講義.. まだすべて消化したとは言い難いですが、繰り返し学習しながらマスターしてみます。 良い講義を作ってくれてありがとう:)!

            $37.40

            winterlood's other courses

            Check out other courses by the instructor!

            Similar courses

            Explore other courses in the same field!