-
@ plebdevs.com
2024-11-15 18:44:32Setting 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-appStep 2: Initialize the Project
bash npm init -yThis 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-reactStep 4: Create Project Structure
Create the following files and directories:
my-react-app/ ├── src/ │ ├── index.html │ └── index.js └── package.jsonStep 5: Set Up HTML
In src/index.html, add the following content:
```html
My React App ```
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
Hello, React!
; };const root = ReactDOM.createRoot(document.getElementById('root')); root.render(
); ``` 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 startYour app should now be running at http://localhost:1234.
Step 10: Build for Production
When you're ready to deploy:
bash npm run buildThis 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.