Ronnie's Tech Blogs

ReactJS Roadmap for beginners - 2022

ReactJS Roadmap for beginners - 2022

If you are thinking about getting into web development, I recommend you to take a look at roadmaps of other frameworks such as Angular or Vue and then make up your mind what you want to learn.

Everybody will have a different opinion on what best technoogy, language or framework. And that is ok. You should also follow your heart and go in the direction that feels right for you. Well my heart lies at the heart ReactJS technologies!

At times it may feel really overwhelming pursuing some road maps but I usually advocate for the easiest method of getting things done. Therefore, in this article I'm going to offer you my simple but complete version of the web development roadmap for absolute beginners and the essential things you need to learn first.

Learning anything, especially complex web development, can be a daunting task so we don’t want to spend too much time on unnecessary details at this stage and we want to make it as much fun as possible and progress quickly.

1. Foundations of the Internet.

You do not need to spend a lot of time here if you know the basics like domain names. DNSs, servers, web browser, hosting. You just need to know what these things are and what they do and without wasting any unnecessary time you can move on.

2. Code Editor - Visual Studio Code.

It is by far the most popular code editor for web developers these days because of the ease of use, speed, useful build-in functionality, ability to extend with plugins and more. Download Visual Studio Code and install it on your computer.

Familiarize yourself with the interface and the basic shortcuts (creating a new file, closing the file, saving the file, etc.).

VSC setup ready? Let’s move on.

3. Git and GitHub

Git is a free and open-source version control system. It is industry standard and as a web developer, you must know it.

The idea of Git is to track changes in the code and it also enables many developers to seamlessly work on the same project.

GitHub, on the other hand, is a code repository in the cloud where you can store your Git code in a private or public repository.

4. HTML

HTML is not a programming language but it is HyperText Markup Language. It is the most popular language on the web and every website uses it. That is why without HTML you cannot be a web developer and that is why we start from learning it.

Simple HTML code looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>HTML</title>
    <link rel="stylesheet" href="style.css">
    <script src="index.js"></script>
  </head>
  <body>
    <p>Hello world!</p>
  </body>
</html>

HTML is quite broad language but at this stage you just need to learn the basics:

  • Structure of the document: <html>, <head>, <body>
  • <head> section: <title>, <meta>, <link>, <script>
  • <body> section: <div>, <p>, <a>, <img>, <strong>, <em>, <ul>, <ol>, <li>
  • semantic html: <header>, <footer>, <nav>, <article>, <main>, <section>, <aside>
  • html attributes: id, class, src, alt and others.

There are many more HTML tags but to start you just need to learn these basics as they are most commonly used.

5. CSS(Cascading Style Sheets)

It gives developers and designers ability to specify fonts, colors, positions and other aspects of elements on the website. It is also used to create responsive websites (websites that work on devices with different sizes — desktops, tablets, mobile phones).

At this stage I would recommend learning the basics of CSS because otherwise it is easy to feel overwhelmed. Unless, you’ll find it particularly interesting. Then you can spend a little bit more time here.

What you definitely need to know in terms of CSS:

  • how to add on-page, inline and external CSS
  • IDs, classes and how to target HTML elements in general with CSS so you can style them; this is quite an advanced topic on its own to properly target HTML elements with CSS; you have different ways to target HTML elements, by tag name e.g. div, by ID or by class name; also, HTML elements and classes can be nested so pay close attention to this aspect of CSS as you can easily get lost
  • font sizes, line heights, font decoration, how to add colors and hexadecimal color names
  • margin, padding and in general CSS Box Model
  • borders, opacity, backgrounds
  • pseudo-classes (:hover, :active, :focus, :first-child, :last-child, :nth-child)
  • CSS positioning (position absolute, relative, top, bottom, left, right, etc.)
  • CSS grid layout (two-dimensional grid system to CSS)
  • CSS flexbox (one-dimensional layout model)

These are just the basics but feel free to dig deeper as you need.

6. JavaScript

JavaScript is a scripting language, the most popular language on the web, that runs in the web browser.

It is often used for the dynamic functionality of the website like showing or hiding elements on mouse click, animations, displaying dynamic and interactive elements like timers, drop-down menus, requesting additional information from another website/api, form element validation etc.

JavaScript is also used for building entire applications or as a back-end programming language but at this stage, we just want to learn the basics.

What you definitely need to know in terms of JavaScript:

  • Data types and variables
  • Scope
  • Assignment, arithmetic, comparison and conditional operators
  • If and Switch statements
  • Functions, break and continue
  • For loops
  • Objects, JSON
  • Events
  • DOM Manipulation

Using Vanilla JavaScript you can build awesome web applications together with HTML and CSS.

7. UI/UX Design with Figma/AdobeXD/Sketch

Sometimes you may need to code a website in HTML, CSS and JavaScript based on the design. These are probably the most popular design tools these days so it is a good idea to learn them.

After learning the basics of web development, now we can now move to React.

ReactJS Roadmap 2022

React is one of the most popular JavScript library for designing rich and interactive user interfaces. React's component-based functionality lets you make reusable components with which you can scale your application effectively. Using React the views of your app makes your code more predictable and easier to debug.

I have divided the React roadmap into three: core, basics and styling the UI.

1. Core

  • Setting up react project: visit the official React website to set up your first React project.By completing this step you should be familiar with the concept of creating a new react project locally using CLI(Command-line Interface).

  • Execution flow of React: It is important for a React developer to understand the code flow of a react app. Also understanding the project structure. By completing this step you should be familiar with React app folder structure, Also how react app runs in the browser, what is virtual DOM and how DOM is manipulated in React.

  • Using JSX: JSX looks like HTML, It is based on XML, JSX transformed into HTML tags during runtime. By learning JSX concept you should be having a good understanding of JSX, Similarities between HTML and JSX and Advantages of JSX over HTML element tags.

  • Component types: It is important to have knowledge of Component, their types and component life-cycle. By learning the Component concept you should have a good understanding of different component types and which to use when.

  • Handling functions: Function in react is same as javascript functions, we can create our own functions to perform specific tasks. By learning about functions you should be able to create functions in react component and calling the function.

  • Handling JSX events: JSX events allows us to handle events which are react's element(JSX) specific. By learning about JSX events you should have a good understanding of different JSX events(such as onClick, onChange, etc), and their use.

  • Modules: Modules lets you write sharable code so that you can reuse it by importing. By learning about modules you should be able to understand the concept of modules such as importing and exporting modules, public and private properties and function.

  • Components nesting and reusability: Components are an independent and reusable block of code which returns JSX and can also perform some specific tasks. By learning component reusability you should be able to understand component nesting, also root, parent and child component, and component tree. you should also be having a good knowledge of creating component in such a way that they can be used in multiple places.

  • Props: Using Props we can pass data from one component to another. By learning Props you must be familiar with passing the props from the parent component to the child component and then receiving and using them in the child component.

  • Conditional rendering: Conditional rendering lets you render JSX conditionally just like we use if else condition in javascript. By learning about conditional rendering you should be able to display UI conditionally, and understanding the ternary operator used in React JSX.

2. Basics

  • Debugging and Logging: React dev tools extension helps you monitor react state and components within the browsers window. By learning this step you should be able to debug react app.

  • Fetching & displaying data from external API: This lets you perform REST API methods using the built-in method of javascript. By learning this step you should be having a good understanding of javascript's built-in fetch function to fetch the data from an endpoint, storing the data and displaying accordingly on the UI.

  • Understanding and using Axios package: Axios is one of the popular library for making HTTP requests to external API endpoints effectively. By learning axios you should be familiar with fetching async data from an endpoint using axios and should also be familiar with other REST API methods using axios.

  • UseEffect hook: UseEffect hook lets you decide what to perform after rendering a component, Also affecting the component based on the dependency provided to it. By learning the UseEffect hook you should be familiar with the side effect of the component rendering with dependency.

  • Context API/useContext hook: Context API is React's built-in functionality to performs state management without using any external library. By learning about Context API you should be having a good understanding of global state and state management, consumer and provider, useContext and UserReducer hook.

  • Browser's local storage: Local storage lets you store the data locally within the browser's storage. By learning this step you should have a good understanding of browser local storage, reading and writing to and from local storage.

  • React Router: React router DOM is one of the popular external library for navigating your react app, It also lets your UI in sync with the URL. By learning about React router DOM library you should be familiar with navigating and routing your react application and switching the UI as per the route.

3. Styling UI

  • Grid Layout: CSS Grid Layout concept offers a grid-based layout system for designing the UI on the basis of rows and columns. By learning Grid layout you should be having a good understanding of placing UI elements as a cell in the grid layout.

  • Flexbox: Flexbox Layout lets you build flexible and responsive UI without using CSS's positioning and float. By learning flexbox you should be familiar with concept of container, and aligning and justifying elements.

  • SCSS: To use scss you have to install node-sass package using npm. It's a CSS preprocessor. By learning SCSS you should be familiar with importing other scss files, declaring and using variables, nesting and a lot more things.

You can join our learning tech community of young, energetic and tech enthusiasts learning various technologies from: Blockchain development, Web and Android development with React, Machine Learning and Embedded System and hardware programming. Join us on our Whatsapp group