logoAnt Design

⌘ K
  • 디자인
  • 개발
  • 컴포넌트
  • 블로그
  • 자료
5.21.3
  • 为什么禁用日期这么难?
  • Why is it so hard to disable the date?
  • 封装 Form.Item 实现数组转对象
  • HOC Aggregate FieldItem
  • 行省略计算
  • Line Ellipsis Calculation
  • 📢 v4 维护周期截止
  • 📢 v4 surpassed maintenance period
  • Type Util
  • 一个构建的幽灵
  • A build ghost
  • 当 Ant Design 遇上 CSS 变量
  • Ant Design meets CSS Variables
  • API 기술 부채
  • 생동감 있는 Notification
  • 色彩模型与颜色选择器
  • Color Models and Color Picker
  • 主题拓展
  • Extends Theme
  • 虚拟表格来了!
  • Virtual Table is here!
  • Happy Work 테마
  • Happy Work Theme
  • 동적 스타일은 어디로 갔을까?
  • Suspense 引发的样式丢失问题
  • Suspense breaks styles
  • Bundle Size Optimization
  • 안녕, GitHub Actions
  • 所见即所得
  • To be what you see
  • 정적 메서드의 고통
  • SSR에서 정적 스타일 추출
  • SSR Static style export
  • 의존성 문제 해결
  • 贡献者开发维护指南
  • Contributor development maintenance guide
  • 转载-如何提交无法解答的问题
  • Repost: How to submit a riddle
  • 新的 Tooltip 对齐方式
  • Tooltip align update
  • Unnecessary Rerender
  • 如何成长为 Collaborator
  • How to Grow as a Collaborator
  • Funny Modal hook BUG
  • Modal hook 的有趣 BUG
  • about antd test library migration
  • antd 测试库迁移的那些事儿
  • Tree 的勾选传导
  • Tree's check conduction
  • getContainer 的一些变化
  • Some change on getContainer
  • Component-level CSS-in-JS

How to Grow as a Collaborator

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference
Work with Us

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

Hello everyone, I am heiyu. About Ant Design, I believe everyone is very familiar with it. Before I contributed to Ant Design, I have used Ant Design in many background management system projects at work. The biggest feeling for me is that it is easy to use, beautiful, simple and stable. Now that the v5 version has been released, I strongly recommend everyone to try it. I am also fortunate to have developed the v5 version of the Tour component and App component, as well as some other maintenance work. Let me share with you the PR process of Ant Design, hoping to provide a reference for who are interested in building together for the community.

Read related articles to familiarize yourself with related concepts

Contributing

How to gracefully contribute code on github

Become a Community Collaborator

developer notes

Some tips about git with PR

Pull Ant Design code to local

1. Fork project

  • First you need to fork the project, enter the project page, click the Fork button
  • Ant Design link will appear in your github account is https://github.com/heiyu4585/ant-design this project
  • Use the following command on the project address on the local computer: get a github folder
git clone https://github.com/[yourGithubAccount]/ant-design.git

Note: [yourGithubAccount] changed to your own github username

2. Add remote branch address

  • Go to the Ant Design folder and add the remote address of Ant Design
cd ant-design
git remote add upstream https://github.com/ant-design/ant-design
  • Pull the latest remote branch version
git pull upstream master

Now we are on the master branch from the fork, and this master is reserved for remote code tracking upstream

3. Create a new fix branch on github

image-20221211130607684

4. Pull the new branch locally

git pull
git checkout fix-branch

Now we can change the code on the branch

Find the issue on the Ant Design issue page and analyze the selection

To help you start your first attempt, we use good first issues marks bugs and small features that are relatively easy to fix, and these issues are good as your first try. help wanted After all, it is easy to take over as a developer some problems.

image-20221216111126983

Development Process

  1. npm start A website running Ant Design locally
  2. As issue mentioned. Debug, fixing or add new feature

Run test cases and specification checks

  1. When add new related test case, also make sure all tests pass npm run test. Tips: You can use npm test -- --watch TestName to run specified tests during development.
  2. Run npm test -- -u to update jest snapshot and put These updates are also committed (if any).
  3. Make sure your code passes the lint check npm run lint.

Merge changes

  • A common problem is that the remote upstream (ant-design/master) has a new update, which will lead to conflicts when we submit the Pull Request, so we can put the commits of other remote developers and our commit is merged.

  • Switch to the master branch with the following code:

git checkout master
  • Use the following code to pull the latest code from the remote:
git pull upstream master
  • switch back to fix-branch
git checkout fix-branch
  • Merge the commit of master into fix-branch, and resolve conflicts if there are conflicts:
git rebase master
  • Submit the updated code to your own fix-branch:
git push origin fix-branch

Submit a Pull Request

You can switch to the branches page on your github code repository page, click the fix-branch branch, click the New pull request button, add relevant comments and submit. Or switch to the code repository of the fix-branch branch, click the Compare & pull request button, add relevant comments and submit.

  • On the PR page, carefully fill in the submission description according to the default format, and you can refer to the merged PR.

  • Check whether all the checks are passed. If you don’t click details, check the corresponding error report, and push again after repairing.

image-20221210233540659

Accept the maintainer's review and modify it, and wait for the maintainer to merge after passing the test

image-20221216104628528

Common errors

  • PR description is not filled in as required

image-20221210234139748

  • Not rebase to latest version

image-20221210234002553

  • react 16 test failed

image-20221212091630186

Repair method:

npm run install-react-16
npm run test component/XXX

To be collaborator

After a period of continuous maintenance, Collaborators will start the invitation mechanism and initiate a vote in #3222. When enough votes are met, you will be officially invited to become a Collaborator.

Collaborators

Don't be afraid to make mistakes, do it bravely, everyone is welcome in the open source world.

giphy

Related resources

To learn more about Ant Design's development process and considerations, see:

  • contributor development maintenance guide