강의

멘토링

로드맵

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) 88 reviews

655 learners

  • gymcoding
이론 실습 모두
프론트엔드개발자
React
react-query
react-router
React Context
TailwindCSS

Reviews from Early Learners

What you will learn!

  • 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

25,070

Learners

1,419

Reviews

637

Answers

4.9

Rating

17

Courses

안녕하세요.
코딩 교육 크리에이터 짐코딩 입니다 🙂

유튜브에서 코딩 교육 "짐코딩 GYM CODING"채널을 운영하고 있으며,
인프런 교육 플랫폼에서 프로그래밍 지식을 공유하고 있습니다.

제 강의의 특징은 이제 막 시작하시는 분들을 위하여
설명하고자 할 때는 최대한 쉽게,
알려드리고자 할 때는 최대한 알차게 설명드립니다.

항상 수강생 입장에서 생각하는 코딩 교육 크리에이터가 되겠습니다.
감사합니다.

📨 이메일 bruce.lean17@gmail.com
🏋️‍♀️ 헬스타그램 @helinlee.gram
🧑‍💻 코딩스타그램 @gymcoding

Curriculum

All

93 lectures ∙ (17hr 34min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

88 reviews

4.8

88 reviews

  • nathomme9758님의 프로필 이미지
    nathomme9758

    Reviews 1

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

  • sanggusseu2599님의 프로필 이미지
    sanggusseu2599

    Reviews 7

    Average Rating 5.0

    5

    100% enrolled

    I am a student who has taken the course from Introduction to Web Development to Mastering React! One-line summary: If other lectures are just coffee, this lecture is T.O.P. 😎 The instructor explains complex concepts easily, and solves the shortcoming of self-study lectures, 'difficulty concentrating on your own' by guiding you to practice directly in between. Every time I hear the words "Stop for a moment and try it first" in the middle of the lecture, the tension that had been loosened returns, and it was a great help in solving problems proactively. In addition, the lecture notes and the code in the GitHub repository are well organized, so it was very easy to follow when errors occurred during practice or when reviewing later. (It must have been hard to organize everything like this, but thanks to you, I was able to focus on the content. 😁) In particular, I was impressed by the fact that you provided various insights so that I could continue to study on my own, not just the lecture content, and that you tried to teach me as much as possible when I saw the additional and reference videos. 🤗🤗

    • gymcoding
      Instructor

      In this lecture, I tried to control my breathing as much as possible so that students can practice on their own. I am so touched that you understand! I plan to upload additional videos for the React lecture in the future if I have any insights to provide to students. 💪 Thank you ☺️

  • spdhsrnvl123님의 프로필 이미지
    spdhsrnvl123

    Reviews 4

    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 12

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

    Limited time deal ends in 8 days

    $58.30

    24%

    $77.00

    gymcoding's other courses

    Check out other courses by the instructor!

    Similar courses

    Explore other courses in the same field!