bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths
Learn/React/React Core
React•React Core

React Getting Started

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:

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

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

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

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:
create-vite@6.5.0
Ok to proceed? (y)

If the creation was a success, you will get a result like this:

> npx
> create-vite my-react-app --template react
|
o
Scaffolding project in C:\Users\stale\my-react-app...
|
- Done. Now run:
cd my-react-app
npm install
npm run dev

Install Dependencies

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

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!

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
➜
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.

Previous

React Introduction

Next

Your First React App

This chapter

Overview
45

Lessons

142m

Read time

1. React Tutorial2. React Introduction3. React Getting Started4. Your First React App5. React Render HTML6. Upgrade React7. React ES68. React ES6 Classes9. React ES6 Arrow Functions10. React ES6 Variables11. JavaScript Array map()12. React ES6 Destructuring13. React ES6 Spread Operator14. React ES6 Modules15. React ES6 Ternary Operator16. React ES6 Template Strings17. React JSX18. React JSX Expressions19. React JSX Attributes20. React JSX If Statements21. React Components22. React Class Components23. React Props24. React Destructuring Props25. React Props Children26. React Events27. React Conditional Rendering28. React Lists29. React Forms30. React Submit Forms31. React Forms - Textarea32. React Forms - Select33. React Forms - Multiple Input Fields34. React Forms - Checkbox35. React Forms - Radio36. React Portals37. React Suspense38. Styling React Using CSS39. React CSS Modules40. React CSS-in-JS41. React Router42. React Transitions43. React forwardRef44. React Higher Order Components45. React Sass Styling

On this page

Setting up a React EnvironmentInstall a Build Tool (Vite)Create a React ApplicationInstall DependenciesRun the React Application