JSX & Components in React: A Complete Beginner’s Guide

1. What is JSX, and Why Use It?

JSX (JavaScript XML) is a syntax extension for JavaScript used in React to describe the UI. It allows developers to write HTML-like syntax inside JavaScript, making the code more readable and maintainable.

Why Use JSX?

• Improves Readability: JSX looks like HTML, making UI structure easier to understand.
• Efficient Rendering: React compiles JSX into JavaScript functions, optimizing performance.
• Component-Based UI: JSX enables building reusable components efficiently.

Purpose of JSX in React

• JSX helps in defining UI elements and React components.
• It enables embedding JavaScript logic inside HTML-like syntax.
• JSX simplifies conditional rendering and loops.

2. Differences (.js files VS .jsx files)

In summary, .js files are standard JavaScript files used for general JavaScript code, while .jsx files are specifically used for defining React components that contain JSX syntax.

In a React application, you can use both .js and .jsx files. Typically, .jsx is preferred for components that include JSX syntax, making it easier to write HTML-like markup within JavaScript. Meanwhile, .js files are commonly used for utility functions, configuration, or other JavaScript logic that doesn’t involve JSX. When importing files, you specify the appropriate extension based on the file type.

3. How to Write JSX and Where to Use It?

JSX is used inside React components to define the UI.

Example of JSX in a React Component:

const Welcome = () => {

  return <h1>Welcome to React!</h1>;

};

Where to Use JSX?

• JSX is used inside React components (functional or class-based).
• It is written inside .jsx or .js files in React applications.
• JSX expressions are placed inside return() within components.

4. What Are the Conditions When Writing JSX?

When using JSX, follow these important rules:

1. JSX Must Return a Single Parent Element

❌ Incorrect:

jsx

return <h1>Hello</h1> <p>Welcome!</p>;

✅ Correct:

jsx

return (

  <div>

    <h1>Hello</h1>

    <p>Welcome!</p>

  </div>

);

2. Use Curly Braces {} for JavaScript Expressions

jsx

const name = "Alice";

return <h1>Hello, {name}!</h1>;

3. Use className Instead of class

jsx

return <div className="container"></div>;

4. Close Self-Closing Tags

jsx

return <img src="logo.png" alt="React Logo" />;

5. Functional vs. Class Components

React allows creating UI components using two approaches:

Functional Components (Recommended)

A functional component is a simple JavaScript function that returns JSX.

jsx

const Greeting = () => {

  return <h1>Hello, World!</h1>;

};

Class Components (Older Approach)

A class component extends React.Component and has a render() method.

jsx

class Greeting extends React.Component {

  render() {

    return <h1>Hello, World!</h1>;

  }

}

Why Functional Components Are Preferred?

✅ Easier to read and write
✅ Better performance (no extra lifecycle methods)
✅ Hooks (useState, useEffect) replace the need for class components

6. Props in Components

Props (short for “properties”) allow passing data from a parent component to a child component.

Example:

jsx

const Welcome = (props) => {

  return <h1>Welcome, {props.name}!</h1>;

};

// Using the component

<Welcome name="Alice" />;

Props make components dynamic and reusable.

7. Component Reusability

One of the biggest advantages of React is its reusable components.

Example: Creating a Reusable Button Component

jsx

const Button = ({ label, onClick }) => {

  return <button onClick={onClick}>{label}</button>;

};

// Using the reusable Button component

<Button label="Click Me" onClick={() => alert("Button Clicked!")} />;

Benefits of Component Reusability

✅ Reduces duplicate code
✅ Makes applications modular and maintainable
✅ Enhances scalability

8. Pros and Cons of JSX & Components

Pros 

✔️ Improved Readability: Looks like HTML, easy to understand.
✔️ JavaScript Integration: Allows JavaScript expressions inside HTML.
✔️ Faster Development: Simplifies UI creation with reusable components.
✔️ More Secure: React sanitizes JSX to prevent security issues.

Cons 

❌ Requires Compilation: JSX needs to be transpiled by Babel.
❌ Not Standard JavaScript: New developers may find it confusing.
❌ More Code for Simple Tasks: JSX can be verbose in some cases.

Final thought

JSX is a powerful syntax in React that makes UI development more efficient. By understanding how to write JSX, the conditions for using it, and the differences between functional and class components, developers can create reusable, scalable, and maintainable applications.