This page (and site) come from my frustrations of trying to learn a new piece of technology. For me, the difficulties have come from learning a wide range of languages to satisfy job requirements. For you, it may be that finding good information on mastering React is a hard thing to do.

I’m trying to help beginner developers have a resource where comments on the formal documentation and practical examples of those topics live. Whilst doing this I’ll also be learning along the way (see mistake-making). Hopefully, this will be of use to some people. Anyway, on to the React stuff…

Getting Started

If you are just getting started on your React development journey. These articles are for you.

• What is React?
• Should you learn JavaScript and CSS before React?

The Virtual DOM

The Virtual DOM is React’s abstraction of the browser document object model that represents web pages.

• Understanding the Virtual DOM

Components

React components are the building blocks of user interfaces in React. They can be thought of as encapsulated units of UI functionality, meaning they contain their own logic and state and can be used independently or as part of a larger application.

• React Components Explained
• Your First React Component Example
• Creating A Component In React
• What is a stateless React component

Props

Short for “properties”, props are a mechanism for passing data from a parent component to a child component.

• A Comprehensive Guide to Props in React
• What is props drilling?
• Where is this default prop coming from?

State

React components contain information that can drive how they should be rendered. This information is held in a JavaScript object known as the state object.

• Stateless components

Hooks

Hooks are functions that allow functional components to have state, lifecycle methods, and other React features without using class components. They provide a way to reuse stateful logic across different components, promoting code simplicity and reusability.

• SetState – Understanding the state hook

Collections

How to display a list of values or objects.

JavaScript Prerequisites

• Using the map function to iterate arrays in React

React Collection Examples

• Creating a simple list
• Creating a list of objects
• Adding items to a list
• Deleting items from a list

Styling

While not directly a fundamental React concept, there are many styling libraries and methods to style your applications.

• Creating a theme in MUI

Routing

Whilst React is a SPA (Single Page Application) framework we still need ways to specify URL’s that can take visitors to different sections of websites. This is where routing and routing libraries come into effect.

• A simple react-router-dom example

React Versions and Notes

Any significant points or gotchas between versions will go here.

• No need to import react anymore