Basic Concepts of Single Page Application Frameworks (React/Angular/Vue.js…)

4 min readApr 2, 2023

In this article we discuss the basic concepts that you should know to be able to start with any SPA framework to build more robust applications.

Introduction

In modern frontend web development, using only JS is becoming more and more rare since SPA (Single Page Application) frameworks has a lot to offer and make development nicer and faster, besides the very known feature that you don’t have to reload the entire page every time a new piece of content is displayed. SPAs are designed to provide a more seamless and interactive user experience by loading and updating content dynamically on a single web page.

While these frameworks can be very different in terms of structure, techniques and so on… They still share few fundamental concepts which we will be learning today. Let’s do it!

First Things First

I totally do not recommend to start with SPA frameworks (React and such) without being comfortable enough with JS first. After all, JS is the main building block of these frameworks.

Few topics to learn before switching are:

Concept 1: Components

A component is an element or a group of elements in a page. Typically, you should transform a part of your page into a component whenever you think that part can be reused, making it easier to maintain and update a web application over time. Components can also improve the overall user experience by providing consistent and predictable behaviour across different parts of a web application. Here’s an example:

Using the old way, we would write the same code and copy it 4 times to be able to generate that content. But with components, we would write it only once and reuse it. In pseudo-code it would be something like this:

Nice and clean, right? Here the main page would be called a parent component and an item is a child component.

“ But wait, If we do that then we will have the same image, title and description 4 times, that’s not good! ” You are right my friend that’s why we can move to talk about the second concept 😉

Concept 2: Props

Component props are a way to pass data from a parent component to a child component. Props (short for properties) can be thought of as a set of parameters or inputs that a component can receive in order to customize its behavior and appearance.

When a parent component renders a child component, it can pass data to the child component through props. These props can be any type of JavaScript data, such as strings, numbers, objects, or functions.

Let’s get back to our previous example and build on it. The result would be something like this:

We can go even further and create a loop that iterates in an array of object and have as a result:

Now this is more dynamic, isn’t it?

Concept 3: State

Component state is the current set of values or information that a particular component is currently holding.

Imagine you have a button that changes color when you click it on a web page. You can utilize component state to keep track of whether the button is currently on or off. The state of the button component is updated to reflect the new color when the button is clicked.

Again, this is only a simple example. Imagine you have an inventory of products and you want to control whether a user sees that product listed or not based on its availability. That would be a bit more helpful.

Conclusion

In summary, components, props, and state are essential concepts in modern web development. Components are reusable building blocks that allow developers to create complex user interfaces. Props are used to pass data from one component to another, allowing for customization and flexibility. State represents the current values or data held by a component at any given time and can be updated to reflect changes in the user interface. By understanding these concepts and how they work together, developers can build powerful and dynamic web applications.