Check out the third edition of our React newsletter:
React in the real world
Slack used React to rebuild their Emoji PickerPacking many features, this complex component was created using react-virtualized. This library supports the loading of huge amounts of data in several presentation formats, while keeping top performance. Pure components were also used, and Storybook was used internally. This kind of example showcases the low impact of adding React to a project.
Absolute import paths in ReactA persistent inconvenience while developing medium and large React projects are relative import file paths.
Lines like
are a common sight, and hinders the ability to move components and alter the file structure without significant effort. This article explains how to add a source path to the .env file, so that import paths can start being absolute, like this:
The explanation is for create-react-app, but it can be implemented in any project with .env files.
Worse is Better: The Upside of JavaScript FatigueIn this talk, Kevin Lacker explains why it may be a good sign that developers are experiencing JavaScript fatigue due to the pace of the development in the React world. He also proposes ways to deal with this fatigue and how to overcome it. This talk is one of many that took place in React Europe on May 18-19, check out their youtube playlist to watch other interesting talks.
Libraries
Some noteworthy libraries for this edition:
styled-components allows for a different approach in styling components. Through the creation of variables in the component itself, we can define styles that are going to be automatically applied to the component tags, avoiding the mapping between tags and styles.
react-elemap. Naming in React can get tiring, specially if following a convention to avoid name collisions. Events, props and styles names are an example of this. With react-elemap, this naming can be done automatically while following rules you can declare. This way, naming will be consistent throughout the code with little effort.
redux-persist. Sometimes it can be useful to keep the redux state between refreshes. A custom solution can be created for this, but redux-persist allows to persist the state, even providing fine-grain controls to do it in a per reducer basis.
Tools
https://github.atom.io/ - Atom added native integration to Github. This allows developers to perform their workflow without leaving Atom. Branches, stages, commits, pull requests, conflict resolution and, of course, pushing and pulling are all supported from within Atom.
https://prepack.io/ - This tool is still on development stage and should not be used in production. Its objective is to improve performance through code optimization. At build time it will detect computations that can be simplified and replaced by optimized code. This enables developers to write code in a clearer and more verbose way, knowing that prepack will optimize unnecessary computations.
