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 ...
随机推荐
- /etc/sysctl.conf参数解释
/etc/sysctl.conf参数解释: fs.file max = 999999 #表示进程(例如一个worker进程)可能同时打开的最大句柄数,直接限制最大并发连接数 net.ipv4.tcp_ ...
- array_fill 用给定的值填充数组
转自:http://www.phpstudy.net/php/165.html PHP array_fill 用给定的值填充数组 array_fill (PHP 4 >= 4.2.0, PHP ...
- ApacheServer-----关于443端口被占用的解决方法
最经公司项目需要经过Apache服务器转发,自己也下载了ApacheServer,但是在启动的过程中,遇到443端口被占用,网上看了一些解决方法,都不对,没有解决问题. 执行启动命令httpd -k ...
- jelq
初级 The Newbie Routine 5 minutes hot wrap 5 minutes manual stretch (ten 30-second stretches) 10 minut ...
- Tomcat 部署详解
前篇大概讲过了tomcat的发布和部署,以及测试. 本篇详细介绍下tomcat的部署相关的内容,本篇主要内容: 1 介绍下部署相关的内容,需要安装的文件以及上下文描述符 2 静态部署——在tomcat ...
- 在c#中运行js脚本(将js文件生成为.dll文件)
原文链接:http://www.cnblogs.com/xhan/archive/2010/10/22/1857992.html 前言: 本来在搞一个Google翻译的接口--向Google翻译发送请 ...
- 1455.Solitaire(bfs状态混摇)
Solitaire Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...
- Ubuntu 14 编译安装 XDebug - 2.3.3 For PHP - 5.4.45
安装过程如下: 1.下载XDebug源码:http://xdebug.org/files/xdebug-2.3.3.tgz 2.解压到某个目录,如 /opt/software/xdebug-2.3.3 ...
- error C2504 类的多层继承 头文件包含
error C2504:头文件包含不全 今天碰到了很烦的问题,继承一个类之后,感觉头文件都包含了,可还是出现父类未定义的问题,最后发现,子类的子类在实现时,需要在cpp文件中包含所有他的父类的定义.因 ...
- linux运维人员必会开源运维工具体系
http://oldboy.blog.51cto.com/2561410/775056