This guide will walk you through setting up a React app manually, using Parcel as a bundler for its simplicity and efficiency.
mkdir my-react-app
cd my-react-app
npm init -y
This creates a package.json file with default values.
npm install react react-dom
npm install --save-dev parcel @babel/preset-react
Create the following files and directories:
my-react-app/
├── src/
│ ├── index.html
│ └── index.js
└── package.json
In src/index.html, add the following content:
<!DOCTYPE html>
My React App
<div id="root"></div>
In src/index.js, add the following content:
import React from 'react';
import ReactDOM from 'react-dom/client';
const App = () => {
return <h1>Hello, React!</h1>;
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();
Create a .babelrc file in the project root:
{
"presets": ["@babel/preset-react"]
}
Add the following scripts to your package.json:
"scripts": {
"start": "parcel src/index.html",
"build": "parcel build src/index.html"
}
npm start
Your app should now be running at http://localhost:1234.
When you're ready to deploy:
npm run build
This will create a dist folder with your optimized production build.
Congratulations! You've set up a React app from scratch using Parcel. This setup provides a lightweight and modern development environment with minimal overhead.
mkdir my-react-app
cd my-react-app
npm init -y
This creates a package.json file with default values.
npm install react react-dom
npm install --save-dev parcel @babel/preset-react
Create the following files and directories:
my-react-app/
├── src/
│ ├── index.html
│ └── index.js
└── package.json
In src/index.html, add the following content:
<!DOCTYPE html>
My React App
<div id="root"></div>
In src/index.js, add the following content:
import React from 'react';
import ReactDOM from 'react-dom/client';
const App = () => {
return <h1>Hello, React!</h1>;
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();
Create a .babelrc file in the project root:
{
"presets": ["@babel/preset-react"]
}
Add the following scripts to your package.json:
"scripts": {
"start": "parcel src/index.html",
"build": "parcel build src/index.html"
}
npm start
Your app should now be running at http://localhost:1234.
When you're ready to deploy:
npm run build
This will create a dist folder with your optimized production build.
Congratulations! You've set up a React app from scratch using Parcel. This setup provides a lightweight and modern development environment with minimal overhead.