If you are interested to learn about the React Render HTML
What is JSX?
JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.
Coding JSX
JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement()
and/or appendChild()
methods. JSX converts HTML tags into react elements. You are not required to use JSX, but JSX makes it easier to write React applications. Here are two examples. The first uses JSX and the second does not:
Example 1
JSX:
const myElement = <h1>I Love JSX!</h1>; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(myElement);
Example 2
Without JSX:
const myElement = React.createElement('h1', {}, 'I do not use JSX!'); const root = ReactDOM.createRoot(document.getElementById('root')); root.render(myElement);
As you can see in the first example, JSX allows us to write HTML directly within the JavaScript code. JSX is an extension of the JavaScript language based on ES6, and is translated into regular JavaScript at runtime.
Get Certified!
Complete the React modules, do the exercises, take the exam and become w3schools certified!!
$95 ENROLL
Expressions in JSX
With JSX you can write expressions inside curly braces { }
. The expression can be a React variable, or property, or any other valid JavaScript expression. JSX will execute the expression and return the result:
Example
Execute the expression 5 + 5
:
const myElement = <h1>React is {5 + 5} times better with JSX</h1>;
Inserting a Large Block of HTML
To write HTML on multiple lines, put the HTML inside parentheses:
Example
Create a list with three list items:
const myElement = ( <ul> <li>Apples</li> <li>Bananas</li> <li>Cherries</li> </ul> );
One Top Level Element
The HTML code must be wrapped in ONE top level element. So if you like to write two paragraphs, you must put them inside a parent element, like a div
element.
Example
Wrap two paragraphs inside one DIV element:
const myElement = ( <div> <p>I am a paragraph.</p> <p>I am a paragraph too.</p> </div> );
JSX will throw an error if the HTML is not correct, or if the HTML misses a parent element.
Alternatively, you can use a “fragment” to wrap multiple lines. This will prevent unnecessarily adding extra nodes to the DOM. A fragment looks like an empty HTML tag: <></>
.
Example
Wrap two paragraphs inside a fragment:
const myElement = ( <> <p>I am a paragraph.</p> <p>I am a paragraph too.</p> </> );
Elements Must be Closed
JSX follows XML rules, and therefore HTML elements must be properly closed.
Example
Close empty elements with />
const myElement = <input type="text" />;
JSX will throw an error if the HTML is not properly closed.
Attribute class = className
The class
attribute is a much used attribute in HTML, but since JSX is rendered as JavaScript, and the class
keyword is a reserved word in JavaScript, you are not allowed to use it in JSX. JSX solved this by using className
instead. When JSX is rendered, it translates className
attributes into class
attributes.
Example
Use attribute className
instead of class
in JSX:
const myElement = <h1 className="myclass">Hello World</h1>;
Conditions – if statements
React supports if
statements, but not inside JSX. To be able to use conditional statements in JSX, you should put the if
statements outside of the JSX, or you could use a ternary expression instead:
Option 1:
Write if
statements outside of the JSX code:
Example
Write “Hello” if x
is less than 10, otherwise “Goodbye”:
const x = 5; let text = "Goodbye"; if (x < 10) { text = "Hello"; } const myElement = <h1>{text}</h1>;
Option 2:
Use ternary expressions instead:
Example
Write “Hello” if x
is less than 10, otherwise “Goodbye”:
const x = 5; const myElement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;
Specifying The React Element Type
The first part of a JSX tag determines the type of the React element. Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX <Foo />
expression, Foo
must be in scope.
React Must Be in Scope
Since JSX compiles into calls to React.createElement
, the React
library must also always be in scope from your JSX code.
For example, both of the imports are necessary in this code, even though React
and CustomButton
are not directly referenced from JavaScript:
import React from 'react';import CustomButton from './CustomButton'; function WarningButton() { // return React.createElement(CustomButton, {color: 'red'}, null); return <CustomButton color="red" />; }
Using Dot Notation for JSX Type
You can also refer to a React component using dot-notation from within JSX. This is convenient if you have a single module that exports many React components. For example, if MyComponents.DatePicker
is a component, you can use it directly from JSX with:
import React from 'react'; const MyComponents = { DatePicker: function DatePicker(props) { return <div>Imagine a {props.color} datepicker here.</div>; } } function BlueDatePicker() { return <MyComponents.DatePicker color="blue" />;}
User-Defined Components Must Be Capitalized
When an element type starts with a lowercase letter, it refers to a built-in component like <div>
or <span>
and results in a string 'div'
or 'span'
passed to React.createElement
. Types that start with a capital letter like <Foo />
compile to React.createElement(Foo)
and correspond to a component defined or imported in your JavaScript file. We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.
For example, this code will not run as expected:
import React from 'react'; // Wrong! This is a component and should have been capitalized:function hello(props) { // Correct! This use of <div> is legitimate because div is a valid HTML tag: return <div>Hello {props.toWhat}</div>; } function HelloWorld() { // Wrong! React thinks <hello /> is an HTML tag because it's not capitalized: return <hello toWhat="World" />;}
To fix this, we will rename hello
to Hello
and use <Hello />
when referring to it:
import React from 'react'; // Correct! This is a component and should be capitalized:function Hello(props) { // Correct! This use of <div> is legitimate because div is a valid HTML tag: return <div>Hello {props.toWhat}</div>; } function HelloWorld() { // Correct! React knows <Hello /> is a component because it's capitalized. return <Hello toWhat="World" />;}
Choosing the Type at Runtime
You cannot use a general expression as the React element type. If you do want to use a general expression to indicate the type of the element, just assign it to a capitalized variable first. This often comes up when you want to render a different component based on a prop:
import React from 'react'; import { PhotoStory, VideoStory } from './stories'; const components = { photo: PhotoStory, video: VideoStory }; function Story(props) { // Wrong! JSX type can't be an expression. return <components[props.storyType] story={props.story} />;}
To fix this, we will assign the type to a capitalized variable first:
import React from 'react'; import { PhotoStory, VideoStory } from './stories'; const components = { photo: PhotoStory, video: VideoStory }; function Story(props) { // Correct! JSX type can be a capitalized variable. const SpecificStory = components[props.storyType]; return <SpecificStory story={props.story} />;}