JSX, Props and Conditional Rendering in React

When we build interfaces in React, we quickly come across three important concepts: JSX, props, and conditional rendering. Understanding these gives us a strong foundation in React.

What is JSX?

JSX stands for JavaScript XML, and it allows us to write HTML-like code directly inside JavaScript files. JSX makes code easier to visualize, and although it looks like HTML, React converts it into regular JavaScript behind the scenes.

Instead of writing:

React.createElement('h1', null, 'Hello World!')

We can simply write:

<h1>Hello</h1>

Here are some important rules to remember while writing JSX:

1. Return a single root element: Multiple elements must be wrapped inside one parent element. If we do not want extra markup, we can use React fragments.

// Correct
return (
  <div>
    <h1>Hello</h1>
    <p>Welcome!</p>
  </div>
);

// Using Fragment
return (
  <>
    <h1>Hello</h1>
    <p>Welcome!</p>
  </>
);

2. Close all tags: JSX requires all tags to be properly closed, including self-closing ones.

// Correct
<img src='logo.png' alt='Logo' />

// Incorrect
<img src='logo.png'>

3. Use camelCase: HTML attributes and event handlers use camelCase in JSX.

<button className='my-button' onClick={handleClick}>
  Click Me
</button>

What Are Props?

Props let us pass data into components, making them dynamic and reusable.

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Usage
<Welcome name='Sara' />
<Welcome name='Ali' />

We can also destructure props:

function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Conditional Rendering in React

React allows us to show or hide UI based on conditions using standard JavaScript logic.

Using if statement:

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please log in.</h1>;
}

Ternary operator:

<p>{isOnline ? 'Online' : 'Offline'}</p>

&& operator:

{isLoggedIn && <button>Logout</button>}

Here, the button renders only if isLoggedIn is true.

JSX, props, and conditional rendering are core to React. JSX helps write markup inside JavaScript, props allow component reusability, and conditional rendering decides what appears in the UI. Mastering these basics helps build flexible and powerful React components.