React Newsletter #170

Build a React switch toggle component, animating React with Framer Motion, and a visual editor for GraphQL


Articles

Premature Optimize the Heck Out of Your React Apps Using Memoization

This article will take a simple non-optimized React app and then incrementally improve the app's performance by using the useCallback and useMemo hooks, along with the React.memo higher order component.


Tutorials

Build a React Switch Toggle Component

Learn how to build a React switch component using the native HTML checkbox input! You’ll learn plenty about React checkboxes in the process.

Animate React with Framer Motion

Framer-motion is a library that powers animations in Framer. It has a very simple declarative API that makes it easy to create and orchestrate complex animations with a minimal amount of code. In this article, you’ll start with very basic animations and gradually move to the more advanced ones.


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

"graphql-editor: Visual Editor for GraphQL.

GraphQLEditor makes it easier to understand GrapHQL schemas. Create a schema by joining visual blocks. GraphQLEditor will transform them into code. With GraphQLEditor you can create visual diagrams without writing any code or present your schema in a nice way.

Introducing Conference App in a Box

Deploy a themeable, customizable, full stack and cross-platform mobile app for your next event in minutes.

search-ui

A React library that allows you to quickly implement search experiences without re-inventing the wheel. Use it with Elastic App Search or Elastic Site Search to have a search experience up and running in minutes.

react-element-scroll-hook

A react hook to use the scroll information of an element.

react-chaos

React Chaos is currently a higher order component that will randomly throw Errors in the component it wraps. The likelihood for the error to throw is based on a level you set when you wrap a component.


Videos

Full Stack React & Firebase Tutorial - Build a social media app

In this full tutorial course, you will learn how to create a full stack, fully-featured social media application using React, Firebase, Redux, Express, and Material-UI. This intermediate tutorial covers things such as creating a backend REST API server with Node.js and Express, user login and authentication, image uploads, notifications, cloud functions, deploying to Firebase, and much more.

Crash Course: Headless WordPress with WPGraphQL, ACF, and React

In this crash course, you'll go over the basics of how to get a simple headless WordPress setup with WPGraphQL and React.


made with ❤️ by ui.dev