Build a React app with webpack (Without Create React App)

mkdir react-with-webpack
cd react-with-webpack
yarn init -y
yarn add -D @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader html-webpack-plugin sass sass-loader style-loader webpack-bundle-analyzer webpack-cli webpack-dev-server
yarn add @testing-library/jest-dom @testing-library/react @testing-library/user-event react react-dom react-scripts webpack
touch App.js
touch index.html
touch index.js
<!DOCTYPE html>  <html lang="en">    <head>    <meta charset="UTF-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title><%= htmlWebpackPlugin.options.title %></title>  </head>  <body>    <div id="root"></div>  </body></html>
import React from "react";import ReactDOM from "react-dom/client";import App from "./App";const root = ReactDOM.createRoot(document.getElementById("root"));root.render(<App />);
import { useState } from "react";export default function App() {  const [counter, setCounter] = useState(0);  const handleClick = () => {    setCounter(counter + 1);  };  return (    <div>    <h1>My App</h1>    <h5>{counter}</h5>    <button onClick={handleClick}>Click</button>    </div>  );}
"scripts": {  "test": "echo \"Error: no test specified\" && exit 1",  "webpack": "webpack",  "start": "webpack-dev-server --mode development"}
yarn webpack

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Pritom Chowdhury Dip

Pritom Chowdhury Dip

javaScript(ReactJs, NodeJs) and PHP developer(Laravel, WordPress custom Theme and plugin developer.)