React practice course. Build React app from scratch.

Name: React practice course. Build React app from scratch.
Rating: 4.5 (193 reviews)

Learn React doing a real project with Storybook and unit tests.

Created byMaksym Rudnyi

Last updated 10/2020

English

English [Auto],

What you'll learn

How to create React application
Developing independent components with Storybook
React hooks: default and custom
Creating unit tests for components and hooks
React
Git & GitHub
Axios
React patterns
Storybook
Unit tests
Enzyme
Code coverage
NodeJS
Yarn

Course content

6 sections • 45 lectures • 4h 30m total length

Introduction4:44
What do we need to start3:28
Create React app - https://github.com/facebook/create-react-app
Yarn - https://yarnpkg.com/
Storybook - https://storybook.js.org/
Jest - https://jestjs.io/
React Router - https://reactrouter.com/
Axios - https://github.com/axios/axios
Moxios - https://github.com/axios/moxios
Git - https://git-scm.com/
Course project repository - https://github.com/MaksymRudnyi/serch-wiki
Free Visual studio code - https://code.visualstudio.com/

Installing ReactJS2:54
Install the latest React application with create react app via npx, using yarn or npm as needed, then launch on localhost 3000 and set up the environment.
Setting up React development app environment5:00
Configuring Git and GitHub2:38
React AutoComplete installation4:19
Fetching data with REST from Wikipedia10:57
Fetch real data from Wikipedia via REST in a React app, install and use Axios for AJAX, and manage data with useEffect and state, handling CORS and errors.
useSearch custom hook with Axios7:44
Cancelling Axios calls9:29
useDebounce custom hook7:06
Custom Input component9:33
useSearchForm custom hook7:26
useCallback hook2:21
React render props pattern8:42
Configuring SCSS3:13
Routing with react-router-dom4:40
Install and configure react router, import browser router as router, use switch and route to map home, search, and not-found pages, apply exact matching for the home route.
Adding app pages5:25
Home page9:26
Search page10:17

Installing Storybook2:13
Discover Storybook, an open source tool for developing React components in isolation with zero configuration; test, document, and switch themes using props, mobile, and tablet views.
Storybook configuration2:57
Fixing possible issues with Storybook2:12
Fix issues with Storybook by removing node_modules and yarn logs, then reinstalling dependencies from scratch to ensure Storybook runs and launches successfully.
Storybook interface overview6:12
The first story with Storybook2:44
Create your first story in Storybook by configuring a component input with a placeholder, then move the article list to a separate component and preview the page in Storybook.
ListItem story8:23
Search result page story4:39
Build a search results page in storybook by passing location and search props, calling the backend with useSearch, and using mocked axios data for no data and test scenarios.
Installing moxios to configure mocks6:25
Install and configure moxios to mock requests in storybook, using contract-based data for development and testing without real data.
Storybook documentation with mdx4:33

Unit tests intro with Jest1:56
Unit tests convention5:50
Input component unit test6:52
Enzyme installation8:20
Install and configure Enzyme for React unit testing, use shallow rendering for component tests, explore mount, manage snapshots and props, and verify code coverage.
Coverage reporting8:27
Learn to run and configure code coverage for React tests, troubleshoot coverage issues, skip stories, set thresholds, and generate text and HTML coverage reports.
Autocomplete unit tests13:13
Container component unit test12:16
useSearchForm hook unit test7:00
useDebounce hook unit test7:22
Test the bounce hook with fake timers, rendering the hook with value and delay to verify default 500 ms, simulate rapid input, and confirm debounced values update after 510 ms.
useSearch hook unit test11:50
App unit test7:43
Unit tests summary4:28

Requirements

JavaScript + HTML + CSS fundamentals are absolutely required
Basic React knowledge
ES6+ JavaScript knowledge at beginning level

Description

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!

What's this course about?

There are a huge number of React courses for beginners where authors describe the first steps. They are great for beginners. But, what to do next? 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-have" for developers.

Who's teaching you in this course?

Senior Software Engineer with more than 8 years of production experience in Web Development. Experienced both in frontend and backend technologies.

For the last 2+ years, I've been working with React. Created a lot of different projects and have a huge experience. The 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 home page with 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. Will 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 application. How to do it fast and following best practices.

If you have any questions, please don't hesitate to contact me. I have a huge experience in development and would love to share it and help students learn something new. Sign up today and see how fast you can improve your seniority in React software development.

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 app from scratch.

What you'll learn

Explore related topics

Course content

React practice intro2 lectures • 8min

App Development17 lectures • 1hr 51min

Storybook configuration9 lectures • 40min

Unit tests12 lectures • 1hr 35min

Best practices of React app development2 lectures • 7min

Bonus3 lectures • 8min

Requirements

Description

Who this course is for: