Components & JSX | TechMapper

React applications are built using components, which are independent and reusable pieces of UI that describe what should appear on the screen.

JSX is a syntax extension for JavaScript that allows you to write UI structure in a way that looks similar to HTML.

What are Components in React?

A component is a function or class that returns a React element describing part of the user interface.

Components help break the UI into smaller, manageable, and reusable pieces.

React has two main types of components: functional components and class components.

Functional components are modern, simpler, and widely used with hooks, while class components are older but still supported.

function Header() {
  return <h1>Welcome to My App</h1>;
}

javascript

JSX stands for JavaScript XML and allows you to write HTML-like syntax inside JavaScript files.

It makes UI code more readable and expressive compared to traditional JavaScript DOM manipulation.

JSX is not directly understood by browsers. It is compiled into JavaScript using tools like Babel.

Each JSX element is converted into React.createElement calls internally.

const element = <h1>Hello World</h1>;

// Translates roughly to:
// React.createElement('h1', null, 'Hello World');

javascript

You can embed JavaScript expressions inside JSX using curly braces {}.

This allows dynamic content rendering inside UI components.

function User() {
  const name = 'John';
  return <h1>Hello, {name}</h1>;
}

javascript

JSX must return a single parent element. Multiple elements must be wrapped inside a parent or fragment.

You must also use className instead of class for CSS classes.

return (
  <div>
    <h1>Title</h1>
    <p>Description</p>
  </div>
);

javascript

Components can be reused multiple times across your application with different data using props.

This helps reduce code duplication and improves maintainability.

function Button(props) {
  return <button>{props.label}</button>;
}

// Usage:
// <Button label="Click Me" />

javascript

React allows components to be composed together to build complex user interfaces.

Smaller components can be combined to form larger UI structures.

Keep components small and focused on a single responsibility.

Use meaningful component names and avoid unnecessary complexity inside JSX.

Components and JSX are the foundation of React development.

Mastering them allows you to build scalable, reusable, and maintainable user interfaces.