V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
everettjf
V2EX  ›  React

前端新手想问下 React 最能打的组合是什么?

  •  
  •   everettjf ·
    everettjf · 2022-04-10 20:47:08 +08:00 · 6383 次点击
    这是一个创建于 718 天前的主题,其中的信息可能已经有所发展或是发生改变。

    背景:我是一名移动端开发,会前端的一点皮毛,但困惑很多。

    1. React 状态管理框架这么多,webpack 还是 vite ,ui 组件库也这么多,js 还是 ts ,这一套组合就很多种了。到底哪个最能打(综合实力最强)。
    2. js 还是 ts ,有时候总感觉 ts 写起来复旦很重。

    求前端高手指点

    31 条回复    2022-09-06 16:26:36 +08:00
    noe132
        1
    noe132  
       2022-04-10 21:06:42 +08:00 via Android   ❤️ 5
    用了 ts 后你会发现 js 写起来负担很重
    TWorldIsNButThis
        2
    TWorldIsNButThis  
       2022-04-10 21:06:56 +08:00   ❤️ 1
    最近搭了一个
    vite + typescript + tailwindcss + swr + antd mobile
    由于没有额外数据的共享所以没用状态管理库,直接 swr 管理请求的数据,其实感觉有点简陋,react-query 可能更好一点
    很多人都提了一些常见的使用问题,官方给的解决方案都是叫你自己写几个工具函数,不像 react-query 都自带了
    另外用的时候 antd mobile 狂发版本,有几个版本跟 vite 不兼容,现在最新版应该没兼容问题了
    而且要在 index.css 手动引入一下 antd mobile 的 global 样式文件,不然没法 treeshaking antd mobile 的样式
    然后 tailwindcss 要把预设 preflight 关掉,不然和 antd mobile 的样式有冲突
    TWorldIsNButThis
        3
    TWorldIsNButThis  
       2022-04-10 21:08:29 +08:00   ❤️ 1
    另外处理数据的地方尝试了一下 point free style 的 fp ,不用 typescript 估计每个数据处理都得调半天
    AyaseEri
        4
    AyaseEri  
       2022-04-10 21:10:55 +08:00
    hooks 一把梭
    hunter0122
        5
    hunter0122  
       2022-04-10 21:18:42 +08:00
    刚学 react ,现在入门 umi 很头大
    MXXXXXS
        6
    MXXXXXS  
       2022-04-10 21:45:01 +08:00   ❤️ 1
    eslint + prettier + webpack + babel + ts + react(hooks) + styled-components + mobx-state-tree
    nanxiaobei
        7
    nanxiaobei  
       2022-04-10 21:56:30 +08:00 via iPhone   ❤️ 1
    人生苦短,请用 resso https://github.com/nanxiaobei/resso
    QingStone
        8
    QingStone  
       2022-04-10 21:58:21 +08:00 via iPhone
    本 Vue 初级开发也有同问题想问🤣,想有空学习下 React
    golangLover
        9
    golangLover  
       2022-04-10 21:58:39 +08:00 via Android
    react 就沒有能打的
    terranboy
        10
    terranboy  
       2022-04-10 22:24:04 +08:00
    写多了都一样
    lodisy
        11
    lodisy  
       2022-04-10 22:39:03 +08:00 via Android   ❤️ 2
    zustand / jotai
    ts
    agdhole
        12
    agdhole  
       2022-04-10 22:40:37 +08:00
    vite + react + ts + recoil + mui(emotion)
    joshua7v
        13
    joshua7v  
       2022-04-10 22:55:13 +08:00
    每个人的组合偏好都不一样
    sunwei0325
        14
    sunwei0325  
       2022-04-10 23:00:00 +08:00
    nextjs, 就跟后端的 springboot 似的
    darkengine
        15
    darkengine  
       2022-04-10 23:00:46 +08:00
    如果开发需要长期维护的项目,还是选 ts 吧,前期可能痛苦点。
    sickoo
        16
    sickoo  
       2022-04-10 23:04:41 +08:00
    @sunwei0325 也不完全是,只要我自己没发现
    yolio2003
        17
    yolio2003  
       2022-04-10 23:17:24 +08:00
    zustand + react-router/remix + next.js
    Chism
        18
    Chism  
       2022-04-11 00:03:43 +08:00
    我觉得 craco 也是必备的。。
    AsZr
        19
    AsZr  
       2022-04-11 01:07:21 +08:00   ❤️ 2
    首先工程项目肯定首选 ts ,不要逆趋势,面向简历编程也都要求会 ts 。react 各种组件 hooks 抽离的,你写 js 后面调用你自己都懵逼,要传什么会导致什么结果传个 undefined 会出什么鬼。当然如果你 js 还不熟,去学习吧,基础这个东西,后面都是债。

    webpack / vite 这些是构建环境工具,https://andyyou.github.io/2021/04/25/new-generation-of-build-tools-comparsing/,个人推荐 vite ,在新构建工具中足够流行,对比旧构建工具开发体验更好(配置上 /开发环境速度)

    状态管理方面 https://www.zhihu.com/question/445762769/answer/1744053049 ,其实你现在这个阶段写的那些东西仅需要跨组件通信,你可以先用 useContext 把坑踩一遍

    UI 组件库并没有很多,很多基于 antd 二开的,比如 rsuite 。移动端 UI 组件库更少,antd mobile

    所以你可以 vite 的 react-ts 模板走起,感觉并没什么要组合的 🧐
    bojue
        20
    bojue  
       2022-04-11 01:25:23 +08:00
    我们项目 Vite + Webpack+ React + Redux + TS + Less + AntD + TSLint + ESLint ,一般项目大同小异
    zooeymango
        21
    zooeymango  
       2022-04-11 10:17:21 +08:00   ❤️ 1
    感觉现在主流选择的组合其实都挺不错的, 状态管理 react-query+hook 基本可以覆盖大部分用例了, 实在要上可以试试 jotai 这些, 其余的其实都可以, nextjs 、antdpro 的话就完全省事了, 但是 ts 还是必须得上的, 不然写起来心里真的没底你不知道哪里就会冒个错
    ragnaroks
        22
    ragnaroks  
       2022-04-11 10:21:39 +08:00
    nextjs(webpack) + recoiljs + emotion/react + nexti18n ,样式库就随意了,我都是直接手撸的
    sjhhjx0122
        23
    sjhhjx0122  
       2022-04-11 10:23:13 +08:00
    vite ts 状态管理直接 context 自己包一下好了,没必要非得学人家的概念累
    angrylid
        24
    angrylid  
       2022-04-11 10:27:26 +08:00 via Android
    选型负担重你转 V 或 A 不就完事了。
    dudubaba
        25
    dudubaba  
       2022-04-11 10:49:15 +08:00   ❤️ 2
    管理系统:react+ umi + antd/antd-pro +ts
    C 端 :nextjs + mobx + ts
    BFF:nestjs + typeorm
    基本上满足 90%的业务场景了
    Zzzz77
        26
    Zzzz77  
       2022-04-11 11:08:29 +08:00
    选择困难,或者对生态不熟的话直接 umi 一把梭好了。。后面发现什么地方不合适再替换
    vone
        27
    vone  
       2022-04-11 12:14:24 +08:00   ❤️ 1
    你作为一个前端新手,建议别碰 TypeScript 。

    如果不是非常必要(收益大于成本),还是不要引入 TypeScript 。

    使用 TypeScript 会增加项目架构的复杂度、额外增加开发负担、如果不能掌握 TypeScript 的正确用法还会被海量的警告淹没、另外如果你开发人员的素质不高,你还能看到一个叫 AnyScript 的新语言。



    其实 JavaScript 这个语言也不是特别烂,项目无法长期维护的原因也大概率不是因为 JavaScript 。
    everettjf
        28
    everettjf  
    OP
       2022-04-11 22:34:30 +08:00
    非常感谢大家~
    everettjf
        29
    everettjf  
    OP
       2022-04-12 00:47:24 +08:00
    汇总下

    - vite react-ts
    - nextjs
    - rsuite / mui / antd-pro

    - tailwindcss
    - swr / react-query
    - antd mobile
    - umi
    - mobx
    - resso
    - zustand / jotai
    - react-router/remix
    - nestjs
    l4ever
        30
    l4ever  
       2022-05-05 14:47:49 +08:00
    前端的轮子太多了, 全干表示鸭梨很大.
    后端相对就没有那么多重复功能的轮子.
    likunyan
        31
    likunyan  
       2022-09-06 16:26:36 +08:00
    - Vite
    - GraphQL
    - Next.js
    - Typescript
    - MUI ( Emotion )
    - immer
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5405 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 08:39 · PVG 16:39 · LAX 01:39 · JFK 04:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.