React Key Concepts

By : Maximilian Schwarzmüller

React Key Concepts

By: Maximilian Schwarzmüller

Overview of this book

As the most popular JavaScript library for building modern, interactive user interfaces, React is an in-demand framework that’ll bring real value to your career or next project. But like any technology, learning React can be tricky, and finding the right teacher can make things a whole lot easier. Maximilian Schwarzmüller is a bestselling instructor who has helped over two million students worldwide learn how to code, and his latest React video course (React — The Complete Guide) has over six hundred thousand students on Udemy. Max has written this quick-start reference to help you get to grips with the world of React programming. Simple explanations, relevant examples, and a clear, concise approach make this fast-paced guide the ideal resource for busy developers. This book distills the core concepts of React and draws together its key features with neat summaries, thus perfectly complementing other in-depth teaching resources. So, whether you've just finished Max’s React video course and are looking for a handy reference tool, or you've been using a variety of other learning materials and now need a single study guide to bring everything together, this is the ideal companion to support you through your next React projects. Plus, it's fully up to date for React 18, so you can be sure you’re ready to go with the latest version.

Preface

About the Book

Download A Free PDF Copy Of This Book

Free Chapter

1. React – What and Why

Introduction

What Is React?

The Problem with "Vanilla JavaScript"

React and Declarative Code

Introducing Single Page Applications

Summary and Key Takeaways

2. Understanding React Components and JSX

Introduction

What Are Components?

What Does React Do with All These Components?

JSX vs HTML vs Vanilla JavaScript

Outputting Dynamic Content

Summary and Key Takeaways

Apply What You Learned

3. Components and Props

Introduction

Not There Yet

Using Props in Components

Components, Props, and Reusability

How to Deal with Multiple Props

Summary and Key Takeaways

Apply What You Learned

4. Working with Events and State

Introduction

What's the Problem?

Updating State Correctly

A Look under the Hood of React

Working with Multiple State Values

Deriving Values from State

Summary and Key Takeaways

Apply What You Learned

5. Rendering Lists and Conditional Content

Introduction

What Are Conditional Content and List Data?

Rendering Content Conditionally

Outputting List Data

A Problem with List Items

Summary and Key Takeaways

Apply What You Learned

6. Styling React Apps

Introduction

How Does Styling Work in React Apps?

Scoped Styles with CSS Modules

Summary and Key Takeaways

Apply What You Learned

7. Portals and Refs

Introduction

A World without Refs

Refs versus State

Using Refs for More than DOM Access

React and Where Things End up in the DOM

Summary and Key Takeaways

Apply What You Have Learned

8. Handling Side Effects

Introduction

What's the Problem?

Understanding Side Effects

Dealing with Side Effects with the useEffect() Hook

Effects and Their Dependencies

Summary and Key Takeaways

Apply What You Learned

9. Behind the Scenes of React and Optimization Opportunities

Introduction

Revisiting Component Evaluations and Updates

The Virtual DOM vs the Real DOM

Avoiding Unnecessary Code Download

Strict Mode

Debugging Code and the React Developer Tools

Summary and Key Takeaways

Apply What You Learned

10. Working with Complex State

Introduction

A Problem with Cross-Component State

Using Context to Handle Multi-Component State

Limitations of useState( )

Managing State with useReducer( )

Summary and Key Takeaways

Apply What You Learned

11. Building Custom React Hooks

Introduction

Why Would You Build Custom Hooks?

Custom Hooks: A Flexible Feature

A More Complex Example

Summary and Key Takeaways

Apply What You Learned

12. Multipage Apps with React Router

Introduction

One Page Is Not Enough

Getting Started with React Router and Defining Routes

From Static to Dynamic Routes

Redirecting

Summary and Key Takeaways

Apply What You Learned

13. Managing Data with React Router

Introduction

Data Fetching and Routing Are Tightly Coupled

Loading Data with React Router

Layouts Revisited

Handling Errors

Onward to Data Submission

Summary and Key Takeaways

Apply What You Learned

14. Next Steps and Further Resources

Introduction

How Should You Proceed?

Final Words

Appendix

2. Understanding React Components & JSX

3. Components & Props

4. Working with Events & State

5. Rendering Lists & Conditional Content

6. Styling React Apps

7. Portals & Refs

8. Handling Side Effects

9. Behind the Scenes of React & Optimization Opportunities

10. Working with Complex State

11. Building Custom React Hooks

12. Multipage Apps with React Router

13. Managing Data with React Router

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Strict Mode

Throughout this chapter, you have learned a lot about React's internals and various optimization techniques. Not really an optimization technique, but still related, is another feature offered by React called Strict Mode.

You may have stumbled across code like this before:

import React from 'react';
// ... other code ...
root.render(<React.StrictMode><App /></React.StrictMode >);

<React.StrictMode> is another built-in component provided by React. It doesn't render any visual element, but it will enable some extra checks that are performed behind the scenes by React.

Most checks are related to identifying the use of unsafe or legacy code (i.e., features that will be removed in the future). But there are also some checks that aim to help you identify potential problems with your code.

For example, when using strict mode, React will execute component functions twice and also unmount and remount every component whenever...

React Key Concepts

By : Maximilian Schwarzmüller

React Key Concepts

By: Maximilian Schwarzmüller

Overview of this book

Related Content you might be interested in

Current Title:

React Key Concepts

Learn React with TypeScript

React Interview Guide

The React Workshop

Strict Mode