Book Image

React Design Patterns and Best Practices

By : Michele Bertoli
Book Image

React Design Patterns and Best Practices

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 (19 chapters)
React Design Patterns and Best Practices
About the Author
About the Reviewer
Customer Feedback

Styled Components

There is a library which is very promising, because it takes into account all the problems the other libraries have encountered in styling components.

Different paths have been followed for writing CSS in JavaScript, and many solutions have been tried, so now the time is ripe for a library that takes all the learning and then builds something on top of it.

The library is conceived and maintained by two popular developers in the JavaScript community: Glenn Maddern and Max Stoiberg.

It represents a very modern approach to the problem, and it uses edge features of ES2015 and some advanced techniques applied to React to provide a complete solution for styling.

Let's look at how it is possible to create the same button we saw in the previous sections, and check if all the CSS features we are interested in (for example, pseudo classes and Media queries) work with Styled Components.

First, we have to install the library by running the following command:

npm install --save styled-components...