很难过 Create React App 被时代淘汰,现在我们用 Vite 开发 React + Ant Design 吧。
很难过 CSS 被时代淘汰(明明没有好不好!),现在我们用 Tailwind CSS 吧。
很难过 yarn 被时代淘汰,现在我们用 pnpm 吧。
pnpm create vite my-react-app --template react-ts
https://vitejs.dev/guide/#scaffolding-your-first-vite-project
cd my-react-app
pnpm install
pnpm add antd @ant-design/icons
pnpm add -D less vite-plugin-imp # 用于按需引入组件
https://ant.design/docs/react/introduce#Using-npm-or-yarn
vite.config.ts
为如下内容:import { defineConfig } from 'vite';
import vitePluginImp from 'vite-plugin-imp';
import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
vitePluginImp({
optimize: true,
libList: [
{
libName: 'antd',
style: (name) => `antd/es/${name}/style`,
},
],
}),
],
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
// 如需定制 antd 主题,请取消以下内容注释 https://ant.design/docs/react/customize-theme
// modifyVars: {
// hack: `true; @import "./src/theme.less";`,
// },
},
},
},
});
pnpm add -D tailwindcss postcss autoprefixer
npx tailwindcss init
Tailwind CSS ,用过都说好!几乎不用再添加 less
/scss
文件,不用切换文件改完 CSS 再切回来,直接修改组件的 className
即可,"最短修改路径",便捷简洁现代化!(当然如果不想用可以不安装)
https://tailwindcss.com/docs/installation/using-postcss
注意:生成的 TypeScript 项目中,不支持 .js
配置文件,需使用 .cjs
文件。
touch postcss.config.cjs
postcss.config.cjs
内容:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
tailwind.config.cjs
内容:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{html,tsx}'],
theme: {
extend: {},
},
plugins: [],
};
重命名 index.css
为 main.css
,修改其内容为:
@tailwind base;
@tailwind components;
@tailwind utilities;
pnpm add -D eslint eslint-config-react-app
https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app
虽然 create-react-app
被淘汰了,但它的 ESLint 规则还是最权威的,开发 React 项目的最佳规范!
pnpm add -D prettier eslint-config-prettier @trivago/prettier-plugin-sort-imports
https://github.com/prettier/eslint-config-prettier
https://github.com/trivago/prettier-plugin-sort-imports
@trivago/prettier-plugin-sort-imports
,一个非常好用的对 import
进行自动排序的 Prettier 插件,用了就回不去了!(当然如果不想用可以不安装)
.eslintrc.cjs
touch .eslintrc.cjs
module.exports = {
extends: ['react-app', 'prettier'],
};
.prettierrc.cjs
touch .prettierrc.cjs
module.exports = {
singleQuote: true,
// 以下为 @trivago/prettier-plugin-sort-imports 配置,若未使用可删去
// importOrder 中的文件顺序规范,可依据项目实际情况自行更改
plugins: [require.resolve('@trivago/prettier-plugin-sort-imports')],
importOrder: [
'^vite',
'^react',
'^antd',
'<THIRD_PARTY_MODULES>',
'components/',
'pages/',
'hooks/',
'utils/',
'^[./]',
],
importOrderSortSpecifiers: true,
importOrderGroupNamespaceSpecifiers: true,
importOrderCaseInsensitive: true,
};
删除 App.css
,修改 App.tsx
文件为:
import { useState } from 'react';
import { Button } from 'antd';
import { AlertOutlined } from '@ant-design/icons';
import reactLogo from './assets/react.svg';
function App() {
const [count, setCount] = useState(0);
return (
<div className="grid place-content-center h-screen text-center text-lg">
<div className="flex mx-auto items-center gap-8">
<a href="https://vitejs.dev" target="_blank" rel="noreferrer">
<img src="/vite.svg" className="w-28" alt="Vite logo" />
</a>
<a href="https://reactjs.org" target="_blank" rel="noreferrer">
<img
src={reactLogo}
className="w-32 animate-spin [animation-duration:10s]"
alt="React logo"
/>
</a>
</div>
<h1 className="my-20 font-semibold text-6xl">Vite + React</h1>
<div>
<Button
className="inline-flex items-center rounded-md"
size="large"
icon={<AlertOutlined />}
onClick={() => setCount((count) => count + 1)}
>
count is {count}
</Button>
<p className="mt-4 mb-12">
Edit <code>src/App.tsx</code> and save to test HMR
</p>
</div>
<p className="opacity-40">
Click on the Vite and React logos to learn more
</p>
</div>
);
}
export default App;
启动项目:
pnpm run dev
耶寺!点开本地开发链接看看效果吧!
以上 shell 命令的合订版:
pnpm create vite my-react-app --template react-ts
cd my-react-app
pnpm install
pnpm add antd @ant-design/icons
pnpm add -D less vite-plugin-imp tailwindcss postcss autoprefixer eslint eslint-config-react-app prettier eslint-config-prettier @trivago/prettier-plugin-sort-imports
npx tailwindcss init
touch postcss.config.cjs
touch .eslintrc.cjs
touch .prettierrc.cjs
1
Aloento 2022-08-11 03:25:37 +08:00 1
buff 叠满了属于是
|
2
iwh718 2022-08-11 07:11:21 +08:00 via Android
什么被淘汰的
|
3
BugCry 2022-08-11 08:43:53 +08:00 via Android
要是能再套一层 Next 就 yyds 了
|
4
gouflv 2022-08-11 08:49:46 +08:00 via iPhone
意义不明
|
5
lingly02 2022-08-11 09:03:21 +08:00 3
OP 正好暴露了现在前端最大的问题:轮子太多,普通开发人员疲于追赶。光一个 CSS 就整出 scss,sass,less,Tailwind CSS 等,这还是主流的,非主流的就更多了, npm, yarn, pnpm 也是,就不能把 npm 好好优化一下吗?
|
6
ccyu220 2022-08-11 09:44:06 +08:00
《 yarn 被时代淘汰》
|
8
yimity 2022-08-11 09:55:36 +08:00
Tailwind 不要开 preflight ,甚至 import 可能还要 true 。不然会有很多和 ant 冲突的地方。
|
9
nanxiaobei OP @BugCry 可以套,改天再水一篇,其实还有 stylelint 没加进去 😂
|
10
IsaacYoung 2022-08-11 10:31:29 +08:00 via iPhone
前端是这样的
|
11
mywaiting 2022-08-11 10:49:21 +08:00
这一堆整完,难怪大家都怀念 jQuery 粗快猛的年代~
|
12
holystrike 2022-08-11 10:50:56 +08:00
用 vue 再水一篇吧😂
|
13
coosir 2022-08-11 11:41:49 +08:00
怀念 jQuery
|
14
kytrun 2022-08-11 11:42:42 +08:00
|
15
nomagick 2022-08-11 11:47:39 +08:00
政治正确一把梭,啥火用啥一把梭,
这不是最佳实践,这是 Hell on earth. 这项目有一点可维护性吗,明年这项目还能在吗 |
16
nanxiaobei OP @nomagick 看了下你的回复,你是 V2EX 驻场喷子吗
|
17
stoluoyu 2022-08-11 11:52:13 +08:00
@holystrike vue 其实相对还好,官方都给了推荐,react 真是挑花眼。
|
18
churchill 2022-08-11 12:53:12 +08:00
应该不能叫最佳实践,这是教你怎么利用社区工具创建一个 hello world 工程,还没开始实践呢
我理解的"实践"是这种 https://github.com/alan2207/bulletproof-react ,不过这家比较怂:It is an opinionated guide that shows how to do some things in a certain way. 没敢说是 best practice ,略输一筹呀 |
19
nanxiaobei OP @churchill 确实,这标题太高调了,下次我一定不改
|
20
scyuns 2022-08-11 13:24:40 +08:00 1
感谢 提供实践整合
|
21
ChefIsAwesome 2022-08-11 13:41:55 +08:00 1
回想到上学的 java 课。毛程序都写不出来,尽在那配开发环境了。
|
22
Hanser002 2022-08-11 14:22:56 +08:00 1
刚试了下 `@trivago/prettier-plugin-sort-imports` 比 `eslint/import` 好用 已更换 感谢楼主
|
23
Hanser002 2022-08-11 14:25:03 +08:00
如果说 css 最佳实践 可以 @emotion + scss + tailwindcss , 之前看到的这个模板还不错 [vite-react-starter]( https://github.com/fabgrel10/vite-react-starter)
|
24
ohohohh 2022-08-30 11:22:25 +08:00
路由守卫要怎么搞呢?
|
25
iugo 2023-05-08 22:15:44 +08:00
和我们的技术栈还挺像的. 不过没有 Tailwind CSS. 我们项目是从 CRA 迁移来的.
|
26
no13bus 2023-08-22 12:19:03 +08:00
@nanxiaobei 能否分享下项目结构,后续的一些东西,比如 component, layout, 模态对话框,项目文件夹是什么样的?我不太想用 nextjs ,太复杂了。我只是用 react 写前端,不想用什么 ssr 。
|
27
no13bus 2023-08-22 12:20:14 +08:00
我自己很喜欢 vitejs, typescript 写的框架。干净,清爽。其实我觉得大部分用不到 nextjs 那些东西,不过 next 的周边生态很好,nextjs-auth 啥的,登陆都搞定了。
|
28
nanxiaobei OP 2024.1.15 已更新: https://zhuanlan.zhihu.com/p/552344435
|