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.
In this chapter, we will cover the following topics:
- What is JSX and why should we use it?
- The main features of JSX and the differences between HTML and JSX
- Best practices to write JSX in an elegant and maintainable way
- The basics of functional...
To complete this chapter, you will need the following:
- Node.js 12+
- Visual Studio Code
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.
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...
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 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
indent_size = 4
indent_size = 4
trim_trailing_whitespace = false
You can affect all the files with [*], and specific files with [.extension].
Prettier is an opinionated code formatter, supported by many languages...
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.
This allows us...
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.