Skip to main content

React

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. React is a library rather than a language and it is widely used in web development. It first appeared in May 2013 and is now considered one of the most commonly used frontend libraries for web development. This roadmap would help you as a developer to get started on learning about React.

To make your journey easier, pick a path

Basics of HTML

Mark as done

Done

Basics of HTML

Start off by learning the basics of HTML (Hypertext Markup Language) and how to use it with the resources below.

Learn HTML Basics for Beginners

Intro to HTML

HTML Explained: What is HTML?

HTML Crash Course for Absolute Beginners

Basics of CSS

Mark as done

Done

Basics of CSS

Learn more about Cascading Style Sheets as you begin your React programming journey with the resources below.

CSS Crash Course for Absolute Beginners

CSS Basics

Free Basic CSS Tutorial

HTML and CSS Crash Course optional

Box Model

Mark as done

Done

Box Model

In web development, the CSS box model refers to how HTML elements are modeled in browser engines and how the dimensions of those HTML elements are derived from CSS properties. Learn more about this from the resources below.

Learn CSS Box Model in 8 Minutes

CSS Box Model Properties Explained with Examples

How to work with Box Model in CSS

CSS Box Model Explained for Beginners

The Box Model optional

Grid

Mark as done

Done

Grid

CSS Grid is a tool you can use to help create layouts for your website. Learn more about this from the resources below.

A Complete Guide to Grids

Learn CSS Grid the easy way

Learn CSS Grid by Building Layouts

CSS Selectors

Mark as done

Done

CSS Selectors

CSS selectors are patterns used to select the element(s) you want to style. Learn more from the resources below.

CSS Selectors Made Easy

CSS Selectors Tutorial optional

How to use CSS Selectors

CSS Selectors optional

Flex Box

Mark as done

Done

Flex Box

CSS Flexbox, is a CSS 3 web layout model. The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size. Learn more.

A Complete Guide to Flexbox

CSS Flexbox Crash Course

Basic Concepts of Flexbox

Flexbox CSS in 20 Minutes optional

Unit

Mark as done

Done

Unit

A CSS unit determines the size of a property you’re setting for an element or its content. Learn more about this from the resources below.

CSS Unit Guide

CSS Units Explained

Are You Using The Right CSS Units? optional

Learn CSS Units with Examples

Positioning

Mark as done

Done

Positioning

CSS positioning property sets how an element is positioned in a document. CSS helps you to position your HTML element. Learn more.

Positioning Properties in CSS

Position Absolute and Relative Examples - CSS

CSS Positioning Explained

Learn CSS Positioning optional

Template Literals

Mark as done

Done

Template Literals

Template Literals are literal words in programming that are used to represent some kind of fixed value. In JavaScript, they are an easy way to interpolate variables and expressions into strings. Learn more from the resources below.

JavaScript Template Literals

Understanding JavaScript Template Literal

Deep Dive into Template Literals

Spread and Rest Operators

Mark as done

Done

Spread and Rest Operators

The spread operator (...) helps you expand iterables into individual elements. It basically “spreads” the values in an iterable (arrays, strings) across zero or more arguments or elements.The rest operator is used to put the rest of some specific user-supplied values into a JavaScript array.Learn more about these operators from the resources below.

JavaScript Rest vs Spread Operators

Understanding Spread and Rest Operators

Spread and Rest Operators Tutorial

Exploring the Spread Operator and Rest Parameters in JavaScript

Module Import and Export

Mark as done

Done

Module Import and Export

To import module in JavaScript, use the static import statement. The export statement is used in JavaScript modules to export functions, objects, or primitive values from one module so that they can be used in other programs. Learn more using the resources below.

JavaScript Modules

Import and Export in Modern JavaScript

Understanding Modules and Import and Export Statements in JavaScript

Import/Export Modules Made Easy optional

Object Destructuring

Mark as done

Done

Object Destructuring

In this section, you will learn about the expression "Destructuring" in relation to Objects in JavaScript. Object destructuring is a unique technique that allows you to neatly extract an object’s value into new variables. Learn more from the resources below.

What is Object Destructuring in JavaScript

Array vs Object Destructuring in JavaScript

Object Destructuring in JavaScript

JavaScript Object Destructuring Tutorial optional

Variables

Mark as done

Done

Variables

In JavaScript, a variable stores the data value that can be changed later on. Simply put, Variables are containers for storing data. Learn more about this using the resources below.

JavaScript Variables with Examples

JavaScript Variables Declaration and Initialization

Declare JavaScript Variables optional

Functions & Arrow Functions

Mark as done

Done

Functions & Arrow Functions

In JavaScript, a function allows you to define a block of code, give it a name and then execute it as many times as you want. Arrow functions are basically a new way to write anonymous function expressions in JavaScript. Learn more about these using the resources below.

A Gentle Introduction to Arrow Functions

Understanding Arrow Functions in JavaScript

Difference between Regular Functions and Arrow Functions

Arrow Functions in JavaScript optional

Promises

Mark as done

Done

Promises

A promise in JavaScript is an object that may produce a single value some time in the future and may be in one of 3 possible states: fulfilled, rejected, or pending. Learn more about this using the resources below.

JavaScript Promises Explained

JavaScript Promises: An Introduction

JavaScript Promises Simple Breakdown

JavaScript Promises and Promise Chaining

Async Programming

Mark as done

Done

Async Programming

Asynchronous programming makes it possible to express waiting for long-running actions without freezing the program during these actions. Learn more about this using the resources below.

Async Programming with JavaScript

Async JavaScript Course

Asynchronous Programming: Eloquent JavaScript optional

Asynchronous JavaScript optional

Version Control: Git and GitHub

Mark as done

Done

Version Control: Git and GitHub

Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later. Learn more about Git version control and Github hosting repository for Git with the resources below.

How to get started with Version Control using git

Git Tutorial for Beginners

Git Tutorial for Professionals

GitHub Tutorial - Beginner Training Guide

How to use GitHub

Netlify & Vercel

Mark as done

Done

Netlify & Vercel

Netlify is a platform for web developers to host their sites in the cloud without managing any servers in the back-end. Vercel is a cloud platform that enables developers to host websites and web services that deploy instantly, scale automatically, and require no supervision. Learn more.

How to Build and Deploy Websites using Netlify

A Step-by-Step Guide: Deploying on Netlify

Introduction to Vercel

How to Deploy a React Site with Vercel

NPM & Yarn

Mark as done

Done

NPM & Yarn

NPM (Node Package Manager) is a package manager for the JavaScript programming language. Yarn is a software packaging system developed by Facebook. It is considered an alternative to NPM. Learn more about these using the resources below.

An Absolute Beginner's Guide to Using NPM

NPM Tutorial: How Does It Work?

A Quick Introduction to the Yarn Package Manager

YARN Package Manager Crash Course

Got feedback?