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

Introduction

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

What Is React

What is React
Setting up Chrome tools for React
Setting up Firefox DevTools for React
Working with Visual Studio Code

Intro to React Elements

Adding React to your project
Creating React elements
Refactoring elements using JSX
Incorporating Babel
Working with JSX syntax

React Components

Creating a React component
Adding component properties
Working with lists
Adding keys to list items
Displaying images with React
Using fragments

React State in the Component Tree

Generating a project with Create React App
Touring a Create React App project
Destructuring arrays and objects
Understanding the useState Hook
Working with useEffect
Understanding the dependency array
Incorporating useReducer

Handling Forms in React

Working with uncontrolled components
Creating controlled form elements
Building a custom Hook
Choosing a form library

Asynchronous React

Fetching data with Hooks
Displaying data from an API
Handling loading states
Fetching data with GraphQL
Working with render props

React Router

Installing React Router v6
Configuring the Router
Incorporating the Link component
Nesting links with React Router v6

React Testing and Deployment

Using Create React App as a testing platform
Testing small functions with Jest
Introducing React Testing Library
Testing events with React Testing Library
Deploying to Netlify

Conclusion

Next steps