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.

New Webpack CLI, Prepack & React Move

The last few weeks we've seen the announcements of quite a few interesting projects and new releases. Prepack, a JavaScript tool for optimizing JavaScript code was announced and Jest 20 with a lot of new features and upgrades was released. The Webpack team also made some hefty improvements to their command line interface (CLI).

Also included in this week's newsletter:

React Move: A library for animating React components

A tutorial on how to increase the performances of functional components

After getting feedback from the community about Webpack being hard to get started with, the Webpack team re-envisioned the CLI. As part of the new CLI, they unveiled a new feature aimed at improving the Webpack user experience. While Webpack is an excellent module bundling tool, it’s also hard for beginners to get started with. What defaults make the most sense? To solve this problem, the team introduced a new scaffolding system that aims to remove the burden from getting started with Webpack.

Jest 20 has twice the amount of changes compared to the previous version, features a complete rewrite of the test runner and adds new testing APIs. The new release enables a new level of customization and configuration for projects all while making it effortless to upgrade.

Tutorials

This short guide will provide you a consistent and reusable development workflow for all React/React Native projects. A consistent development workflow will increase code quality and decrease time spent debugging. In this guide, Sean Groff shows you how to configure your editor to handle your code formatting, linting, and type checking.

Functional components are JavaScript functions that return elements. If you use these components frequently, this tutorial gives you an easy way to bypass some unnecessary processing by the React internals.

Redux is, at its core, an incredibly simple pattern. It saves a current value, runs a single function to update that value when needed, and notifies any subscribers that something has changed.

Despite that simplicity, or perhaps because of it, there's a wide variety of approaches, opinions, and attitudes about how to use Redux. Many of these approaches diverge widely from the concepts and examples that are in the docs.

It's important to distinguish between how Redux actually works, the ways that Redux is intended to be used conceptually, and the nearly infinite number of ways that it's possible to use Redux.

In part 1 of this blog series, Mark Erikson looks at the actual implementation of Redux, what specific limitations and constraints it requires, and why those limitations exist. He also reviews the original intent and design goals for Redux.

Code

Prepack is a tool that optimizes JavaScript source code: Computations that can be done at compile-time instead of run-time get eliminated. Prepack replaces the global code of a JavaScript bundle with equivalent code that is a simple sequence of assignments.

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.