React.js - Top things to know

React is eating up the web development world - being the defacto library for modern user interfaces, so learning it can bring many advantages.

In this article, you will be introduced to all things you need to know in order to be a successful React dev. This is not meant to be an in-depth tutorial, but instead an introduction to all needed concepts. You will find extra resources linked here, that can help you get in-depth knowledge of certain topics.

Before starting

It is often advised to get HTML, CSS, and JS experience before starting to build applications with a framework like React. So it is best if you study those, before reading this article. Also, would help a lot if you leave a 🧡 & 🦄 if you enjoy this article.

Let's get started!

Modern JS features

• spread syntax
• class syntax
• arrow functions
• template strings
• async/await
• ES modules

Modern JS development environment

The target environment for React code is browsers (most of the time, we can also write mobile apps or render apps on the server). Since browsers can't understand all the latest JS features that I just mentioned earlier - we need a bundler and a code compiler - more info ahead. We also need a package manager for downloading all the libraries we want to use - including React, React-DOM, Router, etc.

Note you don't need to understand those very in-depth if you are just starting out, but it makes sense that you have an idea about each of them

• Node.js - our development environment is a Node.js environment. Our tools - like Webpack or Babel, or Create React App - are Node.js programs. We use Node.js to start our dev environment, build for production, run tests etc.
• npm (or yarn) - package management - use to install everything we need in our dev environment (React, Router, Babel, Webpack, etc)
• ESLint - watch our code for common programming errors or bad practices - a good linter config will save you of many coding errors and bugs. A lint config will throw errors or warnings when you do something that breaks lint rules (ex not using React hooks correctly)
• Babel compiler - converts modern JS to code that browsers can understand
• Webpack - takes all our code modules (all our files and dependencies) - and spits out a single (or multiple) JS files the browser can understand. We can use different plugins in Webpack to achieve different things (minify the code, bundle and optimize CSS, etc)

Structure your UIs into reusable components

The most important thing in React development is the concept of components. We will have lots of components that compose our UI. Here is a simple example of the Dev.to interface broken down into components:

Larger chunks of the UI will be composed of many smaller pieces. I didn't break down all the pieces from the LeftPane for example. You can look at it and imagine it contains an Avatar component, that also contains a Picture, Header & Text components. Below is a side navigation component, and so on.

Learn to use React Hooks

React hooks are the modern way of writing React applications. There are a few hooks that you will need in all React applications:

• useState or useReducer
• useEffect - make sure you understand this one as it's not trivial at first

Routing

Unless you are building some very small app, you will realize you need to render multiple pages in your app. That's when routing comes in.

Routing works by rendering a specific set of React components under a route:

• '/' - render HomePage component
• '/about' - render AboutPage component

Routing can become more complex when we accept in our routes:

• URI parameters Ex: /employee/{employeeID}
• Query parameters Ex: /employee?{employeeID=1}

Learn ways to manage global state

Global or application level state is a piece of data that is necessary to be stored globally so it's accessible to multiple components.

Some examples of global state:

• who is the currently logged in user and what are her/his rights
• the currently selected theme
• the currently selected language/locale

Learn about:

• Context Api + useReducer hook
• Redux

Generally, you should avoid global state as much as possible, and prefer using local component state.

Interacting with HTTP services

Now that we know how to split UIs into components, do routing and state management, the next step is managing to get data from APIs in our application.

A basic understanding of HTTP and Web APIs is important. You will interact with APIs using the fetch API or using a library like axios, so please learn how to use one of those two.

I wrote about popular Web APIs and how to interact with HTTP APIs:

Component libraries

You probably don't always want to build all the components for a complex UI from scratch - so it's useful to know about pre-build component libraries. Using those can speed up development as you don't need to code basic UI components like buttons, dropdowns, tables, etc from scratch.

• Material UI
• Reactstrap
• Semantic UI
• Chakra
• Ant Design

You definitely don't need to be familiar with all of them - just know they are there, and you can reach them when you need them.

You are all set!

Alright! If you made it until this point, gathered info about all the previous topics, and got an understanding of each of them - you are all good!

Next, we will talk more about some more advanced stuff that are also very interesting for React devs.

Advanced - React toolchains when and why?

In the post above I address when you should use react toolchains like Create React App, or Next.js, or Gatsby.

This is interesting when you can actually make those decisions, or help others make those decisions because picking the correct one of those three will be crucial to the success of your project:

Advanced - Deployment models

Since in most cases our react apps production build will result in static assets, we can deploy using:

• A CDN
• A web server
• Containers

When to choose one or the other might depend on different factors.

Advanced - Typescript

Typescript is becoming more and more popular in the React ecosystem. I wrote an article around it:

Advanced - React patterns

Using patterns can make our code more modular, easier to extend and reason about, but also more testable.

Some of them are:

• Render props
• HOC
• Headless Components

Headless Components are probably the most popular pattern right now, as it's really nice to write the business logic of our apps in custom hooks, leaving our component code clean.

Advanced - Testing

Testing is a big thing when it comes to building resilient UI applications. If we use all those nice tools to build apps that can be modularized in independent components - why not also make sure those modules/components will always work as we intend them to?

You will need to know:

• Basics of Jest
• How to use - React testing library
• How to use Cypress

You can use this free course to learn using Jest & React testing library to test React apps.

Advanced - styling approaches

As with many other things in the React ecosystem, styling has its flavors - and can be kept as simple as using a normal CSS stylesheet or using more complex approaches like CSS in JS.

Styling can be:

• CSS
• Inline
• CSS modules
• SASS (modules)
• CSS in JS
• Atomic CSS (TailwindCSS - for example)

Different applications will have different styling needs. If all styles are from scratch - something like CSS in JS or Atomic CSS might make the most sense.

Some applications might require minimal custom styling as they are built on top of a CSS framework like Bootstrap 4 or Material UI. In that case, CSS modules or SASS might be your choice.

Conclusions

Learning React & working with the Web is a never-ending journey, so keep learning, keep exploring!

Leave a 🧡 & 🦄 if you like this article, also check out my Twitter where I post more cool content.

👇 Comment below 👇
Did I miss anything? What are the top things to know from the React world today?