Cleaning Up Your Code

This chapter assumes that you have prior experience with JSX (JavaScript XML) and are interested in improving your skills to use it effectively. To use JSX/TSX without any issues or unexpected behavior, it’s crucial to understand how it works under the hood and the reasons why it’s a useful tool for building UIs.

Our objective is to write clean JSX/TSX code, maintain it, and have a good understanding of its inner workings, including how it’s translated to JavaScript and the features it provides.

By understanding the intricacies of JSX/TSX, you can leverage its full potential to build efficient and scalable UIs. We will explore various tips and techniques to help you write better code and avoid common mistakes. By the end of this chapter, you will have a solid grasp of how JSX/TSX works and how to use it effectively in your React applications.

In this chapter, we will cover the following topics:

• What is JSX and why...

Technical requirements

To complete this chapter, you will need the following:

• Node.js 19+
• Visual Studio Code

Using JSX

In Chapter 1, 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 elements inside our components.

React provides two ways to define 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 new official documentation of React.js (https://react.dev):

Figure 3.1: New official documentation site of React.js

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

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

Functional programming

In addition to following best practices and using a linter to catch errors and enforce consistency, another way to clean up our code is to adopt an FP style.

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

While we won’t cover FP in depth in this section, we’ll introduce some concepts commonly used in React that you should be aware of.

FP principles, such as immutability, pure functions, and higher-order functions, can help us write more maintainable and testable code. By treating our data as immutable, we can avoid side effects and make it easier to reason about the flow of our application. Pure functions, which always return the same output for the same input, help us avoid unintended...

Summary

In this chapter, we have covered the fundamentals of JSX, including its syntax and features. We have also learned how to configure Prettier and ESLint to maintain consistency and catch errors early on in our codebase. Additionally, we have explored some essential concepts of functional programming, which can help us write more maintainable and testable code.

With our code now clean and well-organized, we are ready to dive deeper into React and learn how to write truly reusable components in the next chapter. By following best practices and adopting good coding habits, we can create React applications that are easier to maintain, scale, and test.

Join our community on Discord

Join our community’s Discord space for discussion with the author and other readers:

https://packt.link/React18DesignPatterns4e