In the field of web development, we often use HTML to define content, CSS to define appearance, and JavaScript to define logic. But increasingly, as web applications become more and more interactive, developers often encounter situations where logic determine the content as well as the appearance. These three vital components of the web have become more and more inseparable.
So what if, there is a way for us to put everything together, instead of jumping across multiple files? This is why JSX was created. JSX stands for JavaScript XML, it is a syntax wrapper that allows us to write HTML inside JavaScript.
For example, as we've demonstrated in the previous lesson, you need to micromanage each DOM node when using plain JavaScript, but with JSX, you can create a function that directly returns a piece of HTML code.
src/App.jsx
1function App() {
2 return <p>Hello, world!</p>;
3}
4
5export default App;
You can go one step further, and add some logic to our example.
1function App() {
2 const isActive = true;
3
4 if (isActive) {
5 return <p>Status: active</p>;
6 } else {
7 return <p>Status: inactive</p>;
8 }
9}
10
11export default App;Try to change the value of isActive and see how the output changes. Different HTML code should be rendered based on the truthiness of isActive.
JSX also allows you to embed JavaScript variable or statements inside using the curly braces ({}):
1function App() {
2 const name = "John Doe";
3
4 return <p>Name: {name}</p>;
5}
6
7export default App;This example will be rendered as:
However, you should note that JSX isn't entirely like HTML, there are a few more rules. For example, for each React component, only one root element can be returned. The following code snippet will not work as multiple root elements are returned.
1function App() {
2 return (
3 <img src="/my-image.png" alt="This is an image" />
4 <p>
5 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam
6 assumenda, laudantium odio quis magnam facilis nemo nobis cum iste
7 laborum corporis dignissimos omnis qui sunt! Porro eligendi magnam
8 voluptate repudiandae!
9 </p>
10 <button>Click Here</button>
11 );
12}
13
14export default App;To make this work, you can wrap the elements inside a <div>.
1function App() {
2 return (
3 <div>
4 <img src="/my-image.png" alt="This is an image" />
5 <p>
6 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam
7 assumenda, laudantium odio quis magnam facilis nemo nobis cum iste
8 laborum corporis dignissimos omnis qui sunt! Porro eligendi magnam
9 voluptate repudiandae!
10 </p>
11 <button>Click Here</button>
12 </div>
13 );
14}
15
16export default App;Or if you don't want the extra <div> element, use an empty tag instead (<></>).
1function App() {
2 return (
3 <>
4 <img src="/my-image.png" alt="This is an image" />
5 <p>
6 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam
7 assumenda, laudantium odio quis magnam facilis nemo nobis cum iste
8 laborum corporis dignissimos omnis qui sunt! Porro eligendi magnam
9 voluptate repudiandae!
10 </p>
11 <button>Click Here</button>
12 </>
13 );
14}
15
16export default App;This empty tag is called a Fragment in React, and it allows you to group multiple elements together without having to create an extra node. In practice, you should avoid having an excessive DOM size, as a large DOM can slow down your page's performance.
Besides having only one root element, you are also required to close all tags, and self-closing tags such as <img> must become <img />.
1<img src="/my-image.png" alt="This is an image" />Behind the scene, JSX will be compiled into plain javascript, and the attributes become variables and objects. However, since there are limitations to variable names in JavaScript, the same rules apply to the attributes. This is why, the attributes must be written in camelCase. For example, stroke-width must be written as strokeWidth, and aria-label must be ariaLabel.
And there is a special case, and that is the class attribute. Since class is a keyword in JavaScript used to declare a new class, it must be written as className in JSX.
1<button className="bg-red text-center">Click Here</button>