testr
testing testing
- Setting Up a React App from Scratch: A Minimal Guide
- Prerequisites
- Step 1: Create a New Project Directory
- Step 2: Initialize the Project
- Step 3: Install Dependencies
- Step 4: Create Project Structure
- Step 5: Set Up HTML
- Step 6: Create React Entry Point
- Step 7: Configure Babel
- Step 8: Update package.json Scripts
- Step 9: Run the Development Server
- Step 10: Build for Production
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
mkdir my-react-app
cd my-react-app
Step 2: Initialize the Project
npm init -y
This creates a package.json file with default values.
Step 3: Install Dependencies
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:
<!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:
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:
{
"presets": ["@babel/preset-react"]
}
Step 8: Update package.json Scripts
Add the following scripts to your package.json:
"scripts": {
"start": "parcel src/index.html",
"build": "parcel build src/index.html"
}
Step 9: Run the Development Server
npm start
Your app should now be running at http://localhost:1234.
Step 10: Build for Production
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.
- Reference: https://nostr.com
No comments yet.
Write a comment