🔧 Struggling with Create React App? Here's How to Set Up Your React Project from Scratch! 🔧
Hey, fellow developers! 🖥️ We've all been there, trying to build a React app with Create React App (CRA) but hitting roadblocks. So, here's a guide to set up your React project from scratch without CRA. Let's get through this together! 💪
Step 1: Setting Up Your Project
Create a new project folder:
mkdir my-react-app
cd my-react-app
Step 2: Initializing Your Project
Initialize your project by running:
npm init -y
Step 3: Installing Dependencies
Install React, React DOM, and Babel:
npm i react react-dom
npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader html-webpack-plugin sass sass-loader style-loader url-loader webpack webpack-cli webpack-dev-server
Step 4: Create .babelrc file
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
Step 5: Webpack Configuration
Create a webpack.config.js in your project's root folder:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
output: {
path: path.join(__dirname, "/dist"), // the bundle output path
filename: "bundle.js", // the name of the bundle
},
plugins: [
new HtmlWebpackPlugin({
template: "src/index.html", // to import index.html file inside index.js
}),
],
devServer: {
port: 3030, // you can change the port
},
module: {
rules: [
{
test: /\.(js|jsx)$/, // .js and .jsx files
exclude: /node_modules/, // excluding the node_modules folder
use: {
loader: "babel-loader",
},
},
{
test: /\.(sa|sc|c)ss$/, // styles files
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/, // to import images and fonts
loader: "url-loader",
options: { limit: false },
},
],
},
};
Step 6: Create an /src folder and create the following files inside it
|-- src
|-- index.html
|-- index.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./index.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
const child1=React.createElement('p',{className:'text'},"hey buddy");
const div = React.createElement('div', {className:'container'}, [child1]);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(div);
Step 7:Create serve and build scripts
{
"name": "react-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"serve": "webpack serve --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@babel/core": "^7.15.0",
"@babel/preset-env": "^7.15.0",
"@babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"css-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2",
"sass": "^1.38.1",
"sass-loader": "^12.1.0",
"style-loader": "^3.2.1",
"url-loader": "^4.1.1",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.0.0"
}
}
Step 8: Run and modify your app
Run the app with "npm run serve". Open your browser on http://localhost:3030/. Try to modify it and see the changes on the fly.
Finally, open the index.html file and you should see your app.
You're all set! Building React apps without CRA gives you more control and understanding of the process. Keep exploring, keep learning, and keep coding! 🚀
#React #Webpack #Development #Programming #JavaScript #Coding #DIYReact #Struggles
Share this article with developers who need a break from CRA! 😉
Webpack is good, but what's your thought on Parcel and Vite?