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:
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!
When starting out #programming, all problems seem complex -> it's normal. Exposure and exercise are key. Experienced devs were the same at some point. We all start without any knowledge.
It's the exposure over time to LOTS of problems that makes some things easy.
#100DaysOfCode11:39 AM - 08 Nov 2020
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?
Top comments (3)
Hi,
Thank for sharing.
For css styling, I prefer using this library styled-components.com/
It allows you to use css in JS.
Yep, styled components is a nice choice.
Very good post. Thank you!