create-react-app 太慢并且会创建凌乱的应用程序

Question

我正在学习反应，并没有太多的经验。每当我想创建一个新的 React 项目时，该create-react-app命令都需要花费大量时间来制作。我遵循了CodeSandbox，它可以非常快速地创建React应用程序，它们简单而干净，不像 create-react-app 制作的那样过于复杂和凌乱。是否有样板可以帮助我快速创建简单的 React 应用程序？

Answer 1

最好和最有效的方法是先安装pnpm包。由于其中实现了符号链接和缓存，它比正常npm install或npm i命令快得多。最好有一个由 启动的git仓库create-react-app，你可以在package.json文件中安装你常用的包。然后每次要创建新项目时，都可以通过运行以下命令克隆存储库并快速安装包。可能需要和以前一样的时间，因为pnpm需要缓存包并重新使用它们。pnpm i我已经创建了一个示例存储库，您可以从此链接克隆它。PS 1：您可以pnpm在此链接中阅读更多相关信息。

Answer 2

这是最简单的入门方法npx create-react-app my-appcd my-appnpm start下面是一个替代方案，但它涉及更多。mkdir my-app // create directorycd my-appnpm init -y //create package.jsonnpm install react react-dom //install react and react-domtouch index.js index.css您可以将代码添加到 index.js。它看起来像这样import React from 'react';import ReactDOM from 'react-dom';import './index.css';class App extends React.Component{&nbsp; &nbsp; render(){&nbsp; &nbsp; &nbsp; &nbsp; return(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>Hello World</div>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }}ReactDOM.render(<App />, document.getElementById('app'))之后你需要得到你的 babelnpm 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-plugintouch webpack.config.js配置你的 webpackvar path = require('path');var HtmlWebpackPlugin =&nbsp; require('html-webpack-plugin');module.exports = {&nbsp; &nbsp; entry : './my-app/index.js',&nbsp; &nbsp; output : {&nbsp; &nbsp; &nbsp; &nbsp; path : path.resolve(__dirname , 'dist'),&nbsp; &nbsp; &nbsp; &nbsp; filename: 'index_bundle.js'&nbsp; &nbsp; },&nbsp; &nbsp; module : {&nbsp; &nbsp; &nbsp; &nbsp; rules : [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {test : /\.(js)$/, use:'babel-loader'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {test : /\.css$/, use:['style-loader', 'css-loader']}&nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; },&nbsp; &nbsp; mode:'development',&nbsp; &nbsp; plugins : [&nbsp; &nbsp; &nbsp; &nbsp; new HtmlWebpackPlugin ({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; template : 'my-app/index.html'&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; ]}添加 babel 预设和 npm 命令来构建（build）和运行（dev）你的代码到 package.json&nbsp; &nbsp;"main": "index.js",&nbsp; &nbsp; &nbsp; &nbsp; "babel":{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "presets" : [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "@babel/preset-env",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "@babel/preset-react"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }"scripts": {&nbsp; &nbsp; &nbsp; &nbsp; "build": "webpack",&nbsp; &nbsp; "dev": "webpack-dev-server --open"&nbsp; &nbsp;}