Day 3: Understanding JSX and Rendering Elements - ReactJS

Welcome to Day 3 of the "30 Days of ReactJS" challenge! Today, we’ll dive into one of the core concepts of React: JSX. By the end of this post, you’ll have a solid understanding of JSX and how React uses it to render elements on the web page.

What is JSX?
JSX stands for JavaScript XML. It’s a syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript files. JSX makes it easier to create and visualize the UI components directly in your code, blending the logic and structure of your app.

How JSX Works
When you write JSX, you’re writing a mix of HTML and JavaScript. React takes this and transforms it into standard JavaScript objects that represent your UI.

Here’s a basic example:

const element = <h1>Hello, world!</h1>;

This line of code creates a React element that represents an <h1> tag with the text “Hello, world!”.

JSX is Not HTML
Even though JSX looks a lot like HTML, it’s important to remember that it’s not exactly the same. JSX is a syntactic sugar that React uses to create elements.

For example, in HTML, attributes like class are used to apply CSS classes:

<h1 class="header">Hello, world!</h1>

But in JSX, you need to use className instead of class, because class is a reserved keyword in JavaScript:

const element = <h1 className="header">Hello, world!</h1>;

Embedding Expressions in JSX
One of the powerful features of JSX is that you can embed JavaScript expressions directly within it. This allows you to dynamically generate content based on your app’s logic.

For example:

const name = 'Meraj';
const element = <h1>Hello, {name}!</h1>;

Here, {name} is a JavaScript expression that will be evaluated and replaced with the value of the name variable, rendering as “Hello, Meraj!” on the screen.

Rendering Elements in React
In React, rendering elements is the process of displaying content on the page. React elements are the building blocks of your app’s UI.

To render an element, you use the ReactDOM.render() method. This method takes two arguments:

1. The React element you want to render.
2. The DOM element where you want to render it.

Here’s how you would render the "Hello, world!" example:

import React from 'react';
import ReactDOM from 'react-dom/client';

const element = <h1>Hello, world!</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

This code tells React to render the element inside the HTML element with the id of root.

The Power of React's Virtual DOM
React uses a virtual DOM to efficiently manage changes to the UI. When you update an element, React compares the new version with the previous one and only updates the parts of the actual DOM that have changed. This approach makes React fast and efficient.

Real-Life Example: A Shopping List
Think of a shopping list on a whiteboard. If you need to change one item, you don’t erase the entire list and rewrite it. You just update the specific item that changed. React’s virtual DOM works similarly, updating only the parts that need to be changed.

Why Use JSX?

• Readable Code: JSX allows you to write your components in a way that’s easy to read and understand. You can see the structure of your UI directly in your code.
• Less Code: With JSX, you can write less code compared to using React.createElement() to create elements manually.
• Integration with JavaScript: Since JSX is a syntactic extension of JavaScript, you can embed logic directly within your UI code.

Setting Up JSX with Vite
Since we’re using Vite for development, the good news is that Vite comes pre-configured to support JSX out of the box. This means you can start writing JSX immediately without any additional setup.

If you’ve followed the steps from Day 2, your Vite project is already set up. You can start creating components with JSX and see them rendered instantly.

Conclusion
JSX is a powerful tool that bridges the gap between HTML and JavaScript, making it easier to build dynamic and interactive UIs with React. Understanding how JSX works and how React uses it to render elements will set a strong foundation for your React development journey.

Tomorrow, we’ll dive into Components and Props—the core building blocks of any React application.

Day 4: Components and Props