Write your own boilerplate for reactjs without using create-react-app

Here's a basic boilerplate for a ReactJS application without using create-react-app.

Set up the directory structure

Create a new project directory with the name of your choice, and then create the following subdirectories within it:

Initialize the package.json file

Navigate to your project directory and run the following command to create a new package.json file: npm init -y This will create a new package.json file with default values

Install the required dependencies

Run the following command to install the required dependencies: npm install react react-dom webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev This will install React, ReactDOM, Webpack, Babel, and other required dependencies.

Configure the Webpack build

Create a new webpack.config.js file in the root directory of your project, and add the following code:

const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.join(__dirname, '/dist'), filename: 'bundle.js', publicPath: '/' }, devServer: { contentBase: path.join(__dirname, '/public'), port: 5000, publicPath: 'http://localhost:5000/dist/', hotOnly: true, open: true }, module: { rules: [ { test: /.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }, { test: /.css$/, use: ['style-loader', 'css-loader'] } ] }, resolve: { extensions: ['.js', '.jsx'] } };

This configures Webpack to bundle your React code and sets up a development server at http://localhost:5000.

Create the HTML file

Create a new public/index.html file, and add the following additional script and div tag in your html file

Create the React application:

Open the src/index.js file and add the following code:

import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render(<App />, document.getElementById('root'));

Replace <App /> with your root component.

Create the root component by creating a new file named App.js inside the src directory and adding your desired React component code.

Build and run the project:

Open a terminal and navigate to your project directory. Run the following command to build the project:

npx webpack --mode development

This will generate a bundle.js file in the dist folder.

Open the public/index.html file in a web browser, and you should see your React application running.

That's it! You've set up a basic React.js, Node.js, and Webpack boilerplate.