TypeScript+React Web应用开发实战

  • 💂 个人网站:【 海拥】【神级代码资源网站】【办公神器】
  • 🤟 基于Web端打造的:👉轻量化工具创作平台
  • 💅 想寻找共同学习交流的小伙伴,请点击【全栈技术交流群】

在现代Web开发中,React和TypeScript已经成为了非常流行的技术组合。React是一个用于构建用户界面的JavaScript库,而TypeScript是JavaScript的超集,它添加了类型系统和其他功能。本文将介绍如何使用TypeScript和React进行Web应用开发实战。

1. 环境搭建

首先,我们需要搭建开发环境。确保已经安装了Node.js,然后使用以下命令安装Create React App脚手架工具:

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

这将创建一个名为my-app的React项目,并使用TypeScript模板。接下来,进入项目目录并启动开发服务器:

cd my-app
npm start 

2. 组件开发

React的核心概念是组件。我们可以使用TypeScript来定义组件的类型,以便更好地管理和维护代码。以下是一个简单的组件示例:

import React, { useState } from 'react';interface Props {initialCount: number;
}const MyComponent: React.FC<Props> = ({ initialCount }) => {const [count, setCount] = useState(initialCount);const handleIncrement = () => {setCount(count + 1);};return (<div><p>Count: {count}</p><button onClick={handleIncrement}>Increment</button></div>);
};export default MyComponent;   

在这个例子中,我们定义了一个名为MyComponent的函数式组件,它接受一个名为initialCount的属性。我们还使用了useState Hook来管理组件的状态。

3. 路由管理

在实际项目中,我们需要处理多个页面和路由。可以使用React Router库来实现路由管理。首先,安装React Router:

npm install react-router-dom

然后,创建一个路由配置文件,例如Routes.tsx

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';const Routes: React.FC = () => {return (<Router><Switch><Route exact path="/" component={HomePage} /><Route path="/about" component={AboutPage} /></Switch></Router>);
};export default Routes;

在这个例子中,我们使用了BrowserRouter、Switch和Route组件来定义路由规则。我们还导入了两个页面组件:HomePage和AboutPage。

4. 状态管理

在复杂的应用中,我们需要管理全局状态。可以使用Redux或者Context API来实现状态管理。这里以Redux为例,首先安装Redux和相关库:

npm install redux react-redux @types/react-redux @types/redux   

然后,创建一个简单的Redux store:

// store.tsx
import { createStore } from 'redux';
import { Provider } from 'react-redux';interface State {count: number;
}const initialState: State = {count: 0,
};function reducer(state = initialState, action: any) {switch (action.type) {case 'INCREMENT':return { ...state, count: state.count + 1 };default:return state;}
}const store = createStore(reducer);export { store, State };  

接下来,修改index.tsx文件,引入Provider和store:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store, State } from './store';
import Routes from './Routes';ReactDOM.render(<Provider store={store}><Routes /></Provider>,document.getElementById('root')
);  

最后,修改MyComponent组件,使其能够读取和修改Redux store中的count值:

import React, { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';interface Props {initialCount?: number;
}const MyComponent: React.FC<Props> = ({ initialCount }) => {const count = useSelector((state: State) => state.count);const dispatch = useDispatch();const handleIncrement = () => {dispatch({ type: 'INCREMENT' });};return (<div><p>Count: {count}</p><button onClick={handleIncrement}>Increment</button></div>);
};export default MyComponent;  

5. 样式和主题

为了提高项目的可维护性,我们可以使用CSS模块来编写样式。只需将CSS文件的扩展名更改为.module.css,然后在组件中导入即可。例如,创建一个名为MyComponent.module.css的文件:

/* MyComponent.module.css */
.container {background-color: lightblue;padding: 16px;
}  

然后在MyComponent组件中导入和使用这个样式:

import React, { useState } from 'react';
import styles from './MyComponent.module.css';// ...省略其他代码...return (<div className={styles.container}><p>Count: {count}</p><button onClick={handleIncrement}>Increment</button></div>
);    

此外,我们可以使用Styled-components库来实现主题切换。首先,安装Styled-components:

npm install styled-components  

然后,创建一个主题配置文件,例如theme.ts

// theme.ts
export const lightTheme = {backgroundColor: '#fff',textColor: '#000',
};export const darkTheme = {backgroundColor: '#000',textColor: '#fff',
};   

接下来,使用Styled-components创建一个可切换主题的组件:

import React, { useState } from 'react';
import { ThemeProvider, createGlobalStyle } from 'styled-components';
import { lightTheme, darkTheme } from './theme';const GlobalStyle = createGlobalStyle`body {background-color: ${props => props.theme.backgroundColor};color: ${props => props.theme.textColor};}
`;const ThemedButton = styled.button`background-color: ${props => props.theme.backgroundColor};color: ${props => props.theme.textColor};
`;const ThemeSwitcher: React.FC = () => {const [theme, setTheme] = useState(lightTheme);const handleThemeSwitch = () => {setTheme(theme === lightTheme ? darkTheme : lightTheme);};return (<ThemeProvider theme={theme}><GlobalStyle /><ThemedButton onClick={handleThemeSwitch}>Switch Theme</ThemedButton></ThemeProvider>);
};export default ThemeSwitcher;  

6. 性能优化

在开发过程中,我们需要关注应用的性能。可以使用React的shouldComponentUpdate方法或React.memo函数来避免不必要的渲染。此外,还可以使用Webpack等工具进行代码分割和懒加载。这里以React.memo为例:

import React, { useState, memo } from 'react';interface Props {initialCount: number;
}const MyComponent: React.FC<Props> = ({ initialCount }) => {// ...省略其他代码...
};export default memo(MyComponent); 

通过使用React.memo,我们可以确保只有当props发生变化时,组件才会重新渲染。这有助于提高应用的性能。

⭐️ 好书推荐

《TypeScript+React Web应用开发实战 》

在这里插入图片描述

【内容简介】

本书适应于当今前端开发的流行趋势,注重理论与实战相结合的思想,配合大量的、基础且实用的代码实例,帮助读者学习基于TypeScript语言规范的React框架开发的相关知识。全书内容通俗易懂、覆盖面广、充分翔实、重点突出,涵盖了TypeScript语言规范和React框架开发的方方面面。

全书内容共10章,TypeScript语言部分包括TypeScript语言基础与开发环境的搭建、TypeScript项目开发与配置、TypeScript语法规范和TypeScript语法高级特性等方面的内容;React框架部分包括React框架基础与开发环境的搭建,React语法、组件、状态与生命周期,React框架高级指引和React Hook新特性等方面的内容。同时,为了突出本书项目实战的特点,针对性地开发了两个Web项目应用,以帮助读者深入学习基于TypeScript + React技术的开发流程。

📚 京东购买链接:《TypeScript+React Web应用开发实战 》

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/265923.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Qt学习】QLineEdit 控件 属性与实例(登录界面,验证密码,正则表达式)

文章目录 1. 介绍2. 实例使用2.1 登录界面2.2 对比两次密码是否相同2.3 通过按钮显示当前输入的密码&#xff08;并对2.2进行优化&#xff09;2.4 结语 3. 正则表达式3.1 QRegExp3.2 验证输入内容 4. 资源代码 1. 介绍 关于 QLineEdit 的详细介绍&#xff0c;可以去查阅官方文…

C++:模版初阶 | STL简介

创作不易&#xff0c;感谢支持&#xff01;&#xff01; 一、泛型编程思想 如何实现一个通用的交换函数呢&#xff1f; 注&#xff1a;其实swap函数在C的标准库提供了&#xff0c;不需要自己写&#xff0c;这边只是举个例子 void Swap(int& left, int& right) { in…

HTML+CSS+JS:花瓣登录组件

效果演示 实现了一个具有动态花朵背景和简洁登录框的登录页面效果。 Code <section><img src"./img/background.jpeg" class"background"><div class"login"><h2>Sign In</h2><div class"inputBox"…

PDF Expert for Mac v3.9.2中文激活版下载

PDF Expert for Mac是一款易于使用的 PDF 编辑器和注释器&#xff0c;专为 Mac 设备设计。它允许用户轻松查看、编辑、签名、注释和共享 PDF。该软件使用户能够向他们的 PDF 添加文本、图像、链接和形状&#xff0c;突出显示和标记文本&#xff0c;填写表格以及签署数字文档。它…

type may not be empty [type-empty]

Git提交失败原因分析 原因是使用了规范commit信息的工具&#xff0c;你的提交信息不符合规范&#xff0c;所以被拒绝了 commit规范工具 commitlinthusky 我这个项目使用husky&#xff0c;提交规范比较严格。 解决方式一&#xff1a; 修改提交信息&#xff0c; 使其符合规范…

【探索AI】十一 深度学习之第1周:深度学习概述与基础

深度学习概述与基础 深度学习的发展历史与现状神经网络的基本原理前向传播与反向传播算法常见的激活函数与优化算法深度学习框架&#xff08;如TensorFlow或PyTorch&#xff09;进行基础操作 深度学习的发展历史与现状 深度学习的发展历史可以追溯到上世纪40年代&#xff0c;当…

SpringMVC 学习(四)之获取请求参数

目录 1 通过 HttpServletRequest 获取请求参数 2 通过控制器方法的形参获取请求参数 3 通过 POJO 获取请求参数&#xff08;重点&#xff09; 1 通过 HttpServletRequest 获取请求参数 public String handler1(HttpServletRequest request) <form action"${pageCont…

Spring Boot中实现列表数据导出为Excel文件

点击下载《Spring Boot中实现列表数据导出为Excel文件》 1. 前言 本文将详细介绍在Spring Boot框架中如何将列表数据导出为Excel文件。我们将通过Apache POI库来实现这一功能&#xff0c;并解释其背后的原理、提供完整的流程和步骤&#xff0c;以及带有详细注释的代码示例。最…

个人博客系列-Django部署-nginx(3)

使用Nginx uwsgi进行部署django项目 一. 检查项目是否可以运行 启动项目 python manage.py runserver 0.0.0.0:8099输入ip:8099 查看启动页面 出现上述页面表示运行成功 二. 安装uwsgi并配置 2.1 下载uwsgi pip install uwsgi新建文件test.py写入内容&#xff0c;测试一…

Win UI3开发笔记(四)设置主题续

上文讲到过关于界面和标题栏以及普通文本的主题设置&#xff0c;这篇说一下关于对话框的主题设置。 我最终没找到办法&#xff0c;寻求办法的朋友可以不用接着看了&#xff0c;以下只是过程。 一个对话框包括标题部分、内容部分和按钮部分&#xff0c;其中&#xff0c;在Cont…

K8S常用kubectl命令汇总(持续更新中)

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

C++ 反向迭代器的设计与实现

在本文开始之前&#xff0c;先明晰几个 关键词 的含义&#xff08;T : 模板参数&#xff09;&#xff1a; Ref : T& / const T&Ptr : T* / const T* 一、反向迭代器设计的上帝视角 我们希望将 反向迭代器 设计成一种适配器——传 list::iterator 得到 list 的反向迭代…

leetcode 重复的子字符串

前要推理 以abababab为例&#xff0c;这里最主要的就是根据相等前后缀进行推导 s [ 0123 ] 如 t【 0123 】 f 【01 23 】 后两个分别是前后缀&#xff0c;第一个是总的字符串&#xff0c;然后可以推导 //首先还是算出…

数据库常见理论常见面试题(总结)

一、前言 这里呢&#xff0c;博主会介绍一些平时关于数据库的理论的问题&#xff0c;比如数据库的三级模式两级映射、触发器、范式、存储过程、视图等等概念知识&#xff0c;但是像索引、事务、锁等内容&#xff0c;之前的文章就讲解过了&#xff0c;这里就不作过多的介绍了&am…

【Git教程】(七)变基与拣取 —— 变基操作的概念、适用场景及其实现方式,拣取操作的实现 ~

Git教程 变基与拣取 1️⃣ 工作原理&#xff1a;复制提交2️⃣ 避免“钻石链”3️⃣ 什么情况下会遇到冲突4️⃣ 移植分支5️⃣ 执行变基后原提交的情况6️⃣ 提交的原件与副本存在于同一版本库中所带来的问题7️⃣ 捡取&#x1f33e; 总结 通常&#xff0c; 一段提交历史中往…

HUAWEI 华为交换机 配置基于VLAN的MAC地址学习限制接入用户数量 配置示例

组网需求 如 图 2-15 所示&#xff0c;用户网络 1 通过 LSW1 与 Switch 相连&#xff0c; Switch 的接口为 GE0/0/1 。用户网络2通过 LSW2 与 Switch 相连&#xff0c; Switch 的接口为 GE0/0/2 。 GE0/0/1 、 GE0/0/2 同属于 VLAN2。为控制接入用户数&#xff0c;对 VLAN2 进…

77. 组合(力扣LeetCode)

文章目录 77. 组合题目描述回溯算法组合问题的剪枝操作 77. 组合 题目描述 给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 示例 1&#xff1a; 输入&#xff1a;n 4, k 2 输出&#xff1a; [ [2,4], [3,4],…

【重要公告】BSV区块链协会宣布将启动多项动态安全增强措施

​​发表时间&#xff1a;2024年2月16日 2024年2月16日&#xff0c;瑞士楚格 - BSV区块链协议的管理机构BSV区块链协会&#xff08;以下简称“BSV协会”&#xff09;宣布对其运营模式实施全新的安全架构&#xff0c;其中包括引入网络访问规则和数字资产找回协议&#xff0c;以及…

Matlab: Introduction to Hybrid Beamforming

文章目录 来源混合波束赋形的基本概念System Setup关键函数 来源 在matlab的命令行输入 doc hybrid beamforming 混合波束赋形的基本概念 混合波束形成简介 本例介绍了混合波束形成的基本概念&#xff0c;并说明了如何模拟这种系统。 现代无线通信系统使用空间复用来提高散…

ARM64汇编02 - 寄存器与指令基本格式

最近的文章可能会有较多修改&#xff0c;请关注博客哦 异常级别 ARMv8处理器支持4种异常等级&#xff08;Exception Level&#xff0c;EL&#xff09;。 EL0 为非特权模式&#xff0c;用于运行应用程序&#xff0c;其他资源访问受限&#xff0c;权限不够。 EL1 为特权模式&…