강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

Master React: From Basic Concepts to LinCanva Projects

Are you new to React? Learn the basics of React in one course and gain practical experience through a LinCanvas project. Then you can confidently apply for a job as a front-end developer!

(4.8) 120 reviews

758 learners

Level Basic

Course period Unlimited

  • gymcoding
React
React
react-query
react-query
react-router
react-router
React Context
React Context
TailwindCSS
TailwindCSS
React
React
react-query
react-query
react-router
react-router
React Context
React Context
TailwindCSS
TailwindCSS

Reviews from Early Learners

Reviews from Early Learners

4.8

5.0

Rach

37% enrolled

✅ Advantages of Jimcoding React Course 1. Learning based on official documents Systematic learning helps you deeply understand the concepts of React. 2. Laying a solid foundation Instead of simply using React, you will learn and understand the principles and be able to complete the code yourself. 3. Includes optimization learning It is useful to learn optimization content, which is usually provided as a separate lecture, here. 4. Learning to configure and deploy Vite environment You can learn how to set environment variables and deploy in the latest development environment. 5. Objectively check missing parts During the lecture, you can check which parts of JavaScript and React you are lacking. 5. Additional learning resources provided Additional lecture links are shared to help you clearly understand the concepts you need. Tip. Be sure to stop the lecture and try the parts you need to do yourself!! If you trust and follow all the processes by repeatedly explaining the parts that are difficult to understand at once, it is BEST! I listened to the Vue lecture and it was very helpful for my work because it was based on official documents. I immediately came when I heard the news of the React lecture~ I wonder if you have any plans for a Next.js lecture! 😊

5.0

HanKyul Kim

31% enrolled

I am in charge of backend work at my company, and recently, as I have had more opportunities, I have also been in charge of frontend work. So, I thought I should learn React, so I looked for various platforms and lectures, and among them, I liked the curriculum and reviews of the lecture the most, so I paid for it without hesitation and am taking the course. To be honest, it is difficult. There are many parts that I don't know what they mean. However, the instructor tells me things like, "You need to know the concept called XXX first! This part is the grammar called XXX in JavaScript!" and attaches related lecture materials and guides me. So, I didn't have to worry even if I didn't know the concept. The instructor is really kind and explains everything. In particular, this lecture is based on the official React documentation and mixes practice and examples appropriately, so I can say that it is a 99.999% reliable lecture. (I think everyone knows how important the official documentation is to developers!) Highly recommended

5.0

지니

30% enrolled

I was thinking about the new lecture, and I ended up taking the React lecture because a friend who had previously taken Jimcoding's View lecture strongly recommended it. The explanation is detailed enough for beginners to understand, and it's good that you can get used to the concepts without having to watch the lecture over and over again because it's explained repeatedly. It's also convenient that the lecture materials that you can watch during class are well organized and provided. The lecture is delivered with a tension that prevents you from falling asleep, but sometimes when I need something, I watch other Jimcoding YouTube videos, and it feels very comfortable and clean, so I think our tastes may differ a little. I'm a Windows user + I use VS Code in English, so sometimes I get a little lost when shortcuts or menus that I have to find on the screen are different. I think it would have been better if you had guided me through the video. This is because I'm still a beginner, so it would be good if you could mention the parts to be modified when modifying the code. Since you delete the code without saying anything or modify it quickly, it's hard to input the code while watching the video. When the screen changes quickly, you have to focus and check with your eyes exactly if there are parts to be modified or deleted, and then practice accordingly. Still, I feel that the lecture is a lot of effort put into preparing the class and that it is a lecture that systematically grasps the concepts, so I am very satisfied overall. Thank you for the great lecture😍

What you will gain after the course

  • React latest grammar based on "official documents" 🚀

  • Style Methods - CSS Modules, Styled Components, TailwindCSS, MUI 🎨

  • Reducer, Context API, Advanced Skills, and the latest React specs 🆙

  • How to Optimize React Performance 🏎️

  • How to communicate with API networks using Axios modules 🛜

  • React Essential Library React Router 🚀

  • The latest React Query library from basics to advanced skills 📦

  • Setting and Deploying Vite Environment Variables 🏠

Inflearn Course Review Event in Progress 🎉

Hello! 🙂
Take our React course and get special benefits! We're currently running a review event ! 🎉
After taking the course, if you write an honest and sincere review, we will give you one course coupon as a gift!
(This is a limited offer for the first 20 people , so hurry and participate!)
For more details and how to participate in the event, please check the course curriculum! 🔥

React Basics to Practical Projects: Learning Complete React Development with LeanCanvas

This course is a complete React development course, covering everything from beginner to advanced skills for practical use. Based on the latest React specifications and official documentation, you'll systematically learn core concepts like component design, state management, and performance optimization. Beyond simple grammar learning, you'll gain hands-on experience with real-world web service LeanCanvas projects.

Based on official documents
Latest React specs

LeanCanvas Project
How to use it in real life

A total of 16 hours
In-depth lecture!

This course's defining characteristic is its clear and easy-to-understand explanations, making it accessible even to beginners. Furthermore, boasting a solid 16+ hours of content , it goes beyond simply teaching the basics and provides in-depth knowledge and skills that can be applied immediately in real-world situations .

Learn the latest React specs based on official documentation

Various CSS styling methods in React

How to communicate with a server API using Axios

Client routing using React Router

Build performance-optimized React web applications with memoization and React-Query

How to set environment variables and deploy React Web in a Vite environment

What you'll learn - React Basics

You'll learn React fundamentals, starting with JSX syntax , component structure , and rendering methods. You'll also understand state management and the re-rendering process, learn how to pass data via props , and learn how to handle events . We'll also cover essentials like Strict Mode .

Section 1. Before You Begin

Learn the basic concepts of React and how to set up a development environment , and we provide a roadmap for the course, necessary teaching materials, and source code .

Section 2. Understanding the Project

Learn the core concepts of React, including project creation and structure , CSR , and SPA .

Section 3. Understanding Components

Learn the concept of components , separation criteria , and how to effectively manage components through practice .

Section 4. Learning JSX

Learn JSX syntax and how to use JavaScript , and understand the basic structure of React .

Section 5. Component Basics

Learn basic component features such as prop passing , conditional/list rendering , and event handling .

Section 6. State Foundations

Learn basic state management techniques such as the concept of State , re-rendering phase , and Strict mode .

What you'll learn - Advanced React

Learn advanced state management techniques like Reducer and Immer to update objects and arrays , and delve into the advanced features of useState . You'll also delve into performance optimizations and event handling with useMemo and useCallback , and component references with useRef .

Section 7. State Advanced Skills

Learn how to update objects/arrays with Immer and advanced uses of useState .

Section 8. Integrating Logic with Reducers

Learn how to integrate state management logic with Reducer and simplify code by applying Immer .

Section 9. Event In-Depth

Learn advanced event handling methods, including React event objects and Korean language issue handling .

Section 10. Context API Basics & Advanced

Learn how to share state with the Context API and learn app scaling techniques by combining it with Reducers .

Section 11. Lifecycle & Effect Hook

Learn how to handle asynchronous tasks with Hooks , lifecycle , and useEffect .

Section 12. The useRef Hook

Learn component references and state management through basic and advanced uses of useRef .

Section 13. Performance Optimization

Learn how to memoize and optimize performance with useMemo and useCallback .

What You'll Learn - LeanCanvas Project

Learn practical web development based on LeanCanvas projects . Master the entire process of a real-world project, including CSS styling , client-side routing with React Router , API communication , data management with React Query , and Vite deployment .

Section 14. Starting a Web Project

Create a LeanCanvas project and clean up your code style with ESLint and Prettier settings .

Section 15. React CSS Styling

Learn various CSS styling techniques such as CSS Modules , Styled Components , and TailwindCSS (tailwind-css) .

Section 16. [LeanCanvas] React Router

Learn how to implement client routing with React Router (react-router) .

Section 17. Creating the UI (with Tailwind CSS)

Learn how to build efficient UIs with UI component separation and TailwindCSS .

Section 18. API Server Communication

Implement API communication and server interaction with json-server and Axios.

Section 19. Custom Hooks

Learn how to create and utilize your own Custom Hooks .

Section 20. React Query Library

Learn how to implement data caching and state management using React Query (react-query) .

Section 21. Setting Environment Variables and Deployment

Learn how to deploy a React app using Vercel and setting up Vite environment variables .

See our differentiated player knowledge 💪

HTMLCSS2

1. Introduction to HTML & CSS Web Development [Free]

By learning HTML and CSS, you'll gain the fundamental knowledge needed to build a website. This course is designed to be easy to understand, so even beginners won't be afraid to learn coding .

JavaScript,

2. Introduction to ES6+ Modern JavaScript [Free/Paid]

JavaScript is often said to be easy, but beginners can find it challenging. That's why this course offers easy-to-understand, yet informative content for absolute beginners.

Free - YouTube , Paid - Inflearn (including projects)

Creating a Portfolio 1

3. Create a portfolio site and distribute it!

If you've learned HTML, CSS, and JavaScript, try creating and deploying your own portfolio site using them. Practical experience will greatly enhance your skills.

Front-end wings

Front-end Wings [Free]

This course will help you solidify your knowledge of essentials before becoming a front-end developer, including module systems, Webpack, and NPM.

Expected Questions Q&A

Q) What will the player's knowledge be like?

You can easily take this course with only a basic understanding of HTML, CSS, and JavaScript. Additionally, learning front-end frameworks like React and Vue requires an understanding of front-end ecosystem technologies like npm and module systems. However, the course will cover these technologies thoroughly, so don't worry. We'll help you follow along.

By the way, the course we launched for this very reason is called "Front-End Wings (Free)"! For more details, please refer to the roadmap 💪

Q) Is the source code provided?

Yes! We'll provide a GitHub address in the section explaining the source code, and we'll also provide detailed guidance on how to effectively view and utilize the source code on GitHub.

Q) Are lecture notes provided?

Yes! Lecture notes are provided!

Recommended for
these people

Who is this course right for?

  • People preparing for a job as a front-end developer!

  • People who want to build a solid foundation based on official documents!

  • A beginner developer who is learning React for the first time!

  • React beginners who want to gain practical project experience!

Need to know before starting?

  • HTML&CSS

  • javascript

Hello
This is

27,871

Learners

1,752

Reviews

788

Answers

4.9

Rating

18

Courses

Hello.

I'm GYM CODING, a coding education creator 🙂

I run the coding education channel "짐코딩 GYM CODING" on YouTube, and

I am sharing programming knowledge on the Inflearn educational platform.

The characteristic of my lectures is that for those who are just starting out,

When explaining, I try to make it as easy as possible,

and when it comes to teaching, I provide explanations that are as comprehensive and informative as possible.

I will strive to be a coding education creator who always thinks from the student's perspective.

Thank you.

📹Operating GymCoding YouTube Channel | 30K+ Subscribers

💻 Gym Coding Club | gymcoding.co

🔗 GitHub: https://github.com/gymcoding

🧑‍💻 Instagram @gymcoding

📨 Email bruce.lean17@gmail.com

Curriculum

All

93 lectures ∙ (17hr 34min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

120 reviews

4.8

120 reviews

  • nathomme9758님의 프로필 이미지
    nathomme9758

    Reviews 2

    Average Rating 5.0

    5

    31% enrolled

    I'm someone who is just starting to grow as a developer. I had to use Vue in practice, and in the process of looking for Inflearn to study, I happened to take Jim Coding's lecture. I've taken other lectures (YouTube, Inflearn, etc.) as well, but I was so satisfied with Jim Coding's neat diction and solid knowledge based on official documentation that I became a person who takes almost all of Jim Coding's lectures, even React. 😊😊 I'm not a front-end developer, but I feel like I've grown a lot thanks to you, so I'm leaving a review. I feel that this React lecture is also very, very good, and I plan to take all the lectures that you launch in the future. Thank you for creating high-quality lectures. I hope that others will also take Jim Coding's other lectures as well as this lecture and grow together. Thank you.

    • gymcoding
      Instructor

      Hello! Thank you for your valuable feedback! 🥹 I'm so glad to hear that you've been consistently taking my courses, from Vue to React, and that you've grown as a result. It's very rewarding to hear that the official documentation-based approach and explanation style have been helpful! 🎉 I will continue to repay you with high-quality lectures that can be applied directly to practical work. I'll keep cheering you on! Thank you! 💪

  • hyejo님의 프로필 이미지
    hyejo

    Reviews 1

    Average Rating 5.0

    Edited

    5

    31% enrolled

    I'm really enjoying Jimcoding's React Perfect Mastery course! Above all, thanks to the bright and energetic voice, there's no room for boredom, so even when I listen after work in a tired state, I keep staying focused. The way you explain things step by step from a beginner's perspective, matching the eye level, has been a huge help for parts that are hard to understand. There were many moments when I immediately understood, thinking "Ah, so this is how it flows!" Since the React course is this good, I'm naturally planning to continue with the Next.js Perfect Mastery course. I've gained confidence that I can complete it to the end if it's Jimcoding's course! Please keep creating great courses in the future! From a listener's perspective, it's truly giving me great strength 🙌

    • gymcoding
      Instructor

      Thank you so much for leaving such a precious review! I'm truly proud that you're able to stay focused and engaged even when you're tired after work. When creating lectures, I always think about "how can I deliver this content in a way that's not boring and easy to understand," and I'm so glad that intention came through! Thank you so much for planning to take the Next.js Perfect Mastery course after the React course. The Next.js course was also prepared to be easy for beginners while being in-depth based on the official documentation! I'll continue to repay you with great lectures. Fighting! 👍

  • spdhsrnvl123님의 프로필 이미지
    spdhsrnvl123

    Reviews 7

    Average Rating 5.0

    5

    31% enrolled

    I was trying to challenge myself to become a frontend developer again, so I only read official documentation after work, but it was so boring.... But after encountering Teacher Jim Coding, even the difficult parts became so easy to understand, and I think it's really the best lecture 😭😭 I'm planning to take NextJS after finishing React!!! Thank you, Teacher Jim Coding!! 😊

    • kjk12348067144님의 프로필 이미지
      kjk12348067144

      Reviews 13

      Average Rating 5.0

      5

      31% enrolled

      Just because it's taught easily doesn't mean it's taught shallowly, so don't hesitate and buy when the price is low. For beginners or those who have studied but can't find direction, I think you can just invest boldly. While working on a graduation project with Spring boot, what appeared on screen was too absurd, so I started listening (to the lecture), and since the screen looks good and I get immediate visual results, it's really fun!! I listened intensely during the holiday, so much so that I want to take the nest lecture too, out of ambition. I am very satisfied with the quality of the lecture. ((And in the past, when I took other lectures, even when told to read official documents, I didn't read them much because there was too much and it was bothersome, but here, they put all the helpful reference links below, so you can really feel how much effort was put in. 😊..😊))

      • gymcoding
        Instructor

        Hello, Targetto! Thank you for your valuable course review~! I'm deeply touched that you recognized my effort to teach in a way that's easy yet deep 🥹 I'm glad you're enjoying the fun of seeing results appear immediately on the screen as you transitioned from Spring Boot to React~! I included related links to make it easier for students to learn, and I'm glad to hear you're finding them useful. You'll be able to gain good insights and results in the "Next.js Perfect Master" course as well~! 💪 I will continue to strive to create helpful lectures. Thank you!

    • winzzone2님의 프로필 이미지
      winzzone2

      Reviews 5

      Average Rating 5.0

      Edited

      5

      41% enrolled

      It varies from person to person, but personally, the lecture style suits me well, so I'm listening to all of the teacher's lectures. Compared to other React lectures, it explains things in more depth and breadth, so I'm enjoying studying! I was especially impressed with the State section that works like a snapshot, and I'm satisfied that you distinguish between JavaScript knowledge and React knowledge, so I can know what knowledge I lack. In the future, it would be great to have lectures using TypeScript or content combined with AI. Please continue to grow and release many good lectures in the future~! (Personally, there aren't many Node lectures in Korea, so I'm cautiously asking if you could release one!) Thank you! I enjoy watching your YouTube channel too~

      • gymcoding
        Instructor

        Thank you for your valuable feedback! I'm so glad to hear that you enjoyed my teaching style. It's rewarding to see you studying even the in-depth content of React. I put a lot of effort into the concept of State snapshots, so I'm deeply moved that you were touched by it! I will carefully consider creating a Node.js course 🙂 And I'm currently preparing a blog creation course using Next.js + Notion CMS (with Cursor AI), so I'll have good news for you soon. Please look forward to it! 💪 Thank you for continuing to watch my YouTube videos! 💪

    $77.00

    gymcoding's other courses

    Check out other courses by the instructor!

    Similar courses

    Explore other courses in the same field!