Code Monkey home page Code Monkey logo

project-template's Introduction

webpack + react + antd + dva + tailwind + eslint 项目基本框架

个人维护的React最佳实践脚手架

Why?

为了兼顾开发效率和灵活性

一些实践方案:

数据请求

  • 数据请求方式: 业务请求 -> useRequest/useMutation -> xFetch

在xFetch中对api的处理进行了处理,现在可以通过更加方便的方式识别请求方式和路由参数:

xFetch("GET /api/user/{id}", { id: 1, username: "abc" }) -> fetch("/api/user/1?username=abc")

所有的请求尽量都走hooks,因为在useMutation自动处理了错误提示和post/delete等请求成功提示, 以及添加与全局状态相关的参数

css

同时支持tailwind css 和 less 以及 css module

状态管理

使用dva管理全局状态,除了必要数据,其他状态不推荐存储在dva

国际化

使用react-intl, 所有的国际化通过其提供的useIntlhooks进行

布局

相关文件放在layout文件夹,包括侧边栏相关内容,若需要将相关功能提取出来,可以提取为hooks

代码规范

eslint会在commit之前自动执行并尝试格式化代码,不符合规范的代码提交会失败 使用prettier和eslint:recommended规范

project-template's People

Contributors

lianys123 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.