React与Koa一起打造一个仿稀土掘金全栈个人博客(技术篇)
本篇文章将分为前台角度与后台角度来分析我是怎么开发的。
前台角度
主要资源
react.js
ant Design
for-editor
axios
craco-less
immutable
react-loadable
react-redux
react-router-dom
react-transition-group
redux
redux-immutable
redux-thunk
styled-components
模块页面
首页
登录注册
文章详情
文章评论
圈子
写圈子
搜索页
权限页
写文章
项目配置
项目目录
前台搭建项目步骤
一、使用稳定依赖管理工具
推荐你使用淘宝源
npm config set registry https://registry.npm.taobao.org
还有就是搭配依赖管理工具yarn
二、使用官方React脚手架
create-react-app my-project
三、精简项目文件夹
使用脚手架搭建的初始文件夹是这样的。

那么我们需要精简一下。注意原来的App.js我改成App.jsx。因为 React 使用 JSX 来替代常规的 JavaScript,所以用JSX比较好。

下面我们将要编辑几个文件:
src/index.js
// index.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import App from ‘./App.jsx’;
ReactDOM.render(
,
document.getElementById(‘root’)
);
public/index.html
You need to enable JavaScript to run this app.
更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/118668872
React与Koa一起打造一个仿稀土掘金全栈个人博客(技术篇)的更多相关文章
- React与Koa一起打造一个功能丰富的全栈个人博客(业务篇)
前言 豆哥的个人博客又改版了,本版主要技术栈是前台用的React,后台用的Koa.博客改版的初衷是自己可以练练React(公司的项目部分要用React,我也没法啊,再说早晚得学).本文主要介绍博客的业 ...
- Netty+MUI从零打造一个仿微信的高性能聊天项目,兼容iPhone/iPad/安卓
要说到微信,我相信是个人都应该知道,几乎人人都会安装这款社交APP吧,它已经成为了我们生活中不可缺少的一份子. 我记得我上大学那会刚接触Java,做的第一个小项目就是基于J2SE的聊天室,使用Java ...
- 如何实现一个 markdown 图片粘贴上传的博客后台系统
如何实现一个 markdown 图片粘贴上传的博客后台系统 js 实现 drag & drop / copy & paste image uploader MongoDB 设计文档对象 ...
- 一个 Vue & Node 的全栈小项目
约学 - 可以寻找一起自习的小伙伴的Web APP 一个基于 Vue & Node 的移动端全栈小项目 在线演示(请使用移动端查看效果) 源码地址: https://github.com/G- ...
- 【个人博客 hexo】一个小时就搭好属于自己的博客
对于经常需要发博客的小伙伴来说,拥有一个属于自己的博客网站,听起来是不是很酷. 今天我就来告诉大家,怎么搭建一个属于自己的博客网站,我们需要的就是使用hexo+github来搭建我们自己博客系统. 你 ...
- 发起一个开源项目:基于 .NET 的博客引擎 fluss
今天我们发起一个开源项目,它的名字叫 fluss,fluss 是 river 的德语. 百川归海,每一个博客就如一条河流,输入的是文字,流出的是知识,汇入的是知识的汪洋大海. 川流不息,fluss 是 ...
- 一个关于AM335X比较全面的笔记博客
http://www.eefocus.com/marianna/blog/cate_18142_0.html
- 一个很有参考意义的unity博客
http://blog.csdn.net/lyh916/article/details/45133101
- 转发一个关于下载qq无损音乐的博客
import requests import json headers = { 'Host': 'c.y.qq.com', 'Referer': 'http://c.y.qq.com/', 'User ...
随机推荐
- 【直播回顾】OpenHarmony知识赋能第四期第三课——I2C驱动开发
3月24日晚上19点,知识赋能第四期直播的第三节课<OpenHarmony标准系统HDF框架之I2C驱动开发>,在OpenHarmony开发者成长计划社群内成功举办. 本期课程,由拓 ...
- 随机获取gbr颜色值
- 渗透测试中为什么https抓包是明文传输?
网站用的是https抓包是明文传输,为什么能看到https报文的明文? https其实就是 http + SSL/TLS 两种协议的合体.http协议是应用层协议,而SSL/TLS是传输层协议. 那问 ...
- JavaScript基础第03天笔记
JavaScript基础第03天笔记 1 - 循环 1.1 for循环 语法结构 for(初始化变量; 条件表达式; 操作表达式 ){ //循环体 } 名称 作用 初始化变量 通常被用于初始化一个计数 ...
- .NET Core(.NET6)中gRPC使用
一.简介 简单解析一下gRPC,gRPC 是一个由Google开源的,跨语言的,高性能的远程过程调用(RPC)框架. 特点: 跨语言 内容protobuf格式(比json体积小),网络传输快 使用HT ...
- python3-认识内置对象,运算符,表达式
1 . 认识内置对象 在python中一切皆对象, 整数,实数,复数,字符串,列表,元组,字典,集合,zip, map, enumerate, filter , 函数 ,类 , 分类:内置对象,标准 ...
- Markdown学习-Typora
author:涂勇军 标题 (#加一个空格)一级标题 (##加一个空格)二级标题 (###加一个空格)三级标题 (####加一个空格)四级标题 字体 加粗:** hello,World **(快捷键是 ...
- Halo 开源项目学习(三):注册与登录
基本介绍 首次启动 Halo 项目时需要安装博客并注册用户信息,当博客安装完成后用户就可以根据注册的信息登录到管理员界面,下面我们分析一下整个过程中代码是如何执行的. 博客安装 项目启动成功后,我们可 ...
- BUUCTF-Web:[GXYCTF2019]Ping Ping Ping
题目 解题过程 1.题目页面提示?ip=,猜测是让我们把这个当做变量上传参数,由此猜想是命令注入 2.用管道符加上linux常用命令ls(windwos可以尝试dir)试试 所谓管道符(linux)的 ...
- FreeRTOS --(3)内存管理 heap2
在<FreeRTOS --(2)内存管理 heap1>知道 heap 1 的内存管理其实只是简单的实现了内存对齐的分配策略,heap 2 的实现策略相比 heap 1 稍微复杂一点,不仅仅 ...