Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
React Design Patterns and Best Practices
React Design Patterns and Best Practices

React Design Patterns and Best Practices: Build easy to scale modular applications using the most powerful components and design patterns

eBook
€8.99 €29.99
Paperback
€36.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Table of content icon View table of contents Preview book icon Preview Book

React Design Patterns and Best Practices

Chapter 2. Clean Up Your Code

This chapter assumes that you already have experience with JSX and you want to improve your skills to use it effectively.

To use JSX without any problems or unexpected behaviors, it is important to understand how it works under the hood and the reasons why it is a useful tool for building UIs.

Our goal is to write clean and maintainable JSX code, and to achieve that, we have to know where it comes from, how it gets translated to JavaScript, and which features it provides.

In the first section, we will do a little step back, but please bear with me because it is crucial to master the basics in order to apply the best practices.

In this chapter, we will cover the following topics:

  • What JSX is and why we should use it
  • What Babel is and how we can use it to write modern JavaScript code
  • The main features of JSX and the differences between HTML and JSX
  • Best practices to write JSX in an elegant and maintainable way
  • How linting, and ESLint in particular, can make...

JSX

In the previous chapter, we saw how React changes the concept of separation of concerns, moving the boundaries inside components.

We also learned how React uses the elements returned by the components to display the UI on the screen.

Let's now see how we can declare our elements inside our components.

React provides two ways to define our elements. The first one is by using JavaScript functions, and the second one is by using JSX, an optional XML-like syntax. Here is the examples section of the official React.js website:

JSX

To begin with, JSX is one of the main reasons why people fail to approach React, because looking at the examples on the home page and seeing JavaScript mixed with HTML for the first time seems strange to most of us.

As soon as we get used to it, we realize that it is very convenient, precisely because it is similar to HTML and looks very familiar to anyone who has already created UIs on the web.

The opening and closing tags make it easier to represent nested trees...

ESLint

We always try to write the best code possible, but sometimes errors happen, and spending a few hours catching a bug due to a typo is very frustrating. Luckily, there are some tools that can help us check the correctness of our code as soon as we type it.

These tools are not able to tell us if our code is going to do what it supposed to do, but they can help us to avoid syntactical errors.

If you come from a static language such as C#, you are used to getting that kind of warning inside your IDE.

Douglas Crockford made linting popular in JavaScript with JSLint (initially released in 2002) a few years ago; then we had JSHint and finally, the de-facto standard in the React world nowadays is ESLint.

ESLint is an open-source project released in 2013 that became popular thanks to the fact that it is highly configurable and extensible.

In the JavaScript ecosystem, where libraries and techniques change very quickly, it is crucial to have a tool that can be easily extended with plugins, and...

The basics of functional programming

Apart from following the best practices when we write JSX and use a linter to enforce consistency and find errors earlier, there is one more thing we can do to clean up our code: follow a Functional Programming (FP) style.

As discussed in Chapter 1, Everything You Should Know About React, React has a declarative programming approach that makes our code more readable.

Functional Programming  is a declarative paradigm, where side-effects are avoided and data is considered immutable to make the code easier to maintain and to reason about.

Don't consider the following section an exhaustive guide to functional programming; it is only an introduction to get started with some concepts that are commonly used in React and of which you should be aware.

First-class objects

In JavaScript, functions are first-class objects, which means that they can be assigned to variables and passed as parameters to other functions.

This allows us to introduce the concept...

Summary

In this chapter, we learned a great deal about how JSX works and how to use it in the right way in our components. We started from the basics of the syntax to create a solid knowledge base that will enable us to master JSX and its features.

In the second part, we looked at how ESLint and its plugins can help us find problems faster and enforce a consistent style guide across our code base.

Finally, we went 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.

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • 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 designs

Description

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.

Who is this book for?

If 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 components

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Jan 13, 2017
Length: 318 pages
Edition : 1st
Language : English
ISBN-13 : 9781786468307
Category :
Languages :
Tools :

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Billing Address

Product Details

Publication date : Jan 13, 2017
Length: 318 pages
Edition : 1st
Language : English
ISBN-13 : 9781786468307
Category :
Languages :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
€18.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
€189.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
€264.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total 111.97
React Design Patterns and Best Practices
€36.99
React and React Native
€41.99
Mastering Reactive JavaScript
€32.99
Total 111.97 Stars icon
Banner background image

Table of Contents

12 Chapters
1. Everything You Should Know About React Chevron down icon Chevron up icon
2. Clean Up Your Code Chevron down icon Chevron up icon
3. Create Truly Reusable Components Chevron down icon Chevron up icon
4. Compose All the Things Chevron down icon Chevron up icon
5. Proper Data Fetching Chevron down icon Chevron up icon
6. Write Code for the Browser Chevron down icon Chevron up icon
7. Make Your Components Look Beautiful Chevron down icon Chevron up icon
8. Server-Side Rendering for Fun and Profit Chevron down icon Chevron up icon
9. Improve the Performance of Your Applications Chevron down icon Chevron up icon
10. About Testing and Debugging Chevron down icon Chevron up icon
11. Anti-Patterns to Be Avoided Chevron down icon Chevron up icon
12. Next Steps Chevron down icon Chevron up icon

Customer reviews

Top Reviews
Rating distribution
Full star icon Full star icon Full star icon Full star icon Empty star icon 4
(8 Ratings)
5 star 62.5%
4 star 12.5%
3 star 0%
2 star 12.5%
1 star 12.5%
Filter icon Filter
Top Reviews

Filter reviews by




Joshua Underwood Oct 02, 2017
Full star icon Full star icon Full star icon Full star icon Full star icon 5
This is a very good book.I read this book on Friday 09/29/2017 and returned to work at Florida Blue (Blue Cross Blue Shield) on Monday 10/02/2017 to present the things I learned it. All who attended loved the content and I attribute all of what I learned, what they learned, and their happiness with my presentation to this book. I linked this book at the end of the presentation and I am sure you will receive more sales because of it.Thanks for the great book.
Amazon Verified review Amazon
Vlad Bezden Apr 07, 2017
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Great book. Covers a lot of interesting topics, such as testing, universal applications. Book is based on the latest libraries (webpack, jest, ...)
Amazon Verified review Amazon
CD Sep 18, 2017
Full star icon Full star icon Full star icon Full star icon Full star icon 5
So far one of the best Packt books I have read. I'm not done with the book yet but in the first four chapters alone there are some good tips and tricks. The "Living style guides" section was something new for me. I have piles of component and every time I need one it always takes a little time to get my bearings regarding what it needs, what it will look like, what kind of styling properties will need to be applied, etc. I started a new project that needed some new components (map pointers that need a size and color props) and decided to use styleguidist to document them and I am sold. These are simple map pointers and already I can see the advantages.I am reading this on a Kindle Fire and keeping notes but if it continues to be as good as it has been I may buy the paperback so I can use it as a quick desk reference.
Amazon Verified review Amazon
Andrew Marquis Jan 25, 2020
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Great introduction to react. I learned alot.
Amazon Verified review Amazon
P. C. Jul 18, 2019
Full star icon Full star icon Full star icon Full star icon Full star icon 5
Easy to read book.
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.