[toc]
1、创建项目
npx create-react-app my-app
pnpm create vite my-app --template
启动项目
cd my-app
npm start
2、安装tailwindcss及相关库
[官网](安装 - TailwindCSS中文文档 | TailwindCSS中文网)
- @tailwindcss/typography
@tailwindcss/typography
是 Tailwind CSS 的一个插件,它提供了一组预定义的样式类,用于快速设置文本样式。这些样式类包括标题、段落、列表、引用、代码块等。
npm install -D @tailwindcss/typography
// tailwind.config.js
module.exports = {
plugins: [
require('@tailwindcss/typography'),
],
}
3、配置TypeScript的支持
npx create-react-app my-app --template typescript
4、相关依赖
- @reduxjs/toolkit
是一个用于简化 Redux 开发的库,它提供了一些工具和函数来帮助你创建 Redux store、slice 和 reducer。
npm install @reduxjs/toolkit
- @tanstack/react-query
React Query 是一个用于 React 的数据获取库,它可以帮助你管理应用程序中的数据状态。是一个用于在 React 应用中处理异步数据的库。
npm install @tanstack/react-query
- react-hook-form
React Hook Form 是一个用于 React 的表单验证库,它提供了一种简洁、高效的方式来处理表单数据。
npm i react-hook-form
- react-redux
React Redux 是一个用于 React 的状态管理库,它提供了一种集中式的方式来管理应用的状态。
npm i react-redux
- axios
Axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 Node.js 环境。它可以在客户端和服务器端使用,用于发送 HTTP 请求和处理响应。
npm i axios
- react-hot-toast
React Hot Toast 是一个用于 React 的轻量级通知库,它可以在应用程序中显示通知消息。
npm i react-hot-toast
- react-easy-crop
React-Easy-Crop 是一个用于 React 的图像裁剪库,它提供了一个简单易用的界面,允许用户在网页上裁剪图像。
npm i react-easy-crop
- @tiptap/react @tiptap/starter-kit
@tiptap/react
和 @tiptap/starter-kit
是 Tiptap 编辑器的两个主要包。Tiptap 是一个基于 ProseMirror 的现代富文本编辑器,它提供了丰富的 API 和扩展,可以轻松创建自定义的编辑器。
npm i @tiptap/react @tiptap/starter-kit
- @tiptap/html
@tiptap/html
是 Tiptap 编辑器的一个扩展包,它允许您将 HTML 转换为 Tiptap 的文档节点,并将 Tiptap 的文档节点转换为 HTML。
npm install @tiptap/html
- html-react-parser
html-react-parser
是一个用于将 HTML 转换为 React 元素的库。它可以将 HTML 字符串解析为 React 组件,并将其渲染到页面上。
npm install html-react-parser
- prettier-plugin-tailwindcss
prettier-plugin-tailwindcss
是一个用于 Prettier 的插件,它可以帮助你更好地格式化使用 Tailwind CSS 的代码。
npm i -D prettier-plugin-tailwindcss
- daisyui
DaisyUI 是一个用于 Tailwind CSS 的 UI 组件库。DaisyUI 提供了一套丰富的 UI 组件,包括按钮、卡片、表单、导航栏、模态框等。这些组件都是基于 Tailwind CSS 的实用工具类构建的,
npm i -D daisyui
plugins: [
require('daisyui')
],
daisyui: {
themes: [], // true: all themes | false: only light + dark | array: specific themes like this ["light", "dark", "cupcake"]
base: false, // applies background color and foreground color for root element by default
styled: true, // include daisyUI colors and design decisions for all components
utils: true, // adds responsive and modifier utility classes
prefix: "d-",
},
- @uidotdev/usehooks
@uidotdev/usehooks
是一个用于 React 的自定义 Hook 库。自定义 Hook 是一个函数,它可以封装一些有状态的逻辑,以便在多个组件之间共享。
@uidotdev/usehooks
提供了一些常用的自定义 Hook,可以帮助你更方便地处理一些常见的任务,如处理表单、处理动画、处理键盘事件等。
npm i @uidotdev/usehooks
- react-select
react-select
是一个流行的 React 组件库,用于创建美观且功能强大的选择控件,如下拉菜单、多选列表等。它提供了丰富的自定义选项,可以轻松地集成到你的 React 应用中。
npm i --save react-select
5、bug
- react跨域代理报错
package.json 里添加"proxy": "http://localhost:5000"在react 18之后并不适用
报错:Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options.allowedHosts[0] should be a non-empty string.
解决:手动配置
npm install http-proxy-middleware --save
src/setupProxy.js中写入
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:5000',
changeOrigin: true,
})
);
};
- 在 React Query 的更新中,
onSuccess
和onError
这两个配置选项已经在较新的版本中被弃用。
处理:应该使用 useEffect
与 data
来实现相同的功能。
import { useQuery } from 'react-query';
const fetchUserData = async () => {
const response = await fetch('/api/user');
return response.json();
};
/* const { data, isLoading, isError } = useQuery({
queryFn: () => getSinglePost({ slug }),
queryKey: ["blog", slug],
});
*/
const UserComponent = () => {
const { data, error, isLoading } = useQuery('user', fetchUserData);
useEffect(() => {
if (data) {
// 这里处理数据加载成功后的逻辑
console.log('User data:', data);
}
}, [data]); // 依赖项数组中包含 data,只有 data 改变时才会执行
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
return (
<div>
<h1>User Data</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
};