React Newsletter #175

Writing cleaner code in React apps, building React components using children props and Context API, and Asynchronous cat fetching with Redux-Sage


Articles

14 Beneficial Tips to Write Cleaner Code in React Apps

Every developer wrestles with how to write cleaner code. This article gives 14 practical tips for how to do just that when developing a React app.

Building React Components Using Children Props and Context API

React provides a number of powerful patterns to compose components, including Containment, Specialization, and Render Props. This article dives into the Containment pattern and provides some helpful examples.


Tutorials

Asynchronous cat fetching with Redux-Saga

In this article you’ll go over setting up a simple web app that will handle asynchronously fetching data from a public api using redux saga. By the end of this walk through you should have an understanding of how to handle asynchronous actions using redux-saga.

Build a "Not Hotdog" clone with React Native

In this tutorial, you'll learn how to use React Native and Google's Vision API to build a working model of the "Not Hotdog" application from HBO's Silicon Valley.


Sponsor

React developers are in demand on Vettery

Vettery is an online hiring marketplace that's changing the way people hire and get hired. Ready for a bold career move? Make a free profile, name your salary, and connect with hiring managers from top employers today.


Projects

Reactime - React Debugger Chrome Extension

Reactime is a Chrome extension/npm package that helps debug React by memorizing the state of components with every render. It records state whenever state is changed and allows user to jump to any previous recorded state. It currently works only with stateful components (so not Redux, Hooks, or Context).

Blackjack card game

Blackjack card game built in React, using TypeScript

React Hooks Examples

This project shows three basic ways to use the useState, useEffect, and useContext hooks in three different examples


Videos

Building Todoist using React

In this video, you'll learn how to re-create the popular Todoist list application from scratch using React (Custom Hooks, Context), Firebase & React Testing Library (unit & integration testing). You will be styling the application using SCSS (CSS) and following the BEM naming methodology. The app will be fully responsive once completed.


made with ❤️ by ui.dev