React CLI

React CLI

A React CLI usually refers to the tool used to quickly bootstrap and manage React projects. The most common ones are:

  • Create React App (CRA) → traditional way, but less used now.
  • Vite → modern, fast, and lightweight (widely used now).
  • Next.js CLI → for full-stack React apps.

🚀 Setting up a React Project with Vite CLI

1. Install Vite (using npm, yarn, or pnpm)

# with npm
npm create vite@latest my-app

# with yarn
yarn create vite my-app

# with pnpm
pnpm create vite my-app

It will ask you to choose:

  • Project name → e.g. my-app
  • Framework → choose React or React + TypeScript

2. Move into project & install dependencies

cd my-app
npm install   # or yarn / pnpm install

3. Run the development server

npm run dev

It will start a server (usually at http://localhost:5173/).

4. Example React Component (App.jsx)

Inside src/App.jsx, replace with this:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>Hello React with Vite 🚀</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default App;

5. Build for Production

npm run build
npm run preview

✅ Now you have a React project set up using CLI (Vite), and it’s ready for development.

⚛️ Setting up React with Create React App (Traditional CLI)

1. Create a new React project

npx create-react-app my-app
  • npx downloads and runs CRA without installing it globally.
  • my-app is your project folder name.

👉 This will generate a React project structure with Webpack, Babel, and everything pre-configured.

2. Move into the project & start dev server

cd my-app
npm start

Now open http://localhost:3000/ — you’ll see the default React page.

3. Example React Component (App.js)

Inside src/App.js, replace the default content with this:

import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>Hello React (CRA Traditional Way) ⚛️</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default App;

4. Build for Production

npm run build

This creates a build/ folder with optimized static files ready to deploy.

Leave a Reply