脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React 脚手架使用

React 脚手架使用指南(最新推荐)

 更新时间：2024年12月26日 11:27:18   作者：傻小胖  
本文介绍了React脚手架（CreateReactApp）的使用指南,包括创建项目、项目结构、常用命令、最佳实践、常见问题解决以及脚手架的优势,结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧

React 脚手架使用指南

React 脚手架(Create React App)是 Facebook 官方提供的创建 React 单页应用的工具。它提供了一个零配置的现代构建设置。

为什么使用脚手架？

  • 无需配置 Webpack 和 Babel
  • 内置热重载
  • 自动化构建过程
  • 优化的生产构建
  • 良好的开发体验

创建项目

1. 使用 npx 创建(推荐)

# 创建基础 React 项目
npx create-react-app my-app
# 创建 TypeScript 项目
npx create-react-app my-app --template typescript
# 进入项目目录
cd my-app
# 启动开发服务器
npm start

2. 使用 npm 创建

# 全局安装 create-react-app
npm install -g create-react-app
# 创建项目
create-react-app my-app

项目结构

my-app/
  ├── node_modules/
  ├── public/
  │   ├── favicon.ico
  │   ├── index.html
  │   ├── manifest.json
  │   └── robots.txt
  ├── src/
  │   ├── App.css
  │   ├── App.tsx
  │   ├── App.test.tsx
  │   ├── index.css
  │   ├── index.tsx
  │   ├── logo.svg
  │   ├── react-app-env.d.ts
  │   ├── reportWebVitals.ts
  │   └── setupTests.ts
  ├── .gitignore
  ├── package.json
  ├── README.md
  ├── tsconfig.json
  └── yarn.lock

目录说明

1. public 目录

<!-- public/index.html - 应用的 HTML 模板 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" rel="external nofollow"  />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

2. src 目录

// src/index.tsx - 应用的入口文件
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
// src/App.tsx - 主应用组件
import React from 'react';
import './App.css';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to React</h1>
      </header>
    </div>
  );
}
export default App;

常用命令

开发命令

# 启动开发服务器
npm start
# 构建生产版本
npm run build
# 运行测试
npm test
# 弹出配置文件
npm run eject

配置说明

1. package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/node": "^16.18.0",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.8.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

2. tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

最佳实践

1. 目录结构建议

src/
  ├── components/        # 共享组件
  ├── pages/            # 页面组件
  ├── hooks/            # 自定义 hooks
  ├── services/         # API 服务
  ├── utils/            # 工具函数
  ├── types/            # TypeScript 类型定义
  ├── assets/           # 静态资源
  └── styles/           # 样式文件

2. 环境变量配置

# .env.development - 开发环境配置
REACT_APP_API_URL=http://dev-api.example.com
# .env.production - 生产环境配置
REACT_APP_API_URL=http://api.example.com

3. 代码规范配置

// .eslintrc
{
  "extends": [
    "react-app",
    "react-app/jest"
  ],
  "rules": {
    "no-console": "warn",
    "prefer-const": "error"
  }
}

常见问题解决

1. 路径别名配置

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"],
      "@components/*": ["components/*"],
      "@pages/*": ["pages/*"]
    }
  }
}

2. 代理配置

// package.json
{
  "proxy": "http://localhost:3001"
}

总结

脚手架优势：

  • 快速创建项目
  • 零配置开始
  • 完整的开发环境
  • 优化的构建过程

使用建议：

  • 遵循目录结构规范
  • 合理使用环境变量
  • 保持代码规范统一
  • 适时添加必要的配置

注意事项：

  • 慎用 eject
  • 及时更新依赖
  • 保持项目结构清晰
  • 做好文档维护

到此这篇关于React 脚手架使用指南的文章就介绍到这了,更多相关React 脚手架使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 详解如何在Remix 中使用 tailwindcss

    详解如何在Remix 中使用 tailwindcss

    这篇文章主要为大家介绍了如何在Remix中使用tailwindcss方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-05-05
  • React使用emotion写css代码

    React使用emotion写css代码

    这篇文章主要介绍了React如何使用emotion写css代码，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
    2021-04-04
  • React之使用useState异步刷新的问题

    React之使用useState异步刷新的问题

    这篇文章主要介绍了React之使用useState异步刷新的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • react 组件表格固定底部的实现代码

    react 组件表格固定底部的实现代码

    在React中,要实现一个组件表格并且固定底部,可以使用CSS的固定定位或绝对定位来实现,下面通过示例代码给大家分享react 组件表格固定底部的实现代码,感兴趣的朋友跟随小编一起看看吧
    2024-05-05
  • react底层的四大核心内容架构详解

    react底层的四大核心内容架构详解

    这篇文章主要为大家详细介绍了react四大核心内容架构，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-03-03
  • 如何深入理解React的ref 属性

    如何深入理解React的ref 属性

    关于 Refs ，React 官网讲解的对于新手来说不太友好，还是自己一字一句解读后并以代码验证的方式后真正理解的.
    2021-05-05
  • react中useEffect Hook作用小结

    react中useEffect Hook作用小结

    React中useEffect是一个非常重要的Hook,它允许我们函数组件中执行副作用操作,本文就来介绍一下useEffect Hook作用,具有一定的参考价值,感兴趣的可以了解一下
    2024-11-11
  • react中useEffect函数的详细用法(最新推荐)

    react中useEffect函数的详细用法(最新推荐)

    useEffect是React中的一个Hook,用于在函数组件中处理副作用（如数据获取、订阅、手动更改 DOM 等）,useEffect属于组件的生命周期方法,下面通过本文给大家分享react中useEffect函数的详细用法,感兴趣的朋友跟随小编一起看看吧
    2024-06-06
  • Reactjs + Nodejs + Mongodb 实现文件上传功能实例详解

    Reactjs + Nodejs + Mongodb 实现文件上传功能实例详解

    今天是使用 Reactjs + Nodejs + Mongodb 实现文件上传功能，前端我们使用 Reactjs + Axios 来搭建前端上传文件应用，后端我们使用 Node.js + Express + Multer + Mongodb 来搭建后端上传文件处理应用，本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧
    2022-06-06
  • react路由配置方式详解

    react路由配置方式详解

    本篇文章主要介绍了react路由配置方式详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08

最新评论