React JSX Tutorial

In this Tutorial, you are gonna learn React JSX in detail to get started with react.

Before we begin, let's set up our React Environment.

Step1: Install Node.js and NPM

Node.js is a JavaScript runtime environment that allows you to run JavaScript code outside of a browser.
NPM is a package manager for Node.js that allows you to install and manage JavaScript packages.
To install Node.js and NPM, you can visit their websites and download the latest version for your operating system.
To run our React code use the code editorVS Code (Recomonded)

Step2: Install Create React App

Create React App is a tool that makes it easy to create new React projects.
To install Create React App, run the below command in your terminal

npm install -g create-react-app

Step 3: Create a new React project

Once you have Create React App installed, you can create a new React project by running the following command in your termina

npx create-react-app my-react-app

This will create a new directory called my-react-app containing your new React project.

Step 4: Start the development server

To start the development server, run the below command in your termina

cd my-react-app
npm start

The development server will start on port 3000 by default. You can open http://localhost:3000 in your browser to view your React project.

Step 5: Edit your React project

You can edit your React project by opening the src directory in your code editor.
The srcdirectory contains all of the source code for your React project.

Step 6: Save your changes and the browser will automatically reload

Once you have made changes to your React project, save your changes and the browser will automatically reload.
This makes it easy to see the results of your changes immediately.

Step 7: Deploy your React project

Once you are finished developing your React project, you can deploy it to production.
Using: Vercel, Netlify, or Heroku

What is React JSX

React JSX, which stands for JavaScript XML, is a syntax extension to JavaScript that allows developers to write HTML-like code within their JavaScript code.
This makes it easier to create and maintain complex user interfaces, as developers can keep their HTML and JavaScript code in the same place.
For example the below are the valid JSX Exmaples

Single Element JSX


const h1 = <h1>Hello, World!</h1>

Nested Elements

<div>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
    <ul>
        <li>Apple</li>
        <li>Orange</li>
        <li>Mango</li>
    </ul>
</div>

In the latest version or react we use Fragments<>Elements</> instead of <div> Element.

Rendering JSX into HTML

We create JSX Elements to display as an html Element in the DOM.
To do that we import react and ReactDOM from the package and we render JSX into webpage.

import react from "react"
import ReactDOM from "react-dom/client"

const h1 = <h1>Hello, World!</h1>
const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(h1);

After this, run the code and see the changes in the brower.

The above code will render the h1 and display in the index.html file under this <div id="root"></div>

When we see in console tab, we get the rendered h1 tag

How exactly we use JSX?

The main purpose of the JSX is more than we discussed above.
When we working with components, the component is most of the times return JSX
So we use JSX more with components and we will discuss that in the components tutorial.

Previous Next