How to Set Up a Basic React App

🌱 Introduction

React has become one of the most popular libraries for building modern web applications. If you’re just starting out, setting up your very first React app can feel overwhelming—but don’t worry! In this post, we’ll walk through two simple ways to get a React app running on your computer: the modern Vite approach and the classic Create React App (CRA) method.

✅ Prerequisites

Before you begin, make sure you have the following:

• Node.js (version 16 or higher is recommended).

  • Check if it’s installed:

    node -v

    npm -v

• A code editor like Visual Studio Code (VS Code).

⚡ Option 1: Using Vite (Recommended)

Vite  is a modern build tool that’s super fast and lightweight. It’s the easiest way to start a new React project today.

Steps

1. Open your terminal and run:

    npm create vite@latest my-app

2. When prompted, choose:

   • Framework: React

   • Variant: JavaScript (or TypeScript if you prefer)

3. Move into your new project:

    cd my-app

   npm install

   npm run dev

4. Open the local URL shown in your terminal (usually http://localhost:5173) in your browser.

🎉 Congratulations! You now have a running React app powered by Vite.

🕰 Option 2: Using Create React App (CRA)

Create React App  used to be the default way to start React projects. It’s still widely used but slower compared to Vite.

Steps

1. Run the following in your terminal:

    npx create-react-app my-app

   cd my-app

   npm start

2. Your app will launch at http://localhost:3000.

📂 Understanding the Project Structure

No matter which setup you use, your React project will have a src/ folder. Inside it:

• App.js / App.jsx → Main component where you build your UI.

• index.js → Entry point that renders your app into the browser’s DOM.

✨ First React Component Example

Let’s make a tiny change to see React in action. Open App.js and replace its content with:

Save the file, and your browser will update instantly!

📦 What’s Next?

Now that you have a working React app, here are a few things you can try:

• Add a UI library:

   npm install @mui/material

• Add navigation with React Router:

   npm install react-router-dom

• Install the React Developer Tools browser extension to debug your apps easily.

🎯 Conclusion

Setting up React is simpler than ever. If you want speed and a modern workflow, go with Vite. If you’re following older tutorials, you might still see Create React App. Either way, within minutes, you’ll have a React app ready to customize and build upon.

So go ahead—create your first component, style it a little, and start building something awesome with React! 🚀