-
@ plebdevs.com
2024-11-15 18:44:32
# Setting Up a React App from Scratch: A Minimal Guide
## Prerequisites
- Node.js and npm installed on your machine
- A text editor of your choice
## Step 1: Create a New Project Directory
```bash
mkdir my-react-app
cd my-react-app
```
## Step 2: Initialize the Project
```bash
npm init -y
```
This creates a package.json file with default values.
## Step 3: Install Dependencies
```bash
npm install react react-dom
npm install --save-dev parcel @babel/preset-react
```
## Step 4: Create Project Structure
Create the following files and directories:
```
my-react-app/
├── src/
│ ├── index.html
│ └── index.js
└── package.json
```
## Step 5: Set Up HTML
In src/index.html, add the following content:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My React App</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>
```
## Step 6: Create React Entry Point
In src/index.js, add the following content:
```javascript
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(<App />);
```
## Step 7: Configure Babel
Create a .babelrc file in the project root:
```json
{
"presets": ["@babel/preset-react"]
}
```
## Step 8: Update package.json Scripts
Add the following scripts to your package.json:
```json
"scripts": {
"start": "parcel src/index.html",
"build": "parcel build src/index.html"
}
```
## Step 9: Run the Development Server
```bash
npm start
```
Your app should now be running at http://localhost:1234.
## Step 10: Build for Production
When you're ready to deploy:
```bash
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.