React/Frontend roadmap

Photo by amir rabiee on Unsplash

Basics

HTML

Html is essential to get started in frontend development, knowing what is a tag, element, attribute, what kind of events there are in the HTML element is helpful, especially, it helps you easily understand documentations.

Some of the must-know elements: h1-h6, p, b, img, video, i, span, div, form, input, select, a, header, main, footer, section .

• How form works, understanding of action, and method.
• What are the attributes, and corresponding attributes of each element.

CSS

How styling works, how to link CSS to HTML, what are selectors. Different types of selectors, — tag name, class, id. Inline, internal, external styling.

Must know properties: display, font-size, font-weight, position, cursor, line-height, margin, padding, border, transition, color, background, background-color, width, height, justify-content, align-items, overflow, min(max)-height, min(max)-width, border-radius, outline,

• Understanding of how flex works, writing animation keyframes, media queries. Block vs inline elements.
• What is pseudo-classes, different types of them: :hover, :focus, :link, :visited, :active, :first-child, :disabled, :last-child, :nth-child(n)
• Pseudo-elements: ::after, ::before

JavaScript

Javascript is different than HTML and CSS, it requires more logic. You should know, how to link JS file to HTML, how JS code works.

Must to know terminology: Variables, constants, conditionals, loops, functions, methods, object model, data types.

• Difference between function and method?
• How to write basic functions using loop and conditions.
• What are a window object and its usage?

Intermediate

React

As a react developer you should know at least what is JSX, how to write a component, how virtual DOM works.

• Functional component vs Class component
• State vs props
• Hooks — useEffect, useState, useCallback
• Lifecycle methods
• Redux — how redux works, redux flow, reducers, actions.
• React routing
• custom hooks

JavaScript

At this point, you should know how to make API calls, how asynchronous code works. You should also know how JS works in the background, what are event loops.

• Promises vs Callbacks
• API calls with Axios
• Closure
• Context
• Difference between var, let, and const
• How object reference works

Internet

On top of knowing how to code, you should also know how the internet works. You should understand how REST API works and correctly use chrome dev tools, including how to monitor HTTP requests, how to view the source code of the page, and how to use more tools react and redux provides.