logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.4
  • CSS in v6
  • 👀 Visual Regression Testing
  • Why is it so hard to disable the date?
  • HOC Aggregate FieldItem
  • Line Ellipsis Calculation
  • 📢 v4 surpassed maintenance period
  • Type Util
  • A build ghost
  • Ant Design meets CSS Variables
  • Historical Debt of API
  • Stacked Notification
  • Color Models and Color Picker
  • Extends Theme
  • Virtual Table is here!
  • Happy Work Theme
  • Where is the dynamic style?
  • Suspense breaks styles
  • Bundle Size Optimization
  • Hi, GitHub Actions
  • To be what you see
  • Pain of static methods
  • SSR Static style export
  • Dependency troubleshooting
  • Contributor development maintenance guide
  • Repost: How to submit a riddle
  • Tooltip align update
  • Unnecessary Rerender
  • How to Grow as a Collaborator
  • Funny Modal hook BUG
  • about antd test library migration
  • Tree's check conduction
  • Some change on getContainer
  • Component-level CSS-in-JS
Pull Ant Design code to local
1. Fork project
2. Add remote branch address
3. Create a new fix branch on github
4. Pull the new branch locally
Find the issue on the Ant Design issue page and analyze the selection
Development Process
Run test cases and specification checks
Merge changes
Submit a Pull Request
Accept the maintainer's review and modify it, and wait for the maintainer to merge after passing the test
Common errors
To be collaborator
Don't be afraid to make mistakes, do it bravely, everyone is welcome in the open source world.
Related resources

How to Grow as a Collaborator

2022-12-22
@heiyu4585

Articles are included in the column:

antd

Ant Design

A UI design system
Go to discuss
antd

Ant Design

Ant Design official column
Go to discuss
contributors
    • Unnecessary RerenderFunny Modal hook BUG

    Resources

    Ant Design X
    Ant Design Charts
    Ant Design Pro
    Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Web3
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    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

    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

    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
    bash
    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
    bash
    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

    bash
    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:

    bash
    git checkout master
    • Use the following code to pull the latest code from the remote:
    bash
    git pull upstream master
    • switch back to fix-branch
    bash
    git checkout fix-branch
    • Merge the commit of master into fix-branch, and resolve conflicts if there are conflicts:
    bash
    git rebase master
    • Submit the updated code to your own fix-branch:
    bash
    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:

    bash
    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