Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • React Design Patterns and Best Practices
  • Toc
  • feedback
React Design Patterns and Best Practices

React Design Patterns and Best Practices

By : Michele Bertoli
4 (8)
close
React Design Patterns and Best Practices

React Design Patterns and Best Practices

4 (8)
By: Michele Bertoli

Overview of this book

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.
Table of Contents (13 chapters)
close
close
Preface
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Free Chapter
1
1. Everything You Should Know About React
1. Everything You Should Know About React
Declarative programming
React elements
Unlearning everything
Common misconceptions
Summary
2
2. Clean Up Your Code
2. Clean Up Your Code
JSX
ESLint
The basics of functional programming
Summary
3
3. Create Truly Reusable Components
chevron up
3. Create Truly Reusable Components
Creating classes
The state
Prop types
Reusable components
Living style guides
Summary
4
4. Compose All the Things
4. Compose All the Things
Communication between components
Container and Presentational pattern
Mixins
Higher-order Components
Recompose
Function as Child
Summary
5
5. Proper Data Fetching
5. Proper Data Fetching
Data flow
Data fetching
React-refetch
Summary
6
6. Write Code for the Browser
6. Write Code for the Browser
Forms
Events
Refs
Animations
Scalable Vector Graphics
Summary
7
7. Make Your Components Look Beautiful
7. Make Your Components Look Beautiful
CSS in JS
Inline styles
Radium
CSS Modules
Styled Components
Summary
8
8. Server-Side Rendering for Fun and Profit
8. Server-Side Rendering for Fun and Profit
Universal applications
Reasons to implement Server-Side Rendering
A basic example
A data fetching example
Next.js
Summary
9
9. Improve the Performance of Your Applications
9. Improve the Performance of Your Applications
Reconciliation and keys
Optimization techniques
Common solutions
Tools and libraries
Summary
10
10. About Testing and Debugging
10. About Testing and Debugging
The benefits of testing
Painless JavaScript testing with Jest
Mocha is a flexible testing framework
JavaScript testing utilities for React
A real-world testing example
React tree Snapshot Testing
Code coverage tools
Common testing solutions
React Dev Tools
Error handling with React
Summary
11
11. Anti-Patterns to Be Avoided
11. Anti-Patterns to Be Avoided
Initializing the state using props
Mutating the state
Using indexes as a key
Spreading props on DOM elements
Summary
12
12. Next Steps
12. Next Steps
Contributing to React
Distributing your code
Publishing a npm package
Summary

Prop types

Our goal is to write truly reusable components and to do that we have to define their interface in the clearest possible way.

If we want our components to be reused across the application, it is crucial to make sure that our components and their parameters are well-defined and straightforward to use.

With React, there is a powerful tool that lets us express, in a very simple way, the name of the props that a component expects to receive and some validation rules for each one of them.

The rules relate to the type of the property as well as to whether the property is optional or required. There is also the option to write custom validation functions.

Let's start with a very simple example:

const Button = ({ text }) => <button>{text}</button> 
 
Button.propTypes = { 
  text: React.PropTypes.string, 
}

In the snippet above, we created a stateless functional component that receives a text prop of type string.

Great, now every developer that comes...

End of Chapter 3
Next Chapter
bookmark search playlist download
font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete