React+AntdDesign写一个完整的demo ——起步

项目准备:
1、编辑器这里我采用的是Webstrom
2、创建react-app项目和引入antd-design框架;参考链接:
https://ant.design/docs/react/use-with-create-react-app-cn
准备工作完成后开始创建目录(个人推荐):

1、创建目录

React+AntdDesign写一个完整的demo ——起步_第1张图片

2、创建布局主框架并创建router.js

安装react-router-dom

yarn add react-router-dom

安装前:
React+AntdDesign写一个完整的demo ——起步_第2张图片
安装成功:
React+AntdDesign写一个完整的demo ——起步_第3张图片
安装后:
React+AntdDesign写一个完整的demo ——起步_第4张图片
然后在Routes文件夹下创建Router.js文件
React+AntdDesign写一个完整的demo ——起步_第5张图片

3、新建两个组件

在Component文件夹下新建一个Home和Login文件夹,然后在对应的文件夹下面新建Home.js和Login.js
React+AntdDesign写一个完整的demo ——起步_第6张图片
React+AntdDesign写一个完整的demo ——起步_第7张图片
接下来给这两个页面分配路由,编写router.js

import React,{Component} from 'react';
import {HashRouter,Route,Switch} from 'react-router-dom';
import Home from "../Component/Home/Home";
import Login from "../Component/Login/Login";

class Router extends Component{
    render() {
        return (
            
); } } export default Router;

然后修改index.js里的内容
React+AntdDesign写一个完整的demo ——起步_第8张图片
接着运行yarn start就会看见
http://localhost:3000/#/
React+AntdDesign写一个完整的demo ——起步_第9张图片
http://loaclhost:3000/#/login
React+AntdDesign写一个完整的demo ——起步_第10张图片

你可能感兴趣的:(前端)