💪 Top Posts
Introduction to Bulma CSS with React
In this article you will learn the basics of using Bulma components in your React apps using the react-bulma-components library.
Introduction to Using Redux in a React Native App
Here's our introduction to using the Redux state management library in a React Native app.
Using Axios with React
Axios is an easy to use HTTP client. Learn how to use it within your React applications.
— Sorry to interrupt this program! 📺
Given the current situation with COVID-19, times are hard for most of us, but if you're stuck at home you can perhaps use that extra time to work on your React skills. Wes put all of his courses at 50% off to help out with the current challenge we're facing.
Plus, these are affiliate links, so if you purchase a course you help Alligator.io continue to exist at the same time! 🙏
A Sneak Peek at React Router v6
A look at the new features and changes coming up with the release of React Router version 6.
Building a CRUD App with React Hooks & the Context API
Get an easy handle on how to build a simple React CRUD application using hooks and the context API.
A Simple Guide to Error Boundaries in React
With simple code snippets and interactive demos, you'll learn about Error Boundaries in React; a way for components to degrade gracefully in cases of errors.
5 Tips to Improve the Performance of Your React Apps
Here's an up-to-date (March 2020) guide on performance optimization for React apps. We'll cover things such as memo, PureComponent, React.lazy and Suspense.
Styling React Native Apps
A short and easy guide to get you up to speed on how to style a React Native app if you're coming over from CSS.
Create Staggering Animations in React
How to create visually appealing entrance/exit animations with React, styled-components (or your CSS-in-JS lib of choice) and the CSS transition-delay property.
A Look at the React Native Elements UI Toolkit
Here's how to style your React Native components using the React Native Elements cross platform UI toolkit.
Loading React Components Dynamically with Hooks
In this post I demonstrate how to load React components dynamically using hooks such as useEffect and useState.
Animating React Components Using React Transition Group
Learn how to trigger animations during the mounting and unmounting stages of your React components using React Transition Group.
Learning the Basic Components of React Native
Exploring the basic components in React Native: View, Text, Button, Image, ImageBackground, TouchableHighlight, ScrollView, FlatList...
Internationalization in React with React-Intl
An introduction to the React-Intl internationalization (i18n) library for React apps.
Exploring the Chakra UI React Component Library
Learn the basics of creating modular, responsive, and accessible components for React using Chakra UI.
Write three.js in React Using react-three-fiber
Change your approach of writing 3D using three.js, leveraging React and using the react-three-fiber library.
MobX with React Native, Simplified
Learn how to integrate the MobX library in a React Native App for easy state management by building a simple app that makes use of the Unsplash API.
A Look at the React useMemo Hook
Understanding the React useMemo built-in hook and how it can be used for memoization and improving the performance of expensive functions in your apps.
Understanding the React useReducer Hook
An overview of React's useReducer hook, which allows to access state and dispatch actions to your store from your functional components.
The React useContext Hook in a Nutshell
An introductory guide to React's useContext Hook to gain access to a global state via the Context API.
Countdown Timer with React Hooks
Learn how to build an automatically updating countdown timer in React using Reach hooks.
Manage User Login with React Context
A straightforward way to understand the React Context API to manage user state inside your apps.
Creating Complex Animations in React Using react-spring
Here's a tutorial where I use react-spring and the help of the useSprings, useTrail and useChain hooks to create complex animations in React.
react-notifications-component, a Powerful React Notifications Library
The react-notifications-component React component library will save you tons of time with notifications inside of your React apps.
Intro to Animations in React Using React Spring
Learn how to create dynamic physics-based animations in your React apps using the react-spring spring-physics animation library.
A Guide for Refs in React
Here's how to use the createRef method or the useRef hook to interact with DOM nodes directly in your React apps.
Getting to Grips with React.Memo
Learn how to use React.Memo to improve the performance of your React applications.
Making React Apps More Accessible
Learn some simple ways to make your React app more accessible. These tips will focus on common issues for React apps but can be applied to any framework.
What's New in React v16.9
In this article you will learn about what's new in React v16.9
Progress Bar On Page Scroll Using React and styled-components
Learn how to implement a progress bar when scrolling on a page, using React and styled-components.
Getting to Grips with react-window
Learn how to use react-window to improve the performance of your React apps and achieve a frame rate of 60 FPS.
Back to Basics: Event Handling in React
In this article we cover handling events for React apps with some of the popular events like click and text input.
Back to Basic: What are Props in React and How to They Work?
Let's remove the mystique behind what React props are: they're just function arguments!
An Easy Way to Know When React Components Enter the Browser Viewport
Use the React Visibility Sensor library to determine when React components have entered the viewport.
Progressive Enhancements for Loading Images Using React Image
You can't always tell when an image will fail, but you can prepare for it, thanks to the React Image library for React apps!
React Icons Gets You Access to Hundreds of Open Source Icons
Font Awesome and Material Design icons are just some of the icon libraries included with React Icons, a library for icons in your React apps.
Get a Performance Boost in React with PureComponent
Learn how pure components work in React and why they're useful via some handy visual learning aids that'll help you grasp the concept in no time.
Build a Beautiful Photo Gallery PWA with React + JHipster
This post shows you how to build a photo gallery progressive web app with Spring Boot, React, and JHipster 5. It uses OAuth's authorization code for authorization and OIDC for authentication. It extracts EXIF metadata from images, and displays them on the UI in a flexible grid format like Flickr does. sponsored
Using Lightboxes to Create Stunning Image Galleries in React
Learn how to use the fslightbox-react package to create sleek image galleries in your React apps.
Adding Sound FX to Your React Apps
Learn how to use the UIfx library to employ sound effects for your React web apps.
Extracting Dominant Colors From Images in React Using react-palette
Here's how to get colors from an image in React using an npm package called react-palette.
How to Craft Animations in React with React Simple Animate
Using "react-simple-animate", learn how to create sophisticated animations using simple APIs
Super Clean, Refactor-Friendly Import Statements in React
Use absolute imports with Create React App 3 to get super clean, refactor-friendly import statements.
Take a Tour: New Features in Create React App v3
Here's a handy guide to get up-to-speed with the latest release of Create React App, version 3.
Learn How to Build Responsive Websites in React Without CSS
Build responsive websites in React without using CSS @media queries. It's a lot easier than you think.
Battle of the Routers: Reach Router vs React Router
Let's see how Reach Router compares with React Router by looking at side-by-side code snippets.
Getting 60fps Animations in React
Some tips and tricks for React.js developers to create smooth, fast and fluid 60fps animations.
Replacing Component Lifecycles with the useEffect Hook, in React
A walkthrough to help you convert React component lifecycles into Hooks using the useEffect Hook.
Creating Admin Interfaces in React with react-admin
In this post we'll learn how to create an admin interface easily in React using react-admin.
Introduction to React 360
Let's explore React 360 (aka React VR) and see how it can be used to create immersive 3D and virtual reality experiences on the web.
ReactXP: Building Cross Platform Apps
Let's have a look at ReactXP to build React apps that work on both mobile and on the web with the same codebase. We'll build a really simple app to demonstrate.
Making Progressive Web Apps (PWAs) with React
Here's how to create a Progressive Web App (PWA) using React. We'll make use of Create React App to get a web app manifest and service worker going.
Creating a Live Search Feature in React Using Axios
In this tutorial we'll be building a live/instant search feature in React with the power of the Axios HTTP client.
Tough Actin' ReactN
Learn about how to manage state in React with an alternative state management library option: ReactN.
Using TypeScript with React
Let's go over how to use TypeScript with React functional or class-based components. In this post we also make use of the Parcel bundler to setup our project.
Convert a React Class-Based Component to a Functional One Using a State Hook
A walk through showing you how to easily convert a class-based component to a functional component using the useState hook in React.
Creating a Button with Gradient Border in React Native
A quick guide on creating a gradient border button component for your React Native apps using Expo's LinearGradient.
Finally Hooked! What's New in React v16.8
Learn about what's new in React v16.8, with React hooks finally making their way into a stable release.
Understanding Constructors with React Components
Learn about the class constructor and how it works for React class-based components. Among other tips, you'll see why it's important to call super() first.
Creating a Real-Time Bitcoin Ticker Dashboard in React
This is a step by step tutorial to create a real-time ticker dashboard for Bitcoin with React framework and Bitcoin APIs using FusionCharts. sponsored
Using Storybook with React & Redux
Learn how to bring all the benefits of Storybook to a Redux codebase without it getting in the way.
Rendering Arrays in React
In this article you will learn about how to properly render arrays in React.
Performant Lists in React with react-window
In this post we'll learn how to efficiently render large lists of data in React using react-window.
React Keys and You
In this article you will learn about keys and their importance in your React app when rendering collections.
What's New in React v16.7
In this quick post you we'll go over what's new in React version 16.7.
Code Splitting with React Suspense
In this article you will learn how to use React Suspense to code split and lazy load React components.
A Brief Introduction to Expo
Want to get started with React Native and Expo, but don't know where to start? This article should be a good starting place. We'll be building a simple weather app.
Introduction to React Hooks
Learn about Hooks, an upcoming feature of React that has a lot of people excited about. We'll look especially as the useState and useEffect hooks.
High Level Introduction to React Static
React Static allows you to build a single-page app (spa) while still taking advantage of the super powers that static sites offer.
Authentication in a React Native App Using AWS Amplify
Here's our introduction to using AWS Mobile Hub and Amplify to provide authentication in a React Native app.
Categorizing Components Into Smart & Dumb Components, in React
How dividing components into smart and dumb (container and presentational) components provides organization, saves time and improves your React apps.
Skeleton screens with React and React Native ☠
Learn how to craft a modern experience for web and mobile in React or React Native using skeleton screens.
Payments with Stripe Checkout and React
How to use react-stripe-checkout to accept credit card payments in a React app using Stripe Checkout.
What's New in React v16.6
With React v16.6 just out, let's go over some of the new features like React.lazy(), Suspense, React.memo(), contextType and getDerivedStateFromError.
Tear-Free Forms with React and Formik
In this article you will learn how to easily build forms with React and Formik.
Styling Components with React Fela
In this article you will learn how to style your React components with React Fela.
Using Geolocation in React Native
Understand how to access Permissions and use Geolocation data in your React Native projects.
Rapid Prototyping Made Easy with React PowerPlug
In this article you will learn how to rapid prototype stateful components with the help of React PowerPlug.
Up and Running With Reakit
Fast lane introduction to the Reakit component library for React.
Beautiful Charts and Graphs with React and Victory
In this article you will learn how create beautiful charts and graphs in React using the Victory components.
Crafting Beautiful UIs in React Using Ant Design
In this post we'll build a basic todo application in React using the Ant Design UI library.
Morphing UI Transitions with React Morph
In this article you will learn how to create morphing UI transitions in React apps using react-morph.
Building a Sidebar Component in React with react-burger-menu
In this post you'll learn how to use the react-burger-menu library to create a nice sidebar in a React application.
Easy State Management with React Values
In this article you will learn about how to easily manage component state with the react-values library.
Building an Autocomplete Component in React
In this article you will learn how to build an autocomplete component in React using only local state and some simple event handlers.
A Brief Introduction to JSX
Use Native Icons in React Native
Use per-platform native icons in your React Native apps using react-native-vector-icons.
Styling React with Emotion
In this article you will learn how to style components in React using the emotion CSS-in-JS library.
Building a Landing Page in React Native Using Flexbox
Here's a quick guide on how to use flexbox styling in your React Native apps to create interesting layouts.
Routing with React Navigation in React Native
A brief introduction to routing using the React Navigation library for React Native.
Red Hot Form Validation for React Using calidation
In this article you will learn how to implement form validation using the calidation library in React.
Linting React Using ESLint with Create React App
Getting started with a linter using Create React App, and how to configure it to meet your project needs.
Custom Inputs in React Native
In this short post you'll learn how to build your own custom text input and select form elements in React Native.
A Roadmap to Becoming a Better React Native Developer in 2018 & Beyond
Just getting started with React Native and confused at how to get started with learning everything? This guide will point you towards some useful resources.
Implementing Infinite Scroll Into a React Component
In this article you will learn how to implement infinite scrolling using React using nothing but component state and an onscroll event handler.
Change Soft Input Mode in React Native Android
Check out how to control the behavior of the screen when the keyboard is opened in Android on a React Native app.
Building an Accordion Component with React
In this article you will learn how to build an Accordion (show/hide) component in React.
Using Font Awesome 5 in React
Building snazzy forms in React using SVG icons from Font Awesome 5. This is part 2 of a series on building forms using Reactstrap.
Testing React / Redux Apps with Jest & Enzyme - Part 4: Testing Redux Reducers
In this 4th part of a series on testing React/Redux apps we'll take a look at testing your app's reducers.
Google Analytics on your React/Redux App with Redux Beacon
Tracking page views, events, or any Redux action in Google Analytics with the help of Redux Beacon, an utility that helps integrate analytics in a Redux app.
Getting Started with React Native and Expo
Drag and Drop File Uploads in React with react-dropzone
In this article you will learn how to use react-dropzone with React to create a nice drag & drop UI for file upload.
Fancy Forms in React with Reactstrap
Highlighting the benefits of using Reactstrap, a library of components based on Bootstrap 4, for forms in React apps.
Using Derived State in React
In this post you'll learn how to use the new getDerivedStateFromProps method in your React components.
Testing React / Redux Apps with Jest & Enzyme - Part 3: Testing Redux Actions
Part three of four-part series that shows you how to test your React / Redux applications. In this installment we'll see about testing Redux actions.
Building a Tabs Component with React
In this article you will learn how to build a simple Tabs component in React.
Add i18n Yourself in a React and Redux App
Learn how you can build a i18n module for React by from scratch without any external library dependencies.
Elegant UX in React with Material-UI
An intro to Material-UI for React, a beautiful and themable component library based on Google's design spec.
Connecting Redux to React Using React Redux
Redux is an independent library from React, but it's really easy to connect the two together, thanks to the React Redux bindings.
Using React Router 4 with Server-Side Rendering
A look at configuring React Router v4 to work with an Express server-side rendering setup. You'll see how to make use of StaticRouter and matchPath, among others.
Testing React / Redux Apps with Jest & Enzyme - Part 2: Testing React Components
Second part in a series showing how to test React apps using Jest and Enzyme. In this part, we'll go over how to test React components.
Using "window" the React Way with react-fns
Use HTML5 APIs in your React apps using a declarative idiom with the react-fns utility library.
Searchable, Async Dropdowns in React Using React-Select
An introduction to React Select v2, a sleek, modern dropdown component for React.
Simple Authorization in React
Tutorial on how to build a simple role-based authorization mechanism yourself for a React app.
Managing What’s in Your Head Using React Helmet
Here's a quick overview of using the React Helmet component to dynamically set header tags for a React app.
An Introduction to React Server-Side Rendering
In this post we'll go over the basic setup to server-side render a simple React app created using create-react-app.
React Devtools: A Brief Introduction
Learn how to spend less time debugging your apps and more time developing using the React Devtools.
Testing React / Redux Apps with Jest & Enzyme - Part 1: Installation & Setup
First of a four-part series that shows you how to test your React / Redux applications using Jest & Enzyme.
A Quick Intro to React's Higher-Order Components
An introduction to higher-order component classes and functions in React as well as what they are used for.
Styling React Components Using glamorous
glamorous is a flavor of CSS-in-JS. In this post, you'll see how you can style your components with it.
Understanding the React Context API
React 16.3 introduced a new context API that makes it easy to share data between multiple components of the component tree. Here's a quick tutorial on how to use it.
Easy State Management in React Using Unstated
Unstated is a new library that makes state management in React dead simple. You can reach for it when you need a little more than setState.
Code Splitting in React Using React Loadable
Learn how to use the React Loadable library to lazily load chunks of code when needed in the app.
Returning Multiple Children Using React Fragments
React 16.2 introduced a new component, Fragment, to give us an easy way to return multiple children in a component's render method. See how it's used in this post.
Animations in React Using React Motion
A quick introduction to React Motion, its Motion component and the spring function to create simple animations.
An Easy Way to Get Started with the MERN Stack
In this post we're exploring how to setup an app using Mongo, React, Redux and Express.
Intro to GraphQL in React Using React Apollo & Apollo Boost
A quick tutorial to learn how to use React Apollo and Apollo Boost to interact with a GraphQL server.
Implementing a Simple Modal Component in React
A quick guide to help you learn how to build a barebones Modal component in React.
This tutorial explains how to create themes to handle reusable styles with styled-components in React.
styled-components, the Modern Way to Handle CSS in React
In this post you'll find an introduction to styled-components and the benefits they can give to your React app.
CSS in React
Using the New Portal Feature in React
Demonstration of how to use the new portal feature in React to help render DOM nodes outside a parent component.
I18n with React and i18next
A brief introduction to internationalizing a React app using i18next.
Getting Started with Webpack + React
A short guide on using Webpack to bundle dependencies with code and deploy a React application.
A New Way to Handle Events in React
Skip boilerplate code and learn how to write more concise event handlers for your React code.
CSS-in-JS Roundup: Styling React Components
Compare and contrast the top CSS-in-JS libraries for styling your React and React Native projects.
Creating Compositional Components in React With this.props.children
Gain a better understanding of the unique perks of this.props.children.
React Native UI Toolkit Roundup
Compare and contrast the top React Native UI Toolkits to help bootstrap your next React Native project.
Gatsby - Not Yo' Mama's Static Site Generator
Gatsby, a React-based static-site generator, combines front-end best-practices with GraphQL-like data sources.
Atomic SetState Updates in React
Learn how to manage React state with functional precision
Using index.js for Fun and Public Interfaces
Use an index.js file in the root of your React module folders to create public interfaces
Using Enums in Flow
Mapping Routes in React Router
A guide to mapping data to routes in React Router 4.
React Router: Optional Parameters
An overview of using optional parameters in React Router 4.
React Router Parameters
An overview of using parameters with React Router 4.
React Router Overview
In this brief introduction to React Router 4 you'll see how to define basic routes as well as link to specific routes.
React Snapshot Testing
An overview of snapshot testing for React components using the Jest testing framework.
Functional Component Overview in React
Learn how to create functional components in React.
Introduction to the React Ref System
An overview of refs in React with sample use cases.
Component Lifecycle Functions in React
An overview of the lifecycle functions available to class components for React apps.
Class Component Overview in React
Learn how to create class components in React as well as using props and lifecycle hooks.
React.PropTypes Is Dead, Long Live PropTypes in React
How to stop worrying and love the new prop-types module for React.
Starting Off Strong with React and Next.js
Get up and running in a snap with Next.js and never look back
Getting Comfortable with Create React App
Learning to let go with Create React App. Initialize new React projects with just one command and without all the usual setup of build tools.
Static Type Checking With Flow
Getting type safe is easy with Facebook's Flow. This short intro will help you get comfortable with Flow's usage.
Working With Types Using React.PropType
A gentle introduction to static type checking using React's built-in PropType validation tools.