Learning React

Synopsis

If you want to learn how to build efficient React applications, this is your book. Ideal for web developers and software engineers who understand how JavaScript, CSS, and HTML work in the browser, this updated edition provides best practices and patterns for writing modern React code. No prior knowledge of React or functional JavaScript is necessary.

With their learning road map, authors Alex Banks and Eve Porcello show you how to create UIs that can deftly display changes without page reloads on large-scale, data-driven websites. You'll also discover how to work with functional programming and the latest ECMAScript features. Once you learn how to build React components with this hands-on guide, you'll understand just how useful React can be in your organization.

Understand key functional programming concepts with JavaScript Look under the hood to learn how React runs in the browser Create application presentation layers with React components Manage data and reduce the time you spend debugging applications Incorporate React Hooks to manage state and fetch data Use a routing solution for single-page application features Learn how to structure React applications with servers in mind

Summary

Chapter 1: Introduction to React

* Summary: Introduces React as a JavaScript library for building user interfaces. Discusses its key features, including component-based architecture, unidirectional data flow, and virtual DOM.
* Example: Building a simple counter app using React, demonstrating the use of components and state.

Chapter 2: Components

* Summary: Explores different types of React components, such as functional and class components. Explains how to create and use components, including props and states.
* Example: Building a reusable card component with customizable title and content, showcasing the use of props.

Chapter 3: State Management

* Summary: Introduces the concept of state in React and explains how to manage it using hooks. Covers useState, useEffect, and other hooks.
* Example: Creating a form with controlled inputs using useState to track changes and useEffect to handle form submission.

Chapter 4: Data Flow

* Summary: Explains the unidirectional data flow in React. Discusses how data is passed down from parent components to child components and how events propagate back up.
* Example: Building a parent-child relationship where the parent passes data to the child and the child triggers events that update the parent's state.

Chapter 5: Styling

* Summary: Introduces different ways to style React components, including inline styles, CSS modules, and styled components. Explains how to apply styles and handle responsive designs.
* Example: Using CSS modules to isolate component styles and create a reusable button component with different sizes and colors.

Chapter 6: Routing

* Summary: Explains how to handle routing in React using frameworks like React Router. Discusses different routing techniques, including path matching, nested routes, and URL parameters.
* Example: Building a simple navigation bar with links to different routes and displaying the corresponding pages.

Chapter 7: Testing

* Summary: Introduces different approaches to testing React components. Covers unit testing with Jest, integration testing with Enzyme, and mocking techniques.
* Example: Writing unit tests to ensure the functionality of a button component, including its disabled state and click handler.

Chapter 8: Advanced Techniques

* Summary: Explores advanced topics in React, including performance optimizations, error handling, and code splitting. Discusses advanced features like hooks like useMemo and useCallback.
* Example: Implementing a lazy loading technique to improve the loading performance of a component that is initially hidden.