写在前面的话

目前,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变化与否

效果展示

首页

待上传

作品详情页

章节阅读页

JulyNovel-React的更多相关文章

  1. react组件的生命周期

    写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...

  2. 十分钟介绍mobx与react

    原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...

  3. RxJS + Redux + React = Amazing!(译一)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...

  4. React 入门教程

    React 起源于Facebook内部项目,是一个用来构建用户界面的 javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组件内 ...

  5. 通往全栈工程师的捷径 —— react

    腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...

  6. 2017-1-5 天气雨 React 学习笔记

    官方example 中basic-click-counter <script type="text/babel"> var Counter = React.create ...

  7. RxJS + Redux + React = Amazing!(译二)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...

  8. React在开发中的常用结构以及功能详解

    一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...

  9. React的使用与JSX的转换

    前置技能:Chrome浏览器   一.拿糖:React的使用 React v0.14 RC 发布,主要更新项目: 两个包: React 和 React DOM DOM node refs 无状态的功能 ...

  10. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

随机推荐

  1. 利用redis限制单个时间内某个mac地址的访问次数

    一.思路 用户mac地址唯一,可以作为redis中的key,每次请求进来,利用ttl命令,判断redis中key的剩余时间,如果大于零,则利用incr进行+1操作,然后再与总的限制次数作对比. 二.代 ...

  2. UNITY 内存问题资料收集

    1,https://blog.csdn.net/wetest_tencent/article/details/52130703 2,http://blog.51cto.com/13638120/208 ...

  3. UNITY中使用不安全代码的相关设置

    必须执行以下三个步骤 1,在工程属性中设置:属性-生成-允许不安全代码 2,在Assets目录下增加 smcs.rsp(若打包设置中使用了.net 2.0 subset)或 gmcs.rsp(若打包设 ...

  4. python时间戳、日期、时间转换

    1.str转时间戳 # 字符类型的时间 tss1 = '2013-10-10 23:40:00' # 转为时间数组 timeArray = time.strptime(tss1, "%Y-% ...

  5. url_encode and url_decode in Shell

    之前写过一版 shell下解码url,下面给出另外一个版本 from https://gist.github.com/cdown/1163649 function urlencode() { loca ...

  6. win7+jdk环境变量配置

    进行java开发,首先要安装jdk,安装了jdk后还要进行环境变量配置:1.下载jdk(http://java.sun.com/javase/downloads/index.jsp),我下载的版本是: ...

  7. Ajax 简单实例,其实就是js里面内容有些不同而已(转载)

    这些时间,瞎子也看得见,AJAX正大踏步的朝我们走来.不管我们是拥护也好,反对也罢,还是视而不见,AJAX像一阵潮流,席转了我们所有的人. 关于AJAX的定义也好,大话也好,早有人在网上发表了汗牛充栋 ...

  8. 如何启动jdeveloper中集成的weblogic

    1>运行jdeveloper,打开运行日志,入下图,日志最开始的红框部分就是打开weblogic的命令,将此命令复制出来执行即可打开weblogic 程序员的基础教程:菜鸟程序员

  9. 【原创】cython and python for kenlm

    未经允许不可转载 Kenlm相关知识 Kenlm下载地址 kenlm中文版本训练语言模型 如何使用kenlm训练出来的模型C++版本 关于Kenlm模块的使用及C++源码说明 加载Kenlm模块命令 ...

  10. jdk1.7 环境变量配置

    Windows系统中设置环境变量如下图右击“我的电脑”,选择“属性”. 点击“高级”选项卡,选择“环境变量”.  在“系统环境变量”中设置上面提到的3个环境变量,如果变量已经存在就选择“编辑”,否则选 ...