bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/React/React Core
React•React Core

React Getting Started

Concept visual

React Getting Started

Pointer walk
two pointers
leftright102132436485116
left=0
right=6
1
3

Start at both ends

To use React in production, you need npm which is included with Node.js. Also, you need to set up a React Environment, and choose a build tool.

Setting up a React Environment

First, make sure you have Node.js installed. You can check by running this in your terminal:

Formula

node - v
If Node.js is installed, you will get a result with the version number:

v22.15.0 If not, you will need to install Node.js. Install a Build Tool (Vite) When you have Node.js installed, you can start creating a React application by choosing a build tool.

We will use the

Vite build tool in this tutorial. Run this command to install Vite:

Formula

npm install - g create - vite
If the installation was a success, you will get a result like this:

added 1 package in 649ms

Create a React Application

Formula

Run this command to create a React application named my - react - app

Formula

npm create vite@latest my - react - app -- -- template react
If you get this message, just press y

and press

Enter to continue:

Need to install the following packages:

Formula

create - vite@6.5.0

Ok to proceed? (y) If the creation was a success, you will get a result like this: > npx

Formula

> create - vite my - react - app -- template react

| o

Formula

Scaffolding project in C:\Users\stale\my - react - app...

|

Done. Now run:

Formula

cd my - react - app npm install npm run dev

Install Dependencies

As the result above suggests, navigate to your new react application directory:

Formula

cd my - react - app

And run this command to install dependencies: npm install

Which will result in this:

added 154 packages, and audited 155 packages in 8s 33 packages are looking for funding run npm fund for details found

vulnerabilities

Run the React Application

Now you are ready to run your first real React application!

Formula

Run this command to run the React application my - react - app

npm run dev

Which will result in this:

VITE v6.3.5 ready in 217 ms ➜

Local:

http://localhost:5173/ ➜ Network: use --host to expose ➜

Formula

press h + enter to show help

A new browser window will pop up with your newly created React App! If not, open your browser and type localhost:5173 in the address bar.

The result:

Previous

React Introduction

Next

Your First React App