What is component in React

What is a Component in React?

A component is a reusable building block in React that represents a part of the user interface.

Example of a Simple Component:

function Button() {
  return <button>Click Me</button>
}

Why Use Components?

1. Reusability: Write once, use multiple times.
2. Maintainability: Fix an issue in one place instead of many.
3. Modularity: Components keep code organized.
4. Scalability: Large applications can be built by composing smaller components.

Example of a Component with Logic:

function CounterButton() {
  let count = 0
  return <button onClick={() => count++}>Clicked {count} times</button>
}

What is JSX?

JSX (short for JavaScript XML) is a special syntax in React that looks like HTML but is actually JavaScript in disguise. It allows you to write markup directly within JavaScript code, which React then translates into actual UI elements on the screen.

Example of JSX:

function Greeting() {
  return <h1>Hello, I am JSX!</h1>
}

<h1>Hello, I am JSX!</h1> looks like HTML, but it is JSX. When React runs, it translates this JSX into JavaScript commands to create an <h1> element on the webpage.

Why Use JSX?

1. Combine UI and Logic

Normally, HTML and JavaScript are kept in separate files. With JSX, you can write both the UI (markup) and logic (JavaScript) in the same place—inside a component. This makes the code easier to understand.

2. More Readable

Compared to using plain JavaScript to create UI elements (like document.createElement("h1")), JSX is simpler and more intuitive because it resembles HTML.

Without JSX (Plain JavaScript):

function Greeting() {
  const h1 = document.createElement('h1')
  h1.textContent = 'Hello'
  return h1
}

Using JSX:

function Greeting() {
  return <h1>Hello</h1>
}

Clearly, JSX is more concise and easier to read, right?

How JSX and Components Work Together

A component in React is a function, and the value it returns (return) is usually JSX. JSX is how you describe the UI that a component should render.

Example:

function ProfileCard() {
  return (
    <div>
      <img src="avatar.jpg" alt="Avatar" />
      <h3>John Doe</h3>
      <p>Developer</p>
    </div>
  )
}

Here, <div>, <img>, <h3>, <p> are JSX elements. The ProfileCard component uses JSX to "draw" a profile card.

You can use this component inside another component:

function Team() {
  return (
    <div>
      <h1>Our Team</h1>
      <ProfileCard />
      <ProfileCard />
    </div>
  )
}

JSX allows you to nest both components (<ProfileCard />) and HTML-like elements (<h1>, <div>).

Key Things to Know About JSX

1. Must Have a Parent Element

JSX requires that everything you return be wrapped in a single parent element. Example:

// Correct
function MyComponent() {
  return (
    <div>
      <h1>Title</h1>
      <p>Content</p>
    </div>
  )
}

// Incorrect (no parent element)
function MyComponent() {
  return (
    <h1>Title</h1>
    <p>Content</p>
  );
}

If you don’t want to add an extra <div>, you can use a Fragment (<>...</>):

function MyComponent() {
  return (
    <>
      <h1>Title</h1>
      <p>Content</p>
    </>
  )
}

2. Embedding JavaScript in JSX

You can insert JavaScript values or logic into JSX using {}:

function Greeting() {
  const name = 'Alex'
  return <h1>Hello, {name}!</h1>
}

The result will be: <h1>Hello, Alex!</h1>.

Benefits of JSX in React

• Intuitive: You can look at JSX and immediately understand how the UI will look, without much guesswork.
• Flexible: JSX allows you to add logic (if, for, variables) directly inside the markup, something plain HTML cannot do.
• Tightly Integrated with Components: Since JSX is part of JavaScript, it helps components become self-contained units that include both UI and logic.

Summary

• Markup is how you describe UI structure (like HTML).
• JSX is an "enhanced" version of markup that integrates with JavaScript for use in React.
• Components use JSX to "draw" the UI, making it easier to break down, reuse, and manage code effectively.