React App without create-react-app
Let's build a React application from scratch using Parcel, incorporating your example with JSX. This process will walk through setting up the project, configuring necessary files, and running the application.
Prerequisites
Ensure Node.js and npm are installed on your machine. Download them from nodejs.org if necessary.
Step-by-Step Guide
Step 1: Set Up the Project Directory
Create a new directory for your project and navigate into it:
~sh~
mkdir my-react-app
cd my-react-app
Step 2: Initialize the Project
Initialize a new npm project, which will create a package.json file:
~sh~
npm init -y
Step 3: Install Dependencies
Install React, ReactDOM, and Parcel:
~sh~
npm install react react-dom
npm install --save-dev parcel
Step 4: Create the Project Structure
Organize your project with the following structure:
my-react-app/
├── src/
│ ├── index.html
│ ├── index.js
└── package.json
Step 5: Configure HTML
Create an index.html file in the src directory:
~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 type="module" src="index.js"></script>
</body>
</html>
This HTML file sets up a basic structure with a div where the React application will mount.
Step 6: Configure JavaScript
Create an index.js file in the src directory with the following content:
~javascript~
import React from "react";
import ReactDOM from "react-dom/client";
const root = ReactDOM.createRoot(document.getElementById("root"));
// Using JSX to render a React element
root.render(
<h1>this is a react App</h1>
);
- import React from "react"
Recommended by LinkedIn
- import ReactDOM from "react-dom/client"
- ReactDOM.createRoot
- root.render(...)
Step 7: Update package.json
Add start and build scripts to package.json:
~json~
{
"name": "not a y-react-app",
"version": "1.0.0",
"scripts": {
"start": "parcel src/index.html",
"build": "parcel build src/index.html"
},
"devDependencies": {
"parcel": "^2.0.0"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
- "start": "parcel src/index.html": Starts a development server using Parcel.
- "build": "parcel build src/index.html": Builds the application for production.
Step 8: Start the Development Server
Run the following command to start the development server:
~sh~
npm start
Parcel will bundle your application and serve it at http://localhost:1234. Open this URL in your browser to see your React application.
Step 9: Build the Application
When you're ready to deploy your application, build it for production:
~sh~
npm run build
Parcel will create a dist directory with the optimized and minified production build of your application.
Conclusion
By following these steps, you have set up a React application from scratch using Parcel. This setup gives you a deeper understanding of how React applications are structured and built, and provides the flexibility to customize your build process.
By managing your own setup, you gain valuable insight into how React works behind the scenes and have the flexibility to tailor the configuration to your specific needs.
Great advice! 👏👏
Very informative