react+antd

新手级别

 

需要安装 yarn 

推荐 安装 yarn 的安装文章

https://blog.csdn.net/yw00yw/article/details/81354533

https://yarnpkg.com/zh-Hans/docs/install#windows-stable

 

yarn 官方推荐 要让你安装Scoop  你可以试一下 用npm 命令看可以不，我忘了。。

 

 npm install -g create-react-app
 create-react-app my-app
 cd my-app
 yarn start

就会打开react 首页

npm i antd react-router-dom axios --save

安装 antd   react-router-dom   axios

 

antd 插件中标签设置属性为布尔值的时候 colon ={false} form.item 中的属性 冒号是否存在

 

依赖yarn 不装yarn 的话 启动不了，没有配置文件

 

 

路由配置

跳转路由是转自 原文：https://blog.csdn.net/qishuixian/article/details/80805661 

如需测试转到上面地址，下面的是留给我看的，对自己没有信心。。

 

我新建了一个components 把文件都放在下面 除了index

新建router文件夹 下有一个router.js

router.js

import React from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';

import App from '../components/App';

import Home from '../components/home';
import Forget from './../components/forget';
import Login from './../components/login';

const Root = () => (
   <div>
   <Switch>
   <Route
path="/"
render={props => (
<App>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/home" component={Home} />
<Route path="/forget" component={Forget} />
<Route path="/login" component={Login} />
{/*路由不正确时，默认跳回home页面*/}
<Route render={() => <Redirect to="/" />} />
</Switch>
</App>
)}
/>
</Switch>
</div>
);

export default Root;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './style/index.css';
import Root from './router/router';
import {BrowserRouter} from 'react-router-dom';
import * as serviceWorker from './other/serviceWorker';


const mountNode = document.getElementById('root');
ReactDOM.render(
<BrowserRouter>
<Root />
</BrowserRouter>,
mountNode
);

serviceWorker.unregister();

App.js

import React, { Component } from 'react';

class App extends Component {
   render() {
      return <div>{this.props.children}</div>;
   }
}
export default App;

就可以跳路由了把 Link 需要在头部 import 引入 也可以用 href Button 是 引用 antd 加了href就变成a标签了

 

import { Link } from 'react-router-dom';

<Link to="/login">12312321</Link>

<Button href="/lose">丢失反馈、找回</Button>