React技术栈-React UI之ant-design使用入门
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.最流行的开源React UI组件库
1>.material-ui(国外)
官网地址: http://www.material-ui.com/#/ github地址: https://github.com/callemall/material-ui
2>.ant-design(国内蚂蚁金服)
PC官网: https://ant.design/index-cn 移动官网: https://mobile.ant.design/index-cn Github: https://github.com/ant-design/ant-design/ Github: https://github.com/ant-design/ant-design-mobile/
二.ant-design-mobile使用入门
1>.使用create-react-app创建react应用
C:UsersyinzhengjieWebstormProjectsmyweb>npm install create-react-app -g C:UsersyinzhengjieAppDataRoaming pmcreate-react-app -> C:UsersyinzhengjieAppDataRoaming pm ode_modulescreate-react-appindex.js + create-react-app@3.3.0 updated 1 package in 9.527s C:UsersyinzhengjieWebstormProjectsmyweb> C:UsersyinzhengjieWebstormProjectsmyweb>create-react-app antd-mobile-demo
2>.搭建antd-mobile的基本开发环境（参考链接:https://mobile.ant.design/docs/react/introduce-cn）
C:UsersyinzhengjieWebstormProjectsmyweb> npm install antd-mobile --save
3>.修改"index.html"的配置文件讲'name=“viewport" '标签对应的content的值末尾追加"user-scalable=no"，与此同时再加一段js代码解决移动端触摸屏带有的300ms延迟问题，如下图所示。
4>.下载依赖包实现按需加载/打包组件(js/css)
C:UsersyinzhengjieWebstormProjectsmywebantd-mobile-demo>npm install react-app-rewired babel-plugin-import --save-dev
5>.创建"config-overrides.js"文件,内容如下图所示，目的就是为原有的配置文件注入按需打包插件的功能。(详细说在官方文档有说明:"https://ant.design/docs/react/introduce-cn")
const {injectBabelPlugin} = require('react-app-rewired');
module.exports = function override(config, env) {
config = injectBabelPlugin(['import', {libraryName: 'antd-mobile', style: 'css'}], config);
return config;
};
三.编写代码并运行脚手架
1>.脚手架目录组织结构
2>.编写代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script> <script> if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); } if(!window.Promise) { document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>'); } </script> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <!-- manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ --> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <!-- Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <!-- This HTML file is a template. If you open it directly in the browser, you will see an empty page. You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the <body> tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> </body> </html>
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
import React,{Component} from 'react';
import {Button,Toast} from 'antd-mobile';
export default class App extends Component{
handleClick = () =>{
//关于提示框的样式可直接参考官方文档:https://mobile.ant.design/components/toast-cn/
Toast.success("提交成功");
}
render(){
return (
<div>
{/*关于组件的样式可直接参考官方文档:https://mobile.ant.design/components/button-cn/*/}
<Button type='warning' onClick={this.handleClick}>提交信息</Button>
</div>
)
}
}
import React from "react"; import {render} from "react-dom"; import 'antd-mobile/dist/antd-mobile.css'; import App from './components/app' //渲染组件标签 render(<App />,document.getElementById('root'));
const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd-mobile',
style: 'css',
}),
);
{ "name": "antd-mobile-demo", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.4.0", "@testing-library/user-event": "^7.2.1", "react": "^16.12.0", "react-dom": "^16.12.0", "react-scripts": "3.3.0" }, "scripts": { "start": " start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "babel-plugin-import": "^1.13.0", "react-app-rewired": "^2.1.5" } }
3>.运行程序出错故障排除
C:UsersyinzhengjieWebstormProjectsmywebantd-mobile-demo>npm start #如果遇到下面的报错不要慌，继续往下看有解决方案。
重新修改"config-overrides.js"文件内容，如下所示: const { override, fixBabelImports } = require('customize-cra'); module.exports = override( fixBabelImports('import', { libraryName: 'antd-mobile', style: 'css', }), ); 参考链接:
https://mobile.ant.design/docs/react/use-with-create-react-app-cn
4>.再次运行项目，使用手机模式查看
5>.点击红色的长条会弹出一个提示框
