React.js Essential Training

Course details

Among all other JavaScript libraries, React.js stands out. It relies on reusable components, not templates, for UI development, allowing developers to render views where data changes over time. React applications are more scalable and more maintainable, making developers more efficient and users more satisfied. In this course, Eve Porcello introduces the basics of the React library using the most modern syntax and best practices for creating React components. Along the way, learn how to set up Chrome tools for React; create new components; work with the built-in Hooks in React; use the Create React App to run tests, and more. By the end of the course, you'll be armed with the essentials of React.js and better prepared to build your own browser-based projects.

Concepts

0. Introduction

01 - Building modern user interfaces with React
02 - What you should know before watching this course

1. What Is React

03 - What is React
04 - Setting up Chrome tools for React
05 - Setting up Firefox DevTools for React
06 - Working with Visual Studio Code

2. Intro to React Elements

07 - Adding React to your project
08 - Creating React elements
09 - Refactoring elements using JSX
10 - Incorporating Babel
11 - Working with JSX syntax

3. React Components

12 - Creating a React component
13 - Adding component properties
14 - Working with lists
15 - Adding keys to list items
16 - Displaying images with React
17 - Using fragments

4. React State in the Component Tree

18 - Generating a project with Create React App
19 - Touring a Create React App project
20 - Destructuring arrays and objects
21 - Understanding the useState Hook
22 - Working with useEffect
23 - Understanding the dependency array
24 - Incorporating useReducer

5. Handling Forms in React

25 - Working with uncontrolled components
26 - Creating controlled form elements
27 - Building a custom Hook
28 - Choosing a form library

6. Asynchronous React

29 - Fetching data with Hooks
30 - Displaying data from an API
31 - Handling loading states
32 - Fetching data with GraphQL
33 - Working with render props

7. React Router

34 - Installing React Router v6
35 - Configuring the Router
36 - Incorporating the Link component
37 - Nesting links with React Router v6

8. React Testing and Deployment

38 - Using Create React App as a testing platform
39 - Testing small functions with Jest
40 - Introducing React Testing Library
41 - Testing events with React Testing Library
42 - Deploying to Netlify

Conclusion

43 - Next steps