강의

멘토링

로드맵

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

651 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,014

Learners

1,415

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

87 reviews

4.8

87 reviews

  • nathomme님의 프로필 이미지
    nathomme

    Reviews 1

    Average Rating 5.0

    5

    31% enrolled

    이제 막 개발자로 성장하고 있는 사람입니다. 실무에서 vue를 사용해야했고, 공부하기 위해 인프런을 찾아보는 과정에서 우연하게 짐코딩님의 강의를 듣게 되었습니다. 다른 강의(유튜브,인프런 등)도 들었지만, 짐코딩님은 깔끔한 딕션으로 공식문서 기반한 탄탄한 지식을 꼼꼼하게 알려주셔서 너무너무 만족해서 리액트까지 짐코딩님의 거의 모든 강의를 수강하는 사람이 되었습니다. ㅎㅎ 프론트엔드 개발자는 아니지만 덕분에 정말 많은 성장을 한 것 같아 기분이 좋아 수강평을 남깁니다. 이번 리액트 강의도 너무너무 좋다고 느끼고 있으며, 앞으로 런칭하시는 강의들도 다 들어볼 예정입니다. 양질의 강의 만들어 주셔서 감사드립니다. 다른분들도 이 강의뿐아니라 짐코딩 님의 다른 강의들도 수강하시며 함께 성장하시면 좋겠습니다. 감사합니다.

    • 짐코딩
      Instructor

      안녕하세요! 소중한 수강평 감사드립니다! 🥹 Vue부터 React까지 제 강의들을 꾸준히 수강해주시고, 성장하셨다니 정말 기쁩니다. 공식 문서 기반의 접근방식과 설명 스타일이 도움되었다는 말씀에 큰 보람을 느껴요~! 🎉 앞으로도 실무에 바로 적용할 수 있는 양질의 강의로 보답하겠습니다. 계속해서 응원하겠습니다! 감사합니다! 💪

  • 상은쓰님의 프로필 이미지
    상은쓰

    Reviews 7

    Average Rating 5.0

    5

    100% enrolled

    웹 개발 입문부터 리액트 완벽 마스터 과정까지 들은 수강생입니다! 한 줄 요약: 다른 강의가 그냥 커피라면 이 강의는 T.O.P다. 😎 강사님께서는 복잡한 개념도 쉽게 설명해 주시고, 혼자 공부하는 인강의 단점인 '스스로 집중하기 어려움'을 중간중간 직접 실습하도록 유도해 주셔서 해결해 주십니다. 강의 중간에 "잠시 멈추고 먼저 해보세요"라는 말씀을 들을 때마다 느슨해졌던 긴장감이 다시 생기며, 주도적으로 문제를 해결하는 데 큰 도움이 되었습니다. 또한, 강의 교안과 깃헙 저장소에 코드가 체계적으로 잘 정리되어 있어 실습 중 에러가 발생하거나 나중에 다시 복습할 때도 따라가기 매우 수월했습니다. (이렇게 일일이 정리하시기 힘드셨을 텐데 덕분에 내용에 집중할 수 있었습니다. 😁) 특히, 강의 내용에 그치지 않고, 혼자서도 꾸준히 학습을 이어나갈 수 있도록 다양한 인사이트를 제공해 주시는 점과 추가 및 참고 영상들을 보면 최대한 많이 알려주시려고 하는 것이 느껴져서 감동받았습니다🤗🤗

    • 짐코딩
      Instructor

      이번 강의에서 수강생분들이 실습을 스스로 할 수 있도록 호흡을 최대한 조절했는데요. 알아주시니 감개무량합니다! 리액트 강의는 앞으로도 수강생분들에게 제공하고자 하는 인사이트가 있다면 추가 영상을 업로드할 계획입니다 💪 감사합니다 ☺️

  • 타겟토님의 프로필 이미지
    타겟토

    Reviews 12

    Average Rating 5.0

    5

    31% enrolled

    쉽게 가르친다고해서 절대 얕게 가르치지 않아서 고민하지말고 저점매수하세요. 정말 입문자들이나 한번 공부했는데 방향성 못잡으시는 분들 그냥 과감하게 투자하셔도 될 것 같습니다. Spring boot로 졸작하다가 화면에 나오는게 너무 터무니 없어서 듣기 시작해서 화면도 예쁘게 나오고 즉각적으로 시각적인 결과물이 나오니까 너무 재밌어요!! 연휴에 빡세게 들어서 욕심내서 nest도 한 번 들어보고 싶다는 욕심이 들정도로 너무 강의 퀄에 만족하고 있습니다. ((그리고 예전에 다른 강의 들을땐 공식문서 읽으라고 해도 양도 너무많고 읽기도 귀찮아서 잘 안읽었는데 밑에 참고할 만한 링크들 싹 다 달아두셔서 진짜 신경 많이 쓴게 느껴질 정도 .ㅎ..ㅎ))

    • 짐코딩
      Instructor

      안녕하세요, 타겟토님! 소중한 수강평 감사합니다~! 쉽지만 깊이 있게 가르치려는 노력을 알아봐 주셔서 감개무량합니다 🥹 Spring Boot에서 React로 넘어오시면서 화면에 바로 결과물이 나타나는 재미를 느끼신다니 다행이에요~! 수강생 분들이 학습하기 편하도록 관련 링크들을 기재했었는데요 유용하게 쓰고 계시다니 다행입니다. "Next.js 완벽 마스터" 강의에서도 좋은 인사이트과 결과물을 얻을 수 있을거예요~! 💪 계속해서 도움 되는 강의 만들도록 노력하겠습니다. 감사합니다!

  • 곰코드님의 프로필 이미지
    곰코드

    Reviews 5

    Average Rating 5.0

    Edited

    5

    41% enrolled

    사람마다 다르겠지만 개인적으로 강의 스타일이 잘 맞아서 선생님 강의 다 듣고 있습니다 다른 React 강의보다 깊고 넓게 자세하게 설명해주셔서 재미있게 공부하고 있습니다! 특히 스냅샷 처럼 동작하는 State 편에서 감동 받았고 자바스크립트 지식과 React 지식을 분별해서 알려주셔서 어떤 지식이 부족한지 알 수 있어서 만족하고 있습니다. 추후에 타입스크립트를 활용한 강의나 AI랑 결합한 컨텐츠도 있으면 좋겠네요. 앞으로도 계속 성장하셔서 좋은 강의 많이 출시 해주세요~! (개인적으로 노드 강의가 국내에는 많이 없어서 출시 해주시면...조심스럽게 말씀드려봅니다!) 감사합니다! 유튜브도 잘 보고 있어요~

    • 짐코딩
      Instructor

      소중한 수강평 감사드립니다! 강의 스타일이 잘 맞으셨다니 정말 기쁩니다. 리액트의 깊이 있는 내용까지 함께 공부하시는 모습이 보람차네요. 특히 State의 스냅샷 개념에서 저도 힘을 많이 썼는데요 감동을 받으셨다니 감개무량합니다~! Node.js 강의는 조심스럽게 고민해볼게요 🙂 그리고 현재 Next.js + Notion CMS 를 활용한 블로그 만들기 강의(with Cursor AI)를 준비 중이니 조만간 좋은 소식 전해드릴게요. 기대해주세요! 💪 유튜브도 계속 봐주셔서 감사합니다! 💪

  • 조성국님의 프로필 이미지
    조성국

    Reviews 1

    Average Rating 5.0

    5

    90% enrolled

    꼼꼼하고 깔끔한 강의 ! 타입스크립트, nextjs 강의도 만들어주세요

    • 짐코딩
      Instructor

      소중한 수강평 감사드립니다! 꼼꼼하고 깔끔하게 강의를 준비한 보람이 있네요. 정말 기쁩니다. 타입스크립트와 Next.js 강의 요청 감사합니다! 그리고 현재 Next.js + Notion CMS 를 활용한 블로그 만들기 강의(with Cursor AI)를 준비 중이니 조만간 좋은 소식 전해드릴게요. 기대해주세요! 💪

$77.00

gymcoding's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!