如何在没有任何框架的情况下手动搭建一个 React 项目？

2024-02-03 15:19:01

手动搭建一个 React 项目：一个循序渐进的指南

React 已成为前端开发中最受欢迎的框架之一。得益于其虚拟 DOM、组件化和单向数据流等特性，React 使开发人员能够创建高效、可扩展且易于维护的 Web 应用程序。在着手构建 React 项目之前，了解如何手动搭建项目至关重要。本文将提供一个循序渐进的指南，帮助您轻松入门。

项目结构

创建一个新的项目文件夹，并在其中创建以下子文件夹：

src/：包含源代码
node_modules/：包含项目依赖项
public/：包含静态资源（HTML、CSS、JavaScript）

安装依赖项

使用以下命令安装必要的依赖项：

npm install --save react react-dom

配置 webpack

webpack 是一个模块捆绑器，可将源代码打包成单个文件。使用以下命令安装 webpack：

npm install --save-dev webpack webpack-cli

创建一个 webpack.config.js 文件，包含以下配置：

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

编写组件

组件是 React 应用程序的基本构建块。创建一个组件文件（例如 HelloWorld.js）：

// HelloWorld.js
import React from 'react';

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

export default HelloWorld;

配置路由

路由允许您定义应用程序的不同页面及其对应的 URL。使用以下命令安装 React Router：

npm install --save react-router-dom

创建一个 routes.js 文件，包含以下路由配置：

// routes.js
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import HelloWorld from './components/HelloWorld';

const Routes = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={HelloWorld} />
      </Switch>
    </BrowserRouter>
  );
};

export default Routes;

管理状态

状态是应用程序的数据。使用 Redux 来管理状态，并使用以下命令安装它：

npm install --save redux react-redux

创建一个 store.js 文件，包含 Redux store 配置：

// store.js
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;