ReactJS Tutorial for Beginners - 7 - JSX

Author:
In this chapter, we will learn about JSX in the React.

1. 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.
Consider this variable declaration:
const element = <h1>Hello, world!</h1>;
The above code snippet is called JSX, and it is a syntax extension to JavaScript language syntax. 
JavaScript XML (JSX) is an extension to the JavaScript language syntax. With React, it's an extension to write an XML-like code for elements and components. And just like XML, JSX tags have a tag name, attributes, and children.

2. 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.
Let us demonstrate with two examples, the first example uses JSX and the second does not:

Example 1

JSX:
const myelement = <h1>I Love JSX!</h1>;
ReactDOM.render(myelement, document.getElementById('root'));

Example 2

Without JSX:
const myelement = React.createElement('h1', {}, 'I do not use JSX!');
ReactDOM.render(myelement, document.getElementById('root'));
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.

Babel compiles JSX down to React.createElement() calls.

3. Embedding Expressions in JSX

In the example below, we declare a variable called name and then use it inside JSX by wrapping it in curly braces:
const name = 'Ramesh';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);
You can put any valid JavaScript expression inside the curly braces in JSX. 
For example, 2 + 2, user.firstName, or formatName(user) are all valid JavaScript expressions.
In the example below, we embed the result of calling a JavaScript function, formatName(user), into an <h1> element.
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Ramesh',
  lastName: 'Fadatare'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

4. JSX is an Expression Too

After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.
This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions:
function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

5. Specifying Children with JSX

If a tag is empty, you may close it immediately with />, like XML:
const element = <img src={user.avatarUrl} />;
JSX tags may contain children:
const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

6. Inserting a Large Block of HTML

To write HTML on multiple lines, put the HTML inside parentheses:

Example:

Create a table with four rows:
import React, { Component } from 'react'

export default class TableBody extends Component {
    render() {
        return (
            <table>
                <thead>
                    <th> Employee Name </th>
                    <th> Employee Role </th>
                </thead>

                <tbody>
                    <tr>
                        <td> Ramesh</td>
                        <td> Software Developer</td>
                    </tr>
                    <tr>
                        <td> Tony</td>
                        <td> Software Developer</td>
                    </tr>
                    <tr>
                        <td> Pramod</td>
                        <td> Software Developer</td>
                    </tr>
                    <tr>
                        <td> Santosh</td>
                        <td> QA Engineer</td>
                    </tr>
                 </tbody>
            </table>
        )
    }
}

7. Styling in JSX

Consider the following JSX:
import React from 'react'
import APIService from '../service/APIService'

export default class BookComponent extends React.Component {

    render() {
        return (
            <div className = "container">
                <h2 className="text-center">Book Details</h2>
                <table className="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Book Id</th>
                            <th>Book Name</th>
                        </tr>
                    </thead>
                    <tbody>
                         <tr key=1>
                             <td>1</td>
                             <td>Core Java</td>
                         </tr>
                         <tr key=2>    
                             <td>2</td>
                             <td>Effective Java</td>
                         </tr>
                   </tbody>
                </table>
            </div>
        )
    }
}
JSX is actually closer to JavaScript, not HTML, so there are a few key differences to note when writing it.
  • className is used instead of class for adding CSS classes, as class is a reserved keyword in JavaScript.
  • Properties and methods in JSX are camelCase - onclick will become onClick.
  • Self-closing tags must end in a slash - e.g. <Welcome />, <DemoComponent />

7.1 Inline Styling

The following example shows how to add myStyle inline to <h1> element.
import React from 'react';

class App extends React.Component {
   render() {
      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      }
      return (
         <div>
            <h1 style = {myStyle}>Header</h1>
         </div>
      );
   }
}
export default App;
Note that you can create a JavaScript object with styles and reuse it in the required place in JSX.

What's Next?

In this chapter, we have learned all about JSX in React with an example. In the next chapter, we will learn about the props in React with an example.

Free Spring Boot Tutorial | Full In-depth Course | Learn Spring Boot in 10 Hours

Watch this course on YouTube at Spring Boot Tutorial | Fee 10 Hours Full Course