What is JSX in React Programming language

Understanding JSX and Creating Another Component

In this lesson, we’ll create a new React component and dive deeper into JSX. JSX allows us to write HTML inside JavaScript, making it easy to build UI components. However, JSX must always return a single root element (parent) that wraps any child elements.

What is JSX?

JSX stands for JavaScript XML and lets us write HTML-like code in JavaScript. Although it looks like HTML, it’s JavaScript under the hood, and React compiles it into standard JavaScript functions. Let’s create a new component to see this in action.

Steps to Create a New Component

Step 1: Create a New Component File

Inside the src/components folder, create a new file named Greeting.jsx. This file will hold our Greeting component.

Code for Greeting.jsx

// Greeting.jsx
// This component returns a greeting message using JSX


// Create the Greeting component using a fat arrow function
const Greeting = () => {
  return (
    <div>
      <h2>Hello from Greeting Component!</h2>
      <p>This is a message from a new component created to demonstrate JSX.</p>
    </div>
  );
};

export default Greeting;

Explanation:

• We create a component named Greeting using a fat arrow function syntax: () => {}.
• The component returns a <div> that contains an <h2> and a <p> tag.
• This <div> serves as the parent element for all child elements inside the component, as JSX requires one single root element.

Step 2: Import and Use Greeting in App.jsx

Now, let’s import the Greeting component into the main App.jsx component and render it.

Code for App.jsx

// App.jsx
// Main component where we import and use the Greeting component

import Greeting from "./components/Greeting"; // Import the Greeting component

const App = () => {
  return (
    <div>
      <h1>Welcome to My React App</h1>
      <Greeting /> {/* Render the Greeting component */}
    </div>
  );
};

export default App;

Understanding JSX with JavaScript Inside

In JSX, you can add JavaScript expressions inside the HTML by using curly brackets {}. Let’s modify the Greeting component to display the current year dynamically using JavaScript.

Updated Code for Greeting.jsx

// Greeting.jsx
// Updated to show the current year using JavaScript in JSX

const Greeting = () => {
  const currentYear = new Date().getFullYear(); // Get the current year

  return (
    <div>
      <h2>Hello from Greeting Component!</h2>
      <p>The current year is {currentYear}.</p> {/* JavaScript inside JSX */}
    </div>
  );
};

export default Greeting;

Explanation:

• We create a currentYear variable using JavaScript to get the current year.
• In the JSX, we include {currentYear} inside the <p> tag to display the value dynamically.

Key Takeaways

• JSX allows us to write HTML in JavaScript, but we need a single root (parent) element around all JSX elements.
• To include JavaScript inside JSX, use curly brackets {}.
• In the next lesson, we’ll explore using React Fragments as parent elements to avoid adding unnecessary <div> wrappers.

With this knowledge, you can now create dynamic components and include JavaScript directly in your JSX, making your code more powerful and flexible.

Learn More

Creating your first program in react step by step guide

Folder and file structure react vite installation structure

How to install react.js with npm bun and vite