React 101: The Basics

1

Webpack

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.

#Web Application Bundler #JS Build Tools #Module Bundler 220 social mentions

2

react-testing-library

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.

#Developer Tools #Testing #Automated Testing 113 social mentions

3

styled-components

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.

#Developer Tools #Design Tools #Javascript UI Libraries 154 social mentions

4

Sass

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.

#Developer Tools #Design Tools #Javascript UI Libraries 131 social mentions

5

Redux.js

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.

#Javascript UI Libraries #JS Library #Front-End Frameworks 165 social mentions

6

react-context

React contains a state management system called Context which allows state to be managed on a global scale and used where it's needed. This comes built in and doesn't require any other libraries to be installed, but I thought it was worth mentioning here because it's a viable solution out-of-the-box.

#Javascript UI Libraries #Front-End Frameworks #JS Library 207 social mentions

7

React

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.

#Javascript UI Libraries #JS Library #JavaScript Framework 775 social mentions

8

Parcel

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.

#Web Application Bundler #Assets Bundler #JS Build Tools 101 social mentions

9

Next.js

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.

#Developer Tools #Web Frameworks #JavaScript Framework 923 social mentions