Learn Mdx, Recompose and Xstream

***Note: Active maintenance for Recompose has been discontinued since the announcement for React hooks. Your existing code using Recompose will still work. Recompose is not compatible with RxJS version 6 and beyond. You can read more about the decision [here.](https://github.com/acdlite/recompose/issues/756#issuecomment-438674573)*** 


Loading data and handling events almost always introduces layers of complexity into React apps. Recompose and RxJS solve your async problems by using Streams to output components. This course walks you through combining the powers of React and RxJS to stream data into JSX with streaming patterns and pure React components.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Build React Components from Streams with RxJS and Recompose

In this course, you will learn to use many of the most powerful and convenient higher-order components within Recompose by coding several real-world examples. Using recompose looks very different from “vanilla” React; so you will also get comfortable with the look and feel of a “recomposed” component. The best part is no more need for class components! You’ll learn how to use Recompose to both modify components and also create your own higher-order components.

Higher Order Components with Functional Patterns Using Recompose

MDX has grown rapidly since the first commit two and a half years ago. We'd like to celebrate our accomplishments so far, and talk about what lies ahead. We've got lots of plans.
Learn how MDX increases developer productivity, improves educational content authoring, and even peek behind the curtains to see how MDX works.

MDX is an authorable format that lets you seamlessly use JSX in your markdown documents. You can import components, like interactive charts or notifications, and export metadata. This makes writing long-form content with components a blast.



MDX Conf 2020

When you declare your Component and Props in JSX, you can pass those props along to your [RxJS](/q/rxjs) stream. This is typically done using `switchMap` or `combineLatest` where you can grab from the props from your `props$` stream and push them into another stream.

Pass a React Prop to a Stream in RxJS

Jonathan Bakebwa introduces MDX support for VueJS and NuxtJS while also using Chakra UI Vue for MDX components

MDX and VueJS/NuxtJS

Cole Bemis explains how MDX works by taking us though his own journey digging into what MDX does under the hood.

Demystifying MDX

Monica Powell, creator of React Ladies, talks through why someone would migrate from Remark to MDX before going into how to do that and what problems you might run into.

Migrating to MDX

Prince Wilson, MDX contributor, takes us through one aspect of his personal site playground and dives deep into interactive code blocks.

Personal Site Playgrounds with MDX

Rodrigo Pombo introduces [Code Hike](https://codehike.org/) and talks through how Code Hike and MDX empower advanced scrolly telling techniques.

The X in MDX

Kathleen McMahon walks us through a real-world MDX digital garden implementation

Digital Gardening with MDX Magic

Learn how to use the 'compose' function to mix together HOCs, even ones from other libraries like 'connect' from redux.

Compose Multiple Higher Order Components Together using Recompose

Learn how to use the 'withState' and 'withHandlers' higher order components to easily add local state to—and create a reusable local state pattern for—your functional stateless components. No need for classes!


Add Local State to a Functional Stateless Component using Recompose

Learn how to use the 'withReducer' higher order component using the alternative reducer form. If you like using reducers in redux, you’ll be able to reuse that same technique but for local state.

Add Local State with Redux-like Reducers using Recompose

Learn the proper patterns for writing a higher order component from scratch.

Write a Higher Order Component from Scratch

Learn how to use the 'mapProps' higher-order component to modify an existing component’s API (its props). 'mapProps' takes incoming props and changes them however you’d like; for example, filtering the props by a field.

Transform Props by using the Recompose mapProps Higher Order Component

Learn how to use the ‘withProps’ higher order component to pre-fill a prop, unable to be overridden.

Lock Props by using the Recompose withProps Higher Order Component

Learn how to use the 'lifecycle' higher-order component to conveniently use hooks without using a class component.

Add Lifecycle Hooks to a Functional Stateless Component using Recompose

Learn how to use the ‘flattenProp’ higher order component to take a single object prop and spread each of its fields out as a prop.

Flatten a Prop using Recompose

Learn how to use the ‘branch’ and ‘renderComponent’ higher-order components to show errors or messaging when your component is in a non-optimal state. Avoid putting extraneous logic to show errors or messaging into your core component by organizing your non-optimal states into custom higher-order components.

Show Error Messages based on Non-Optimal States with Recompose

Learn how to use the ‘branch’ and ‘renderNothing’ higher-order
components to render nothing when a certain prop condition is
met. Sometimes you only want to render a component when valid
props exist or are in a certain condition; ‘renderNothing’ is
an easy way to completely remove the component when you don’t
need to show it.

Render Components Based on Predicates in Recompose

Learn how to use the 'branch' and 'renderComponent' higher-order components to show a spinner while a component loads.

Topics

Instructors

Content Type