Carlos Santana Roldán - React 17 Design Patterns and Best Practices

Copyright 2021 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 or its dealers and distributors, will be held liable for any damages caused or alleged to have been 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.

Group Product Manager: Pavan Ramchandani
Publishing Product Manager: Rohit Rajkumar
Senior Editor: Hayden Edwards
Content Development Editor: Abhishek Jadhav
Technical Editor: Saurabh Kadave
Copy Editor: Safis Editing
Project Coordinator: Manthan Patel
Proofreader: Safis Editing
Indexer: Tejal Soni
Production Designer: Roshan Kawale

First published: January 2017
Second edition: March 2019
Third published: May 2021

Production reference: 1140521

Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham
B3 2PB, UK.

ISBN 978-1-80056-044-4

www.packt.com

Carlos Santana Roldn is a senior web developer with more than 13 years of experience. Currently, he is working as a senior software engineer at Snapchat. He is the founder of http://js.education, where he teaches people web technologies such as React, Node.js, JavaScript, and TypeScript.

Phily Austria is a hands-on software engineering manager with a professional degree and 15 years of experience. He is currently a software engineering manager at Endpoint Closing, Inc. and still works hands-on in React.js. At this moment, he is interested in FinTech, PropTech, and blockchain.

Phily lives in Los Angeles with his wife, Ashley, and his very cute daughter, Chalida.

Before he became an engineering manager, Phily got a graduate degree in computer software engineering from Cal State Fullerton. He was a frontend engineer for 10 years, working with VanillaJS, jQuery, BackboneJS, EmberJS, AngularJS, and now React.js.

Kirill Ezhemenskii is an experienced software engineer, a frontend and mobile developer, a solution architect, and the CTO at a healthcare company. He's a functional programming advocate and an expert in the React stack, GraphQL, and TypeScript. He's also a React Native mentor.

Emmanuel Demey works with the JavaScript ecosystem on a daily basis. He spends his time sharing his knowledge with anyone and everyone. His first goal at work is to help the people he works with. He has spoken at French conferences (such as Devfest Nantes, Devfest Toulouse, Sunny Tech, and Devoxx France) about topics related to the web platform, such as JavaScript frameworks (Angular, React.js, and Vue.js), accessibility, and Nest.js. He has been a trainer for 10 years at Worldline and Zenika (two French consulting companies). He also the co-leader of the Google Developer of Lille group and the co-organizer of the Devfest Lille conference.

React is an open source, adaptable JavaScript library for building complex user interfaces from small, detached bits called components. This book will help you to use React effectively to make your applications more flexible, easier to maintain, and improve their performance while giving your workflow a huge boost by improving speed without affecting quality.

You'll start by understanding the internals of React, before gradually moving on to writing maintainable and clean code. The chapters that follow will show you how to build components that are reusable across the application, how to structure applications, and how to create forms that actually work. Later, you will build on your knowledge by exploring how to style React components and optimize them to make applications faster and more responsive. Finally, you'll learn how to write tests effectively and learn how to contribute to React and its ecosystem.

By the end of this book, you'll be able to avoid the process of trial and error and developmental headaches, and instead have the skills you need to efficiently build and deploy real-world React web applications.

This book is for web developers who want to increase their understanding of React and apply it to real-life app development. Intermediate-level experience with React and JavaScript is assumed.

Chapter 1, Taking Your First Steps with React, covers some basic concepts that are important for following the rest of the book, and that are crucial to working with React daily. We will learn how to write declarative code and will gain a clear understanding of the difference between the components we create and the elements React uses to display instances on the screen. We'll then learn the reasons behind the choice of co-locating logic and templates together, and why that unpopular decision has been a big win for React. We will go through the reasons why it is common to feel fatigued in the JavaScript ecosystem, but we'll also see how to avoid those problems by following an iterative approach. Finally, we will see what the new create-react-app CLI is, and with that, we'll be ready to start writing some real code.

Chapter 2 , Cleaning Up Your Code , teaches you a great deal about how JSX works and how to use it in the right way in our components. We start from the basics of the syntax to create a solid knowledge base that will enable us to master JSX and its features. We will look at how ESLint and its plugins can help us find problems faster and enforce a consistent style guide across our code base. Finally, we will go through the basics of functional programming to understand the important concepts to use when writing a React application. Now that our code is clean, we are ready to start digging deeper into React and learn how to write truly reusable components.