meteor 为基础,联合 Apollo + React + React-Router
Graphql with Apollo, Meteor and React:
https://janikvonrotz.ch/2016/10/09/graphql-with-apollo-meteor-and-react/
源代码:https://github.com/janikvonrotz/apometact/blob/master/client/ui/MainLayout.js
======客户端部分
import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { ApolloProvider } from 'react-apollo';
import { Router, Route, Link, browserHistory } from 'react-router'
import { MainLayout, CategoryList, CategoryEdit, DealList, DealEdit, NotFound, Dashboard } from './ui';
import injectTapEventPlugin from 'react-tap-event-plugin';
const networkInterface = createNetworkInterface(`/graphql`);
const client = new ApolloClient({
networkInterface
});
injectTapEventPlugin();
Meteor.startup(() => {
render(<ApolloProvider client={client}>
<Router history={browserHistory}>
<Route component={MainLayout}>
<Route path="/" component={Dashboard}/>
<Route path="/categories" component={CategoryList}/>
<Route path="/category/:id/edit" component={CategoryEdit}/>
<Route path="/deals" component={DealList}/>
<Route path="/deal/:id/edit" component={DealEdit}/>
<Route path="*" component={NotFound}/>
</Route>
</Router>
</ApolloProvider>, document.getElementById('render-target'));
});
meteor 为基础,联合 Apollo + React + React-Router的更多相关文章
- ReactJS React+Redux+Router+antDesign通用高效率开发模板,夜间模式为例
工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说 ...
- Nginx支持 React browser router
修改nginx配置文件,添加try_file配置如下,即可实现对 React browser router 的支持. location / { root /var/www/mysite; try_fi ...
- React+React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆
2018年12月17日更新: 修复在qq浏览器下执行pop跳转时页面错位问题 本文的代码已封装为npm包发布:react-slide-animation-router 在React Router中,想 ...
- react 装 router - yarn add react-router-dom@next
react 装 router yarn add react-router-dom@next
- [React] react+redux+router+webpack+antd环境搭建一版
好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...
- react react使用css
在react 中使用css有以下几种方法 第一种全局使用 app.js import React from 'react'; import Router from "./router&quo ...
- React/React Native 的ES5 ES6写法对照表
//es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...
- React/React Native 的ES5 ES6写法对照表-b
很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...
- [React] React Fundamentals: Integrating Components with D3 and AngularJS
Since React is only interested in the V (view) of MVC, it plays well with other toolkits and framewo ...
随机推荐
- Mac常用命令
~ 当前所在目录# 超级用户提示符$ 普通用户提示符 Alfred2 //呼出 option + space rm -rf //删除文件夹pwd //打印当前目录 print working dire ...
- Linq 中的 left join
Linq 中的 left join 表A User: 表B UserType: Linq: from t in UserType join u in User on t.typeId equal u. ...
- dubbo框架----探索-大型系统架构设计(图解)
对于高并发系统的架构要求: 1. 负载均衡 2.高并发 3.高可用 4.面向服务架构 (Dubbo框架使用) 5.分布式缓存 (redis分布式缓存) 6.分布式全文检索 (solr分分布式全文检索) ...
- GOF业务场景的设计模式-----观察者模式
定义:定义对象间一种一对多的依赖关系,使得当每一个对象改变状态,则所有依赖于它的对象都会得到通知并自动更新. 在软件系统中经常会有这样的需求:如果一个对象的状态发生改变,某些与它相关的对象也要随之做出 ...
- 阿里云Centos配置iptables防火墙
虽说阿里云推出了云盾服务,但是自己再加一层防火墙总归是更安全些,下面是我在阿里云vps上配置防火墙的过程,目前只配置INPUT.OUTPUT和FORWORD都是ACCEPT的规则 一.检查iptabl ...
- java练手 公约数和公倍数
Problem D 公约数和公倍数 时间限制:1000 ms | 内存限制:65535 KB 描述 小明被一个问题给难住了,现在需要你帮帮忙.问题是:给出两个正整数,求出它们的最大公约数和最小 ...
- 【PHP面向对象(OOP)编程入门教程】15.static和const关键字的使用(self::)
static关键字是在类中描述成员属性和成员方法是静态的:静态的成员好处在哪里呢?前面我们声明了“Person”的人类,在“Person”这个类里如果我们加上一个“人所属国家”的属性,这样用“Pers ...
- WPF:依赖属性的应用
依赖属性与一般属性相比,提供了对资源引用.样式.动画.数据绑定.属性值继承.元数据重载以及WPF设计器的继承支持功能的支持. 下面的这个Demo来自<葵花宝典--WPF自学手册>. 1.M ...
- Centos7下搭建LAMP平台环境
1.启用Apache2 Centos7默认已经安装httpd服务,只是没有启动.如果你需要全新安装,可以yum install -y httpd 启动服务:systemctl start httpd. ...
- 如何把你的图标转换成web字体
在这篇教程中,我们将使用一个免费的Web应用程序IcoMoon将矢量图转换成Web字体,然后将生成的字体通过css应用到Web页面中. 通常我们在网站中必不可少的会使用到一些小图标.在正常尺寸下,布局 ...