Understand JSX and Its syntax with 8 easy steps

JSX stands for JavaScript XML and is a syntax extension for JavaScript that allows you to write Hyper Text Markup Language HTML-like code within your JavaScript files, Thus it is a mixture of JavaScript and HTML. It is primarily used in ReactJS to write components, as it provides a way to define the structure and content of a component in a concise and readable manner.

1. Its basic example

const element = <h1>Hello Devcribe!</h1>

In this example, the element constant is a React Component that renders as h1 a heading with the text “Hello World“. This is just a simple example, and in practice, you can use it to define complex components with multiple elements, attributes, and nested components that we will see below.

2. JSX is HTML-like with few key differences

The syntax is similar to HTML, but there are a few key differences:

You can use curly braces {} to embed JavaScript expressions within your code.
You need to use className it instead of class to define CSS classes, because “class” is a reserved word in JavaScript.

3. Advantages

There are a lot of advantages to using It in a React application, such as:

In React you can use JSX to write components that render dynamic content based on data passed to them as props.
It is transformed into JavaScript function calls at build time, so the code you write with JSX becomes equivalent to JavaScript and can run on any modern browser.
You don’t need to learn another language, as it is just an extension of JavaScript.
It is a powerful and flexible syntax that makes it easy to define React Components and their structure and content.
It helps to simplify the process of building a web application with React.
It provides a more Readable and maintainable way of defining components

If you are confused about what are React Components, then check out “React Components“.

4. Simple expression

App.js

import React from "react";

function App() {
  const name = 'Devcribe';
  const element = <h1>Hello, {name}!</h1>;
  return (
    <div className="App">
      {element},
    </div>
  );
}

export default App;

---------------------------

// Output:

// Hello Devcribe!

5. JSX expression in React Component

App.js

import React from "react";

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return (
    <div className="App">
      <Welcome name="Devcribe" />,
    </div>
  );
}

export default App;

---------------------------

// Output:

// Hello Devcribe!

6. JSX expression with class-based components

App.js

import React from "react";

class Welcome extends React.Component {
  render() {
    return <h1>Hello {this.props.name}!</h1>;
  }
}

function App() {
  return (
    <div className="App">
      <Welcome name="Devcribe" />,
    </div>
  );
}

export default App;

---------------------------

// Output:

// Hello Devcribe!

7. JSX with style

App.js

import React from "react";

function App() {
  const style = {
    color: 'red',
    fontSize: '36px'
  };

  const element = <h1 style={style}>Hello Devcribe!</h1>;
  return (
    <div className="App">
      {element}
    </div>
  );
}

export default App;

---------------------------

// Output: In the picture below

There you can see the styling applied to your text by running it on your browser’s localhost:3000.

8. JSX with Multiple Components

App.js

import React from "react";

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return (
    <div>
      <Greeting name="John" />
      <Greeting name="Jane" />
      <Greeting name="Jim" />
    </div>
  );
}

export default App;

---------------------------

// Output:

// Hello John!
// Hello Jane!
// Hello Jim!

As you see from these examples, JSX makes it easy to write HTML-like structures within your JavaScript code. It also makes it easy to create reusable components and pass them to those components using props. When the React library is used to render the components, the JSX expressions are compiled into JavaScript functions that generate the HTML structure at run time and you can see that compiled HTML structure in the development tools of the browser.

I hope this content will be enough to understand what is JSX and how it works with multiple examples. If your want to learn more about ReactJS, you can follow all the ReactJS tutorials starting from “Introduction to React” on devcribe.com. Happy Coding!