React 初学者指南：轻松实现你的第一个项目

2024-01-22 01:41:11

在上一篇文章中，我们介绍了如何使用 TypeScript/ESlint/Prettier/EditorConfig/stylelint 来构建一个前端规范的基础设施。在本篇文章中，我们将使用 webpack5 来构建一个 React 应用。

webpack 是一个模块打包工具，它可以将你的代码打包成一个单独的文件，以便在浏览器中运行。React 是一个 JavaScript 库，它可以让你轻松构建用户界面。

首先，我们需要安装 webpack 和 React。你可以使用以下命令来安装：

npm install webpack webpack-cli react react-dom

安装完成后，创建一个新的目录，并创建一个 package.json 文件。package.json 文件是你的项目的配置文件，它告诉 npm 你安装了哪些包。

{
  "name": "my-react-app",
  "version": "1.0.0",
  "description": "A simple React application",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2"
  }
}

接下来，创建一个 index.js 文件，这是你的项目的入口文件。

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

最后，创建一个 webpack.config.js 文件，这是你的 webpack 配置文件。

const path = require("path");

module.exports = {
  entry: "./index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};