Mastering React: Practical Applications and Concepts

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.

The Virtual DOM

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


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.


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


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.


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.


How to display a list of values or objects.

JavaScript Prerequisites

React Collection Examples


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


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.

React Versions and Notes

Any significant points or gotchas between versions will go here.