介绍

这里使用到的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 (   Button  );  } } 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开始。