React 101: The Basics

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Sonar - Write Clean JavaScript Code. Always.
  • InfluxDB - Build time-series-based applications quickly and at scale.
  • React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

    React is a JavaScript library built by Facebook which creates a virtual DOM and allows a website or web application to update (or react) based on changes in data. It has been growing in popularity since it's release in 2016, even overthrowing jQuery as the most in-demand JavaScript skill, a title which jQuery had held for about a decade.

  • Snowpack

    ESM-powered frontend build tool. Instant, lightweight, unbundled development. ✌️ [Moved to: https://github.com/FredKSchott/snowpack] (by withastro)

    I have written a post about setting up a React project using Parcel as a bundler which can give a more detailed walkthrough about getting a React application up and running from scratch. There are multiple ways to do this but some of the more common build tools include Webpack, Parcel, and Snowpack.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • webpack

    A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

    I have written a post about setting up a React project using Parcel as a bundler which can give a more detailed walkthrough about getting a React application up and running from scratch. There are multiple ways to do this but some of the more common build tools include Webpack, Parcel, and Snowpack.

  • styled-components

    Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

    In addition to normal css, there are different tools which can be used for styling in your React applications. Styled Components is a popular option and allows you to write your styles directly in your JavaScript code. Sass is another commonly used option which has many benefits of css with some "special sauce" on top. Of course, you can also use tools such as Bootstrap, Material UI, etc.

  • Sass

    Sass makes CSS fun!

    In addition to normal css, there are different tools which can be used for styling in your React applications. Styled Components is a popular option and allows you to write your styles directly in your JavaScript code. Sass is another commonly used option which has many benefits of css with some "special sauce" on top. Of course, you can also use tools such as Bootstrap, Material UI, etc.

  • redux

    Predictable state container for JavaScript apps

    Another really popular library for global state management is called Redux. This is a very widely used library and uses actions, reducers, and stores to handle state. In short, a component calls an action which is then analyzed by the reducer to decide how to update state. There can be more to this method such as sagas and thunks but in it's most basic form, this is an overview of how it works.

  • react-router

    Declarative routing for React

    While libraries like Next and Gatsby have routing built-in, Create React App does not so you may need to set it up yourself. The most popular library for this is React Router. Another popular option in the past was called Reach Router, but the two have become merged as of version 6.

  • Sonar

    Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.

  • parcel

    The zero configuration build tool for the web. 📦🚀

    I have written a post about setting up a React project using Parcel as a bundler which can give a more detailed walkthrough about getting a React application up and running from scratch. There are multiple ways to do this but some of the more common build tools include Webpack, Parcel, and Snowpack.

  • Next.js

    The React Framework

    An alternative to Create React App is Next (or Next.js). Unlike CRA, Next is an opinionated framework which offers build tools, routing, server-side rendering, and static site generation out-of-the-box. This is a popular option which is used by companies like Nike, TikTok, Netflix Jobs, Twitch.

  • jest

    Delightful JavaScript Testing.

    Along with React, Facebook developed a tool for testing JavaScript called Jest. When used by itself, Jest is primary good for testing logic. It doesn't handle any sort of DOM rendering or snapshot testing, so another library is needed for that. The two most commonly used tools for DOM testing are Enzyme and React Testing Library. They both do pretty much the same thing, so it's really just a matter of preference. For end-to-end testing, the most commonly used library is Cypress.

  • Enzyme

    JavaScript Testing utilities for React

    Along with React, Facebook developed a tool for testing JavaScript called Jest. When used by itself, Jest is primary good for testing logic. It doesn't handle any sort of DOM rendering or snapshot testing, so another library is needed for that. The two most commonly used tools for DOM testing are Enzyme and React Testing Library. They both do pretty much the same thing, so it's really just a matter of preference. For end-to-end testing, the most commonly used library is Cypress.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts