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 ...
随机推荐
- SSDB 数据库
SSDB数据库 SSDB是一套基于LevelDB存储引擎的非关系型数据库(NOSQL),可用于取代Redis,更适合海量数据的存储. 另外,rocksdb是FB在LevelDB的二次开发版本,因此也存 ...
- 本地计算机 上的 Redis Server 服务启动后停止
服务器上Redis服务安装正常..却启动不了.. 报错 : 本地计算机 上的 Redis Server 服务启动后停止.某些服务在未由其他服务或程序使用时将自动停止. 最后发现是Redis的配置 ...
- Properties类的使用方法
它提供了几个主要的方法: 1. getProperty ( String key),用指定的键在此属性列表中搜索属性.也就是通过参数 key ,得到 key 所对应的 value. 2. load ( ...
- aperm方法
本文原创,转载请注明出处,本人Q1273314690(交流学习) 感觉很多地方提到了aperm,但都没讲清楚,我自己参考了大家的资料,做了下总结,希望能够让对大家有所帮助. aperm方法 Tran ...
- firstchild.data与childNodes[0].nodeValue意思(转)
x.firstchild.data:获取元素第一个子节点的数据: x.childNodes[0]::获取元素第一个子节点; x.childNodes[0].nodeValue.:也是获取元素第一个子节 ...
- 终端下使用cocopods
http://blog.csdn.net/showhilllee/article/details/38398119
- 浅谈checkpoint与内存缓存
事务日志存在检查点checkpoint,把内存中脏数据库写入磁盘,以减少故障恢复的时间,在此之前有必要提下SQL Server内存到底存放了哪些数据? SQL Server内存使用 对SQL Serv ...
- PHP 文件与目录操作函数总结
>>>文件操作 打开 fopen(); 打开文件 读取内容 fread(); 从文件指针 handle 读取最多 length 个字节 readfile(); 读入 ...
- Linux 之安装文件
1.首先要检查 rpm -q gcc glibc glibc-common rrdtool rrdtool-devel expat expat-devel pcre pcre-devel dejavu ...
- Windows下MySQL 5.6安装及配置详细图解
一.安装前的准备 1.下载安装程序包,可到MySQL官方网站http://www.mysql.com/下载,如图1-1: 图1-1 下载后的安装文件如图1-2所示: 图1-2 二.安装 1.双击下载的 ...