We can start react app with several way and first make sure you have Node.js installed on your system –
1. Using Create React App –
It is most popular and easiest way to get started with a React application.
npx create-react-app myapp
cd myapp
npm start2. Using Vite –
Vite provide a faster and leaner development experience for modern web projects.
npm create vite@latest myapp --template react
cd myapp
npm install
npm run dev3. Using Next.js
Next.js is a React framework that enables server-side rendering and generates static websites for React-based web applications.
npx create-next-app myapp
cd myapp
npm run dev4. Using Parcel
Parcel is a web application bundler that requires zero configuration.
Create a new directory and initialize a package.json file
mkdir myapp
cd myapp
npm init -yInstall React, ReactDOM and Parcel
npm install react react-dom parcel-bundlerYou should create the project structure
myapp
├── src
│ └── index.js
└── public
└── index.htmlAfter creating project structure add the content to public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="../src/index.js"></script>
</body>
</html>Add this content to src/index.js
import React from 'react'; import ReactDOM from 'react-dom'; const App = () => <div>Hello, React!</div>; ReactDOM.render(<App />, document.getElementById('root'));Update your package.json file with –
"scripts": {
"start": "parcel public/index.html"
}Finally start your application with –
npm start