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

Arrow left icon
Profile Icon Michele Bertoli
Arrow right icon
€18.99 per month
Full star icon Full star icon Full star icon Full star icon Empty star icon 4 (8 Ratings)
Paperback Jan 2017 318 pages 1st Edition
eBook
€8.99 €29.99
Paperback
€36.99
Subscription
Free Trial
Renews at €18.99p/m
Arrow left icon
Profile Icon Michele Bertoli
Arrow right icon
€18.99 per month
Full star icon Full star icon Full star icon Full star icon Empty star icon 4 (8 Ratings)
Paperback Jan 2017 318 pages 1st Edition
eBook
€8.99 €29.99
Paperback
€36.99
Subscription
Free Trial
Renews at €18.99p/m
eBook
€8.99 €29.99
Paperback
€36.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
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 : 9781786464538
Category :
Languages :
Tools :

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

Product Details

Publication date : Jan 13, 2017
Length: 318 pages
Edition : 1st
Language : English
ISBN-13 : 9781786464538
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

What is included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.