Practical React
Course Description
Following on from the React Developer course this takes a deeper dive into the core features of React, React Router and React Query by exploring more practical real-world examples. This course will give developers who are familiar with React the knowledge they need to deliver real-world React applications.
Duration: 5 days
Prerequisites
Understanding of HTML, CSS and JavaScript required. Some familiarity with React is expected but experience with Angular or another component framework would also be suitable.
React Overview
Development environment Installation & first application Overview of React features Functional programming techniques Alternatives to create-react-app
Recap of React Core Features
JSX Components Props Events Component rendering Debugging rendering issues
Advanced React Hooks
What is a Hook? How do Hooks work? Built in hooks useState, useEffect, useCallback, useMemo, useContext, useRef, Advanced use cases for built-in hooks Creating a custom hooks Practical examples of using custom hooks in a React application
Higher Order Components
What is a higher order component Wrapper components Practical uses for higher order components
Recap of Commonly Used React Libraries
ReactRouter ReactQuery
Forms And Databinding
Data binding Form controls Advanced validation techniques Hooks for improving form performance
Creating Applications using UI Frameworks
Bootstrap, PrimeReact Styled Components Creating an Application Adding a MenuBar Responsive Design
Authentication & Authorization
Json-server Serving static content Sample API Authentication Authorization JWT based login Hooks for maintaining login state
Advanced State Management
Understanding State The useState hook What is "prop-drilling"? The useContext hook Introducing Redux Reducers
Next.js Introduction
What is next.js create-next-app React Server Components Client and SErver Rendering Practical Next.js application
React Best Practices
New features in React 2022 / 2023 Thinking in React Some React anti-patterns Understanding Virtual DOM Component lifecycle Integrating with other libraries