React Newsletter #76

07/06/2017

16,344 Subscribers. Every Tuesday.

Articles

How to write your own Virtual DOM

There are two things you need to know to build your own Virtual DOM. You do not even need to dive into React’s source. Or into source code of any other Virtual DOM implementations. They are so large and complex — but in reality the main part of Virtual DOM can be written in less than ~50 lines of code.


Tutorials

React Pattern: Extract Child Components to Avoid Binding

Here’s a common scenario in React: You’re mapping over an array, and you need each item to call a click handler and with some relevant data. So What’s the Problem? Using an arrow function in the click handler. This means every time render runs, a new function is allocated. This article walks through a solution.

Real-time front-end updates with React, Serverless, and WebSockets on AWS IoT

“Serverless” architectures are getting more popular nowadays, replacing server-based stacks. Serverless doesn’t mean that you don’t have a server though. It only means that you don’t own your servers and even don’t manage them. In this tutorial you’ll learn how to build a real-time front-end with React, Serverless, and WebSockets on AWS IoT.

💅 Styled-Components in Action

Styled-Components is a new CSS tool, created by Max Stoiber and Glen Maddern, which helps you organize CSS in your React project. It also works well with React Native. In this article, this author will walk you through the main concepts of Styled-Components along with coding examples.


Projects

React | Popmotion

Popmotion x React provides a simple interface to bring Popmotion’s tweening, physics and input tracking capabilities to any React component.

It uses the “function as children” pattern, so you can create declarative interactions with the DOM, SVG, Three.js, A-Frame, Pixi… anything that has a React interface.

real-world-react

Real World React apps and their open source codebases for developers to learn from.

react-controlled-form

Flexible, Modular & Controlled Forms for React and Redux. react-controlled-form aims to simplify form management with React and Redux. It ships functional APIs to create your very own form fields and is built with flexibility and customization in mind.

apollo-storybook-decorator

Wrap your React Storybook stories with Apollo Client, provide mocks for isolated UI testing with GraphQL.

formik

Forms in React, without tears.


16,344 Subscribers. Every Tuesday.