Tech Stacks

React Overview

React is an open-source JavaScript library for building component-based user interfaces. This component-based architecture allows engineers to quickly prototype and develop complex applications easily by modularizing common functionalities into discrete, reusable UI components, whilst boasting a large user base full of freely available component libraries. Beyond this, React there’s much more to learn about React, such as its virtual DOM, JSX, and a full mobile framework in React Native, and much more – so much more that it can be overwhelming.

To help ease the learning curve, below you’ll find a variety of resources to reference while learning and components and libraries to use with React.

React Learning Resources

Full-Stack Open A full, free course provided by the University of Helsinki that teaches the MERN (MongoDB, Express, React, NodeJS) stack. It also covers TypeScript, GraphQL, React Native, and some CI/CD. An excellent resource for React beginners.

React Documentation The official React documentation is a great way to get started with the library, but also indispensible to have bookmarked for reference.

Coursera Learn React Basics A free course provided by Coursera that covers the basics of React, including State, navigation, and taking user input via forms.

Free Scrimba React Course A free course provided by Scrimba that teaches React fundamentals through the creation of various applications including an AirBnB clone, a meme generator, and a notes app.

Official React Tutorial Basic React tutorial provided by the official React website. This tutorial will guide you through a very basic tutorial that you can do straight from your browser.

React JS Crash Course One Hour React Tutorial One hour quickstart tutorials about React. These YouTube crash course provides a great overview of React and various important components that you will be using often. Very useful if you are learning React under a strict time limit for whatever reason.

Front-End Mentor These frontend challenges for HTML, CSS and JavaScript will help you review core skills while also making interesting projects.

Mozilla React Tutorial React tutorial by MDN Web Docs. Useful readings for if you have time.

Microsoft JavaScript Tutorial JavaScript frameworks tutorial provided by Microsoft. Useful readings, but not necessary to learn React.

Useful React Tools and Libraries

React Toastify Crafting toast notifications within React applications

Create React App Allows you to set up your React applications using a single command without having to configure many build tools. Provides a lot of useful functionality like instant reloads and optimizations for deployment; is the “official” React solution.

Vite Another quickstart build tool for setting up your environment; an alternative to Create React App, Vite is generally faster than Create React App.

Next.js A popular and robust framework that allows server-side rendering and static website generation.

usehooks-ts A React library of useful hooks that go well beyond those built into React. Don’t reinvent the wheel! usehooks offers over forty ready-to-use hooks such as useEffectOnce and useInterval.

Redux The official React solution for state management. Redux provides functionality for reducers, advanced debugging tools, and more that will simplify the state management for your app.

Material UI A fully-featured UI library that offers a huge range of common components that are easily styled and based on Google’s Material Design.

Bootstrap Another responsive UI library that allows you to focus on development by handling the design logistics for you.

Chakra UI A powerful component library for React with a modern and React-centric design system that focuses on theming and responsiveness. See An introduction to Chakra UI for a tutorial on installing and utilizing Chakra UI best.

Miscellaneous

GitHub Pages Host your React websites straight from your Github repo. Website hosting is fairly expensive, so this is here as a free alternative for website deployment for simple applications. Head over to the Development Process page for a tutorial on GitHub pages and more.

Codepen Online development environment to try React out in (among other frontend tools). Great for testing the waters with React and other libraries or languages.

Stackblitz An online development environment for frontend, Node.js, and JavaScript.