Relay-inspired library based on Promises instead of GraphQL.
Inspired by: Building the Facebook Newsfeed with Relay (React blog)
# For web or Node:
npm install react-transmit
# For React Native:
npm install react-transmit-native
Newsfeed.js (read the comments)
import React from "react";
import Transmit from "react-transmit"; // Import Transmit.
import Story from "./Story";
const Newsfeed = React.createClass({
render () {
const {stories} = this.props; // Fragments are guaranteed.
return <div>{stories.map(story => <Story story={story} />)}</div>;
}
});
// Higher-order component that will fetch data for the above React component.
export default Transmit.createContainer(Newsfeed, {
initialVariables: {
count: 10 // Default variable.
},
fragments: {
// Fragment names become the Transmit prop names.
stories ({count}) {
// This "stories" query returns a Promise composed of 3 other Promises.
return Promise.all([
Story.getFragment("story", {storyId: 1}),
Story.getFragment("story", {storyId: 2}),
Story.getFragment("story", {storyId: 3})
]);
},
somethingDeferred () {
// Return the promise wrapped in a function to mark this fragment as non-critical.
return () => Promise.resolve(true);
}
}
});
Story.js (read the comments)
import React from "react";
import Transmit from "react-transmit"; // Import Transmit.
const Story = React.createClass({
render () {
const {story} = this.props; // Fragments are guaranteed.
return <p>{story.content}</p>;
}
});
export default Transmit.createContainer(Story, {
fragments: {
// This "story" fragment returns a Fetch API promise.
story ({storyId}) {
return fetch("https://some.api/stories/" + storyId).then(res => res.json());
}
}
});
See DOCS.md
Let's start one together! After you ★Star this project, follow me @Ryguon Twitter.
BSD 3-Clause license. Copyright © 2015, Rick Wong. All rights reserved.
react中的状态机 by Shawn McKay 肖恩·麦凯(Shawn McKay) 在基于状态图的状态机上使用React的模式 (Patterns for using React with Statechart-based state machines) Statecharts and state machines offer a promising path for designing a
前言 学习React不久,觉得实战才是检验自己学习程度的最好方法,也顺便加深一下自己对React的理解,于是做了这么一个小项目分享一下。 技术栈 react react-router react-redux less 预览图 基本项目搭建 node开发环境 安装依赖: yarn 项目启动: yarn start 涉及到第三方API接口,小伙伴们可以自己去接口地址申请一个appkey,毕竟请求次数也
React在前端领域开启了一个新的时代。随着Facebook发布并开源React,它迅速成为大量技术公司 运用在生产环境中的一款流行的库。在本文中,我们将会讨论的是一个全新的React附属框架——Relay。 React中数据获取存在的问题 由于React正在变得越发流行,使用React构建的项目的规模和复杂度也随之增加。 由于React只是一个视图层的库,这使得某些团队需要在不同的基础设施上构建
(1) Suspense的使用: import React,{ Suspense } from "react"; const LazyComponent = React.lazy(() => import('./LazyComponent')); function MyComponent() { return ( <div className='box'> <Suspen
react脚手架umi中跳转路由带值 //父页面传递值 transmit = (record) => { this.props.dispatch( routerRedux.push({ pathname: `/workOrderDetail/index`, state: { processid: this.state.pro
问题内容: 我注意到可以这样导入: …或像这样: 第一个导入模块中的所有内容(请参阅:导入整个模块的内容) 第二个仅导入模块导出(请参阅:导入默认值) 似乎这两种方法是不同的,并且根本上是不兼容的。 为什么它们都起作用? 请参考源代码并解释该机制…我有兴趣了解其工作原理。 ES6常规模块信息回答了该问题。 我在问使模块像这样工作的机制。在这里,它似乎与源代码中的 “ hacky”导出机制有关,但尚
这篇快速上手指南会教你如何将TypeScript与React结合起来使用。 在最后,你将学到: 使用TypeScript和React创建工程 使用TSLint进行代码检查 使用Jest和Enzyme进行测试,以及 使用Redux管理状态 我们会使用create-react-app工具快速搭建工程环境。 这里假设你已经在使用Node.js和npm。 并且已经了解了React的基础知识。 我们之所以使
我已经改用react Native制作跨平台应用程序(虽然没有制作)。我只是想要一个答案,我的问题,反应和反应之间的区别。我在网上搜索了一下,但没有找到合适的答案。
问题内容: 与 哪个更好,为什么? 还是除了以后编写更少的代码外没有其他区别? 写作是否意味着只导入Component对象? 问题答案: 让您代替。它减少了React名称空间的键入和重复,这通常是一种理想的现代编码约定。 此外,Webpack 2和Rollup之类的工具会“摇晃”,这意味着任何未使用的导出都不会捆绑到您的最终代码中。使用/,您可以保证所有React的源代码都将被捆绑。使用,某些工具
本文向大家介绍react-native 启动React Native Packager,包括了react-native 启动React Native Packager的使用技巧和注意事项,需要的朋友参考一下 示例 在最新版本的React Native上,无需运行打包程序。它将自动运行。 默认情况下,这将在端口8081上启动服务器。要指定服务器所在的端口
我正在使用“React admin”创建一个管理界面(前端)。我正在使用spring boot作为我的REST API。我的React应用程序的url是:“http://localhost:3000”。我的spring boot API的url是:“http://localhost:8080”。 下面是CORS配置的spring boot代码,它在一个单独的类中,称为CORSCONFIG: 下面是