本篇文章将分为前台角度与后台角度来分析我是怎么开发的。
前台角度
主要资源

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一起打造一个仿稀土掘金全栈个人博客(技术篇)的更多相关文章

  1. React与Koa一起打造一个功能丰富的全栈个人博客(业务篇)

    前言 豆哥的个人博客又改版了,本版主要技术栈是前台用的React,后台用的Koa.博客改版的初衷是自己可以练练React(公司的项目部分要用React,我也没法啊,再说早晚得学).本文主要介绍博客的业 ...

  2. Netty+MUI从零打造一个仿微信的高性能聊天项目,兼容iPhone/iPad/安卓

    要说到微信,我相信是个人都应该知道,几乎人人都会安装这款社交APP吧,它已经成为了我们生活中不可缺少的一份子. 我记得我上大学那会刚接触Java,做的第一个小项目就是基于J2SE的聊天室,使用Java ...

  3. 如何实现一个 markdown 图片粘贴上传的博客后台系统

    如何实现一个 markdown 图片粘贴上传的博客后台系统 js 实现 drag & drop / copy & paste image uploader MongoDB 设计文档对象 ...

  4. 一个 Vue & Node 的全栈小项目

    约学 - 可以寻找一起自习的小伙伴的Web APP 一个基于 Vue & Node 的移动端全栈小项目 在线演示(请使用移动端查看效果) 源码地址: https://github.com/G- ...

  5. 【个人博客 hexo】一个小时就搭好属于自己的博客

    对于经常需要发博客的小伙伴来说,拥有一个属于自己的博客网站,听起来是不是很酷. 今天我就来告诉大家,怎么搭建一个属于自己的博客网站,我们需要的就是使用hexo+github来搭建我们自己博客系统. 你 ...

  6. 发起一个开源项目:基于 .NET 的博客引擎 fluss

    今天我们发起一个开源项目,它的名字叫 fluss,fluss 是 river 的德语. 百川归海,每一个博客就如一条河流,输入的是文字,流出的是知识,汇入的是知识的汪洋大海. 川流不息,fluss 是 ...

  7. 一个关于AM335X比较全面的笔记博客

    http://www.eefocus.com/marianna/blog/cate_18142_0.html

  8. 一个很有参考意义的unity博客

    http://blog.csdn.net/lyh916/article/details/45133101

  9. 转发一个关于下载qq无损音乐的博客

    import requests import json headers = { 'Host': 'c.y.qq.com', 'Referer': 'http://c.y.qq.com/', 'User ...

随机推荐

  1. swagger不再是第一选择了

    ​ 一.前言 工欲善其事,必先利其器 最近对 API 接口协作的软件研究了好久,市面上的软件都下载用了一轮,下面给大家介绍其中的最强「神器」 Apifox. Apifox 官网:apifox.cn 在 ...

  2. Lumia1520 手机刷 Windows10 arm双系统

    注意问题 升级到Windows 10 Mobile 的需重新刷回WP8.1,否则解锁会失败 部分手机刷机win10arm后出现屏幕卡死现象,目前除了换屏或重新焊接暂无其他解决方案,请谨慎刷机(当然如果 ...

  3. IDEA Debug过程中使用Drop Frame或Reset Frame实现操作回退

    大家在Debug程序的时候,是否遇到过因为"下一步"按太快,而导致跳过了想要深入分析的那段代码?是不是很想要有"回到上一步"这样的操作呢? 在IDEA中就提供了 ...

  4. contact 和 footer 的页面制作

    1. html 结构 <section id="contact"> <div class="contact-form bg-primary p-2&qu ...

  5. Python获取文件夹下的所有文件名

    1 #获取文件夹内的图片 2 import os 3 def get_imlist(path): 4 return [os.path.join(path,f) for f in os.listdir( ...

  6. SpringBoot 如何统一后端返回格式

    在前后端分离的项目中后端返回的格式一定要友好,不然会对前端的开发人员带来很多的工作量.那么SpringBoot如何做到统一的后端返回格式呢?今天我们一起来看看. 为什么要对SpringBoot返回统一 ...

  7. 攻防世界-MISC:Aesop_secret

    这是攻防世界高手进阶区的的第九题,题目如下: 点击下载附件一,得到一个压缩包,解压后得到一张GIF动图,找个网站给他分解一下,得到如下图片 不知道是什么意思,所以就跑去看WP了,用010editor打 ...

  8. Bootstrap Blazor 模板使用(一)Layout 组件

    原文链接:https://www.cnblogs.com/ysmc/p/16197223.html BootstrapBlazor 官网地址:https://www.blazor.zone Boots ...

  9. [STL] deque 双端队列

  10. 操作系统深度研究(75页PPT)

    上一篇:命令行版的斗地主你玩过没? 内容覆盖操作系统基本概念.分类.关键技术,体系架构,发展历程和主流国产操作系统厂商分析. 文中报告节选自兴业证券经济与金融研究院已公开发布研究报告,具体报告内容及相 ...