React Newsletter #101

Code splitting with React and React Router, 5 practical tips to finally learn React in 2018, and introducing Immer


Articles

Code Splitting with React and React Router

Code splitting has gained popularity recently for its ability to allow you to split your app into separate bundles your users can progressively load. In this post we’ll take a look at not only what code splitting is and how to do it, but also how to implement it with React Router.

5 practical tips to finally learn React in 2018

If you've been on the fence about learning React and still haven't dove in, this article offers some practical advice that will help you get started.

Introducing Immer: Immutability the easy way

Immutable, structurally shared data structures are a great paradigm for storing state. Especially when combined with an event-sourcing architecture. However, there is a cost to pay. In a language like JavaScript where immutability is not built into the language, producing a new state from the previous one is a boring, boiler-platy task. And still; most of them don’t solve the root problem: lack of language support. So what if we stopped fighting the language and embraced it instead? Without giving up on the elegance provided by persistent data structures. That is exactly what immer does.

React Router v4: Philosophy and Introduction

React Router v4 introduces a new dynamic, component based approach to routing. In this post, you'll look at the philosophies behind React Router and get an introduction to the syntax by breaking down the “Basic” example on the React Router docs.

Practical Redux

I've highlighted this before but wanted to give another shoutout since Mark continues to add posts to it. This is (now) an 11 part series on "Practical Redux" from a Redux core contributor. Whether you're new to Redux or have some experience, you'll learn something.

React, Redux and JavaScript Architecture

This article might seem long-winded. James wants to show you how to write actual React and Redux code. But it will take a while to get there. And there is a reason. Redux is not terribly complicated. But with Redux (like React), understanding why you’d want to use it is much more interesting than how it works. So, though it might take you a little while to get to Redux, I think the journey will be worth it.

Server Rendering, Code Splitting, and Lazy Loading with React Router v4

AirBNB took on the colossal task of code splitting a server rendered app with React Router, and, they succeeded. This article dives into their approach and how they got it to work.


Projects

Want to ship better React Native apps faster? Meet App Center.

From the creators of CodePush. Ship better apps faster by connecting your app’s GitHub repo and automating the rest. After pushing new code, App Center can build your app in the cloud, test it on thousands of real iOS and Android devices, release to beta testers, app stores, or CodePush, and monitor production with crash reports and analytics. Start for free.

reactivesearch

A React components library for building awesome 🔍 search UIs.

Manage Application State with Mobx-state-tree

In this course, Michel Westrate - Creator of Mobx - will teach us how to model application state after your problem domain with Mobx-state-tree (MST). You will be able to manage the lifecycle of your data by describing data models. Models are like React components, but for data!


made with ❤️ by ui.dev