JSX React JS: Learning basics of JSX structure your react web application

JSX maybe you know or not is used in react to develop user interfaces. it was introduced with react to help developers in writing readable and manageable code. In this article we will discuss deeply about its syntax and uses.

As we discussed earlier JSX is a web structuring technology that resembles HTML. Here main concern is why should we use JSX.

React doesn’t require JSX. We can also write react webapps without using it.

For You: HTML5 in 5 minutes: Lets learn web programming.

Why JSX?

It has many benefits in JavaScript enviroment:

Its easy to learn & code because syntax resembles HTML.
Can be use as an expression (Assign to a variable).
We can use it directly in JavaScript code.
Other elements can be added as children.

This in background is using react core library to create elements with specified attributes. This may look confusing but here we will see some examples and try to understand with and without JSX.

/*--- Hello World without jsx -----*/
React.createElement("h1", null, "Hello world!");


/*--- Hello World with jsx -----*/

<h1>Hello world!</h1>;

As we can see using it make our life easier as a frontend developer because now code is more readable and easy to write.

Its resembles HTML but keep in mind its just a JavaScript code in background. Like normal HTML5 tag we can can add attributes of elements.

<a href="https://youtube.com/">Youtube</a>

There are some differences between HTML and JSX. Lets discuss about them:

Each tag must end by closing tag.
Here each attribute can be written in camel case.
class and other html attributes like for are written as className and HTMLFor.
Inline styling can be done in the form of objects.

Here question arises why we need to use className rather than class.

Attributes in JSX:

Attributes like class, for, onclick etc contains keywords that are reserved in JavaScript programming language. For example class keyword is reserved for JavaScript classes and for keyword is used in looping. So to avoid syntax errors attributes are written in camel case without spaces.

/* ------------  HTML Form ------------------*/
<div class="form-wrapper">
  <label class="label-name" for="name">Enter your name: </label>
  <input class="input-name" type="text" id="name" />
</div>

/* ------------  HTML Form ------------------*/
 <div className="form-wrapper">
        <label className="label-name" htmlFor="name">Enter your name: </label>
        <input className="input-name" type="text" id="name" />
 </div>

To convert Html code into JSX you can visit here.

Nesting Components:

Another important feature is component nesting into other.

import React from "react";
function List() {
  return (
    <ul>
      <li>Butter</li>
      <li>Milk</li>
      <li>Cheese</li>
      <li>Yougart</li>
    </ul>
  );
}

function Label() {
  return <h1>Dairy Products:</h1>;
}

function Product() {
  return (
    <>
      <Label />
      <List />
    </>
  );
}

This feature helps in creating small units for a larger complex UI. Components are reusable and easy to manage. Embedding one component into other forms a hierarchy which forms a tree of elements. Easily manageable, scalable and reusable.

JSX and JavaScript:

As we discussed earlier it can be used directly in our code. Here is an example of loop mapping using lists.

let items = ["Butter", "Milk", "Cheese", "Yougart"];

<ul>
      {items.map((item, index) => {
        <li key={index}>{item}</li>;
      })}
</ul>

Styling Components:

Styling is most important part of designing a web application. Its helps us making webpages more user friendly and interactive. JSX has huge support in to use css element based system. We can use style attribute in each element but in different way.

Here is an example to show you some difference between both of them using inline styling methodology.

/*----- Normal CSS   -------*/

<h1 style="color:red;">Hello</h1>

/*----- Normal CSS   -------*/

<h1 style={{color:"red",}}>Hello</h1>

Here we can see, JSX being part of a programming language works in different way. We have to follow some major rules:

CSS attributes must be enclosed in {} brackets
Those attributes must be camel case.

Passing styles as an object:

Since it uses CSS attributes in the form of key-value pair. We can separate styling from structuring.

Here you can follow this example.

let headingStyles = {
	color:'red',
	backgroundColor:'black',
	fontWeight:'bold'
};


<h1 style={headingStyles}>Hello</h1>

Conclusion:

JSX is a structuring language for react. Also closely resembles HTML but is different in syntax. It makes designer life easier by creating element hierarchy tree. We can style it same as normal webpages but also need to follow some rules.

Thank you for your time. I hope you have learned something. Please let us knoe comment below if you have any queries. Have a great day!