A Roadmap and Guide to Learning React

Learning a new programming language or framework can be quite challenging, especially when there are lots of resources available. You might find it hard to structure your learning and this can get you stuck in an endless loop thereby slowing down the process of learning. This is why there are roadmaps to help guide the process of learning.

React is a popular open-source javascript library and it is one of the most used libraries in web development for building user interfaces for web applications.

This article will show the roadmap and guide for learning React from beginner to advanced level. I will be sharing resources to get started and technologies to learn before diving into React. Please note that this roadmap is based on personal learning and also the common pattern that I've seen with people working with React.

Let's get into it 🚀🚀🚀

Technologies to Learn Before React

To make learning React easy, you have to learn the basics of web development.

HTML

HTML(HyperText Markup Language) is the standard markup language for building Web pages. It is also the building block of the web and is used to structure a web page and its content. HTML is not very complicated to learn but you need to have an understanding of the tags to use and how to divide pages into sections using semantic elements.

Resources to learn HTML

• Getting started with the web - HTML basics

• Introduction to HTML

CSS

CSS (Cascading Style Sheets) is used to style an HTML document. It describes how HTML elements should be displayed. However, learning CSS is somewhat more complex than HTML as there are lots of things to learn. Some of the important concepts to learn include box models, positioning, flexbox, grid, sizing units, selectors, specificity of selectors, and responsive design(very important).

Resources to learn CSS

• CSS Tutorial

• Learn CSS

• Responsive web design - Freecodecamp

JavaScript

JavaScript is the programming language of the Web. It is used to make web pages interactive and it allows the implementation of dynamic web pages. It is very important to have a solid understanding of javascript before learning React. Javascript concepts like functions declaration, spread operator, rest operator, object destructuring, array methods, es6 modules import/export, promises and async/wait.

Resources to learn JavaScript

• Learn JavaScript - MDN

• Javascript.info

• Javascript.com by Pluralsight

• Awesome Javascript Resources

Getting Started With React

Setting up a React project With Create React App

Create React App is a CLI tool for creating a single-page React application. It is one of the quickest ways to set up a React project. Another method for setting up a React project is to install webpack and babel dependencies and configure them for your project. This approach is quite tedious and not really beginner friendly.

Check out the create-react-app documentation to learn more about it.

JSX

JSX (JavaScript XML) is a syntax expression for javascript. The JSX syntax might look like HTML but it comes with the full power of Javascript. JSX allows you to write HTML in React. When writing JSX, you should take note of the following

• All JSX tags are self-closing. This means you have to write this syntax <p/> instead of this `

• JSX uses the className attribute instead of class because class is a reserved word in javascript.

• All JSX attributes are written in camelCase. So you'll write onClick instead of onclick and this goes for other attributes.

React Components

Components are the building blocks of a React application. It allows you split the UI of an app into independent and reusable bits of code. There are two types of components in React: Functional component and Class component. It is advisable to use functional components because hooks are taking over modern React and the new React documentation is solely focused on hooks using the functional component. However, you should also have a basic understanding of class-based components because some code bases are heavily dependent on them.

Functional component syntax

function App() {
  return <h1> This is a functional component! </h1>;
}

Class component syntax

class App extends Component {
  render() {
    return <h4>This is a class component!</h4>;
  }
}

Props and State

Props is short for properties. Components in React use props to communicate with each other. You can pass information from one component to another by using props.

State holds information about a component but unlike props, you cannot pass or share states between components. You should not modify state directly instead update the state using setState.

Component Life Cycle

Every React component has its own lifecycle. The lifecycle of a component is the series of stages that a component passes through before it is eventually removed from the page. The different phase of a component lifecycle includes initialization, mounting, updating, and updating. React hooks like useState and useEffect are useful in managing the lifecycle of a component.

List and Keys

In React, list is used to render a list of items while key is a special attribute you need to include when creating a list. Let's say you want to make a list of users or items, you'll need to iterate through the list using the array.map() method and then display the result. Keys help React identify which items have changed so it can re-render them.

Hooks

Hooks allow you to use state in a function component. Prior to the addition of hooks in React, you can only make use of state in a class component. In simpler terms, hooks are functions that start with use. useState and useEffects are the most common hooks that you'll need when building basic react projects.

Other React hooks like useMemo, useRef, useReducer, useContext, useCallback are also very important in handling more complex logic.

React also allows you to create custom hooks by extracting component logic into reusable functions. Using custom hooks helps to make your code cleaner.

Resources to learn React Hooks

• Working with advanced React Hooks

• React Hooks Fundamentals for Beginners

• useHooks

Styling React Component

Styling in React applications describes how React components or elements are displayed on a screen. There are several methods you can use to style a component in React depending on what you're trying to achieve. To style a component in react, you can use plain CSS, CSS-in-JS, CSS modules, or libraries like Material UI, Tailwind CSS, and Chakra UI.

You can check out the following resources to know more about styling React components.

• Styling Components In React

• How to Style Your React Apps

• 8 Ways to Style React Components

• Using Material UI with React Apps

Handling forms in React

In HTML form data is usually controlled by the DOM and this refreshes the page as soon as a user submits the form. Creating forms in React using the HTML template is still a valid approach but it is recommended to allow components to control the form data as the data will be stored in a component state and this approach is called the controlled component.

There are several options available for creating forms in React. You can make use of the different React form libraries like React-Hook-Form and Formik or without using libraries. Learn how to handle forms in React using the following resources

• How To Build Forms in React

Routing

Routing in React is a way to navigate between different components in an application. Since React is just a library for building user interface it doesn't provide a solution for routing. This is where third-party libraries like React Router comes into action.

React Router is the most popular library for implementing routing solutions in React. Check out the documentation to understand how it works.

Handling API calls in React.

API allows communications between two applications. When building projects in React, you might need to get data from an external API and pass those data to components in your application. You can use the built-in Fetch method in javascript to handle API calls or packages like Axios.

Resources for handling API calls React

• How to Fetch Data From an API Using React Hooks

React Fragments

A React Component returns only one single element and you can group multiple elements within that element. The usual pattern is to return a div element that holds the multiple elements but this adds an extra node to the DOM and it also has an effect on the layout. Fragments let you group elements together without adding an extra node to the DOM.

There are two syntaxes for writing React Fragment.

function App() {
  return (
    <React.Fragment>
      <p></p>
      <span></span>
    </React.Fragment>
  );
}

function App() {
  return (
    <>
      <p></p>
      <span></span>
    </>
  );
}

Type checking in React with PropTypes

PropTypes is a type-checking mechanism in React for validating data types received from a prop.PropTypes function similarly to Typescript except that it is more suited to smaller projects. To use PropTypes in your project, you have to install the library using the code below.

npm i prop-types

Testing in React

Testing React applications can be very complex and it is usually avoided by many developers. When working on large-scale applications it is very important to run tests as part of your development process. There are several tools available for running tests in React applications, commonly used ones are Jest, React Testing Library, and Cypress.

State Management in React

States are managed locally within components in React but as the application grows bigger it becomes difficult to share data across components. Tools like Context API allows you to manage the state of your application by providing a way to pass data through the component tree. Redux is also a library that can be used to manage state in React applications.

• State Management Battle in React 2021

• Fundamentals of Redux Course

• Redux Essentials

After React, What Next?

This article has highlighted the important concepts and resources to know when learning React. However, the learning does not end, there are technologies that you can explore after learning React.

Nextjs

Next.js is an open-source web development framework created by Vercel enabling React-based web applications with server-side rendering and generating static websites.

Gatsby

Gatsby is an open-source static site generator built on top of Node.js using React and GraphQL.

React Native

React Native is an open-source UI software framework used to develop mobile applications

Conclusion

Overall, React makes it easy to create user interfaces. This article will help you get started from the beginner level to creating your first react applications. Here are a few resources you can check out.

• The New React Documentation
• The Beginner's Guide to React
• React Hooks Tutorial
• How to Build Basic Projects Using React Hooks | A Step-by-step Guide
• Roadmap.sh