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

Creating classes

We have seen in the first chapter how React uses elements to display the components on the screen.

Let's now look at the different ways in which we can define our components with React and the reasons why we should use one or other technique.

Again this book assumes that you've already played with React in a small/medium application which means that you must have created some components before.

You may have chosen one method according to the examples on the React website or by following the style of the boilerplate you used to scaffold the project.

Concepts such as props, state, and life cycle methods should be clear at this point, and we are not going to look at them in detail.

The createClass factory

Looking at the React documentation (at the time of writing), the first example we find shows us how to define components using React.createClass.

Let's start with a very simple snippet:

const Button = React.createClass({ 
  render() { 
    return <button /> 
...
End of Section 5
Next Section
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