React Design Patterns and Best Practices

React Design Patterns and Best Practices

by Michele Bertoli
Released January 2017
Publisher(s): Packt Publishing
ISBN: 9781786464538

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 modular applications that are easy to scale using the most powerful components and design patterns that React can offer you right now

About This Book

  • Dive into the core patterns and components of React.js in order to master your application's design
  • Improve their debugging skills using the DevTools
  • This book is packed with easy-to-follow examples that can be used to create reusable code and extensible designs

Who This Book Is For

If you want to increase your understanding of React and apply it to real-life application development, then this book is for you.

What You Will Learn

  • Write clean and maintainable code
  • Create reusable components applying consolidated techniques
  • Use React effectively in the browser and node
  • Choose the right styling approach according to the needs of the applications
  • Use server-side rendering to make applications load faster
  • Build high-performing applications by optimizing components

In Detail

Taking a complete journey through the most valuable design patterns in React, this book demonstrates how to apply design patterns and best practices in real-life situations, whether that's for new or already existing projects. It will help you to make your applications more flexible, perform better, and easier to maintain – giving your workflow a huge boost when it comes to speed without reducing quality.

We'll begin by understanding the internals of React before gradually moving on to writing clean and maintainable code. We'll build components that are reusable across the application, structure applications, and create forms that actually work.

Then we'll style React components and optimize them to make applications faster and more responsive. Finally, we'll write tests effectively and you'll learn how to contribute to React and its ecosystem.

By the end of the book, you'll be saved from a lot of trial and error and developmental headaches, and you will be on the road to becoming a React expert.

Style and approach

The design patterns in the book are explained using real-world, step-by-step examples. For each design pattern, there are hints about when to use it and when to look for something more suitable. This book can also be used as a practical guide, showing you how to leverage design patterns.

Table of contents

  1. React Design Patterns and Best Practices
    1. React Design Patterns and Best Practices
    2. Credits
    3. About the Author
    4. About the Reviewer
    5. www.PacktPub.com
      1. Why subscribe?
    6. Customer Feedback
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Everything You Should Know About React
      1. Declarative programming
      2. React elements
      3. Unlearning everything
      4. Common misconceptions
      5. Summary
    9. 2. Clean Up Your Code
      1. JSX
        1. Babel
        2. Hello, World!
        3. DOM elements and React components
        4. Props
        5. Children
        6. Differences with HTML
          1. Attributes
          2. Style
          3. Root
          4. Spaces
          5. Boolean attributes
        7. Spread attributes
        8. JavaScript templating
        9. Common patterns
          1. Multi-line
          2. Multi-properties
          3. Conditionals
          4. Loops
          5. Control statements
          6. Sub-rendering
      2. ESLint
        1. Installation
        2. Configuration
        3. React plugin
        4. Airbnb configuration
      3. The basics of functional programming
        1. First-class objects
        2. Purity
        3. Immutability
        4. Currying
        5. Composition
        6. FP and user interfaces
      4. Summary
    10. 3. Create Truly Reusable Components
      1. Creating classes
        1. The createClass factory
        2. Extending React.Component
        3. The main differences
          1. Props
          2. State
          3. Autobinding
        4. Stateless functional components
          1. Props and context
          2. The this keyword
          3. State
          4. Lifecycle
          5. Refs and event handlers
          6. No reference to component
          7. Optimization
      2. The state
        1. External libraries
        2. How it works
        3. Asynchronous
        4. React lumberjack
        5. Using the state
          1. Derivables
          2. The render method
      3. Prop types
        1. React Docgen
      4. Reusable components
      5. Living style guides
      6. Summary
    11. 4. Compose All the Things
      1. Communication between components
        1. Children
      2. Container and Presentational pattern
      3. Mixins
      4. Higher-order Components
      5. Recompose
        1. Context
      6. Function as Child
      7. Summary
    12. 5. Proper Data Fetching
      1. Data flow
        1. Child-parent communication (callbacks)
        2. Common parent
      2. Data fetching
      3. React-refetch
      4. Summary
    13. 6. Write Code for the Browser
      1. Forms
        1. Uncontrolled components
        2. Controlled components
        3. JSON schema
      2. Events
      3. Refs
      4. Animations
        1. React motion
      5. Scalable Vector Graphics
      6. Summary
    14. 7. Make Your Components Look Beautiful
      1. CSS in JS
      2. Inline styles
      3. Radium
      4. CSS Modules
        1. Webpack
        2. Setting up a project
        3. Locally scoped CSS
        4. Atomic CSS Modules
        5. React CSS Modules
      5. Styled Components
      6. Summary
    15. 8. Server-Side Rendering for Fun and Profit
      1. Universal applications
      2. Reasons to implement Server-Side Rendering
        1. SEO
        2. A common code base
        3. Better performance
        4. Don't underestimate the complexity
      3. A basic example
      4. A data fetching example
      5. Next.js
      6. Summary
    16. 9. Improve the Performance of Your Applications
      1. Reconciliation and keys
      2. Optimization techniques
        1. Should component update
        2. Stateless functional components
      3. Common solutions
        1. Why did you update?
        2. Creating functions inside the render method
        3. Constants props
        4. Refactoring and good design
      4. Tools and libraries
        1. Immutability
        2. Monitoring tools
        3. Babel plugins
      5. Summary
    17. 10. About Testing and Debugging
      1. The benefits of testing
      2. Painless JavaScript testing with Jest
      3. Mocha is a flexible testing framework
      4. JavaScript testing utilities for React
      5. A real-world testing example
      6. React tree Snapshot Testing
      7. Code coverage tools
      8. Common testing solutions
        1. Testing Higher-Order Components
        2. The Page Object pattern
      9. React Dev Tools
      10. Error handling with React
      11. Summary
    18. 11. Anti-Patterns to Be Avoided
      1. Initializing the state using props
      2. Mutating the state
      3. Using indexes as a key
      4. Spreading props on DOM elements
      5. Summary
    19. 12. Next Steps
      1. Contributing to React
      2. Distributing your code
      3. Publishing a npm package
      4. Summary

Product information

  • Title: React Design Patterns and Best Practices
  • Author(s): Michele Bertoli
  • Release date: January 2017
  • Publisher(s): Packt Publishing
  • ISBN: 9781786464538