React Newsletter #114

Introducing the React Context API, how to use OpenCV in React Native for image processing, and developing web apps with ASP.NET Core 2.0 and React


News

Free Online React Bootcamp Recordings

If you missed it, here are all the recordings and material from our free React bootcamp.


Articles

Introducing the React Context API

The new React Context API is touted (at least on Twitter and a number of articles) as solving the need to use a state management tool, when Leigh Halliday thinks in reality what it solves is easy dependency injection: Take something that lives at the top of your app and directly inject it into a lower level component without having to pass it all the way down.

Speaking of web layouts. Introducing the Magic Hat technique

Should we reduce the complexity of our layouts, let the user go where they need to go with clear paths and decision points? How can we organize information to reduce cognitive load? Read this article and find out.


Tutorials

How to Use OpenCV in React Native for Image Processing

If you have ever wondered how to process your images using OpenCV with React Native, then you’re in the right place. OpenCV together with React Native enables you to process images on mobile devices (most likely you’d like to process images taken by your device’s camera).

Developing Web Apps with ASP.NET Core 2.0 and React - Part 1

In this series of posts, starting with this one, you will build a Web application based on ASP.NET Core 2.0 and React. To solve the identity management feature, you will integrate this stack with Auth0. In this first part of the series, you are going to use ASP.NET Core 2.0 to develop the APIs of your application.


Sponsor

A complete toolkit of React Components from Zippytech

Zippytech React Toolkit is a UI library with the most useful React components you need, all in one place. They are open-source and fully documented, so you can start using them right-away. Ship faster, stop rewriting what's already been done!


Projects

React lifecycle methods diagram

An interactive version of React Lifecycle Methods diagram tweeted by Dan Abramov. Built in React, obviously. By Wojciech Maj

Albumspot-ify

Album art guessing game using Spotify API! Every once in a while I like to showcase random fun projects made with React, especially when they're made by people new to React; this is one of those projects.

react-path-recognizer: Path recognizing component for React

react-path-recognizer is a simple component to recognize predefined paths. You can easily define your own paths, and have them automatically recognized. You can use it to control a game or a user interface. Also, the CustomFilter feature gives you a precise control to fine-tune the recognizing algorithm.


Videos

Breaking Down Your React App

In this talk, you will learn how to compose your application of independent building blocks that you can easily reuse or replace with better ones. If you embrace this idea, you can keep your platform tidy and maintainable. If you don’t – well, you can write React spaghetti code just as easily as you can write jQuery spaghetti code.

Polyfill React 16.3 New Lifecycle Hooks

In this video Elijah Manor looks at how to bring backwards compatibility when using the new React 16.3 lifecycle hooks. The react-lifecycles-compat polyfill will allow the getDerivedStateFromProps and getSnapshotBeforeUpdate methods to work in older versions of React.


made with ❤️ by ui.dev