写在前面的话

目前,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. poi操作word 2007 常用方法总结

    import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io ...

  2. JAVA用email.jar发送邮件

    1 jar包 email.jar包,网上下载 2 源代码 package zjr.amy.emil.test; import java.util.Date; import java.util.Prop ...

  3. WPF——Sharder实现Logo走光动画

    利用WPF的走光动画实现的走光动画. 资源  实例程序 示例代码 LogoEffect logoEffect = }; //要添加走光动画的物体 logo.Effect = logoEffect; D ...

  4. python's metaclass

    [python's metaclass] 和objc中类似,metaclass用于创建一个类对象,但与objc不同的是,objc中每个类对象有各自不同的metaclass,而python中的metac ...

  5. Android开发实战之补间动画和属性动画

    说起动画,其实一点也不陌生,在使用一款app的时候为了优化用户体验,多多少少的,都会加入动画. 安卓中的动画,分为两大类:补间动画和属性动画.本篇博文会详细介绍总结这两大动画,希望本篇博文对你的学习和 ...

  6. 【bzoj2480】Spoj3105 Mod

    2480: Spoj3105 Mod Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 557  Solved: 210[Submit][Status][ ...

  7. 高性能Web服务器Nginx的配置与部署研究(11)应用模块之Memcached模块的两大应用场景

    一.应用场景1 最近在一个项目中,用到了Nginx的Memcached模块,所以就在这个系列教程中提前把Memcached模块拿出来写了.另外发现最近我的 博客文章频频被很多用采集器的网站拿走,帮我发 ...

  8. linux ifconfig显示 command not found

    本人装的是centos7 想看下网络配置 结果显示如图: 正常情况下 ifconfig  是在超级管理员 的所属的目录 sbin/下的命令 现在来查看该目录下. 没有找到,别急 用 yum  sear ...

  9. iOS单选和全选

    在日常开发中单选.多选.全选经常遇到,所以写一个demo放上来供大家参考, 先看效果图: Demo地址:https://github.com/domanc/SingleAndAllSelect.git

  10. android-tip-各种clock的使用

    参考:http://developer.android.com/reference/android/os/SystemClock.html  System.currentTimeMills() 这个函 ...