React基础知识3

React基础知识3

12.react-ui

12.1 -最流行的开源React UI组件库
a. material-ui(国外)

1.官网: http://www.material-ui.com/#/
2.github: https://github.com/callemall/material-ui

b. ant-design(国内蚂蚁金服)/ANTD

1.PC官网: https://ant.design/index-cn
2.移动官网: https://mobile.ant.design/index-cn
3.Github: https://github.com/ant-design/ant-design/
4.Github: https://github.com/ant-design/ant-design-mobile/

12.2 -ant-design-mobile使用入门
1.使用create-react-app创建react应用

	1.npm install create-react-app -g
	2.create-react-app antm-demo
	3.cd antm-demo
	4.npm start

2.搭建antd-mobile的基本开发环境
1-下载

npm install antd-mobile --save

2-src/App.jsx

import React, {
     Component} from 'react'
// 分别引入需要使用的组件
import Button from 'antd-mobile/lib/button'
import Toast from 'antd-mobile/lib/toast'
export default class App extends Component {
     
  handleClick = () => {
     
    Toast.info('提交成功', 2)
  }
  render() {
     
    return (
      <div>
        <Button type="primary" onClick={
     this.handleClick}>提交</Button>
      </div>
    )
  }
}

3- src/index.js

import React from 'react';
import ReactDOM from 'react-dom'
import App from "./App"
// 引入整体css
import 'antd-mobile/dist/antd-mobile.css'
ReactDOM.render(<App />, document.getElementById('root'))

4- index.html

<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('
                    
                    

你可能感兴趣的:(es6,html5,reactjs)