State Management in SPAs

A 'state' is data that an application keeps to manage its behavior and user interaction. For instance, when you enter something in an input field, you alter the state of that field from empty to having a value.

Let's delve into how SPA frameworks handle these state changes:

State Management in React

Here is how React manages states,

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

Let's see how the code works,

Function	Explanation
const [count, setCount] = useState(0);	Handles the user state
const increment = () => { setCount(count + 1); };	Here the method increment() take action during any state change
return ( <div> <p>Count: {count}</p> <button onClick={increment}>Increment</button> </div> );	Showing the output after state change

State Management in Angular

Here is an example of state management in Angular.

<!-- counter.component.html -->
<div>
  <p>Count: {{ count }}</p>
  <button (click)="increment()">Increment</button>
</div>

// counter.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
})
export class CounterComponent {
  count: number = 0;

  increment() {
    this.count++;
  }
}

Let's take a quick look at the explanation table that makes it easy to understand,

Function	Explanation
<div> <p>Count: {{ count }}</p> <button (click)="increment()">Increment</button> </div>	Shows the output after state change
@Component({ selector: 'app-counter', templateUrl: './counter.component.html', })	Initializing resources
export class CounterComponent { count: number = 0; increment() { this.count++; } }	Main class contain a method ncrement() handles the state change. In this case, it increments the value when a user clicks the Increment button

State Management in Vue

If you're using Vue, you can manage the states like the below,

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

Let's zoom in the code,

Function	Explanation
<template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> </div> </template>	A HTML template containing necessary components
data() { return { count: 0, }; },	Handles the state data
methods: { increment() { this.count++; }, }, };	the method increment() handles the state change. In this case, it increments the value when a user clicks the Increment button

Styling and Layout

Now that you can design a form for your application, control the state, make API calls to get the necessary data, and display it to your users, there's one aspect we haven't addressed: the visual appeal.

Let's optimize the UI to make it more attractive.

By utilizing CSS, or Cascading Style Sheets, you can easily enhance the friendliness and visual appeal of your application's user interface. It is a stylesheet language that enables you to define the visual presentation of your web application. There are three ways to apply CSS in your application:

Inline CSS In this way, you need not use any separate CSS file for styling. You can define the CSS inside the HTML element using the "style" attribute.

<p style="color:red">Your text here</p>

Internal CSS This method allows you to style your HTML elements inside your HTML file using the <style> tag.

<style>
  p {
    color: red;
  }
</style>
<p>Your text here</p>

External CSS You need to create a separate CSS file to define all your styles for your application. The advantage of using this method is that you can share the CSS file across all your application files. So you need not to define the same styling again and again.