React+Ant.Design 从零开始搭建个人博客实战教程01 —— 起步

最新推荐文章于 2024-08-19 10:30:42 发布

置顶 webmxj

最新推荐文章于 2024-08-19 10:30:42 发布

阅读量4.4w

点赞数 19

分类专栏： js css html+css react React+Ant design 从零开始搭建个人博客实战教程文章标签： react ant-design 前端博客建站基础

本文链接：https://blog.csdn.net/div_ma/article/details/80436727

版权

js 同时被 3 个专栏收录

22 篇文章 1 订阅

订阅专栏

html+css

10 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

简介：刚入手一个服务器打算搭个个站，平时工作都是用vue ；为了扩展自己的实战能力来从头开始实战用用react吧；结合ant-design一起开发，然后后台nodejs来写；编写我的第一个教程文章，从头到尾记录整个过程因为是实战项目；部分基础的创建react的和基本语法什么的话各位就自便了如果有需要的话我是可以开篇博客的；需要的留言— —
ღ( ´･ᴗ･` )比心

因为并不是很熟悉这两个框架所以如果有做的不好的请各位大神指导下小弟谢谢了

作者：webmxj
csdn博客名:div_ma
联系方式：webmxj@163.com
微信：webmxj
QQ交流群:734585334
QQ:642525655 加我请备注前端

项目准备：
1.任意一个编辑器；这个看个人喜好我用的是webstore；
2.配置好react-app 和引入ant-design框架; 如何弄得可以参考链接教程:
https://ant.design/docs/react/use-with-create-react-app-cn
这一部分因为ant-design有详细的教程我就不过多讲解如果有不知道的可以通过上面的方式联系我

准备工作完成后正式开始了 :

1.创建目录:

目录解构大致如下

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

安装 react-router-dom；

yarn add react-router-dom
这里写图片描述
然后在src下新建文件router.js

3.新建通用布局界面

在layouts文件中创建DefaultLayout.js 用来作为通用布局并在文件中写入HelloWorld字样；
和创建LoginLayout.js写入LoginUser字样

HelloWorld
这里写图片描述
接着修改router.js中的代码引入react-router-dom 如下

import React,{Component} from 'react';
import {HashRouter,Route,Switch} from 'react-router-dom';
import DefaultLayout from './layouts/DefalutLayout/DefaultLayout';
import LoginUser from './layouts/LoginUser/LoginUser';
export default class RouterWrap extends Component{
    render(){
        return (
            <div id="router">
                <HashRouter>
                    <Switch>
                        <Route path="/" component={DefaultLayout}  exact />
                        <Route path="/login" component={LoginUser} />
                    </Switch>
                </HashRouter>
            </div>
        )
    }
}

修改app.js 引入刚才创建的router组件

import React, { Component } from 'react';
import RouterWrap from './router';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
          <RouterWrap/>
      </div>
    );
  }
}

export default App;

然后运行 yarn start 打开localhost:3000
就可以看到 helloworld了
这里写图片描述
然后修改路由为http://localhost:3000/#/login会显示为

这样子简单的路由切换就实现了接下来进行界面的布局

4.修改配置引入less文件

引入less样式文件配置的话在ant-design上面有引入less的配置
https://ant.design/docs/react/use-with-create-react-app-cn
在自定义主体那里引入了react-app-rewire-less模块并修改了
配置完后就可以直接引入less文件了 config-overrides.js文件就可以了

新建DefaultLayout.less文件然后在文件中写入