React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React18+TS后台管理系统

React18+TS通用后台管理系统解决方案落地实战示例

作者:乖乖的花卷_b3vdrC

这篇文章主要为大家介绍了React18+TS通用后台管理系统解决方案落地实战示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

React 18+TS的根本概念

TypeScript

TypeScript是一种静态类型的编程言语,它能够在编译时检查代码中的类型错误,从而进步代码的可读性和可维护性1。TypeScript还支持ES6+的新特性,如类,模块,箭头函数,解构赋值等,使得代码愈加简约和现代化1。

TypeScript能够与React框架无缝集成,只需求装置相应的类型定义文件即可。例如,要运用React 18+TS开发应用,能够执行以下命令:

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

这样就能够在.ts或.tsx文件中运用React和TypeScript了。

React 18

React 18React框架的最新版本,它包含了一些严重的更新和改良2。其中最引人瞩目的是Server Components,它能够让开发者在效劳器端渲染组件,并将结果发送给客户端3。这样能够减少客户端的代码量和网络传输量,进步应用的加载速度和响应速度3。

另一个重要的特性是Suspense,它能够让开发者在组件中声明数据依赖,并在数据加载时显现一个占位符4。这样能够防止组件在渲染过程中呈现闪烁或空白的状况,进步用户体验4。

还有一个值得关注的特性是Concurrent Rendering,它能够让React在后台渲染更新,并在适宜的机遇显现给用户5。这样能够防止长时间的渲染任务阻塞用户交互,进步应用的流利度和稳定性5。

要运用React 18+TS开发应用,需求配置一些实验性的特性。例如,在tsconfig.json文件中添加以下内容:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "experimentalDecorators": true,
    "useDefineForClassFields": true
  }
}

这样就能够在.tsx文件中运用JSX语法,并启用装饰器和类字段等特性了。

React 18+TS的优势

运用React 18+TS开发前端应用有以下几个优势:

能够应用TypeScript的类型系统和ES6+的新特性,编写愈加强健、简约和现代化的代码。
能够应用React 18的新特性,如Server Components, Suspense, Concurrent Rendering等,进步应用的性能和用户体验。
能够享用React生态系统中丰厚的资源和工具,如 Create React App, Next.js, React Router, Redux, Material UI等,快速搭建和部署应用。

React 18+TS在线教育平台示例

为了展现如何运用React 18+TS构建一个在线教育平台,简单完成一个前端页面,显现课程列表和课程详情。

首先,我们需求创立一个React 18+TS项目,能够运用Create React App工具,执行以下命令:

npx create-react-app react18-ts-edu --template typescript
cd react18-ts-edu
npm start

这样就能够在阅读器中看到一个默许的页面了。

接下来,我们需求装置一些依赖库,如GraphQL, Apollo Client, Material UI等,执行以下命令:

npm install graphql @apollo/client @material-ui/core @material-ui/icons

然后,我们需求配置Apollo Client,用于与后端的GraphQL接口通讯。在src目录下创立一个apollo.ts文件,添加以下内容:

import { ApolloClient, InMemoryCache } from "@apollo/client";
// 创立一个Apollo Client实例
const client = new ApolloClient({
  // 指定后端的GraphQL接口地址
  uri: "http://localhost:3000/graphql",
  // 创立一个内存缓存对象
  cache: new InMemoryCache(),
});
// 导出client对象
export default client;

接着,我们需求修正src/index.tsx文件,运用ApolloProvider组件包裹App组件,将client对象传送给子组件。修正后的文件内容如下:

import React from "react";
import ReactDOM from "react-dom";
import { ApolloProvider } from "@apollo/client";
import client from "./apollo";
import App from "./App";
import "./index.css";
ReactDOM.render(
  <React.StrictMode>
    // 运用ApolloProvider组件包裹App组件
  ,
  document.getElementById("root")
);

接下来,我们需求创立一个CourseList组件,用于显现课程列表。在src目录下创立一个components文件夹,并在其中创立一个CourseList.tsx文件,添加以下内容:

import React, { useState } from "react";
import { useQuery, gql } from "@apollo/client";
import {
  Grid,
  Card,
  CardActionArea,
  CardMedia,
  CardContent,
  Typography,
  CardActions,
  Button,
} from "@material-ui/core";
// 定义一个GraphQL查询语句,用于获取课程列表
const COURSES_QUERY = gql`
  query {
    courses {
      id
      title
      cover
      price
      rating
    }
  }
`;
// 定义一个课程类型的接口,用于描绘课程的属性
interface Course {
  id: string;
  title: string;
  cover: string;
  price: number;
  rating: number;
}
// 定义一个CourseList组件的函数,接纳一个onSelect属性,用于传送选中的课程ID
const CourseList: React.FC<{ onSelect: (id: string) => void }> = ({
  onSelect,
}) => {
  // 运用useQuery钩子函数,传入查询语句,获取查询结果
  const { loading, error, data } = useQuery(COURSES_QUERY);
  // 假如查询正在加载中,返回一个提示信息
  if (loading) return
Loading...
;
  // 假如查询出错了,返回一个错误信息
  if (error) return
Error :(
;
  // 假如查询胜利了,返回一个网格规划的课程列表
  return (
      {data.courses.map((course: Course) => (
            <CardActionArea onClick={() => onSelect(course.id)}>
              <CardMedia
                component="img"
                alt={course.title}
                height="140"
                image={course.cover}
                title={course.title}
              />
                  {course.title}
                  {`价钱:${course.price}元`}
                  {`评分:${course.rating}`}
              </CardContent

以上就是React18+TS通用后台管理系统解决方案落地实战示例的详细内容,更多关于React18+TS后台管理系统的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文