React Understanding Jsx Complete Guide

Complete Examples, Step by Step for Beginners: Understanding JSX in React

JSX is a syntax extension for JavaScript that looks similar to HTML. It is commonly used with React to describe what the UI should look like. JSX allows you to write HTML-like code in your JavaScript files, making it easier to manage your application's structure and its rendering logic.

Step-by-Step Example

Let's walk through a simple example to understand JSX in React. We'll create a basic React component that displays a "Hello, World!" message.

Step 1: Set Up Your React Environment

First, you need to have Node.js installed on your machine. Then, you can create a new React application using Create React App, which sets up everything you need to get started.

npx create-react-app my-app
cd my-app
npm start

This command will create a new React project called my-app and start a development server. You can see your React app running in the browser at http://localhost:3000.

Step 2: Create a Simple React Component with JSX

Open the src/App.js file in your favorite code editor. This is where we'll write our React component using JSX.

1. Remove the existing code in the App.js file.

2. Write a simple React component like this:

   import React from 'react';
   
   function App() {
     return (
       <div>
         <h1>Hello, World!</h1>
       </div>
     );
   }
   
   export default App;
   

   Here’s an explanation of the code:

   • import React from 'react';: This imports the React library so we can use JSX in our file.

   • function App() { ... }: This is our React component named App. In React, components are usually defined as JavaScript functions.

   • return ( ... );: The return statement inside the App function returns a JSX expression that describes the UI.

   • <div><h1>Hello, World!</h1></div>: This is the JSX element. It is similar to HTML and tells React to render an h1 element inside a div.

   • export default App;: This exports the App component so it can be used in other parts of the application.

3. Save the file. The browser should automatically refresh and display "Hello, World!" on the page.

Step 3: Use JavaScript Expressions in JSX

You can embed any JavaScript expression inside the curly braces {} when using JSX. For example:

1. Update your App.js file:

   import React from 'react';
   
   function App() {
     const name = "World";
     return (
       <div>
         <h1>Hello, {name}!</h1>
       </div>
     );
   }
   
   export default App;
   

   Here’s what happened:

   • We added a name variable that holds the string "World".

   • Inside our JSX, we used the expression {name} to display the value of the name variable within the <h1> element.

2. Save the file. The browser should now display "Hello, World!" just as before.

Step 4: Add More Complexity with Conditional Rendering

Let's add a conditional rendering feature to our component. We'll check if the name variable is defined, and display a different message if it is not.

1. Update your App.js file again:

   import React from 'react';
   
   function App() {
     const name = "World";  // try changing this to undefined or null
     return (
       <div>
         <h1>Hello, {name ? name : 'Guest'}!</h1>
       </div>
     );
   }
   
   export default App;
   

   Here’s what's new:

   • {name ? name : 'Guest'}: This is a conditional (ternary) operator. If name is defined (evaluates to true), it displays the name. Otherwise, it displays the string "Guest".

2. Save the file. The browser should still display "Hello, World!". Try setting name to undefined or null and observe the result.

Step 5: Understanding JSX Limitations

There are some limitations and rules to keep in mind when using JSX:

• Closing Tags: All elements must be properly closed. Even self-closing tags like <img> must be written as <img />.

• Class Attribute: Use className instead of class to define CSS classes since class is a reserved keyword in JavaScript.

• Comments: Comments must be inside curly braces like {/* this is a comment */}.

Step 6: Add a CSS Class

Let's add a little CSS to our component to make it look nicer.

1. Create a new file src/App.css:

   .greeting-header {
     font-size: 2em;
     color: blue;
     text-align: center;
   }
   

2. Import the CSS file into App.js and apply the class to the <h1> element:

   import React from 'react';
   import './App.css';
   
   function App() {
     const name = "World";
     return (
       <div>
         <h1 className="greeting-header">
           Hello, {name ? name : 'Guest'}!
         </h1>
       </div>
     );
   }
   
   export default App;
   

3. Save the files. The browser should now display "Hello, World!" in a centered, blue font that's twice the size of the default.

Conclusion