React Beginner 3: Understanding Components & JSX

Introduction

React applications are made up of components, which are reusable pieces of UI. JSX is a syntax extension for JavaScript that allows you to write HTML-like code inside your JavaScript files.

1. What Are Components?

Components are the core building blocks in React. They can be:

• Functional Components: Written as JavaScript functions.
• Class Components: Written as ES6 classes (less common in modern React).

Example of a functional component:

function Greeting() {
  return <h2>Hello, React!</h2>;
}

export default Greeting;

2. What Is JSX?

JSX (JavaScript XML) allows you to write HTML inside JavaScript. React uses JSX to describe what the UI should look like.

Example:

function App() {
  return (
    <div>
      <h1>Welcome to React!</h1>
      <p>This is a simple JSX example.</p>
    </div>
  );
}

export default App;

3. Composing Components

You can combine multiple components to build complex UIs:

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

function Footer() {
  return <footer>© 2025 My App</footer>;
}

function App() {
  return (
    <div>
      <Header />
      <p>Main content goes here.</p>
      <Footer />
    </div>
  );
}

export default App;

4. Rendering Components

React renders the root component into the DOM. This is usually done in main.jsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

5. Summary

In this tutorial, you learned:

• What React components are
• How to write functional components
• How JSX allows HTML-like syntax in JavaScript
• How to compose multiple components
• How React renders the main component into the DOM

Next, you’ll learn about Props, State, and Events in React Beginner 4, which will allow you to make your components interactive.