Recompose provides helper functions to stream props using an Observable library of your choice into React. This lesson shows you how to configure Recompose to use RxJS then create a Streaming Component with Recompose’s componentFromStream helper function.

import React from "react"
import { render } from "react-dom"
import { Observable } from "rxjs"
import config from "recompose/rxjsObservableConfig"
import {
setObservableConfig,
componentFromStream
} from "recompose" setObservableConfig(config) /*
APP Start
*/ const App = componentFromStream(props$ => props$.map(props => <h1>{props.message}</h1>)) render(<App message="Hello World!" />, document.getElementById("root"))

[Recompose] Configure Recompose to Build React Components from RxJS Streams的更多相关文章

  1. [React] Recompose: Theme React Components Live with Context

    SASS Bootstrap allows us to configure theme or branding variables that affect all components (e.g. P ...

  2. [Recompose] Create Stream Behaviors to Push Props in React Components with mapPropsStream

    Rather than using Components to push streams into other Components, mapPropsStream allows you to cre ...

  3. [React] Styling React Components With Aphrodite

    Aphrodite is a library styling React components. You get all the benefits of inline styles (encapsul ...

  4. Rendering React components to the document body

    React一个比较好用的功能是其简单的API,一个组件可以简单到一个return了组件结构的render函数.除了一个简单的函数之外,我们还有了一段有用且可复用的代码片段. 问题 不过有时候可能会受到 ...

  5. React Components Template

    React Components Template "use strict"; /** * * @author xgqfrms * @license MIT * @copyrigh ...

  6. Installing Wine 1.5: configure: error: Cannot build a 32-bit program, you need to install 32-bit development libraries(转载)

    Installing Wine 1.5: configure: error: Cannot build a 32-bit program, you need to install 32-bit dev ...

  7. [React] Create and import React components with Markdown using MDXC

    In this lesson I demonstrate how to use the library MDXC to create and import React components with ...

  8. React Components之间的通信方式了解下

    先来几个术语: 官方 我的说法 对应代码 React element React元素 let element=<span>A爆了</span> Component 组件 cla ...

  9. [Poi] Use Markdown as React Components by Adding a Webpack Loader to Poi

    Poi ships with many webpack loaders included, but you may run into scenarios where you'll need to cu ...

随机推荐

  1. js邮箱,汉字,数字 表单验证

    //电子邮箱验证 function isEmail(str) { var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_ ...

  2. cx-oracle-------------------安装

    这个东西弄完就报错.... 这个是Oracle官方的方法:https://oracle.github.io/odpi/doc/installation.html#windows 然而,你懂的,不能用啊 ...

  3. BZOJ 2141 排队(CDQ分治)

    我们把每一次交换看做两个插入两个删除.然后就是一个三维偏序.时间一维,下标一维,权值一维. #include<iostream> #include<cstring> #incl ...

  4. react-native 编译报错: undefined is not an object (evaluating '_react2.PropTypes.func')

    情况通报: 因为是我的二维码模块报错,提示报错代码如下 重要信息是下面的红色字体部分(Android 模拟器红屏) undefined is not an object (evaluating '_r ...

  5. [Luogu]P3338 [ZJOI2014]力(FFT)

    题目描述 给出\(n\)个数\(q_i\),给出\(F_j\)的定义如下: \(F_j = \sum_{i<j}\frac{q_i q_j}{(i-j)^2 }-\sum_{i>j}\fr ...

  6. 4.有关日期格式属性改动常识,v$nls_parameters,between and,查询指定部门的员工信息,in和null,like模糊查询,order by后面能够跟:列名、表达式、别名、序号

     1 有关日期格式属性改动常识 NLS_DATE_FORMAT           DD-MON-RR select sysdate from dual; NLS_CURRENCY         ...

  7. SpringMVC+Jquery -页面异步载入数据

    背景: 做项目时涉及到页面.当我打算在controller中传一个list到页面,然后通过<c:foreach>循环遍历出来时,同事说:你这样每次都要刷新.这都是几百年前使用的技术了.你用 ...

  8. [MST] Defining Asynchronous Processes Using Flow

    In real life scenarios, many operations on our data are asynchronous. For example, because additiona ...

  9. Android 4.4 KitKat NotificationManagerService使用具体解释与原理分析(二)__原理分析

    前置文章: <Android 4.4 KitKat NotificationManagerService使用具体解释与原理分析(一)__使用具体解释> 转载请务必注明出处:http://b ...

  10. 设计模式-策略模式(Go语言描写叙述)

    好久没有更新博客了.近期也是在忙着充电,今天这篇博客開始,我们来了解一下设计模式. 设计模式 那什么是设计模式呢?首先来看看我从百科上copy下来的概念吧. 设计模式/软件设计模式(Design pa ...