ReactJS#4: What is JSX?

JSX ( Javascript XML) allows us to write HTML element in javascript without using createElement() or appendElement to append or insert html element into DOM.

In this lab, we explore how to produce React element which can be rendered into DOM.

So, let’s get started.

With JSX.

In the below example, we will use simple JSX.

const element = <h1> My ToDo App </h1>

To render into DOM, We can ReactDOM From react.

ReactDOM.Render(element, document.getElementById('root'))

Without JSX

To write an html element in the javascript, we must close element in a double quotes.

Here is an example in javascript :

const element = React.createElement('h1',{}, 'My ToDo App');
ReactDOM.Render(element, document.getElementById('root'))

So, JSX helps us to write an html element very easily. At run time, JSX produces React element and it can be rendered into DOM.

Write Expression in JSX

We can write expression in JSX using curly braces { }

Simple expression :

const name = "Raj";
const element = <h1> Hello {name}, expression in JSX is simmple<h1>;

ReactDOM.Render(element, document.getElementById('root'))

Function as an expression in JSX:

function getFullName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Raj',
  lastName: 'Gadade'
};

const element = <h1> Hello, {getFullName(user)}</h1>;
ReactDOM.Render(element, document.getElementById('root'))

Using JSX inside conditional statements

We can use JSX inside conditional statements – If, For & Do- while loop, etc.

When we compile the below code, it converts JSX expression into a Javascript object.

Here is an example of If statement –

function greeting(user) {
if(user)
  {
  return <h1>Hello, {user.firstName}  {user.lastName}</h1>;
  }
  return <h1> hello , guest</h1>;
}

Writing HTML elements in JSX

HTML attributes provides more information about HTML elements .

For examples,

  • The “src” attribute from <img>
  • The “href” attributes from <a>
  • or the “class” attribute from any html element etc.

You can read more about here https://www.w3schools.com/html/html_attributes.asp

String literal as Attributes

String literals should be closed in quotes.

here is an example – tabIndex

const element = <div tabIndex=”0″> Hello , World</div>;

Here, we used camelCasing “tabIndex” because ReactDOM uses camelCase property name convention.

Embedding JSX expression in attributes

To embed and JSX expression, we should use curly braces {}

const element = <h1>Hello, {user.firstName}  {user.lastName}</h1>;

To embed expression in attributes :

const element = <img src={user.profileurl></img>;

Embed javascript expression should not be inlcuded in quotes . You can eiter use quoate for single string literal or curly brace for JSX expression.

Nested HTML elements

In JSX, all nested elements should be wrapped into one top element and should be placed inside the parenthesis.

constant elementTodoList = <div className="todo-lists">
                <h1>TodoLists</h1>
                <ul>
                    <li>shopping list</li>
                    <li>blogging ideas</li>
                    <li>books list</li>
                </ul>
            </div>

That’s all about how React JSX works.