React 基本介绍

2019-11-20 language web

React 是一个用于构建用户界面的 JavaScript 库，起源于 Facebook 内部项目，最初用来架设 Instagram 的网站，并于 2013 年 5 月开源，以声明式、组件化的特性让编写代码变得简单，而且性能很高。

另外，React 不仅可以用来开发 Web 应用，还能开发移动应用。

简介

示例

在 react 中最常用的也就是 create-react-app 了，在比较新的版本中，不再建议全局安装，如果已经安装可以通过 npm uninstall -g create-react-app 卸载，然后通过 npx clear-npx-cache 清理本地缓存。

----- 直接创建，使用TS，默认JS
$ npx create-react-app foobar --typescript
$ npx create-react-app foobar --template typescript
------ 然后启动
$ cd foobar && npm start

此时会包含 tsconfig.json 配置文件。

Antd

示例

这里先介绍如何简单使用。

----- 安装antd
$ npm install antd --save
less less-loader@5.0.0

可以修改 src/App.tsx 文件添加如下内容。

import { Table } from 'antd';

const columns = [{
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
}, { 
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
}];

const data = [{
    key: 1,
    name: 'one',
    age: '10',
}, {
    key: 2,
    name: 'two',
    age: '20',
}];

function App() {
    return (
        <div className="App">
            <Table columns={columns} dataSource={data} />
        </div>
    );
}
export default App;

----- 样式可以在 src/index.tsx 中引入
import 'antd/dist/antd.less';

----- 或者在 src/base.less 文件顶部引入
@import '~antd/dist/antd.less';

基础操作

路由配置

路由配置保存在 src/App.tsx 中，通过 react-router-dom 实现，通过 RequireAuth 标识需要登录，页面保存在 src/pages 目录下，页面的布局则在 src/layout/index.tsx 文件中。

API 请求

所有的 API 接口封装在 src/services 目录下，利用 mockjs 在 src/mock 目录下保存了模拟数据。

国际化

通过 react-intl 包实现，对应翻译保存在 src/locales 目录下，使用时通过 <FormattedMessage id='hello' /> 引用，另外消息体还可以是 Hello, {name}!，然后通过 <FormattedMessage id='hello' values={{name:"World"}}/> 渲染。

如果需要字符串，可以使用如下方法：

import { useIntl } from 'react-intl';

const intl = useIntl();
<ToolBtn tooltipContent={intl.formatMessage({ id: 'hello' }, {name: 'World'})}><IconSelect /></ToolBtn>

或者可以用 HOC (高阶组件)。

常见问题

antd pro

通过 npm install 安装时可能会报 .git can't be found (see https://git.io/Jc3F9) 错误，主要是执行 husky install 命令时报错，可以修改 package.json 配置文件中的 prepare 内容，调整为 cd .. && husky install xxx/.husky 即可，其中 xxx 为目录名。

参考