javascript - create-react-app 太慢并创建困惑的应用程序

Question

我正在学习 react 并且没有太多经验。每当我想创建一个新的 React 元素时，create-react-app 命令都会花费很多时间来创建一个。我关注了CodeSandbox它可以非常快速地创建 React 应用程序，并且它们简单干净，不像 create-react-app 制作的那些过于复杂和困惑。是否有样板可以帮助我快速创建简单的 React 应用程序？

Answer 1

这是最简单的开始方式

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

下面是一个替代方案，但涉及的内容更多。

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

您可以将您的代码添加到 index.js。它看起来像这样

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'))

之后你需要得到你的 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

配置你的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'
        })
    ]

}

添加 babel 预设和 npm 命令来构建(build)和运行(dev)你的代码到 package.json

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