The Modern Refresher to React Development in 2022

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

Our great sponsors
  • Scout APM - Truly a developer’s best friend
  • Sonar - Write Clean JavaScript Code. Always.
  • Zigi - Delete the most useless function ever: context switching.
  • InfluxDB - Build time-series-based applications quickly and at scale.
  • React

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

    And while React is backed by multi-trillion dollar company, it’s open-source community is still one of the key factors in its large success. In this article, we’ll go through the React development process for beginners and developers who just need a quick refresher.

  • react

    Official implementation of ithink, made in React and powered by Cyclic. (by ithink-corp)

    View on GitHub

  • Scout APM

    Truly a developer’s best friend. Scout APM is great for developers who want to find and fix performance issues in their applications. With Scout, we'll take care of the bugs so you can focus on building great things 🚀.

  • starter-react-app

    Lucky for us, Cyclic gives us the ability to deploy React applications to the cloud for free, by just clicking one button and adding one script to our application. With Cyclic’s React starter, we know to add the following script to the root of our project:

  • react-use

    React Hooks — 👍

    Thankfully, we don’t have to do much code ourselves thanks to the great React community. Being such an important feature, experienced developers have already implemented it and shipped it along-with dozens of other small utilities as hooks. (yes, hooks are marking their presence once again; I told you that they’re very important concepts!) It’s all packaged in a nifty library called react-use.

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

    It’s called create-react-app, and it uses Babel and webpack under the hood, but you don’t need to know anything about them. But I’d be irresponsible if I told you that you’ll never encounter these two programs, so I recommend saving these articles about webpack and Babel. Read them when you’re ready.

  • api

    Official API for ithink, powered by Cyclic. (by ithink-corp)

    // utils/server.js export async function getMessages() { const res = await fetch('https://ithink-api.cyclic.app/', { headers: { 'Content-Type': 'application/json', }, }) const items = await res.json() return items.map((item) => ({ message: item, })) }

  • babel-sublime

    Syntax definitions for ES6 JavaScript with React JSX extensions.

    It’s called create-react-app, and it uses Babel and webpack under the hood, but you don’t need to know anything about them. But I’d be irresponsible if I told you that you’ll never encounter these two programs, so I recommend saving these articles about webpack and Babel. Read them when you’re ready.

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

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