Best practices for building a large scale react application

While making a Single Page App with React, it is very easy for your code-base to become unorganized. There are many good libraries in the React ecosystem that can be used to manage certain aspects of the app, this article covers some of them in depth. Other than that, it lists some good practices to follow from the beginning of the project if you have scalability in mind

Introducing Base Web, Uber’s New Design System for Building Websites in React

At Uber, they have hundreds of internal web applications used by developers, product managers, and operations teams—essentially everyone at the company. Since all web applications work differently, it puts additional overhead on our employees to learn how to interact with them most effectively. To solve these issues, Uber assembled a dedicated design and engineering team to come up with a universal system, which resulted in the Base Web design system. Open sourced in 2018, Base Web is a React component library implementing the Base design language that acts as a device-agnostic foundation for quickly and easily creating web applications.

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.

6 tips for better React performance

This article walks through 6 tips for improving your React app's performance.
• Utilize render bail-out techniques
• Avoid inline objects
• Avoid anonymous functions
• Lazy load components that are not instantly needed
• Tweak CSS instead of forcing a component to mount & unmount
• Memoize expensive calculations

How to Avoid the “Boolean Trap” When Designing React Components

What's wrong with this code?
<Button primary>Primary</Button>

<Button secondary>Secondary</Button>

<Button danger>Danger</Button>
Read the article and find out.

Forget about component lifecycles and start thinking in effects

React recently introduced a new way to deal with side effects: the useEffect hook. Translating lifecycle methods to useEffect calls can be confusing at first. It’s confusing because we shouldn’t be translating imperative lifecycle methods to declarative useEffect calls in the first place. This article breaks it down.

Why I don’t use React-Router

One man's beef with React Router and why he doesn't use it.

Don't call a React function component

In this article Kent breaks down the difference between React.createElement and calling a function component directly

How to Handle Async Actions for Global State With React Hooks and Context

In this article, Daishi breaks down various patterns for handling async actions for global state in React.

What Is JavaScript Made Of? | Dan Abramov

In this article, Dan shares a compressed version of the mental model he's developed to give himself more confidence in his understanding of JavaScript. It’s structured like a glossary, with each topic getting a few sentences

Chrome Extension Starter Kit

Built with React, TypeScript, SCSS, Storybook, EsLint, Jest, Bootstrap, & Webpack

Gatsby Theme - Personal Portfolio

Initially this was a personal portfolio made in GatsbyJs, now it's a Gatsby theme available to anyone who wants to tell their work history focusing only on the content.

beautiful-react-hooks

An open source collection of useful React custom hooks with a concise API.

gatsby-plugin-next-seo

Gatsby Plugin SEO makes managing SEO easier in your Gatsby JS project. It fully supports server-side rendering (SSR) with site wide configuration available via the gatsby-config.js plugin options. SEO options can also be tweaked at any moment by importing the main GatsbySeo component and passing in the desired props.

Astuto: A free, open source, self-hosted customer feedback tool 🦊

Astuto helps you collect, manage and prioritize feedback from your users. It was heavily inspired by Canny.io ("astuto" is the Italian translation of the word "canny"), but is self-hosted and open source. Riccardo Graziosi built Astuto for his Master's Thesis in Computer Engineering.

Timeline Component in React

In this 30-minute video, Florin walks through how to build a basic timeline component in React.

Firebase as a React Hook 🔥🎣

In this article, Doug Safreno explains how to use (and how he implemented) useDbDatum / useDbData, two hooks for generically loading data from Firebase RTDB.

10 JavaScript concepts you need to master react

In this article, Reed Barger put together a list of his 10 most essential JavaScript concepts to master in order to become more effective with React, and he provides solid explanations of each concept.

Babel 7.8.0 Released 📣

Highlights:
• ECMAScript 2020 default support (#10811, #10817, #10819, #10843)
• Support every configuration file extension (#10783 and #10903)
• New CLI options (#9144 and #10887)
• Preparing for Babel 8

react-email-editor

React Email Editor is a drag-n-drop email editor component that makes it super easy to add a solid email editor to your React apps. Designs are saved in JSON and can be exported as HTML.

The React Cheatsheet for 2020 📄

This Cheatsheet is broken down into 3 sections - Core Concepts, React Hooks, & Advanced Hooks. It's a helpful resource for React beginners looking to solidify these concepts for the first time, and a valuable reference guide for more experienced React devs.