React Newsletter #103

New context API, styled components v3, and watching out for traps with React and HTML


News

New context API

There's a new context API coming to React and it was just merged. It'll be out in the next minor release.

Styled Components v3

This major release prepares some great features that are yet to come, so be ready for some new and exciting features soon! But for now please read on for what’s in the current (majorly awesome) release.


Articles

React and HTML : Beware of the traps

If you ever used React you may have noticed that you can easily forget how to write real HTML because it adds a layer of abstraction that changes the way a web page is created. But in the end, all code written in JSX gets converted in plain HTML. In this article Elie show you mistakes he's made and why it is important to write good HTML in Single Page Apps.

Do more with less! Using render props


Tutorials

Programmatically navigate with React Router

When building an app with React Router, eventually you'll run into the question of navigating programmatically. Because of the churn that React Router has gone through in the last few years, there are a lot of outdated, and frankly incorrect tutorials out there. The goal of this post is to break down the correct approaches to programmatically navigating with React Router.

A quick Guide to Styled Components with interactive Examples

If you haven't checked our Styled Components yet, this is a great guide that introduces the API with a bunch of practical examples.

Upgrading a create-react-app project to a SSR + code splitting setup

While the default CRA setup can be OK for small projects, it’s not always enough for larger, more complex applications. Luckily, you can improve things, even without ejecting. This article will demonstrate server-side rendering, code splitting with react-loadable, code splitting on the server, and taking benefit of webpack’s chunkNames.


Sponsor

Planning a React Application: Whitepaper

Start your next React project with confidence. Learn strategies for tooling, frontend and UX, testing and performance to boost your (and your team’s) productivity. Get your free copy.


Projects

redux-bundler

Compose a redux store out of smaller bundles of functionality. The core idea is that rather than sprinkling reducers, action constants, action creators, and selectors all over. You create a file with all those related pieces and then compose those "bundles" into a redux store.

Undux

Dead simple state management for React.

react-hot-loader-loader

A Webpack Loader that automatically insert react-hot-loader to your app, without any changes in your app code. All it takes is a simple regex to indicate where your "App" Components are.


Videos

Debouncing Events in React

In this video Elijah talks about debouncing events when using the React library. You might think this would be might be a trivial task, but there are some interesting things you need to keep in mind that may surprise you.


made with ❤️ by ui.dev