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. 监控RMAN操作进度的脚本

    REM ------------------------------- REM Script to monitor rman backup/restore operations REM To run ...

  2. BZOJ 2287 【POJ Challenge】消失之物(DP+容斥)

    2287: [POJ Challenge]消失之物 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 986  Solved: 572[Submit][S ...

  3. 【Tool】Linux下的Spark安装及使用

    1. 确保自己的电脑安装了JAVA Development Kit JDK, 用来编译Java应用, 如 Apache Ant, Apache Maven, Eclipse. 这里是我们安装Spark ...

  4. 通过nodeSelector配置项实现pod部署至指定node

    Node节点添加标签 [root@node1 work]# kubectl label nodes node1 node=master --overwrite node/node1 labeled [ ...

  5. oracle和mysql的分页

    如果我们是通过JDBC的方式访问数据库,那么就有必要根据数据库类型采取不同的SQL分页语句,对于MySql数据库,我们可以采用limit语句进行分页,对于Oracle数据库,我们可以采用rownum的 ...

  6. virt-install 创建虚拟机

    [root@kvm-server vm]# qemu-img create -f qcow2 centos69b-disk0.qcow2 10G Formatting 'centos69b-disk0 ...

  7. 微信小程序的开启授权,当单机取消授权后 再次授权

    //单机去搜索 toSearch:function(){ this.getLocation(res => { console.log('成功') wx.navigateTo({ url: `.. ...

  8. nginx proxy_set_header设置,自定义header

    在实际应用中,我们可能需要获取用户的ip地址,比如做异地登陆的判断,或者统计ip访问次数等,通常情况下我们使用request.getRemoteAddr()就可以获取到客户端ip,但是当我们使用了ng ...

  9. hdu5282 最长公共子序列的变形

    pid=5282">http://acm.hdu.edu.cn/showproblem.php?pid=5282 Problem Description Xuejiejie loves ...

  10. RvmTranslator7.1

    RvmTranslator7.1 eryar@163.com RvmTranslator can translate the RVM file exported by AVEVA Plant(PDMS ...