create-react-app is too slow and creates messy apps

Question

I am learning react and not exprienced too much. Whenever I want to create a new react project, the create-react-app command takes a lot of time making one. I have followed CodeSandbox which creates react apps really fast and they are simple and clean unlike ones made by create-react-app, which are too complicated and messy. Is there a boilerplate to help me creating simple react apps quickly?

Answer 1

This is the easiest way to get started

npx create-react-app my-app
cd my-app
npm start

Below is an alternative, but it's a lot more involved.

mkdir my-app // create directory
cd my-app
npm init -y //create package.json
npm install react react-dom //install react and react-dom
touch index.js index.css

You can add your code to index.js. It will looks something like this

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class App extends React.Component{
    render(){
        return(
            <div>Hello World</div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'))

After that you'll need to get your babel

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react webpack webpack-cli webpack-dev-server babel-loader css-loader style-loader html-webpack-plugin

touch webpack.config.js

Configure your webpack

var path = require('path');
var HtmlWebpackPlugin =  require('html-webpack-plugin');

module.exports = {
    entry : './my-app/index.js',
    output : {
        path : path.resolve(__dirname , 'dist'),
        filename: 'index_bundle.js'
    },
    module : {
        rules : [
            {test : /\.(js)$/, use:'babel-loader'},
            {test : /\.css$/, use:['style-loader', 'css-loader']}
        ]
    },
    mode:'development',
    plugins : [
        new HtmlWebpackPlugin ({
            template : 'my-app/index.html'
        })
    ]

}

Add babel presets and npm command to build (build) and run (dev) your code to package.json

   "main": "index.js",
        "babel":{
            "presets" : [
              "@babel/preset-env",
              "@babel/preset-react"
            ]
          }"scripts": {
        "build": "webpack",
    "dev": "webpack-dev-server --open"
   }

Answer 2

The best and most effiecient way is to first install pnpm package. It's much faster than normal npm install or npm i command due to symlinks and cache implemented in it.

It's better to have a git repository which is initiated by create-react-app, you can install the packages you commonly use in the package.json file. Then each time you want to create a new project, you can clone the repository and install the packages fast by running the following command. It may takes the same time as before, because pnpm needs to cache the packages and re-use them.

pnpm i

I have created a sample repository, you can clone it from this link.

P.S 1:You can read more about pnpm, in this link.