inflearn logo

One Bite React Practical Library Kit - Zustand, Tanstack Query, TailwindCSS

Upgrade your React app with Zustand, Tanstack Query, and Tailwind CSS! We guide you through the core concepts and usage of various tools so that you can take on even complex projects.

(5.0) 2 reviews

164 learners

Level Basic

Course period Unlimited

React
React
Web Application
Web Application
TailwindCSS
TailwindCSS
react-query
react-query
zustand
zustand
React
React
Web Application
Web Application
TailwindCSS
TailwindCSS
react-query
react-query
zustand
zustand

What you will gain after the course

  • The confidence to take on more complex React.js projects

  • Efficient global state management methods using Zustand

  • Efficient Server State Management Methods Using Tanstack Query (with Caching)

  • Fast and convenient styling methods using Tailwind CSS and Shadcn/ui

This course contains the same content as the beginning of the "Bite-Sized Practical Project - SNS Edition" course. Please note that the content may overlap for those who have already taken that course.


Introducing tools for more powerful React apps

Zustand + Tanstack Query + TailwindCSS

To handle complex functions well, our tools must also be upgraded.

In this lecture, we will cover the core concepts and usage of the tools listed below in a way that is more fun and engaging than anyone else.

Tailwind CSS


Shadcn/ui


  • Design library based on Tailwind CSS

  • Provides high-quality components (ex. Input, Button, Dialog, etc.)

  • https://ui.shadcn.com/

Zustand


  • A small and lightweight global state management library

  • An emerging powerhouse that is replacing the traditional Redux

  • https://zustand-demo.pmnd.rs/

Tanstack Query



Seeing is believing 🖌️

Accompanied by intuitive animated visual aids.

Seeing is believing, which means seeing something once is better than hearing about it a hundred times.

To help you easily organize complex concepts, we provide intuitive animated visual materials.


I've also prepared review notes!

Only for Students! Handbook Provided

We provide a student-exclusive handbook that neatly summarizes the core content of the lecture.

You can check the handbook link and password immediately upon purchasing the lecture.

We have also prepared PDFs! 📝

For those who would like to view the lecture handbook as a PDF rather than a web page,

We have prepared PDFs in a total of two different themes.

Light Theme

Dark Theme

So you want to try the project as well?!

We are offering a discount coupon for One Bite Practical Project - SNS Edition.

For students who want to experience even the practical projects

We are offering a discount coupon for One Bite Practical Project: SNS, which covers the content of this course and extends into a hands-on project.

📣 The coupon discount amount is equal to the price of this course (Coupons can be checked upon purchasing the course)

Target Audience for the Course

This course was created for those who have a basic understanding of React.js and TypeScript.

If you are not familiar with the technologies mentioned above, we recommend taking the following prerequisite courses first.

The 5 Principles of the Bite-Sized Series

⚖ Principle 1. Intuitive and Rich Visuals

Just as even the same food feels more delicious when it looks good,
I believe that even for the same conceptual explanation, more intuitive and attractive visual materials will be easier to understand.

Therefore, I have made constant efforts to create intuitive visual materials, including animations.

⚖ Principle 2. Kindness

I did not gloss over new terms or concepts, nor did I jump to the conclusion that you would already be familiar with them. I made every effort to ensure you wouldn't need to do any separate Googling while taking the course.

⚖ Principle 3. Probability

To maintain the students' interest, I created the lectures while always considering logical consistency—ensuring that whenever new content is introduced, it relates to the previous material and that you don't feel a sudden break in the flow.

⚖ Principle 4. Good Vocalization and Diction

Since you have to listen to my voice for a long time, I am always striving for good vocalization and diction.
To this end, I have produced the lectures so that you can understand everything even when played at 2x speed.

Take a listen! 2x speed playback link

⚖ Principle 5. Communication

We gather in a student-only community to grow together by sharing knowledge and news.

Instructor Introduction


Junghwan Lee | Winterlood

A frontend developer & educator who believes there is a way to explain anything easily and in a fun way

Recommended for
these people

Who is this course right for?

  • Students of the One Bite series (those who have completed React.js + TypeScript)

  • Those who already have knowledge of React.js and TypeScript

  • Those who want to move beyond the tutorial level and take on real-world projects

  • Those who are looking for a course where Q&A is handled at least once every day from Monday to Friday.

  • Those who are looking for courses with an active student community directly managed by the instructor.

Need to know before starting?

  • React.js Basics (Level of "One Bite React" course students)

  • TypeScript Basics (Level of those who have taken the "One Bite TypeScript" course)

Hello
This is winterlood

38,878

Learners

2,922

Reviews

1,669

Answers

5.0

Rating

25

Courses

Shall we take a bite-sized piece of Web Front-end?!

Hello 🙇‍♂

I am someone who believes there is a way to explain anything easily and in a fun way, and

I am someone who wants to create the warmest developer community in the world.

 

More

Co-instructor

Curriculum

All

45 lectures ∙ (8hr 51min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

2 reviews

5.0

2 reviews

  • chechoii9738님의 프로필 이미지
    chechoii9738

    Reviews 12

    Average Rating 4.4

    5

    31% enrolled

    • gkemzm3105님의 프로필 이미지
      gkemzm3105

      Reviews 1

      Average Rating 5.0

      5

      31% enrolled

      winterlood's other courses

      Check out other courses by the instructor!

      Similar courses

      Explore other courses in the same field!

      Limited time deal

      $12,870.00

      35%

      $15.40