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 .

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

Answer 3

Use

npm init vite@latest

Or

Yarn create vite@latest

It will ask you a question and you have to answer it and it creates and run react apps tooo faster than the original cli

Answer 4

In my opinion use yarn instead npm . I heard it is faster:

npm install --global yarn

Then for making a directory for your projects:

yarn create react-app my-app

For checking version:

yarn --version

Answer 5

One way I do this fast is by running npx create-react-app boilerplate and then save that directory and push it to github.

then you can just get your new react app by simply cloning that repo. by running git clone boilerplate and then you can just rename the folder, and the name of the app and other information you need in package.json. I really only edit the name and the source repo in the package.json