Skip to content

React Practice Course - Build React Application From Scratch

Skill Success


Save 81%
£29 inc VAT (was £157)
Offer ends 28 January 2022
Study method
Online, self-paced
No formal qualification
Additional info
  • Tutor is available to students
  • Certificate of completion available and is included in the price

Add to basket or enquire


This course includes lifetime access so you can complete it at your own speed.

This course is designed for those interested to learn the basics of how to create a React application, develop independent components with Storybook, and create unit tests for components and hooks.

Benefits of taking this course include:

  • Unlimited and lifetime access to the course
  • Learn the course at your own pace
  • Course can be accessed on any platform
  • 24/7 Customer support

Course media


React is the most popular JavaScript library of the last five years, and the job market is still hotter than ever. Companies large and small can't hire engineers who understand React fast enough, and salaries for engineers are at an all-time high. It's a great time to learn to React! It's a great time to do a lot of React practice!

Despite the huge number of React courses for beginners, authors fail to say what to do next after the first step. They don’t explain how to create a real React application for customers.

In this course, we'll do React practice. We'll deliver a high-quality product with unit tests (UT) and Storybook stories for all major components. These practices are must-haves for developers.

Who's teaching you in this course?

I am a Senior Software Engineer with more than 8 years of production experience in Web Development, experienced in both frontend and backend technologies.

For the last 2+ years, I've been working with React. I’ve created a lot of different projects and have a huge experience. Practice is the most important in programming and I want to share it with you.

What's inside the course?

  • We'll create a simple React application with 3 different pages: Home page, Search page, and Not found page. React Router is the best choice!
  • It will be a copy of the Google homepage fetching data from Wikipedia using its API. For fetching data, we'll use Axios and for mocking this data in Storybook and UTs, we'll use Moxios.
  • React hooks are a must-have. Default hooks useState, useEffect, and others are used.
  • Custom React hooks will be created, explained, and covered with UTs.
  • Storybook is one of the best practices in development. We'll learn how to install and use it. We’ll create stories for the most important components.
  • Enzyme and Jest are used for unit testing. React hooks testing library is used for hooks.
  • According to the unit tests code convention, we'll get 80% of code coverage.

By the end of this course, you'll have learned how to deliver high-quality React applications, how to do it fast and following best practices.

Who this course is for:

  • Students who want to learn how to build React application
  • Developers who want to improve their React skills
  • Students who want to learn a future-proof technologies

React Practice Course - Build React Application From Scratch will cover the following topics:

Section 1 - Introduction

  • Introduction
  • What We Need To Start

Section 2 - App Development

  • Installing ReactJS
  • Setting Up React Development App Environment
  • Configuring Git And GitHub
  • React AutoComplete Installation
  • Fetching Data With REST From Wikipedia
  • useSearch Custom Hook With Axios
  • Cancelling Axios Calls
  • useDebounce Custom Hook
  • Custom Input Component
  • useSearchForm Custom Hook
  • useCallback Hook
  • React Render Props Pattern
  • Configuring SCSS
  • Routing With React-Router-Dom
  • Adding App Pages
  • Home Page
  • Search Page

Section 3 - Storybook Configuration

  • Installing Storybook
  • Storybook Configuration
  • Fixing Possible Issues With Storybook
  • Storybook Interface Overview
  • The First Story With Storybook
  • ListItem Story
  • Search Result Page Story
  • Installing Moxios To Configure Mocks
  • Storybook Documentation With MDX

Section 4 - Unit Tests

  • Unit Tests Introduction With Jest
  • Unit Tests Convention
  • Input Component Unit Test
  • Enzyme Installation
  • Coverage Reporting
  • AutoComplete Unit Tests
  • Container Component Unit Test
  • useSearchForm Hook Unit Test
  • useDebounce Hook Unit Test
  • useSearch Hook Unit Test
  • App Unit Test
  • Unit Tests Summary

Section 5 - Best Practices Of React App Development

  • React PropTypes
  • React DefaultProps

Section 6 - Bonus

  • Installing NodeJS On Windows
  • Installing Yarn On Windows

Who is this course for?

This course is designed for those interested to learn the basics of how to create a React application, develop independent components with Storybook, and create unit tests for components and hooks.


  • JavaScript, HTML, CSS fundamentals are absolutely required
  • Basic React knowledge
  • ES6+ JavaScript knowledge at beginner level

Career path


Questions and answers

Currently there are no Q&As for this course. Be the first to ask a question.


Currently there are no reviews for this course. Be the first to leave a review.


What does study method mean?

Study method describes the format in which the course will be delivered. At Reed Courses, courses are delivered in a number of ways, including online courses, where the course content can be accessed online remotely, and classroom courses, where courses are delivered in person at a classroom venue.

What are CPD hours/points?

CPD stands for Continuing Professional Development. If you work in certain professions or for certain companies, your employer may require you to complete a number of CPD hours or points, per year. You can find a range of CPD courses on Reed Courses, many of which can be completed online.

What is a ‘regulated qualification’?

A regulated qualification is delivered by a learning institution which is regulated by a government body. In England, the government body which regulates courses is Ofqual. Ofqual regulated qualifications sit on the Regulated Qualifications Framework (RQF), which can help students understand how different qualifications in different fields compare to each other. The framework also helps students to understand what qualifications they need to progress towards a higher learning goal, such as a university degree or equivalent higher education award.

What is an ‘endorsed’ course?

An endorsed course is a skills based course which has been checked over and approved by an independent awarding body. Endorsed courses are not regulated so do not result in a qualification - however, the student can usually purchase a certificate showing the awarding body’s logo if they wish. Certain awarding bodies - such as Quality Licence Scheme and TQUK - have developed endorsement schemes as a way to help students select the best skills based courses for them.