JulyNovel-React
写在前面的话
目前,JulyNovel后端框架基本搭建、部署完毕,GraphQL提供的API接口也有着高可用性,数据库里也存了六七百兆爬来的小说数据,是时候开始写前端了。
框架选用
JulyNovel采用的技术栈是React + Antd + Relay
其实我这种展示类网站事实上是完全没必要用React的,还不如直接Asp.net + jQuery + Bootstrap进行开发,还有利于SEO。
怎么说呢,比较适用于小说,排行榜的维护等应用场景。
不过呢,我做JulyNovel就是为了好玩、学习、练手,加上我之前已经用.Net做过类似的了,所以现在选择React作为开发框架。
开始搭建项目基架
首先安装nodejs和npm或者yarn不谈
1.安装官方脚手架create-react-app
2.安装antd
yarn add antd
3.配置antd
yarn add react-app-rewired --dev
yarn add babel-plugin-import --dev
yarn add react-app-rewire-less --dev
可参考antd的配置方式
4.安装relay relay-compiler
yarn add react-relay
yarn add --dev babel-plugin-relay graphql
可参考relay进行配置
5.安装watchman,非必须
自动化监测graphql变化与否
效果展示
首页
待上传
作品详情页
章节阅读页
转载于:https://www.cnblogs.com/jiajin/p/8533325.html
JulyNovel-React相关推荐
- react非常适合入门者学习使用的后台管理框架
项目简介 该项目提供一个非常简洁的后台管理ui界面,非常适合初学者学习使用.项目结构: 项目地址:GitHub项目地址 技术栈 - react - antd - react-router-dom - ...
- 在 react 里使用 antd
在 react 里使用 antd 在 powershell 里npm i antd 引入方式: import '../node_modules/antd/dist/antd.css'
- 在React Hook里使用history.push跳转
在React Hook里使用history.push跳转 react hook里用不了this.props.history的解决方法 首先引入 import { useHistory } from ' ...
- 在react hook里使用mobx(配置mobx依赖)
在powershell里安装依赖 (直接npm i mobx或者npm i mobx-react是会报错的) npm i mobx mobx-react --save save是下载到"de ...
- React router 的 Route 中 component 和 render 属性理解
React router 的 Route 中 component 和 render 属性理解 Route 标签的三个互斥属性 render.component.children Route 就是用来匹 ...
- react 子组件获取变量属性值
刚刚遇到一个问题:子组件属性值绑定了变量,但是在子组件的componentDidMoiunt中拿到的值始终是undefinded.如下: 1 <PieInfo 2 title='有效病案' 3 ...
- 超简单的react和typescript和引入scss项目搭建流程
1.首先我们先创建一个react项目,react官网也有react项目搭建的命令 npx create-react-app my-app cd my-app 2.安装我们项目需要的样式依赖,这个项目我 ...
- React Native之ViewPagerAndroid跳转页面问题
前言: 网上目前react-native的教程较少,加上许多帖子还是用的ES5(2015年6月已发布ES6标准),有些细节很难找到答案,这里把遇到的问题做一个分享,让学习者尽量少踩坑. 出现问题: 1 ...
- http状态404 vscode_VS Code 调试完全攻略(5):基于浏览器的 React 应用
每日前端夜话第344篇 翻译:疯狂的技术宅 作者:Charles Szilagyi 来源:charlesagile 正文共:1750 字 预计阅读时间:7 分钟 这次我们来研究怎样把调试器连接到用 C ...
- react 组件连动效果_react-redux应用之独立组件联动实例
准备工作 先导入必要的库资源 import React, { Component, PropTypes } from 'react' import ReactDOM from 'react-dom' ...
最新文章
- linux 添加路由_linux网络知识:路由策略(ip rule,ip route)
- 微软OOXML正式成为国际标准 更名为OXML
- linux内核网络栈代码的准备知识
- 如何对待逐渐疏远的朋友?
- 201506110135陈若倩词法分析实验报告
- libz mysql_Docker和Mysql:libz.so.1:无法打开共享对象文件:权限被拒绝
- android 取出list第一页数据_Android传递ListObject的用法
- ubuntu安装配置ssmtp
- 计算机必懂的54个英文单词和缩写
- tsql 正则_sql 正则表达式匹配
- 获取请求真实IP地址的工具类
- stats | 广义线性模型(一)——广义线性模型的基本结构及与线性模型的比较...
- 第六章、正弦稳态电路分析
- 和平精英追猎模式怎么没了 和平精英追猎下架原因
- 推荐一个Mac上的软件卸载工具
- vivado配置EMIO(使用vivado配置XDC文件)
- js获取当前浏览器类型 和IE浏览器版本
- 自定义Android键盘
- 小功率恒流源芯片推荐
- 如何使用api调用AI抠图服务
热门文章
- 打印水仙花数oracle,javaScript实现回文数、水仙花数判断和输出斐波那契数列
- 优麒麟桌面闪烁_稳定性持续增强,优麒麟 19.10.1 发布
- 儿童学文字编程python_手把手教你python数字知识
- Apache实验-目录别名
- jeecms添加站点
- PyAutoIt 安装(Windows 版)
- jQuery.Form.js 异步提交表单使用总结
- .net 任务(Task)
- Python:IndentationError: unexpected indent
- putil:一个用于获得处理器和系统相关信息的模块