Book Image

React Key Concepts

By : Maximilian Schwarzmüller
Book Image

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.

Related Content you might be interested in

Current Title:

Small book image
React Key Concepts
Maximilian Schwarzmüller
Dec, 2022 | 590 pages
Small book image
Learn React with TypeScript
Carl Rippon
Mar, 2023 | 474 pages
Small book image
React Interview Guide
Sudheer Jonna | Andrew Baisden
Nov, 2023 | 346 pages
Small book image
The React Workshop
Brandon Richey | Ryan Yu | Endre Vegh | Mr. Theofanis Despoudis | Anton Punith | Florian Sloot | Cihan Yakar | SudarshanReddy Kurri | David Parker | Daniel Bugl | Mohammad Omar | Brandan Jones | Danish Jafri
Aug, 2020 | 806 pages
Table of Contents (16 chapters)
Preface
About the Book
Download A Free PDF Copy Of This Book
Free Chapter
1
1. React – What and Why
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
2. Understanding React Components and JSX
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
3. Components and Props
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
4. Working with Events and State
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
5. Rendering Lists and Conditional Content
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
6. Styling React Apps
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
7. Portals and Refs
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
8. Handling Side Effects
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
9. Behind the Scenes of React and Optimization Opportunities
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
10. Working with Complex State
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
11. Building Custom React Hooks
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
12. Multipage Apps with React Router
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
13. Managing Data with React Router
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
14. Next Steps and Further Resources
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

Summary and Key Takeaways

  • React is a library, though it's actually a combination of two main packages: react and react-dom.
  • Though it is possible to build non-trivial user interfaces without React, simply using vanilla JavaScript to do so can be cumbersome, error-prone, and hard to maintain.
  • React simplifies the creation of complex user interfaces by providing a declarative way to define the desired end state(s) of the UI.
  • Declarative means that you define the target user interface content and structure, combined with different states (e.g., "is a modal open or closed?"), and you leave it up to React to figure out the appropriate DOM instructions.
  • The react package itself derives UI states and manages a virtual DOM. It's "bridges" like react-dom or react-native that translate this virtual DOM into actual UI (DOM) instructions.
  • With React, you can build Single Page Applications (SPAs), meaning that React is used to control the entire user interface on all pages as well as the routing between pages.
  • React projects can be created with help of the create-react-app package, which provides a readily configured project folder and a live preview development server.

What's Next?

At this point, you should have a basic understanding of what React is and why you might consider using it, especially for building non-trivial user interfaces. You learned how to create new React projects with create-react-app, and you are now ready to dive deeper into React and the actual key features it offers.

In the next chapter, you will learn about a concept called components which are the fundamental building blocks of React apps. You will learn how components are used to compose user interfaces and why those components are needed in the first place. The next chapter will also dive deeper into JSX and explore how it is transformed to regular JavaScript code and which kind of code you could write alternatively to JSX.

Test Your Knowledge!

Test your knowledge about the concepts covered in this chapter by answering the below questions. You can then compare your answers to example answers that can be found here: https://packt.link/ENPda.

  1. What is React?
  2. Which advantage does React offer over vanilla JavaScript projects?
  3. What's the difference between imperative and declarative code?
  4. What is a Single-Page-Application (SPA)?
  5. How can you create new React projects and why do you need such a more complex project setup?
Previous Section
End of Chapter 1
Next Chapter