Please ensure Javascript is enabled for purposes of website accessibility
React Practice Course - Build React Application From Scratch

Learn to build React applications from scratch! This course covers everything from hooks to testing. Start building today! Read more.

No ratings yet
Course Skill Level
Intermediate
Time Estimate
4h 30m

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 Course

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

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

Are you interested in higher education?