likes
comments
collection
share

不使用React脚手架创建一个React项目

作者站长头像
站长
· 阅读数 106

首先，我们为什么要手动创建一个React项目，不去使用React脚手架直接创建项目？

  • 1.完全的控制权： 你可以完全自定义项目的配置，这意味着你可以根据自己的需要来选择使用的工具和库。

  • 2.更好的理解： 通过手动配置项目，你可以更好地理解React项目的各个部分是如何工作的。这可以帮助你更好地理解和解决可能出现的问题。

  • 3.按需配置： 你可以根据你的项目需要，选择添加或移除一些工具，从而避免项目过于臃肿。

当然以上的这些点都是基于你的需求，使用React脚手架创建项目足够简单快速，内置丰富的配置和最佳实践工具。

1.创建一个你项目的文件夹

mkdir my-react-app

2.进入新创建的目录并初始化一个新的Node.js项目

cd my-react-app npm init -y

3.安装React和ReactDOM库

npm install react react-dom

4.安装 Webpack 和 Babel 相关依赖。

Webpack 是一个用于打包 JavaScript 应用程序的模块捆绑器，而 Babel 是一个 JavaScript 编译器，用于将 ES6 和 JSX 转换为兼容更多浏览器的 JavaScript 代码。

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

5.在项目根目录下创建一个 webpack.config.js 文件，并添加以下代码

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

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'public', 'index.html'),
        })
    ],
    devServer: {
        static: {
            directory: path.resolve(__dirname, 'public'),
        },
        hot: true,
    }
};

6.创建 .babelrc 文件，并添加以下代码

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

7.在 package.json 文件的 "scripts" 部分添加以下代码

"scripts": {
    "start": "webpack serve",
    "build": "webpack"
}

8.在项目的根目录下创建一个新的 src 目录，并在其中创建 index.js 文件。并添加以下代码

注意，我安装的React的版本是最新的18.2.0的

import React from 'react';
import { createRoot } from 'react-dom/client';

function App() {
    return (
        <div>
            Hello, world!
        </div>
    );
}

const root = document.getElementById('root');
createRoot(root).render(<App />);

9.在 public 文件夹下创建 index.html 文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

10.启动

现在，你的项目就已经搭建完成了，就可以使用 npm start 来运行你的 React 应用，或者使用 npm run build 来生成生产环境的构建包。

转载自:https://juejin.cn/post/7238115960350425147
评论
请登录