In the last article in this series, we learned how we can quickly create a React application with the create-react-app utility. In this guide, I’m going to introduce you to JSX and explain some of the most basic rules of JSX.
Contents
- JSX expressions can only have one top-level element
- React fragments can be used as wrappers
- JSX tags must be explicitly closed
- JSX attributes must be camelCased
- JSX classes must use the ‘className’ attribute
- JavaScript expressions are embedded with curly braces
Introduction to JSX
JSX (JavaScript XML) is central to React. It is a hybrid markup language, a mix of HTML and JavaScript, and is used to make React components. For the most part it looks identical to HTMl, but there are some differences between JSX and HTML that are important to understand.
JSX allows you to use HTML-like code as JavaScript expressions. JSX can be stored in JavaScript variables and passed as arguments to functions. Below are some examples of using JSX:
// Storing JSX in a variable
const heading = <h1>Hello WorlD!</h1>;
// Passing JSX as an argument
const image = <img src='#' />;
someFunctionThatUsesImages(image);
// Returning JSX
const SomeReactComponent = () => {
return (
<div id='app'>
<h1>App Title</h1>
</div>
);
};
const appMarkup = SomeReactComponent();
// NOTE: the above is NOT how components should be called.
// This method is only for illustrative purposes.
As you can see, JSX looks a lot like HTML – but it’s important to remember that it is very different. Through the rest of this article we will explore the special rules of JSX.
1. JSX expressions can only have one top-level element
In HTML, a top-level element is an element that contains all others. This is thE <html></html> tag in a normal HTML page. In React, a top-level element is the element that contains the entire component or expression. For example, in the example below, the <div></div> is the top-level element.
<div>
<h2>Hello World</h2>
</div>
Any JSX expression can only have one top-level element. This element can take the form of a div or any other tag, or even a React fragment (explained in the next rule).
Below are example of both valid and invalid JSX expressions.
// INVALID JSX
<h1>First top-level element</h1>
<p>Second top-level element</p>
// VALID JSX
<main id='app'>
<h2>First element in main</h2>
<p>Second element in main</p>
</main>
2. React fragments can be used as wrappers
You can probably imagine that always having to group elements inside of a container can be frustrating. Sometimes you want elements inside a component to be more separate, but you need that React error to go away!
React fragments are a solution to this problem. They are anonymous, nameless tags that serve no purpose other than to act as a wrapper for other elements. There is no need to use a div, section, or any other container element.
Below is an example of an expression that uses a React fragment.
<>
<h2>First element</h2>
7lt;p>Second element</p>
</>
As you can see, React fragments look like empty HTML tags (<> </>). In situations where you don’t want a wrapper element, React fragments can be useful.
3. JSX tags must be explicitly closed
In HTML we have self-closing tags. These are tags that don’t require a separate closing tag. Examples of self-closing tags are <img >, <input >, and <br > tags.
In JSX there is no such thing as a self-closing tag. Every tag must be explicitly closed with either a slash ( /> ) or a full closing tag ( </> ). Below are some examples of properly closing JSX tags, which in normal HTML would be self-closing.
// In HTML, the /> syntax is optional
// In JSX, it is mandatory
<img src="#" alt="some image" />
<input type="text" />
<br />
4. JSX attributes must be camelCased
In HTML, attributes are typically written in flatcase (no separation between words) and their values are written in kebab-case (words separated by hyphens). For example, <div id="app-container">.
In React and JSX, the conventions are different. When writing JSX we will always use camelCase, for both the attributes and their values. For example, <button id='submitButton' onClick={handleSubmit}>.
5. JSX classes must use the ‘className’ attribute
In HTML, the class attribute is used to put elements into groups for styling purposes. Classes are used for the same reason in JSX, but the name is different.
We can’t use a class attribute in JSX because a JSX file is really a JavaScript file! A class attribute would create a conflict with the class keyword.
To use classes in JSX, use the className attribute. You can use it in the same way you would use the class attribute in HTML.
// Normal HTML element using `class`
<div class="container"></div>
// JSX element using `className`
< div className='container'></div>
6. JavaScript expressions are embedded with curly braces
The most powerful feature of JSX is the ability to embed JavaScript expressions directly into the markup. This includes variables, hardcoded values, and even logical statements like if-else statements and more.
To embed expressions into JSX, we use curly braces { }.
Below are a few examples of embedding expressions into JSX.
// 1: Embedding variables
const name = 'theLoneCoder';
<h1>Hi, my name is {name}</h1>
// 2: Embedding hardcoded values
<h1>One plus one equals {1 + 1}</h1>
// 3: Embedding logic statements
let isLoggedIn = false;
<h1>{isLoggedIN ? 'Welcome back!' : 'Please log in to continue'}</h1>
Conclusion
In the next article in this series, we’ll learn how to create functional components in React. Components are the core of React and the central concept of this entire course.
7 thoughts on “Basic Rules of JSX | React Tutorial for Beginners”