React Beginner 2: Setting Up Your First React Project

Introduction

Now that you understand what React is, it’s time to set up a development environment and create your first React project. We will use Vite, a modern tool for building React apps, though you can also use Create React App.

1. Install Node.js

React requires Node.js. Download and install the latest LTS version from Node.js official website. This will include npm (Node Package Manager), which is needed to install React.

2. Create a New React Project with Vite

Open your terminal and run:

npm create vite@latest my-react-app

Follow the prompts:

• Project name: my-react-app
• Framework: React
• Variant: JavaScript or TypeScript

3. Install Dependencies

Navigate into your project folder:

cd my-react-app

Install dependencies:

npm install

4. Start the Development Server

Run the following command to start the app:

npm run dev

This will start a development server, usually at http://localhost:5173. Open it in your browser to see your new React app running.

5. Explore the Project Structure

The main folders and files you need to know:

• index.html: The main HTML file.
• src/main.jsx: The JavaScript entry point.
• src/App.jsx: The main React component.
• package.json: Project configuration and dependencies.

6. Test Your First Component

Edit src/App.jsx to display a simple message:

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>Your first React app is running.</p>
    </div>
  )
}

export default App;

Save the file and the browser should automatically reload showing your message.

Summary

In this tutorial, you learned how to:

• Install Node.js
• Create a React project using Vite
• Install project dependencies
• Run the development server
• Modify your first React component