React 17 Design Patterns and Best Practices - Third Edition

By Carlos Santana Roldán
    Advance your knowledge in tech with a Packt subscription

  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Taking Your First Steps with React

About this book

React is an open-source, adaptable JavaScript library for building complex user interfaces (UIs) 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, structure applications, and 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 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.

Publication date:
May 2021
Publisher
Packt
Pages
394
ISBN
9781800560444

 
Cleaning 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/TSX without any problems or unexpected behaviors, it is essential 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 JSX/TSX code, maintain it, and know where it comes from, how it gets translated to JavaScript, and what features it provides.

In this chapter, we will cover the following topics:

  • What is JSX and why should we use it?
  • What is Babel and how can we 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 our JavaScript code consistent across applications and teams
  • The basics of functional...
 

Technical requirements

To complete this chapter, you will need the following:

  • Node.js 12+
  • Visual Studio Code
 

Using 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 look at 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. The following is a screenshot of the examples section of the official React.js website (https://reactjs.org/#examples):

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 can seem 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...

 

Styling code

In this section, you will learn how to implement EditorConfig and ESLint to improve your code quality by validating your code style. It is important to have a standard code style in your team and avoid using different code styles.

EditorConfig

EditorConfig helps developers to maintain consistent coding styles between different IDEs.

EditorConfig is supported by a lot of editors. You can check whether your editor is supported or not on the official website, https://www.editorconfig.org.

You need to create a file called .editorconfig in your root directory – the configuration I use is this one:

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.html]
indent_size = 4

[*.css]
indent_size = 4

[*.md]
trim_trailing_whitespace = false

You can affect all the files with [*], and specific files with [.extension].

Prettier

Prettier is an opinionated code formatter, supported by many languages...

 

Functional programming

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

As discussed in Chapter 1, Taking Your First Steps with React, React has a declarative programming approach that makes our code more readable. FP is a declarative paradigm, where side effects are avoided and data is considered immutable to make the code easier to maintain and reason about.

Don't consider the following sub-sections as an exhaustive guide to FP; it is only an introduction to get started with some concepts that are commonly used in React of which you should be aware.

First-class functions

JavaScript has first-class functions because they are treated like any other variable, meaning you can pass a function as a parameter to other functions, or it can be returned by another function and be assigned as a value to a variable.

This allows us...

 

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 to configure Prettier and 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 FP 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 in the next chapter.

About the Author

  • Carlos Santana Roldán

    Carlos Santana Roldán 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 JS Education, where he teaches people web technologies such as React, Node.js, JavaScript, and TypeScript.

    Browse publications by this author
Book Title
Unlock this book and the full library for only $5/m
Access now