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

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?

javascripthtmlcssreactjs


Solution 1:[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"
   }

Solution 2:[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.

Solution 3:[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

Solution 4:[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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Maya Davis
Solution 2 Mostafa Ghadimi
Solution 3 ddking 8899
Solution 4 Arman Ebrahimi

Related Questions