React Key Concepts

React Key Concepts

by Maximilian Schwarzmüller
Released December 2022
Publisher(s): Packt Publishing
ISBN: 9781803234502

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Build the understanding, skills, and experience to confidently implement React in your next project with this fast-paced overview of React fundamentals. Purchase of the print or Kindle book includes a free eBook in PDF format.

Key Features

  • A clear, concise explanation of core React 18 functionalities to promote quick, easy reference
  • Gain a deep understanding of key React concepts with the help of step-by-step derivations
  • Work with practical exercises that challenge you to apply your new skills and build your own simple apps

Book Description

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.

What you will learn

  • Build modern, user-friendly, and reactive web apps
  • Create components and utilize props to pass data between them
  • Handle events, perform state updates, and manage conditional content
  • Apply styles dynamically and conditionally to create a modern UI
  • Use advanced state management techniques such as React’s context API
  • Utilize React router to render different pages for different URLs
  • Understand key best practices and optimization opportunities

Who this book is for

This React book is for developers who have prior experience with, or who are currently learning, the basics of React. You can use this book as a standalone resource to consolidate your understanding or as a companion guide to a more in-depth course. To get the most value from this book, you should have a basic understanding of the fundamentals of JavaScript, HTML, and CSS.

Table of contents

  1. React Key Concepts
  2. Preface
    1. About the Book
      1. About the Author
      2. Audience
      3. Prospective Table of Contents
      4. Conventions
      5. Setting Up Your Environment
      6. Installing React.js
      7. Downloading the Code Bundle
      8. Get in Touch 
      9. Please Leave a Review 
    2. Download A Free PDF Copy Of This Book
  3. 1. React – What and Why
    1. Introduction
    2. What Is React?
    3. The Problem with "Vanilla JavaScript"
    4. React and Declarative Code
      1. How React Manipulates the DOM
    5. Introducing Single Page Applications
      1. Creating a React Project
    6. Summary and Key Takeaways
      1. What's Next?
      2. Test Your Knowledge!
  4. 2. Understanding React Components and JSX
    1. Introduction
    2. What Are Components?
      1. Why Components?
      2. The Anatomy of a Component
      3. What Exactly Are Component Functions?
    3. What Does React Do with All These Components?
      1. Built-in Components
      2. Naming Conventions
    4. JSX vs HTML vs Vanilla JavaScript
      1. Using React without JSX
      2. JSX Elements Are Treated like Regular JavaScript Values
      3. JSX Elements Must Be Self-Closing
    5. Outputting Dynamic Content
      1. When Should You Split Components?
    6. Summary and Key Takeaways
      1. What's Next?
      2. Test Your Knowledge!
    7. Apply What You Learned
      1. Activity 2.1: Creating a React App to Present Yourself
      2. Activity 2.2: Creating a React App to Log Your Goals for This Book
  5. 3. Components and Props
    1. Introduction
    2. Not There Yet
    3. Using Props in Components
      1. Passing Props to Components
      2. Consuming Props in a Component
    4. Components, Props, and Reusability
      1. The Special "children" Prop
      2. Which Components Need Props?
    5. How to Deal with Multiple Props
      1. Spreading Props
      2. Prop Chains/Prop Drilling
    6. Summary and Key Takeaways
      1. What's Next?
      2. Test Your Knowledge!
    7. Apply What You Learned
      1. Activity 3.1: Creating an App to Output Your Goals for This Book
  6. 4. Working with Events and State
    1. Introduction
    2. What's the Problem?
      1. How Not to Solve the Problem
      2. A Better Incorrect Solution
      3. Properly Reacting to Events
    3. Updating State Correctly
      1. A Closer Look at useState()
    4. A Look under the Hood of React
      1. Naming Conventions
      2. Allowed State Value Types
    5. Working with Multiple State Values
      1. Using Multiple State Slices
      2. Managing Combined State Objects
      3. Updating State Based on Previous State Correctly
      4. Two-Way Binding
    6. Deriving Values from State
      1. Working with Forms and Form Submission
      2. Lifting State Up
    7. Summary and Key Takeaways
      1. What's Next?
      2. Test Your Knowledge!
    8. Apply What You Learned
      1. Activity 4.1: Building a Simple Calculator
      2. Activity 4.2: Enhancing the Calculator
  7. 5. Rendering Lists and Conditional Content
    1. Introduction
    2. What Are Conditional Content and List Data?
    3. Rendering Content Conditionally
      1. Different Ways of Rendering Content Conditionally
        1. Utilizing Ternary Expressions
        2. Abusing JavaScript Logical Operators
        3. Get Creative!
        4. Which Approach Is Best?
      2. Setting Element Tags Conditionally
    4. Outputting List Data
      1. Mapping List Data
      2. Updating Lists
    5. A Problem with List Items
      1. Keys to the Rescue!
    6. Summary and Key Takeaways
      1. What's Next?
      2. Test Your Knowledge!
    7. Apply What You Learned
      1. Activity 5.1: Showing a Conditional Error Message
      2. Activity 5.2: Outputting a List of Products
  8. 6. Styling React Apps
    1. Introduction
    2. How Does Styling Work in React Apps?
      1. Using Inline Styles
      2. Setting Styles via CSS Classes
      3. Setting Styles Dynamically
      4. Conditional Styles
      5. Combining Multiple Dynamic CSS Classes
      6. Merging Multiple Inline Style Objects
      7. Building Components with Customizable Styles
        1. Customization with Fixed Configuration Options
      8. The Problem with Unscoped Styles
    3. Scoped Styles with CSS Modules
      1. The styled-components Library
      2. Using Other CSS or JavaScript Styling Libraries and Frameworks
    4. Summary and Key Takeaways
      1. What's Next?
      2. Test Your Knowledge!
    5. Apply What You Learned
      1. Activity 6.1: Providing Input Validity Feedback upon Form Submission
      2. Activity 6.2: Using CSS Modules for Style Scoping
  9. 7. Portals and Refs
    1. Introduction
    2. A World without Refs
    3. Refs versus State
    4. Using Refs for More than DOM Access
      1. Forwarding Refs
      2. Controlled versus Uncontrolled Components
    5. React and Where Things End up in the DOM
      1. Portals to the Rescue
    6. Summary and Key Takeaways
      1. What's Next?
      2. Test Your Knowledge!
    7. Apply What You Have Learned
      1. Activity 7.1: Extract User Input Values
      2. Activity 7.2: Add a Side-Drawer
  10. 8. Handling Side Effects
    1. Introduction
    2. What's the Problem?
    3. Understanding Side Effects
      1. Side Effects Are Not Just about HTTP Requests
    4. Dealing with Side Effects with the useEffect() Hook
      1. How to Use useEffect()
    5. Effects and Their Dependencies
      1. Unnecessary Dependencies
      2. Cleaning Up after Effects
      3. Dealing with Multiple Effects
      4. Functions as Dependencies
      5. Avoiding Unnecessary Effect Executions
      6. Effects and Asynchronous Code
      7. Rules of Hooks
    6. Summary and Key Takeaways
      1. What's Next?
      2. Test Your Knowledge!
    7. Apply What You Learned
      1. Activity 8.1: Building a Basic Blog
  11. 9. Behind the Scenes of React and Optimization Opportunities
    1. Introduction
    2. Revisiting Component Evaluations and Updates
      1. What Happens When a Component Function Is Called
    3. The Virtual DOM vs the Real DOM
      1. State Batching
      2. Avoiding Unnecessary Child Component Evaluations
      3. Avoiding Costly Computations
      4. Utilizing useCallback()
    4. Avoiding Unnecessary Code Download
      1. Reducing Bundle Sizes via Code Splitting (Lazy Loading)
    5. Strict Mode
    6. Debugging Code and the React Developer Tools
    7. Summary and Key Takeaways
      1. What's Next?
      2. Test Your Knowledge!
    8. Apply What You Learned
      1. Activity 9.1: Optimize an Existing App
  12. 10. Working with Complex State
    1. Introduction
    2. A Problem with Cross-Component State
    3. Using Context to Handle Multi-Component State
      1. Providing and Managing Context Values
      2. Using Context in Nested Components
      3. Changing Context from Nested Components
      4. Getting Better Code Completion
      5. Context or "Lifting State Up"?
      6. Outsourcing Context Logic into Separate Components
      7. Combining Multiple Contexts
    4. Limitations of useState( )
    5. Managing State with useReducer( )
      1. Understanding Reducer Functions
      2. Dispatching Actions
    6. Summary and Key Takeaways
      1. What's Next?
      2. Test Your Knowledge!
    7. Apply What You Learned
      1. Activity 10.1: Migrating an App to the Context API
      2. Activity 10.2: Replacing useState() with useReducer()
  13. 11. Building Custom React Hooks
    1. Introduction
    2. Why Would You Build Custom Hooks?
      1. What Are Custom Hooks?
      2. A First Custom Hook
    3. Custom Hooks: A Flexible Feature
      1. Custom Hooks and Parameters
      2. Custom Hooks and Return Values
    4. A More Complex Example
    5. Summary and Key Takeaways
      1. What's Next?
      2. Test Your Knowledge!
    6. Apply What You Learned
      1. Activity 11.1: Build a Custom Keyboard Input Hook
  14. 12. Multipage Apps with React Router
    1. Introduction
    2. One Page Is Not Enough
    3. Getting Started with React Router and Defining Routes
      1. Adding Page Navigation
      2. From Link to NavLink
      3. Route Components versus "Normal" Components
    4. From Static to Dynamic Routes
      1. Extracting Route Parameters
      2. Creating Dynamic Links
      3. Navigating Programmatically
    5. Redirecting
      1. Nested Routes
      2. Handling Undefined Routes
      3. Lazy Loading
    6. Summary and Key Takeaways
      1. What's Next?
      2. Test Your Knowledge!
    7. Apply What You Learned
      1. Activity 12.1: Creating a Basic Three-Page Website
      2. Activity 12.2: Enhancing the Basic Website
  15. 13. Managing Data with React Router
    1. Introduction
    2. Data Fetching and Routing Are Tightly Coupled
      1. Sending HTTP Requests without React Router
    3. Loading Data with React Router
      1. Enabling These Extra Router Features
      2. Loading Data for Dynamic Routes
      3. Loaders, Requests, and Client-Side Code
    4. Layouts Revisited
      1. Reusing Data across Routes
    5. Handling Errors
    6. Onward to Data Submission
      1. Working with action() and Form Data
      2. Returning Data Instead of Redirecting
      3. Controlling Which <Form> Triggers Which Action
      4. Reflecting the Current Navigation Status
      5. Submitting Forms Programmatically
      6. Behind-the-Scenes Data Fetching and Submission
      7. Deferring Data Loading
    7. Summary and Key Takeaways
      1. What's Next?
      2. Test Your Knowledge!
    8. Apply What You Learned
      1. Activity 13.1: A To-Dos App
  16. 14. Next Steps and Further Resources
    1. Introduction
    2. How Should You Proceed?
      1. Interesting Problems to Explore
        1. Build a Shopping Cart
        2. Build an Application's Authentication System (User Signup and Login)
        3. Build an Event Management Website
      2. Common and Popular React Libraries
      3. Other Resources
      4. Beyond React for Web Applications
    3. Final Words
  17. Appendix
    1. 2. Understanding React Components & JSX
      1. Activity 2.1: Creating a React App to Present Yourself
      2. Activity 2.2: Creating a React App to Log Your Goals for This Book 
    2. 3. Components & Props
      1. Activity 3.1: Creating an App to Output Your Goals for This Book
    3. 4. Working with Events & State
      1. Activity 4.1: Building a Simple Calculator
      2. Activity 4.2: Enhancing the Calculator
    4. 5. Rendering Lists & Conditional Content
      1. Activity 5.1: Showing a Conditional Error Message
      2. Activity 5.2: Outputting a List of Products
    5. 6. Styling React Apps
      1. Activity 6.1: Providing Input Validity Feedback upon Form Submission
      2. Activity 6.2: Using CSS Modules for Style Scoping
    6. 7. Portals & Refs
      1. Activity 7.1: Extract User Input Values
      2. Activity 7.2: Add a Side-Drawer
    7. 8. Handling Side Effects
      1. Activity 8.1: Building a Basic Blog
    8. 9. Behind the Scenes of React & Optimization Opportunities
      1. Activity 9.1: Optimize An Existing App
    9. 10. Working with Complex State
      1. Activity 10.1: Migrating an App to the Context API
      2. Activity 10.2: Replacing useState() with useReducer()
    10. 11. Building Custom React Hooks
      1. Activity 11.1: Build a Custom Keyboard Input Hook
    11. 12. Multipage Apps with React Router
      1. Activity 12.1: Creating a Basic Three-Page Website
      2. Activity 12.2: Enhancing the Basic Website
    12. 13. Managing Data with React Router
      1. Activity 13.1: A To-Dos App
      2. Hey!

Product information

  • Title: React Key Concepts
  • Author(s): Maximilian Schwarzmüller
  • Release date: December 2022
  • Publisher(s): Packt Publishing
  • ISBN: 9781803234502