React JSX

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. But instead of using regular JavaScript, React code should be written in something called JSX. 

Let us see a sample JSX code:  

const element = <h1>This is sample JSX</h1>; 

JSX (JavaScript Extension), is a React extension which allows writing JavaScript code that looks like HTML. In other words, JSX is an HTML-like syntax used by React that extends ECMAScript so that HTML-like syntax can co-exist with JavaScript/React code. The syntax is used by preprocessors (i.e., transpilers like babel) to transform HTML-like syntax into standard JavaScript objects that a JavaScript engine will parse. 

const element = React.createElement(

  "h1",

  null,

  "This is sample JSX"

);

JSX provides you to write HTML/XML-like structures (e.g., DOM-like tree structures) in the same file where you write JavaScript code, then preprocessor will transform these expressions into actual JavaScript code. Just like XML/HTML, JSX tags have a tag name, attributes, and children.

Why JSX?

• It is faster than normal JavaScript as it performs optimizations while translating to regular JavaScript.
• It makes it easier for us to create templates.
• Instead of separating the markup and logic in separated files, React uses components for this purpose. We will learn about components in detail in further articles.

Using JavaScript expressions in JSX

In React we are allowed to use normal JavaScript expressions with JSX. To embed any JavaScript expression in a piece of code written in JSX we will have to wrap that expression in curly braces {}. 

Consider the below program, written in the app.js file:  

const name = "Learner";

function App() {

  return (

    <div className="App">

      <h1>Hello {name}, Welcome to Beta-Labs.</h1>

    </div>

  );

}

export default App;

Output:   

In the above program we have embedded the javascript expression const name = “Learner”; in our JSX code. We embed the use of any JavaScript expression in JSX by wrapping them in curly braces except if-else statements. But we can use conditional statements instead of if-else statements in JSX. Below is the example where conditional expressing is embedded in JSX:  

import React from 'react';

const i = 1;

const element = <h1>{i == 1 ? "Hello World!" : "False!"} </h1>;

function App() {

  return <div className="App">{element}</div>;

}

export default App;

Output: 

In the above example, the variable i is checked if for the value 1. As it equals 1 so the string ‘Hello World!’ is returned to the JSX code. If we modify the value of the variable i then the string ‘False’ will be returned.

 

Wrapping elements or Children in JSX

Consider a situation where you want to render multiple tags at a time. To do this we need to wrap all of this tag under a parent tag and then render this parent element to the HTML. All the sub-tags are called child tags or children of this parent element. 

Notice in the below example how we have wrapped ol, and li tags under a single div element and rendered them to HTML: 

import React from "react";

const element = (

  <ul>

    <li>HTML5</li>

    <li>Css3</li>

    <li>JavaScript</li>

    <li>MongoDB</li>

    <li>ReactJS</li>

  </ul>

);

function App() {

  return (

    <div className="App">

      <h1>At Beta Labs You will Learn:</h1>

      {element}

    </div>

  );

}

export default App;

Output: 

JSX Styling

React always recommends to use inline styles. To set inline styles, you need to use camelCase syntax. React automatically allows appending px after the number value on specific elements. The following example shows how to use styling in the element. 

Example

import React from "react";

const cssStyle = {

  fontSize: "24px",

  color: "white",

  backgroundColor: "black",

  padding: "10px",

  width: "500px",

  textAlign: "center",

  borderRadius: "10px",

};

function App() {

  return (

    <div className="App">

      <h2 style={cssStyle}>Beta-labs-Lets Code Together</h2>

    </div>

  );

}

export default App;

Output:

JSX Comments

JSX allows us to use comments that begin with /* and ends with */ and wrapping them in curly braces {} just like in the case of JSX expressions. Below example shows how to use comments in JSX. 

Example

import React from "react";

function App() {

  return (

    <div className="App">

      <h1>Hello from Beta-Labs</h1>

      {/* This is a comment in JSX */}

    </div>

  );

}

export default App;