React 101: The Basics

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

SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
surveyjs.io
featured
InfluxDB - Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com
featured
  • React

    The library for web and native 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

    Discontinued 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.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • 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

    A JS library for predictable global state management

  • 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.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
  • 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

  • Micro-frontends building blocks: Webpack Module Federation

    4 projects | dev.to | 22 Apr 2022
  • Top 10 Tools Every React Developer Needs in 2024

    4 projects | dev.to | 3 Apr 2024
  • Optimizing React Apps for Performance: A Comprehensive Guide

    2 projects | dev.to | 2 Apr 2024
  • Why you should migrate to Rspack from webpack

    3 projects | dev.to | 31 Oct 2023
  • Abstract Syntax Trees and Practical Applications in JavaScript

    13 projects | dev.to | 21 Oct 2023