REACT Get Started

Getting started with React is simple and requires a few basic tools to set up your development environment. Below is a step-by-step guide to help you begin your journey with React.

Step 1: Prerequisites

Before starting, ensure you have the following:

  1. Basic Knowledge of:
    • HTML
    • CSS
    • JavaScript (including ES6 features like let/const, arrow functions, and modules)
  2. Node.js and npm (Node Package Manager):

Step 2: Setting Up Your Environment

Option 1: Using Create React App (CRA)

The easiest way to start a new React project is by using the official tool Create React App (CRA).

  1. Install CRA Globally (Optional): 
    npm install -g create-react-app

    Try It Now

  2. Create a New React App: 
    npx create-react-app my-app

    Try It Now

    • Replace my-app with your desired project name.
  3. Navigate to the Project Directory: 
    cd my-app

    Try It Now

  4. Start the Development Server: 
    npm start

    Try It Now

This will launch your React application in your default browser at http://localhost:3000/.

 

Option 2: Manual Setup with Vite (Faster Build Tool)

Vite is a lightweight, fast alternative to CRA.

  1. Create a New React App: 
    npm create vite@latest my-app --template react

    Try It Now

  2. Install Dependencies: 
    cd my-app
npm install

    Try It Now

  3. Start the Development Server: 
    npm run dev

    Try It Now

Step 3: Folder Structure

Here’s an overview of the default folder structure for a React project:

my-app/
├── node_modules/         # Dependencies installed by npm
├── public/               # Static files (e.g., index.html, images)
├── src/                  # Application source code
│   ├── App.css           # App-specific styles
│   ├── App.js            # Main App component
│   ├── index.js          # Entry point of the app
│   ├── components/       # Custom React components
├── package.json          # Project dependencies and scripts
├── README.md             # Project description

Try It Now

Step 4: Understanding React’s Basics

Once your environment is set up, start with these core concepts:

  1. JSX (JavaScript XML): React uses JSX for writing HTML-like code directly in JavaScript. 
    const element = <h1>Hello, React!</h1>;

    Try It Now

  2. Components: React applications are built with components. Each component is a small, reusable piece of the UI. 
    function Welcome() {
    return <h1>Welcome to React!</h1>;
}

    Try It Now

  3. State and Props:
    • State: Manages dynamic data within a component.
    • Props: Passes data from a parent to a child component.

Step 5: Build Your First React App

Example: Hello World App

  1. Open the src/App.js file and replace its contents with: 
    import React from "react";

function App() {
    return (
        <div>
            <h1>Hello, World!</h1>
            <p>This is my first React app!</p>
        </div>
    );
}

export default App;

    Try It Now

  2. Save the file and see the changes at http://localhost:3000.

 

React is now ready to power your projects! 🎉 Dive in, experiment, and start building amazing UIs.