Learn to build React applications from scratch! This course covers everything from hooks to testing. Start building today! Read more.
Senior Software Engineer with more than 8 years of production experience in Web Development. Experienced both in frontend and backend technologies.
Access all courses in our library for only $9/month with All Access Pass
Get Started with All Access PassBuy Only This CourseAbout This Course
Who this course is for:
- Aspiring Front-End Developers: This course is a perfect starting point for those who want to learn how to build React applications from scratch.
- React Developers Looking to Level Up: If you already have some React experience, this course will help you solidify your foundation, learn best practices, and improve your development speed.
What you’ll learn:
- Build High-Performance React Applications: Learn the core concepts and techniques needed to create efficient and scalable React applications.
- Master Modern React Practices: Develop your skills in using essential features like hooks, state management, and component optimization to effectively build React applications.
- Work Efficiently: Discover best practices for writing clean, maintainable, and performant React code.
Requirements:
- Solid JavaScript Foundation: A strong understanding of JavaScript fundamentals (variables, functions, loops, etc.) is essential.
- Basic HTML & CSS Knowledge: Familiarity with HTML structures and CSS styling is required.
- Introduction to React: Having a basic grasp of React concepts (components, props, state) will be beneficial.
- ES6+ JavaScript: Knowing the basics of ES6+ syntax (classes, arrow functions, etc.) will be helpful.
Launch Your React Career: From Beginner to Building Real Applications
React’s dominance in the JavaScript library landscape is undeniable. The demand for React engineers remains strong, with companies across all sizes struggling to fill positions. Salaries are at record highs! Now is the perfect time to learn React and refine your skills.
While beginner React courses abound, many lack a clear path for progression. They often fail to guide students on building real-world React applications used by customers.
This course bridges that gap. We’ll focus on practical React application, not just theory. You’ll learn to build a high-quality product, complete with unit tests (UT) and Storybook stories for all core components. These industry-standard practices are essential for any developer’s toolkit.
Who’s Your Instructor?
I’m a Senior Software Engineer with over 8 years of real-world web development experience, covering both front-end and back-end technologies. For the past 2+ years, I’ve been deeply immersed in React, building a diverse range of React applications. I believe hands-on practice is key to mastering programming, and I’m passionate about sharing my experience with you as you learn to build React applications.
What Will You Build?
This course dives into building a practical React application with three distinct pages: Home, Search, and Not Found. We’ll leverage React Router, the go-to solution for navigation within React apps.
Unveiling the Tech Stack:
- Data Fetching: We’ll simulate a Google homepage by fetching data from Wikipedia’s API using Axios (a popular HTTP client library). For unit testing and Storybook scenarios, we’ll employ Moxios to mock the data.
- React Hooks: This course emphasizes the importance of React hooks, including useState, useEffect, and others. We’ll also delve into creating and testing custom hooks.
- Testing Strategies: Storybook will be our companion for creating reusable component demos. Enzyme, Jest, and the React Hooks Testing Library will equip you with a comprehensive unit testing approach, aiming for an 80% code coverage to ensure application stability.
By the end of this course, you’ll have learned how to become a React Application Powerhouse: Master the skills to build high-quality React applications efficiently, adhering to industry best practices.
There’s more to you. Dive into my courses and unlock your hidden potential to build React applications and more!
Our Promise to You
By the end of this course, you will have learned how to build React applications.
10 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.
Get started today and learn more about using React. Build React application skills with us and advance your career!
Course Curriculum
Section 1 - Introduction | |||
Introduction | 00:00:00 | ||
What We Need To Start | 00:00:00 | ||
Section 2 - App Development | |||
Installing ReactJS | 00:00:00 | ||
Setting Up React Development App Environment | 00:00:00 | ||
Configuring Git And GitHub | 00:00:00 | ||
React AutoComplete Installation | 00:00:00 | ||
Fetching Data With REST From Wikipedia | 00:00:00 | ||
useSearch Custom Hook With Axios | 00:00:00 | ||
Cancelling Axios Calls | 00:00:00 | ||
useDebounce Custom Hook | 00:00:00 | ||
Custom Input Component | 00:00:00 | ||
useSearchForm Custom Hook | 00:00:00 | ||
useCallback Hook | 00:00:00 | ||
React Render Props Pattern | 00:00:00 | ||
Configuring SCSS | 00:00:00 | ||
Routing With React-Router-Dom | 00:00:00 | ||
Adding App Pages | 00:00:00 | ||
Home Page | 00:00:00 | ||
Search Page | 00:00:00 | ||
Section 3 - Storybook Configuration | |||
Installing Storybook | 00:00:00 | ||
Storybook Configuration | 00:00:00 | ||
Fixing Possible Issues With Storybook | 00:00:00 | ||
Storybook Interface Overview | 00:00:00 | ||
The First Story With Storybook | 00:00:00 | ||
ListItem Story | 00:00:00 | ||
Search Result Page Story | 00:00:00 | ||
Installing Moxios To Configure Mocks | 00:00:00 | ||
Storybook Documentation With MDX | 00:00:00 | ||
Section 4 - Unit Tests | |||
Unit Tests Introduction With Jest | 00:00:00 | ||
Unit Tests Convention | 00:00:00 | ||
Input Component Unit Test | 00:00:00 | ||
Enzyme Installation | 00:00:00 | ||
Coverage Reporting | 00:00:00 | ||
AutoComplete Unit Tests | 00:00:00 | ||
Container Component Unit Test | 00:00:00 | ||
useSearchForm Hook Unit Test | 00:00:00 | ||
useDebounce Hook Unit Test | 00:00:00 | ||
useSearch Hook Unit Test | 00:00:00 | ||
App Unit Test | 00:00:00 | ||
Unit Tests Summary | 00:00:00 | ||
Section 5 - Best Practices Of React App Development | |||
React PropTypes | 00:00:00 | ||
React DefaultProps | 00:00:00 | ||
Section 6 - Bonus | |||
Installing NodeJS On Windows | 00:00:00 | ||
Installing Yarn On Windows | 00:00:00 |
About This Course
Who this course is for:
- Aspiring Front-End Developers: This course is a perfect starting point for those who want to learn how to build React applications from scratch.
- React Developers Looking to Level Up: If you already have some React experience, this course will help you solidify your foundation, learn best practices, and improve your development speed.
What you’ll learn:
- Build High-Performance React Applications: Learn the core concepts and techniques needed to create efficient and scalable React applications.
- Master Modern React Practices: Develop your skills in using essential features like hooks, state management, and component optimization to effectively build React applications.
- Work Efficiently: Discover best practices for writing clean, maintainable, and performant React code.
Requirements:
- Solid JavaScript Foundation: A strong understanding of JavaScript fundamentals (variables, functions, loops, etc.) is essential.
- Basic HTML & CSS Knowledge: Familiarity with HTML structures and CSS styling is required.
- Introduction to React: Having a basic grasp of React concepts (components, props, state) will be beneficial.
- ES6+ JavaScript: Knowing the basics of ES6+ syntax (classes, arrow functions, etc.) will be helpful.
Launch Your React Career: From Beginner to Building Real Applications
React’s dominance in the JavaScript library landscape is undeniable. The demand for React engineers remains strong, with companies across all sizes struggling to fill positions. Salaries are at record highs! Now is the perfect time to learn React and refine your skills.
While beginner React courses abound, many lack a clear path for progression. They often fail to guide students on building real-world React applications used by customers.
This course bridges that gap. We’ll focus on practical React application, not just theory. You’ll learn to build a high-quality product, complete with unit tests (UT) and Storybook stories for all core components. These industry-standard practices are essential for any developer’s toolkit.
Who’s Your Instructor?
I’m a Senior Software Engineer with over 8 years of real-world web development experience, covering both front-end and back-end technologies. For the past 2+ years, I’ve been deeply immersed in React, building a diverse range of React applications. I believe hands-on practice is key to mastering programming, and I’m passionate about sharing my experience with you as you learn to build React applications.
What Will You Build?
This course dives into building a practical React application with three distinct pages: Home, Search, and Not Found. We’ll leverage React Router, the go-to solution for navigation within React apps.
Unveiling the Tech Stack:
- Data Fetching: We’ll simulate a Google homepage by fetching data from Wikipedia’s API using Axios (a popular HTTP client library). For unit testing and Storybook scenarios, we’ll employ Moxios to mock the data.
- React Hooks: This course emphasizes the importance of React hooks, including useState, useEffect, and others. We’ll also delve into creating and testing custom hooks.
- Testing Strategies: Storybook will be our companion for creating reusable component demos. Enzyme, Jest, and the React Hooks Testing Library will equip you with a comprehensive unit testing approach, aiming for an 80% code coverage to ensure application stability.
By the end of this course, you’ll have learned how to become a React Application Powerhouse: Master the skills to build high-quality React applications efficiently, adhering to industry best practices.
There’s more to you. Dive into my courses and unlock your hidden potential to build React applications and more!
Our Promise to You
By the end of this course, you will have learned how to build React applications.
10 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.
Get started today and learn more about using React. Build React application skills with us and advance your career!
Course Curriculum
Section 1 - Introduction | |||
Introduction | 00:00:00 | ||
What We Need To Start | 00:00:00 | ||
Section 2 - App Development | |||
Installing ReactJS | 00:00:00 | ||
Setting Up React Development App Environment | 00:00:00 | ||
Configuring Git And GitHub | 00:00:00 | ||
React AutoComplete Installation | 00:00:00 | ||
Fetching Data With REST From Wikipedia | 00:00:00 | ||
useSearch Custom Hook With Axios | 00:00:00 | ||
Cancelling Axios Calls | 00:00:00 | ||
useDebounce Custom Hook | 00:00:00 | ||
Custom Input Component | 00:00:00 | ||
useSearchForm Custom Hook | 00:00:00 | ||
useCallback Hook | 00:00:00 | ||
React Render Props Pattern | 00:00:00 | ||
Configuring SCSS | 00:00:00 | ||
Routing With React-Router-Dom | 00:00:00 | ||
Adding App Pages | 00:00:00 | ||
Home Page | 00:00:00 | ||
Search Page | 00:00:00 | ||
Section 3 - Storybook Configuration | |||
Installing Storybook | 00:00:00 | ||
Storybook Configuration | 00:00:00 | ||
Fixing Possible Issues With Storybook | 00:00:00 | ||
Storybook Interface Overview | 00:00:00 | ||
The First Story With Storybook | 00:00:00 | ||
ListItem Story | 00:00:00 | ||
Search Result Page Story | 00:00:00 | ||
Installing Moxios To Configure Mocks | 00:00:00 | ||
Storybook Documentation With MDX | 00:00:00 | ||
Section 4 - Unit Tests | |||
Unit Tests Introduction With Jest | 00:00:00 | ||
Unit Tests Convention | 00:00:00 | ||
Input Component Unit Test | 00:00:00 | ||
Enzyme Installation | 00:00:00 | ||
Coverage Reporting | 00:00:00 | ||
AutoComplete Unit Tests | 00:00:00 | ||
Container Component Unit Test | 00:00:00 | ||
useSearchForm Hook Unit Test | 00:00:00 | ||
useDebounce Hook Unit Test | 00:00:00 | ||
useSearch Hook Unit Test | 00:00:00 | ||
App Unit Test | 00:00:00 | ||
Unit Tests Summary | 00:00:00 | ||
Section 5 - Best Practices Of React App Development | |||
React PropTypes | 00:00:00 | ||
React DefaultProps | 00:00:00 | ||
Section 6 - Bonus | |||
Installing NodeJS On Windows | 00:00:00 | ||
Installing Yarn On Windows | 00:00:00 |