React Quickly, Second Edition

React Quickly, Second Edition

by Azat Mardan, Morten Barklund
Released December 2023
Publisher(s): Manning Publications
ISBN: 9781633439290

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

Learn the skills you need to build React applications quickly! This fully revised second edition introduces JSX, functional components, React hooks, event and form handling, and more.

In React Quickly, Second Edition you will learn how to:

  • Master React fundamentals
  • Implement best practices and the components of good architecture
  • Build intuitive user interfaces
  • Create dynamic components with JSX
  • Use lightweight functional components in React
  • Make your app interactive with stateful components
  • Utilize React hooks
  • Handle events like button clicks and pass data between components

Build your skills with React fast! There’s no slow theory and tedious history in React Quickly—you’ll dive into React code right from the very first chapter. As you go, you’ll explore over 80 useful and practical examples that put React into action. This new second edition has been completely rewritten to cover the latest developments in the React framework. Perfect, whether you’re a React beginner or an experienced pro looking to keep their skills up to date.

About the Technology
React makes it a breeze to build beautiful, reliable web frontends. This amazing JavaScript library has a modular architecture, so you can create, combine, and test components seamlessly. React is perfect for small prototypes, enterprise scale sites, and everything in between.

About the Book
React Quickly, Second Edition offers a unique approach to learning the React framework. More than 80 concise examples guide you from your first steps through advanced applications. You’ll appreciate the up-to-date coverage of functional components, React hooks, and web accessibility, along with interesting projects to practice your new skill.

What's Inside
  • Master React fundamentals
  • Best practices of component-based design
  • Create dynamic components with JSX
  • Make your app interactive with stateful components


About the Reader
For developers comfortable building web applications with JavaScript.

About the Authors
Morten Barklund is an expert in React, web testing, and accessibility and is the founder of Coding Heaven. Azat Mardan is a seasoned software engineer, startup mentor, and best-selling author.

Quotes
Simple, clear, and comprehensive with easy-to-follow examples and challenging projects. The perfect balance between theory and practice.
- Samer Buna, author of books and courses on React and Node

I learned new things even after eight years of React experience.
- Swizec Teller, React expert, swizec.com

More than a book! Includes a brilliant website with code in a run-time environment. A very accessible learning experience!
- Brendan O’Hara, Untapped AI

An invaluable resource for beginners and seasoned developers alike.
- Ahmad Nassri, Startup Advisor and Investor

Table of contents

  1. inside front cover
  2. Praise for the First Edition
  3. React Quickly
  4. Copyright
  5. dedication
  6. contents
  7. front matter
    1. preface
    2. acknowledgments
    3. about this book
      1. Audience
      2. Roadmap
      3. Source code
      4. liveBook discussion forum software requirements
    4. about the authors
    5. about the cover illustration
  8. 1 Meeting React
    1. 1.1 Benefits of using React
      1. 1.1.1 Simplicity
      2. 1.1.2 Speed and testability
      3. 1.1.3 Ecosystem and community
    2. 1.2 Disadvantages of React
    3. 1.3 How React can fit into your website
      1. 1.3.1 Single-page applications and React
      2. 1.3.2 The React stack
    4. 1.4 Your first React app: Hello World
      1. 1.4.1 The result
      2. 1.4.2 Writing the application
      3. 1.4.3 Installing and running a web server
      4. 1.4.4 Going to the local website
    5. 1.5 Quiz
    6. Quiz answers
    7. Summary
  9. 2 Baby steps with React
    1. 2.1 Creating a new React app
      1. 2.1.1 React project commands
      2. 2.1.2 File structure
      3. 2.1.3 Templates
      4. 2.1.4 Pros and cons
    2. 2.2 A note about the examples in this book
    3. 2.3 Nesting elements
      1. 2.3.1 Node hierarchy
      2. 2.3.2 Simple nesting
      3. 2.3.3 Siblings
    4. 2.4 Creating custom components
    5. 2.5 Working with properties
      1. 2.5.1 A single property
      2. 2.5.2 Multiple properties
      3. 2.5.3 The special property: children
    6. 2.6 Application structure
    7. 2.7 Quiz
    8. Quiz answers
    9. Summary
  10. 3 Introduction to JSX
    1. 3.1 Why do we use JSX?
      1. 3.1.1 Before and after JSX
      2. 3.1.2 Keeping HTML and JavaScript together
    2. 3.2 Understanding JSX
      1. 3.2.1 Creating elements with JSX
      2. 3.2.2 Using JSX with custom components
      3. 3.2.3 Multiline JSX objects
      4. 3.2.4 Outputting variables in JSX
      5. 3.2.5 Working with properties in JSX
      6. 3.2.6 Branching in JSX
      7. 3.2.7 Comments in JSX
      8. 3.2.8 Lists of JSX objects
      9. 3.2.9 Fragments in JSX
    3. 3.3 How to transpile JSX
    4. 3.4 React and JSX gotchas
      1. 3.4.1 Self-closing elements
      2. 3.4.2 Special characters
      3. 3.4.3 String conversion
      4. 3.4.4 The style attribute
      5. 3.4.5 Reserved names: class and for
      6. 3.4.6 Multiword attributes
      7. 3.4.7 Boolean attribute values
      8. 3.4.8 Whitespace
      9. 3.4.9 data- attributes
    5. 3.5 Quiz
    6. Quiz answers
    7. Summary
  11. 4 Functional Components
    1. 4.1 The shorter way to write React components
      1. 4.1.1 An example application
      2. 4.1.2 Destructuring properties
      3. 4.1.3 Default values
      4. 4.1.4 Pass-through properties
    2. 4.2 A comparison of component types
      1. 4.2.1 Benefits of functional components
      2. 4.2.2 Disadvantages of functional components
      3. 4.2.3 Nonfactors between component types
      4. 4.2.4 Choosing the component type
    3. 4.3 When not to use a functional component
      1. 4.3.1 Error boundary
      2. 4.3.2 Codebase is class-based
      3. 4.3.3 Library requires class-based components
      4. 4.3.4 Snapshot before updating
    4. 4.4 Conversion from a class-based to a functional component
      1. 4.4.1 Version 1: Render only
      2. 4.4.2 Version 2: Class method as utility
      3. 4.4.3 Version 3: Real class method
      4. 4.4.4 Version 4: Constructor
      5. 4.4.5 More complexity equals harder conversion
    5. 4.5 Quiz
    6. Quiz answers
    7. Summary
  12. 5 Making React interactive with states
    1. 5.1 Why is React state relevant?
      1. 5.1.1 React component state
      2. 5.1.2 Where should I put state?
      3. 5.1.3 What kind of information do you store in component state?
      4. 5.1.4 What not to store in state
    2. 5.2 Adding state to a functional component
      1. 5.2.1 Importing and using a hook
      2. 5.2.2 Initializing the state
      3. 5.2.3 Destructuring the state value and setter
      4. 5.2.4 Using the state value
      5. 5.2.5 Setting the state
      6. 5.2.6 Using multiple states
      7. 5.2.7 State scope
    3. 5.3 Stateful class-based components
      1. 5.3.1 Similarities with the useState hook
      2. 5.3.2 Differences from the useState hook
    4. 5.4 Quiz
    5. Quiz answers
    6. Summary
  13. 6 Effects and the React component life cycle
    1. 6.1 Running effects in components
      1. 6.1.1 Running an effect on mount
      2. 6.1.2 Running an effect on mount and cleanup on unmount
      3. 6.1.3 Running cleanup on unmount
      4. 6.1.4 Running an effect on some renders
      5. 6.1.5 Running an effect and cleanup on some renders
      6. 6.1.6 Running an effect synchronously
    2. 6.2 Understanding rendering
      1. 6.2.1 Rendering on mount
      2. 6.2.2 Rendering on parent render
      3. 6.2.3 Rendering on state update
      4. 6.2.4 Rendering inside functions
    3. 6.3 The life cycle of a class-based component
      1. 6.3.1 Life cycle methods
      2. 6.3.2 Legacy life cycle methods
      3. 6.3.3 Converting life cycle methods to hooks
    4. 6.4 Quiz
    5. Quiz answers
    6. Summary
  14. 7 Hooks to fuel your web applications
    1. 7.1 Stateful components
      1. 7.1.1 Simple state values with useState
      2. 7.1.2 Creating complex state with useReducer
      3. 7.1.3 Remembering a value without re-rendering with useRef
      4. 7.1.4 Easier multicomponent state with useContext
      5. 7.1.5 Low-priority state updates with useDeferredValue and useTransition
    2. 7.2 Component effects
    3. 7.3 Optimizing performance by minimizing re-rendering
      1. 7.3.1 Memoizing any value with useMemo
      2. 7.3.2 Memoizing functions with useCallback
      3. 7.3.3 Creating stable DOM identifiers with useId
    4. 7.4 Creating complex component libraries
      1. 7.4.1 Creating component APIs with useImperativeHandle
      2. 7.4.2 Better debugging of hooks with useDebugValue
      3. 7.4.3 Synchronizing non-React data with useSyncExternalStore
      4. 7.4.4 Running effect before rendering with useInsertionEffect
    5. 7.5 The two key principles of hooks
    6. 7.6 Quiz
    7. Quiz answers
    8. Summary
  15. 8 Handling events in React
    1. 8.1 Handling DOM events in React
      1. 8.1.1 Basic event handling in React
    2. 8.2 Event handlers
      1. 8.2.1 Definition of event handlers
      2. 8.2.2 Event objects
      3. 8.2.3 React event objects
      4. 8.2.4 Synthetic event object persistence
    3. 8.3 Event phases and propagation
      1. 8.3.1 How phases and propagation work in the browser
      2. 8.3.2 Handling event phases in React
      3. 8.3.3 Unusual event propagation
      4. 8.3.4 Nonbubbling DOM events
    4. 8.4 Default actions and how to prevent them
      1. 8.4.1 The default event action
      2. 8.4.2 Preventing default
      3. 8.4.3 Other default events
    5. 8.5 React event objects in summary
    6. 8.6 Event handler functions from properties
    7. 8.7 Event handler generators
    8. 8.8 Listening to DOM events manually
      1. 8.8.1 Listening for window and document events
      2. 8.8.2 Dealing with unsupported HTML events
      3. 8.8.3 Combining React and DOM event handling
    9. 8.9 Quiz
    10. Quiz answers
    11. Summary
  16. 9 Working with forms in React
    1. 9.1 Controlled vs. uncontrolled inputs
    2. 9.2 Managing controlled inputs
      1. 9.2.1 Filtered input
      2. 9.2.2 Masked input
      3. 9.2.3 Many similar inputs
      4. 9.2.4 Form submission
      5. 9.2.5 Other inputs
      6. 9.2.6 Other properties
    3. 9.3 Managing uncontrolled inputs
      1. 9.3.1 Opportunities
      2. 9.3.2 File inputs
    4. 9.4 Quiz
    5. Quiz answers
    6. Summary
  17. 10 Advanced React hooks for scaling
    1. 10.1 Resolving values across components
      1. 10.1.1 React Context
      2. 10.1.2 Context states
      3. 10.1.3 React Context deconstructed
    2. 10.2 How to handle complex state
      1. 10.2.1 Interdependent state
    3. 10.3 Custom hooks
      1. 10.3.1 When is something a custom hook?
      2. 10.3.2 When should I use a custom hook?
      3. 10.3.3 Where can I find custom hooks?
    4. 10.4 Quiz
    5. Quiz answers
    6. Summary
  18. 11 Project: Website menu
    1. 11.1 Scaffolding for the menu
      1. 11.1.1 HTML output
      2. 11.1.2 Component hierarchy
      3. 11.1.3 Icons
      4. 11.1.4 CSS
      5. 11.1.5 Template
      6. 11.1.6 Source code
      7. 11.1.7 In the browser
    2. 11.2 Rendering a static menu
      1. 11.2.1 The goal of this exercise
      2. 11.2.2 Desired HTML output
      3. 11.2.3 Component tree
      4. 11.2.4 Source code
      5. 11.2.5 In the browser
    3. 11.3 Homework: A dynamic menu
      1. 11.3.1 Goal for this step
      2. 11.3.2 Hints for solving this step
      3. 11.3.3 Component hierarchy
      4. 11.3.4 What now?
    4. 11.4 Homework: Retrieving items from context
      1. 11.4.1 Goal for this step
      2. 11.4.2 Hints for solving this step
      3. 11.4.3 Component hierarchy
      4. 11.4.4 What now?
    5. 11.5 Homework: Optional link
      1. 11.5.1 Goal for this step
      2. 11.5.2 Hints for solving this step
      3. 11.5.3 Component hierarchy
      4. 11.5.4 What now?
    6. 11.6 Final thoughts
    7. Summary
  19. 12 Project: Timer
    1. 12.1 Scaffolding for the timer
      1. 12.1.1 HTML output
      2. 12.1.2 Component hierarchy
      3. 12.1.3 Project structure
      4. 12.1.4 Source code
      5. 12.1.5 Running the application
    2. 12.2 Adding a simple play/pause timer
      1. 12.2.1 The goal of this exercise
      2. 12.2.2 Component hierarchy
      3. 12.2.3 Updated project structure
      4. 12.2.4 Source code
      5. 12.2.5 Running the application
    3. 12.3 Homework: Initializing the timer to a custom time
    4. 12.4 Homework: Resetting timers
    5. 12.5 Homework: Multiple timers
    6. Summary
  20. 13 Project: Task manager
    1. 13.1 Scaffolding for the task manager
      1. 13.1.1 Component hierarchy
      2. 13.1.2 Project structure
      3. 13.1.3 Source code
      4. 13.1.4 Running the application
    2. 13.2 A simple list of tasks
      1. 13.2.1 The goal of this exercise
      2. 13.2.2 Component hierarchy
      3. 13.2.3 Updated project structure
      4. 13.2.4 Source code
      5. 13.2.5 Running the application
    3. 13.3 Homework: Task steps and progress
    4. 13.4 Homework: Prioritization of steps
    5. 13.5 Homework: Drag and drop
    6. 13.6 Conclusion
    7. Summary
  21. index
  22. inside back cover

Product information

  • Title: React Quickly, Second Edition
  • Author(s): Azat Mardan, Morten Barklund
  • Release date: December 2023
  • Publisher(s): Manning Publications
  • ISBN: 9781633439290