React 系列教程

阅读量：408 次

发布时间：2019-03-06

本文共 3012 字，大约阅读时间需要 10 分钟。

React脚手架入门与项目创建

1. 认识脚手架

在软件开发领域，脚手架（Scaffold）是一种帮助开发者快速搭建项目基础的工具。现代前端项目复杂度的不断提升，催生了各种脚手架工具。这些工具不仅能够帮助我们快速生成项目结构，还能自动处理模块化、依赖管理、打包优化等开发相关的繁琐工作。

1.1 前端工程的复杂化

随着项目规模的扩大，前端工程问题日益凸显：

依赖管理：如何处理第三方库的依赖与版本控制？

模块化开发：如何高效地组织代码文件？

打包与优化：如何实现代码的高效打包与缓存？

部署与维护：如何确保项目在不同环境下的稳定性？

这些问题的答案就是脚手架工具的存在。

1.2 脚手架的定义

脚手架是一种工具，用于快速生成标准化的项目框架。其核心优势在于：

模板化：每个项目基于统一的模板，减少重复搭建工作。

自动化：脚手架能自动处理大量重复性任务，如依赖安装、文件打包等。

一致性：确保项目的基础结构统一，便于后期维护和升级。

目前主流的前端框架都有自己的脚手架工具：

Vue: vue-cli

Angular: angular-cli

React: create-react-app

接下来，我们以React的脚手架工具为例，详细讲解其使用流程。

2. create-react-app脚手架

2.1 环境搭建

2.1.1 安装Node.js

React脚手架基于Node.js开发，因此首先需要安装Node.js环境。建议选择LTS版本以确保稳定性。

下载地址：Node.js 官网

安装步骤：双击运行安装程序，Node.js会自动配置环境变量，并安装npm包管理工具。

2.1.2 包管理工具

npm（Node Package Manager）是Node.js生态系统的核心工具，用于管理项目依赖。

基本命令：
- 安装包：npm install package-name
- 删减包：npm uninstall package-name
- 版本管理：npm install package@version
- 依赖显示：npm list

同时，推荐使用Yarn作为替代：

安装命令：npm install -g yarn

使用命令：yarn add package-name

Yarn相比npm具有以下优势：

安装速度更快

版本依赖管理更清晰

支持工作区管理（yarn workspace）

2.1.3 安装脚手架

最后，安装React的脚手架工具。

安装命令：npm install -g create-react-app

2.2 项目创建

2.2.1 创建项目

通过脚手架快速创建React项目：

create-react-app 项目名称

项目名称注意事项：

不要包含大写字母

创建完成后：

cd 项目名称
yarn start

2.2.2 目录结构分析

默认生成的项目目录包含以下文件：

项目名称/
├── README.md         项目说明文档
├── package.json      项目依赖管理文件
├── public/
│   ├── favicon.ico   浏览器图标
│   ├── index.html    项目入口文件
│   ├── manifest.json Web应用配置
│   └── robots.txt    搜索引擎爬取规则
├── src/
│   ├── App.css       组件样式
│   ├── App.js       主组件
│   ├── App.test.js  测试文件
│   ├── index.css     全局样式
│   ├── index.js      项目入口
│   ├── logo.svg      React图标
│   ├── serviceWorker.js PWA注册文件
│   └── setupTests.js 测试初始化
└── yarn.lock        依赖锁定文件

2.2.3 Webpack配置

React脚手架基于Webpack进行模块打包。Webpack的核心功能是：

模块依赖管理

静态资源打包

代码优化与压缩

默认生成的项目中不会直接显示Webpack配置文件，这是因为脚手架隐藏了复杂的打包逻辑。要查看或修改配置，可以执行以下命令：

yarn eject

注意：eject操作是不可逆的，执行前请确认备份配置文件。

2.3 从零编写项目

通过手动配置，我们可以更直观地了解项目结构。

2.3.1 文件删除

清理默认生成的文件：

删除src目录下的所有文件

删除public目录下的favicon.ico和index.html之外的文件

2.3.2 项目重构

修改index.html文件：


    
   
    
   
    React项目

2.3.3 编写代码

在src目录下创建index.js文件：

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
    Hello React
,
    document.getElementById('root')
);

为了增强可维护性，可以创建组件文件：

import React, { Component } from 'react';
export default class App extends Component {
    render() {
        return Hello App
;
    }
}

在index.js中引入并渲染App组件：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
    
   
        
    
    
   
,
    document.getElementById('root')
);

3. Ant Design的引用

为了提升项目美观度，可以集成Ant Design UI库。

3.1 安装依赖

yarn add antd

3.2 使用示例

在组件中引用Ant Design的组件：

import { Input } from 'antd';
const { useState } = React;
function App() {
    const [inputValue, setInputValue] = useState('');
    return (
        
   
            
     setInputValue(e.target.value)}
            />
            
    输入的内容：{inputValue}
        
   
    );
}
export default App;