09 Oct 2025 6 min read React Series

How to Install React and Create Your First Function and Class Components

Welcome back, React explorers! In the previous articles, we explored the differences between React and vanilla JavaScript (React vs Vanilla JS). Then, we peeked under the hood of JSX, learning how it makes writing UI both powerful and surprisingly human (Understanding JSX Under the Hood).

Today, let’s get our hands dirty. We’ll:

Install React step by step
Build your very first React components using function and class styles
Use simple code examples based on order management (our series' theme)
Keep things totally beginner-friendly

By the end, you’ll be ready to launch your own React project from scratch — even if you’re starting today.

1. Getting Started: Installing React

Why Not Just Link a Script?

React is more than a library — it’s an ecosystem. The easiest way for beginners? Use Create React App (CRA) — it bootstraps your environment (think of it as a “one-click order” for setting up modern React).

Prerequisites

Node.js and npm (Node Package Manager) installed.
- Download both from nodejs.org.
- To check, run these commands in your terminal or command

node -v
npm -v

If you see version numbers, you’re good!

Install React with Create React App

Open your terminal (Command Prompt/PowerShell/Terminal).
Navigate to the folder where you want your project

cd path/to/your/folder

Create your app: Pick a name, e.g., order-management-app

npx create-react-app order-management-app

This will set up everything for you. Have some coffee — it might take a minute!

Start your app:

cd order-management-app
npm start

Your browser should open with http://localhost:3000 and you’ll see the React starter page.

2. Unpacking the Starter Code

When CRA is finished, your main code lives in the src folder:

src/App.js: The main App component
src/index.js: The entry point (where React “mounts” the app)

Let’s edit these to create genuine order management features!

3. What Are Components in React?

Before we dive into building our first function component, let's get clear on what a component really is—and why React is built around them.

Components: The Building Blocks

You can think of a React component as a small, reusable chunk of code that controls part of your app's user interface. Each component works independently, defining what UI should look like, how it should behave, and how it responds to changes. Imagine each component as a LEGO brick: you pick and arrange the bricks (components) to build complex structures (your app UI) easily and flexibly.

Here's what makes components powerful in React:

Reusability: Make one order card, reuse it for 10 orders.
Isolation: Each handles its own logic and UI.
Composable: Combine small components to make big, complex interfaces—just like stacking bricks to make a castle.

Two Main Types of Components

React supports two primary types of components:

A. Functional Components

Declared with a JavaScript function.
Simplest, most common way to write components today.
With React Hooks, they handle state and side effects.
Ideal for most use cases—new React code favors these.

B. Class Components

Defined using JavaScript ES6 classes that extend React.Component.
Can hold their own state and use lifecycle methods.
Common in older React codebases but still recognized and sometimes necessary

4. Creating Your First Function Component

What’s a Function Component?

A function component is the simplest way to define UI using React — it’s just a JavaScript function that returns some JSX.
Think of it as a machine that takes in data (props) and spits out interface bits.

Example: Single Order Display

Suppose we want to display a simple "Order Card" — here’s how we’d do it:

// src/OrderCard.js
function OrderCard(props) {
  // props is an object containing order details
  return (
    <div style={{ border: '1px solid #ccc', margin: '10px', padding: '10px' }}>
      <h3>Order #{props.id}</h3>
      <p>Customer: {props.customer}</p>
      <p>Amount: ${props.amount}</p>
    </div>
  );
}

export default OrderCard;

How to Use It in App.js:

import React from 'react';
import OrderCard from './OrderCard';

function App() {
  return (
    <div>
      <h2>Today's Orders</h2>
      <OrderCard id={101} customer="Alice" amount={45} />
      <OrderCard id={102} customer="Bob" amount={72} />
    </div>
  );
}

export default App;

Notice how the components look like HTML, but actually use the power of JavaScript? That’s JSX – see our previous guide on JSX.

Try it:

Create a new file named OrderCard.js in your src folder.
Copy-paste the code above.
Import and use <OrderCard /> in App.js as shown.
Save, and watch your order cards appear!

5. Creating Your First Class Component

Not long ago, class components were the default. They’re still common, especially if you want to add “state” or lifecycle methods.

Example: Order Status Updater

Let’s say you want to display the shipping status and let the user change it. We’ll do this with a class component.

import React from 'react';

class OrderStatus extends React.Component {
  constructor(props) {
    super(props);
    // State: Keep track of shipping status
    this.state = { status: props.initialStatus };
  }

  handleShip = () => {
    this.setState({ status: 'Shipped' });
  };

  render() {
    return (
      <div>
        <span>Status: {this.state.status}</span>
        <button onClick={this.handleShip} style={{ marginLeft: '8px' }}>
          Mark as Shipped
        </button>
      </div>
    );
  }
}

export default OrderStatus;

Use it in App.js:

import React from 'react';
import OrderStatus from './OrderStatus';

function App() {
  return (
    <div>
      <h2>Order Status Tracker</h2>
      <OrderStatus initialStatus="Processing" />
      <OrderStatus initialStatus="Delivered" />
    </div>
  );
}

export default App;

Function vs Class — Quick Recap

Function Component: Short, modern, ideal for presentational UI
Class Component: Slightly more setup, but powerful when you need state

Most new React code uses function components (with hooks), but it’s great to understand both.

6. Bringing It All Together: A Mini Order Dashboard

Time to mix things up. Let’s list all today’s orders and let you change the status for each dynamically.

Sample Array and Rendering:

import React, { useState } from 'react';

function OrderCard({ id, customer, amount, initialStatus }) {
  const [status, setStatus] = useState(initialStatus);
  return (
    <div style={{ border: '1px solid #ccc', margin: '10px', padding: '10px' }}>
      <h3>Order #{id}</h3>
      <p>Customer: {customer}</p>
      <p>Amount: ${amount}</p>
      <p>Status: {status}</p>
      <button onClick={() => setStatus('Shipped')}>Mark as Shipped</button>
    </div>
  );
}

function App() {
  const orders = [
    { id: 101, customer: 'Alice', amount: 45, status: 'Processing' },
    { id: 102, customer: 'Bob', amount: 72, status: 'Delivered' },
  ];
  return (
    <div>
      <h2>Order Dashboard</h2>
      {orders.map(order => (
        <OrderCard
          key={order.id}
          id={order.id}
          customer={order.customer}
          amount={order.amount}
          initialStatus={order.status}
        />
      ))}
    </div>
  );
}

export default App;

What’s happening here?

We map over the orders list and render an OrderCard for each.
Each OrderCard manages its own status.

7. What Did We Learn?

Installing React is as easy as “Add to Cart” with Create React App — no manual tracking needed.
Function and class components are like different “roles” on your dev team: one concise, the other with more responsibility.
Props let you pass in data about each order; state lets you update and track local data (like shipping status) inside components.
JSX is your friend. If you get confused, check the article on JSX.

8. Tips and Common Pitfalls for Beginners

File naming: Start component files with uppercase (e.g., OrderCard.js)
Props: These are like ingredients passed into your component, while state is for things that can change.
Always export your component so it can be imported elsewhere.
Copy-paste errors? Double-check curly braces and JSX syntax. React’s error messages are thankfully pretty good.
Try editing the sample orders. Change their names, add one more, or tweak the amounts!

9. What’s Next?

You’ve bootstrapped a real React app, written both function and class components, and built a basic order dashboard.

Next up: “Props vs State” — where we’ll unravel the vital difference between data handed in to a component (props) and data that lives and changes inside it (state). This is the next key to unlocking React’s superpowers.

Missed the last parts? Check out React vs Vanilla JS and Understanding JSX.