介绍
这里使用到的UI库是蚂蚁金服开源的ant-design，为啥使用？我觉得是使用人数比较多，坑比较少吧。
例子
https://github.com/xuya227939/blog/tree/master/examples/react/my-app
安装
$ sudo npm install -g create-react-app //全局安装的话，需要权限，所以使用sudo $ create-react-app my-app $ cd my-app $ npm install antd $ npm start
使用
1.引用官方代码，修改App.js文件，引入ant组件
import React, { Component } from 'react'; import Button from 'antd/lib/button'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <Button type="primary">Button</Button> </div> ); } } export default App;
2.引用官方代码，修改App.css
@import '~antd/dist/antd.css'; .App { text-align: center; } .App-logo { animation: App-logo-spin infinite 20s linear; height: 80px; } .App-header { background-color: #222; height: 150px; padding: 20px; color: white; } .App-title { font-size: 1.5em; } .App-intro { font-size: large; } @keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
你就可以看到蓝色的按钮了。
问题处理
1.如果报类似这样的错，react-scripts 命令未找到 那么就 $ rm -rf node_modules 模块，重新安装下 $ npm i，再重新 npm start
结语
react入门，首先从搭建react开始。
