JSX is a syntax extension to JavaScript. It is useful to describe what User Interface should look like in React.
JSX has all the powers of JavaScript. Think of JSX like Hulk with Thanos’s hands. It’s more powerful JS that produces React elements. Like this element:
const element = <h1>Hello, world!</h1>;
Why to use it?
As I have mentioned in the React basics post, React divides the application in small components. Each component has its own state. Eventually, it compiles everything to make the complex app but for developers it’s easier to manage everything in smaller pieces.
React is all about UI and JSX helps to focus on the overall UI creation for e.g. events handling, components states handling and finally preparing the data for the display.
You’re not required to use JSX. Only use it if you like it.
As per my point of view, React focus more on visual problem solving (frontend app creation) and JSX is helpful in working with User Interfaces. Furthermore, you also see the console errors logged by React. Overall debugging becomes so much interesting and easier.
Follow this guide to install and run your react app. What is React? Learn the basics
Now, one the app is up and running, we need to install few more packages to enable the JSX and ReactDOM.
Go inside the project by using this command:
cd first-react-app
Now, install the react-dom and jsx using the following commands one by one:
npm install react-dom
npm install jsx
There are few ways to install those packages. For e.g. you might want to install it globally or even install all together with react. It’s up to you.
After installing those packages, import ReactDOM into your /src/App.js and /src/index.js files using the import statement.
Like this:
import ReactDOM from "react-dom";
Embedding Expressions in JSX
Since we have the prerequisites ready we can add more code to the basic app and start building small components.
Let’s declare a simple variable with a name in it and try to run the app.
Before that, remove everything else from your /src/App.js and just keep this code:
import "./App.css";
function App() {
return (
<div className="App">
<header className="App-header"></header>
</div>
);
}
export default App;
Go to your /src/index.js and remove all code and replace it with the following code:
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
const name = "Yogesh Chauhan";
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(element, document.getElementById("root"));
In the example above, we are declaring a variable called name and then use it inside JSX. To use the variable we are using curly braces. We can use any valid JavaScript expression (like a math equation 1+2 or array.name) inside the curly braces in JSX.
After that adding JavaScript expression, just embed in HTML tags.
If your app is not running, use the following commands to run the app.
npm start
// or
yarn start
After that you’ll see your variable element displayed in h1 tags in the browser window. Like this:
Let’s try to call a function.
...
function greet(name, msg) {
return msg + ", " + name.firstName;
}
const name = {
firstName: "Yogesh",
lastName: "Chauhan",
};
const element = <h1>{greet(name, "Hello")}!</h1>;
...
//Hello, Yogesh!
You can add if-else and loops in JSX as well — basically all JS things you can do. Remember Huld with Thanos Hand from the React Basics post?
HTML elements attributes in JSX
We can use quotes to define the string literals as element attributes. Like this:
...
const element = <h1 tabIndex="0">{greet(name, "Hello")}!</h1>;
...
If you want to add the img tag url dynamically, you can use curly braces to embed a JS expression in an img attribute:
...
const element = <img src={user.imageUrl}></img>;
...
Remember not to put quotes around the curly braces when you add JS Expression in an attribute.
JSX has all JS powers so it adopts the JS way for attribute names. The camelCase way. So, class becomes className and tabindex becomes tabIndex
Do we have to close empty tags like img?
In the example above, we have img tag closed but it’s not required. We can just close it with simple closing notation rather than the whole closing tag at the end. Just like this:
...
const element = <img src={user.imageUrl} />;
...
JSX stops XSS Injection Attacks
If you want to embed user inputs in JSX, don’t worry, it’s safe. What ReactDOM does is it escapes values embedded in JSX. That means it converts everything in string and then renders which stops XSS (cross-site-scripting) attacks.
JSX is more like creating objects
Look at this code:
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
Now, checkout this code:
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
Both of the code examples above are identical but the syntax is different.
It’s because Babel does the compilation and brings JSX down to React.createElement() calls.
Why do we need that?
React.createElement() performs a few checks so and make sure that the code doesn’t have bugs.
After the checks it creates an object (React Element) like this:
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};
In fact, it creates more complex object. The above code is a simplified version.
React goes for that React Object and uses their props to construct the HTML DOM. That’s how it keeps the DOM up to date every time you make change into your code.
We can also use those props by calling the object and using a dot operator.
You can always check the official React docs to explore more.
babel JSX object-oriented objects syntax tags
