What is React js and how JSX works in react js

React Basic :

React js is a library and it is used to develop single page applications. React js is a front-end technology and it is completely based on javascript.

To create a react project you need to install node js first.

Download node js from this link https://nodejs.org/en/

After successfully installing node js install react js by these commands, open your terminal and run these commands.

npx createreactapp your_app_name
cd your_app_name
npm start

Now your react app will launch after running npm start command.

What is JSX :

JSX stands for syntax extension to javascript. Its kind of a template language with full power of javascript.

Inside react if we want to show a H1 tag without JSX then we need to write these long syntax.

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
import App from ‘./App’;
const element = React.createElement(‘h1’,null,“heading text”);
ReactDOM.render(element,document.getElementById(“root”));
// ReactDOM.render(
//   <React.StrictMode>
//     <App />
//   </React.StrictMode>,
//   document.getElementById(‘root’)
// );

Inside index.js file comment out the ReactDOM.render and create a element and render it inside the root id html element.

Output for the above code is

const element = React.createElement(‘h1’,null,“heading text”);

this way JSX works internally to create elements.

JSX format :

For one heading element it is easy to initialize but what happen when you have to write a lot of html code, Its complicated write React.createElement code for all  html code.

To solve this we use JSX which allow you to write all the html code inside a javascript funciton and later this Babel convert automatically all html code to React.createElement javascript code.

Babel is a compiler used in react js for JSX conversion.

Now the same above output you can get with JSX by writing simple html code.

import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
import App from ‘./App’;
ReactDOM.render(
  <h1>Heading text</h1>,
  document.getElementById(‘root’)
);

Now simple html h1 tag can be used inside this render function. This code writing inside the render function is JSX.

lets understand with another file.

create a Demo.js file inside the src folder

const Demo = ()=>{
    return (
        <h1>Demo Data</h1>
    )
}
export default Demo;

This is the code inside the Demo.js file

    return (
        <h1>Demo Data</h1>
    )

This above code represent JSX.

Now we will import this file inside index.js and use it inside the ReactDOM.render.

import Demo from ‘./Demo’
ReactDOM.render(
  <React.StrictMode>
    <Demo />
  </React.StrictMode>,
  document.getElementById(‘root’)
);

This will generate same output with text demo data.

<React.StrictMode>

This helps to show basic javascript errors during compilation.

That’s all for this post, feel free to comment if you have any question.

Related Posts

frontbackgeek-images

Unveiling React Query: Building a Task Manager App with useMutation and useQuery Hooks

In this article, we will build a Task Manager app to understand What is React Query? and How to use React Query useMutation, and React Query useQuery…

frontbackgeek-images

Building Forms with Formik in React: Complete Code Examples and Explanations

In this article, we are building a simple form to understand how to build a form with Formik in React application, Here we are building a simple…

frontbackgeek-images

Creating React antd table with sorting and pagination and using antd select and antd modal for filtering and displaying the data.

In this article we are creating an antd table with React antd library, antd library is an ant design library, which has a rich set of components…

frontbackgeek-images

React Virtualized Tables: Enhancing the Performance of React 18 Applications

In this article, we will explore the concept of React Virtualized Tables as a solution to enhance performance in rendering large tables. We will delve into what…

React Native Expo Error Solution : ERROR Invariant Violation: “main” has not been registered. This can happen if: * Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it, and restart it in the current project.

Solution is Reinstall with this Restart and Rescan the app

frontbackgeek-images

Exploring useLayoutEffect VS useEffect in React 18: A Deep Dive with Code Examples and Practical Comparisons

In React.js, Hooks are very important for handling state and for other features related to functional components, useLayoutEffect vs useEffect is a hot topic, because both are…

This Post Has 3 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *