In the first chapter, we built our first component using React. We saw how using JSX makes the development easy. In this chapter, we will dive deep into JSX.
JavaScript XML (JSX) is an XML syntax that constructs the markup in React components. React works without JSX, but using JSX makes it easy to read and write the React components as well as structure them just like any other HTML element.
In this chapter, we will cover following points:
Why JSX?
Transforming JSX into JavaScript
Specifying HTML tags and React components
Multiple components
Different types of JSX tags
Using JavaScript expressions inside JSX
Namespaced components
Spread attributes
CSS styles and JSX
JSX Gotchas
At the end of the chapter, we will get familiar with the JSX syntax, how it should be used with React, and best practices of using it. We will also study some of the corner cases that one can run into while using JSX.