当前位置：首页 > React

react如何创建框架

2026-03-30 19:31:37React

使用 Create React App 创建项目

Create React App 是官方推荐的 React 项目脚手架工具，适合快速搭建 React 应用。运行以下命令创建新项目：

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

手动配置 Webpack 项目

对于需要自定义配置的项目，可以手动设置 Webpack 和 Babel。安装核心依赖：

npm install react react-dom
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-react @babel/preset-env

创建 webpack.config.js 配置文件：

react如何创建框架

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  }
};

使用 Vite 创建高性能项目

Vite 是现代化的前端构建工具，提供更快的开发体验。创建 React 项目：

npm create vite@latest my-react-app --template react
cd my-react-app
npm install
npm run dev

添加 TypeScript 支持

对于 TypeScript 项目，创建时指定 TypeScript 模板：

react如何创建框架

npx create-react-app my-app --template typescript

或手动添加 TypeScript 到现有项目：

npm install --save typescript @types/react @types/react-dom

配置路由系统

安装 React Router 实现页面导航：

npm install react-router-dom

基本路由配置示例：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}