Learn › React › Hello, React! — Your First Component

Hello, React! — Your First Component

⏱ 15 min read

React is a JavaScript library built by Meta for building user interfaces. It lets you describe what your UI should look like, and React takes care of updating the DOM efficiently.

How React Works:
React uses a Virtual DOM — a lightweight copy of the real DOM kept in memory. When state changes, React compares the new virtual DOM to the old one (called "diffing"), then updates only the parts of the real DOM that actually changed. This makes React extremely fast.

JSX — JavaScript + XML:
React uses JSX, a syntax extension that looks like HTML inside JavaScript. JSX is compiled by tools like Vite or Create React App into regular JavaScript:
const element = <h1>Hello!</h1>;
// compiles to:
const element = React.createElement('h1', null, 'Hello!');

JSX Rules:
- Every component must return ONE root element — wrap multiple elements in a <div> or a Fragment: <>...</>
- Use className instead of class (class is a reserved JS keyword)
- All tags must be closed: <img /> not <img>
- JavaScript expressions go inside curly braces: {name}, {2 + 2}, {isActive ? 'Yes' : 'No'}
- Comments inside JSX: {/* this is a comment */}

Components:
A component is just a JavaScript function that returns JSX.
Always start component names with a Capital Letter — React uses this to tell custom components apart from HTML tags.

How to Set Up React:
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

Rendering to the DOM:
Your entire React app is mounted once in index.html via index.jsx (or main.jsx):
ReactDOM.createRoot(document.getElementById('root')).render(<App />);

Code Example

// App.jsx — your first React component

function Greeting({ name, role }) {
  return (
    <div className="greeting">
      <h1>Hello, {name}!</h1>
      <p>Your role is: <strong>{role}</strong></p>
    </div>
  );
}

function StatusBadge({ isActive }) {
  return (
    <span style={{ color: isActive ? 'green' : 'red' }}>
      {isActive ? '🟢 Active' : '🔴 Inactive'}
    </span>
  );
}

function App() {
  const appName  = 'My React App';
  const version  = '1.0.0';
  const isOnline = true;

  return (
    <>
      <h1>{appName} — v{version}</h1>

      {/* Rendering custom components */}
      <Greeting name="Alice" role="Admin" />
      <Greeting name="Bob"   role="User"  />

      {/* JavaScript expressions in JSX */}
      <p>Status: <StatusBadge isActive={isOnline} /></p>
      <p>2 + 2 = {2 + 2}</p>
      <p>Today: {new Date().toDateString()}</p>

      {/* Conditional rendering */}
      {isOnline && <p>You are online!</p>}
      {isOnline ? <p>Connected</p> : <p>Disconnected</p>}
    </>
  );
}

export default App;

← Back to Course Props — Passing Data to Components →