Book Image

React Design Patterns and Best Practices - Second Edition

By : Carlos Santana Roldán
Book Image

React Design Patterns and Best Practices - Second Edition

By: Carlos Santana Roldán

Overview of this book

React is an adaptable JavaScript library for building complex UIs from small, detached bits called components. This book is designed to take you through the most valuable design patterns in React, helping you learn how to apply design patterns and best practices in real-life situations. You’ll get started by understanding the internals of React, in addition to covering Babel 7 and Create React App 2.0, which will help you write clean and maintainable code. To build on your skills, you will focus on concepts such as class components, stateless components, and pure components. You'll learn about new React features, such as the context API and React Hooks that will enable you to build components, which will be reusable across your applications. The book will then provide insights into the techniques of styling React components and optimizing them to make applications faster and more responsive. In the concluding chapters, you’ll discover ways to write tests more effectively and learn how to contribute to React and its ecosystem. By the end of this book, you will be equipped with the skills you need to tackle any developmental setbacks when working with React. You’ll be able to make your applications more flexible, efficient, and easy to maintain, thereby giving your workflow a boost when it comes to speed, without reducing quality.

Related Content you might be interested in

Current Title:

Small book image
React Design Patterns and Best Practices - Second Edition
Carlos Santana Roldán
Mar, 2019 | 350 pages
Small book image
React Cookbook
Carlos Santana Roldaacuten
Aug, 2018 | 580 pages
Small book image
The React Workshop
Ryan Yu | Florian Sloot | Theofanis Despoudis | Brandon Richey | Endre Vegh | Anton Punith
Aug, 2020 | 806 pages
Small book image
React Router Quick Start Guide
Sagar Ganatra
Sep, 2018 | 156 pages
Table of Contents (19 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
Free Chapter
1
Section 1: Hello React!
Section 1: Hello React!
2
Taking Your First Steps with React
Taking Your First Steps with React
Declarative programming
React elements
Unlearning everything
Common misconceptions
Summary
3
Clean Up Your Code
Clean Up Your Code
JSX
Code style
The basics of functional programming
Summary
4
Section 2: How React works
Section 2: How React works
5
Creating Truly Reusable Components
Creating Truly Reusable Components
Creating classes
The state
React hooks
Prop types
Reusable components
Fragments
Summary
6
Compose All the Things
Compose All the Things
Communication between components
The container and presentational pattern
Mixins
Higher order components
Recompose
FunctionAsChild
Summary
7
Proper Data Fetching
Proper Data Fetching
Data flow
Data fetching
React-refetch
Context API
Summary
8
Write Code for the Browser
Write Code for the Browser
Forms
Handling events
Refs
Animations
Scalable Vector Graphics
Summary
9
Section 3: Performance, Improvements and Production!
Section 3: Performance, Improvements and Production!
10
Make Your Components Look Beautiful
Make Your Components Look Beautiful
CSS in JavaScript
Inline styles
Radium
CSS modules
Styled components
Summary
11
Server-Side Rendering for Fun and Profit
Server-Side Rendering for Fun and Profit
Universal applications
Reasons to implement SSR
A basic example
A data fetching example
Next.js
Summary
12
Improve the Performance of Your Applications
Improve the Performance of Your Applications
Reconciliation
Keys
Optimization techniques
Common solutions
Tools and libraries
Summary
13
About Testing and Debugging
About Testing and Debugging
The benefits of testing
Painless JavaScript testing with Jest
Testing events
React DevTools
Redux DevTools
Summary
14
React Router
React Router
Installation and configuration
Creating our sections
Adding parameters to the routes
Summary
15
Anti-Patterns to be Avoided
Anti-Patterns to be Avoided
Initializing the state using properties
Mutating the state
Using indexes as a key
Spreading properties on DOM elements
Summary
16
Deploying to Production
Deploying to Production
Creating our first Digital Ocean Droplet
Configuring nginx, PM2, and a domain
Implementing CircleCI for continuous integration
Summary
17
Next Steps
Next Steps
Contributing to React
Distributing your code
Publishing an npm package
Summary
18
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Forms

As soon as we start building a real application with React, we need to interact with the users. If we want to ask for information from our users within the browser, forms are the most common solution. Due to the way the library works and its declarative nature, dealing with input fields and other form elements is non-trivial with React, but as soon as we understand its logic, it becomes clear.

Uncontrolled components

Let's start with a basic example—displaying a form with an input field and a Submit button.

The code is pretty straightforward:

  const Uncontrolled = () => ( 
    <form> 
      <input type="text" /> 
      <button>Submit</button> 
    </form> 
  );

If we...

Previous Section
End of Section 2
Next Section