Fullstack React is a weekly newsletter about the React ecosystem with an emphasis on useful libraries, tutorials and code. Subscribe to read the best articles each week on React, Flux, GraphQL, Relay, and friends.

Subscribe with Email

Email

No spam, ever. We'll never share your email address and you can opt out at any time.

React with & without Higher Order Components and Lore, a new framework for React

Higher order components in React are commonly used to encapsulate functionality that can then be used throughout an application. In this week's newsletter we've shared a few alternative approaches to sharing common functionality across an application (and no these aren't "alternative facts!").

Also included in this week's newsletter:

A library that uses a higher order component to get the height & width of the user's window.

Reactiflux is a great resource if you have questions about how to do anything in React -- there are channels for almost every topic imaginable in the React ecosystem. The moderators frequently have Q&A sessions with members of the React community and this last week they had a Q&A session with Charlie Cheever, the co-founder of Expo.io & Quora. Read the transcript and get the latest for React Native and Expo.

Tutorials

A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.

But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.

The higher-order component pattern is a popular method of code reuse in React applications. In this article, Michael Jackson goes into detail on another technique he calls "Render Props" that avoid some of the issues that can arise using higher order components.

When using third party JavaScript libraries (like Mapbox) with React, it's a common approach to create a wrapper component to encapsulate all the complexity that can come along with integrating a third party library. In this article, the Mapbox engineering team explores how to integrate Mapbox into React without a wrapper component.

Code

Lore is a framework built on top of Webpack, React, React Router and Redux. Lore contains blueprints for common actions and reducers that it configures using the frameworks conventions.vLore provides access to a set of actions and reducers capable of supporting common CRUD operations, which can then be configured or overridden as required. It also provides pre-built Gulp tasks for publishing to popular platforms like Surge and GitHub Pages. Check it out!

React Sizes is a high-order component that transform window sizes (width and height) into props.
After adding this component, it's easy to check if a user's window is less than 480px and add custom content.

About

Learn React the right way with Fullstack React: The Complete Guide to ReactJS and Friends. If you've already purchased a copy, you automatically get access to the latest changes. If you haven't purchased a copy yet, don't delay and get the most up to date and comprehensive information and tutorials.