By Juan Andrés
This newsletter is a summary of the latest news in the React world and a place to showcase noteworthy React developments made in CodigoDelSur.
Most developers face Prop drilling at some point while working on React. When a prop needs to be passed through several components in a tree, most times we are in front of a code smell. In the following links, you will find several strategies to solve this problem, and most importantly, will be advised on which strategies not to use.
- Pass Multiple Children to a React Component with Slots: Passing JSX in props is a powerful feature that allows developers to compose components while avoiding coupling.
- Using Composition and Render Props instead of Context API: After Dan Abramov asked the community to put the composition pattern in the spotlight, several articles where written. This is one of the best ones, it includes live demos and an alternative using Render Props.
- Before You Use Context: Straight from the official documentation, possibly the best and most concise explanation on why to avoid using context (or Redux) for passing props through many levels.
Web developers frequently work closely with UI/UX designers. Most of the time their workflows differ. This means that bridging the gap between the two will result in benefits for both, increasing productivity, reducing rework and using more powerful tools.
- Framer: Used by Dropbox, Pinterest, Twitter, and thousands more, this tool works as a traditional design tool but with the addition of being able to work on responsive design with live updating, animation and gesture design, and integration with real React components and Sketch.
- The Complete Illustrated Flexbox Tutorial: In depth guide on Flexbox. All types of layouts are visually presented together with which attributes are needed for its implementation.
- A Complete Guide to Flexbox: Big illustrations and simple explanations make it the ideal bookmark for quick reference.
Two big companies blog their experience on how they tackled two really different problems. This kind of insight provides invaluable knowledge that can be applied to medium and large sized projects.
- Pinterest - A one year PWA retrospective: After deciding their mobile website had serious problems, Pinterest bit the bullet and created a full PWA. Read about their thoughts and conclusions.
- Building the Google Photos Web UI: Google took on one of the most difficult tasks on web development: a fast, scrubbable, responsive and scalable photo gallery. This in-depth article goes into detail on their reasoning behind every decision and the creative algorithms they used to solve some of their problems.
