What you'll learn
React is the most popular front-end JavaScript library in the field of web development. It is used by large, established companies and newly-minted startups alike (Netflix, Airbnb, Instagram, and the New York Times, to name a few). React brings many advantages to the table, making it a better choice than other frameworks like Angular.js.
React is a JavaScript library created for building fast and interactive user interfaces for web and mobile applications. It is an open-source, component-based, front-end library responsible only for the application’s view layer. In Model View Controller (MVC) architecture, the view layer is responsible for how the app looks and feels
CURRICULUM
Introduction to React
- What is React?
- Hello React
- Using the create-react-app
Components
- What are Components?
- Types of Components
- JSX
State and Props
- What is State?
- Stateful Function Components with Hooks
- What are props?
- Type Checking with Prop Types
Rendering Lists
- Using the map function to render lists
- The “key” attribute
- Using Fragments
Components Revisited
- Lifecycle of a Component
- Side effects & Lifecycle
- Managing cleanup
- Events
- Error Management
Building Forms
- Controlled Form Components
- Uncontrolled Form Components
- Handling inputs efficiently
- Project - Building a currency converter
Render Props & Higher Order Components
- Render Props
- Higher Order Components
Portals
- Introduction to Portals
- Event bubbling in Portals
Global & Shared Data
- Unidirectional Data Flow
- Challenges with Props
- The Context API
Hooks in Focus
- Understanding Hooks
- The useState hook
- Side effects using the useEffect hook
- The useContext hook
- The useReducer hook
- Writing your own hook
Routing in React App
- Routing in a React application
- Routing with React Router
- Nested Routes & Parameters
- Protecting Routes
Code Splitting
- Code splitting & Suspense
- Route Based Code Splitting & Lazy Loading
Isomorphic React
- Server-Side Rendering
- SSR with React - Setup & Server
- SSR with React - The Toolchain
State Management using Redux
- State Management & Redux
- Setting up Redux
- Actions & Reducer for the Catalog
- Using the connect() higher order function
- Actions & Reducer for the Cart
- Using Redux Hooks
- Implementing Middleware & Persistence
Testing Components
- Introduction to Testing
- Using Jest with Test Utils from React-DOM
- Using Jest with the React Testing Library
- Using Jest with Enzyme
The React Ecosystem
In this module, we will discuss the various options available and the best ways to create React apps.