React Design Patterns and Best Practices

Michele Bertoli

• Publisher: Packt Publishing
• Year: 2017
• eBook ISBN: 9781786468307
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming
• Index: Computer Science

Build modular applications that are easy to scale using the most powerful components and design patterns that React can offer you right nowAbout 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 designsWho This Book Is ForIf 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 componentsIn DetailTaking 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 approachThe 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.

React Design Patterns and Best Practices

---

React Design Patterns and Best Practices

Copyright © 2017 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: January 2017

Production reference: 1100117

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B32PB, UK.

ISBN 978-1-78646-453-8

www.packtpub.com

Credits

Author Michele Bertoli	Copy Editor Safis Editing
Reviewer Clay Diffrient	Project Coordinator Ulhas Kambali
Commissioning Editor Ashwin Nair	Proofreader Safis Editing
Acquisition Editor Shweta Pant	Indexer Rekha Nair
Content Development Editor Onkar Wani	Graphics Abhinash Sahu
Technical Editor Rashil Shah	Production Coordinator Aparna Bhagat

About the Author

Michele Bertoli is a frontend engineer with a passion for beautiful UIs. Born in Italy, he moved to London with his family to look for new and exciting job opportunities. He has a degree in computer science and loves clean and well-tested code. Currently, he is working with React.js, crafting modern JavaScript applications. He is a big fan of open source and is always trying to learn something new.

I would like to thank my wife and my son for making my days better with their smiles. Dante, I hope the time I spent writing the book instead of playing with you will make sense when you are older, and you will be proud of me. I would also like to thank Packt Publishing for giving me this opportunity.

About the Reviewer

Clay Diffrient is a JavaScript enthusiast who is always looking to improve and do more. He currently works mostly in React, but has proficiency with other frameworks and libraries, such as Angular, Backbone, and jQuery. He is a maintainer of the popular react-modal library. He takes joy in creating software that is accessible for all people.

Clay currently works as a software engineer at Instructure, where they make software that makes people smarter. He currently works on Instructure's flagship product, Canvas, an open source learning management system.

Clay has previously reviewed MEAN Web Development (ISBN: 9781783983285), and enjoys being involved with the community.

I wish to thank my wife Rachael and my two sons, Roger and Beau, for their unending support of my continual learning.

www.PacktPub.com

For support files and downloads related to your book, please visit www.PacktPub.com.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at [email protected] for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

https://www.packtpub.com/mapt

Get the most in-demand software skills with Mapt. Mapt gives you full access to all Packt books and video courses, as well as industry-leading tools to help you plan your personal development and advance your career.

Why subscribe?

• Fully searchable across every book published by Packt
• Copy and paste, print, and bookmark content
• On demand and accessible via a web browser

Customer Feedback

Thank you for purchasing this Packt book. We take our commitment to improving our content and products to meet your needs seriously-that's why your feedback is so valuable. Whatever your feelings about your purchase, please consider leaving a review on this book's Amazon page. Not only will this help us, more importantly it will also help others in the community to make an informed decision about the resources that they invest in to learn.

You can also review for us on a regular basis by joining our reviewers' club. If you're interested in joining, or would like to learn more about the benefits we offer, please contact us: [email protected].

Preface

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 it’s for new or already existing projects. It will help you 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.

What this book covers

Chapter 1, Everything You Should Know About React, introduces you to the base concepts of React, seen from an advanced perspective.

Chapter 2, Clean Up Your Code, teaches that one of the most important aspects of writing maintainable code is to keep it clean and follow a coding style guide. To use React, it is also important to know the basics of functional programming.

Chapter 3, Create Truly Reusable Components, informs that building an application using components is a key factor, but creating truly reusable components is the most important thing to do in order to keep the codebase clean and maintainable.

Chapter 4, Compose All the Things, says that real applications are created using different components and it's important to make them communicate effectively, organizing and structuring the hierarchy in the right way.

Chapter 5, Proper Data Fetching, instructs that any client-side application has to deal with data at some point; it takes you through the different techniques and approaches that can be used to fetch data in the React-way.

Chapter 6, Write Code for the Browser, states that our applications live in the browser and we should know how to use it properly. This chapter will go through some advanced concepts, such as events, animations, and how to interact with the DOM.

Chapter 7, Make Your Components Look Beautiful , demonstrates that crafting beautiful UI components is a big part of the frontend engineering work. With React, there are different ways of doing it and each one tackles the problem from a different perspective. It's important to know which libraries are available and how they work in order to choose the right one.

Chapter 8, Server-Side Rendering for Fun and Profit, instructs that one of the greatest features of React is the server-side rendering. It works out of the box, but it's important to learn how to use it in the right way to get the most out of it.

Chapter 9, Improve the Performance of Your Applications, informs that on the Web, performance is one of the most important factors to engage users. React offers a set of tools and techniques to create lightning-fast applications, and this chapter goes through all of them.

Chapter 10, About Testing and Debugging, makes you realize that we all want our applications to be stable and handle all the edge cases: tests help with that. Writing a comprehensive set of tests is vital to creating rock-solid and maintainable code. On the other hand, bugs always happen and it's crucial to know how to debug and find an issue as early as possible.

Chapter 11, Anti-Patterns to Be Avoided, explains the fact that developers often try to use shortcuts and creative solutions, but in some cases these workarounds can be dangerous for their applications, espec...

Table of contents

• React Design Patterns and Best Practices