ANTD introduces the use of normal HTML to localize ant design

Source: Internet
Author: User
Tags button type

Always think that can localize Antd, without npm and DVA so complex configuration environment to develop, and localization later to link flask template rendering mechanism can also be a good combination. Here's how it's implemented:

1. Introduce the relevant links to react:

<script src= "/static/react/react.min.js" ></script><script src= "/static/react/react-dom.min.js" ></script><script src= "Https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js" > </script>

can also use CDN link, I as well as will react down to local use, link may compare card.

2. The introduction of ANTD requires only the following two:

<script src= "/static/antd/dist/antd.js" ></script><link href= "/static/antd/dist/antd.css" rel= " Stylesheet "/>

In the previous DVA project also has, can copy paste over, path in/dva-quickstart/node_modules/antd/dist ...

3. Write code test, HTML Introduction:

<div id= "Message1" ></div><script type= "Text/babel" src= "/static/components/button.js" ></ Script>

ANTD Component code:

Import { Button, Radio, Icon } from ‘antd‘;
Reactdom.render ( <div> <antd. Button type= "PRIMARY" >PRIMARY</ANTD. Button> <antd. Button>default</antd. Button> <antd. Button type= "Dashed" >dashed</antd. Button> <antd. Button type= "Danger" >danger</antd. Button> </div>, document.getElementById (' message1 '));

It is important to note that all component code can be found on the official website, but the import is obviously not a function, remove the line;

Antd is an object, the button is a build, the reference needs to add antd. To work properly.

ANTD introduces the use of normal HTML to localize ant design

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.