JSON and Frontend Frameworks - potatoscript/json GitHub Wiki

In the world of web development, Frontend Frameworks are essential tools that help developers build modern and interactive user interfaces (UIs) efficiently. Frameworks like React, Angular, and Vue.js have become the standard for frontend development. And guess what? JSON plays a crucial role in these frameworks, helping manage data and communicate between the frontend and backend. Let's dive into how JSON is used in these frameworks!

React is one of the most popular frontend frameworks developed by Facebook. It's used for building dynamic single-page applications (SPAs) where the UI updates efficiently without reloading the page.

React uses JSON data extensively, especially when dealing with dynamic content like fetching data from a server or API and rendering it on the webpage.

import React, { useState, useEffect } from 'react';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // Fetching JSON data from an API
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => setUsers(data)); // Setting the data into state
  }, []);

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

• Fetching JSON: We use the fetch API to retrieve JSON data from a remote server.
• State Management: The JSON data is stored in React's state and rendered dynamically on the page.
• Reactivity: React's reactivity system ensures the page updates automatically whenever the JSON data changes.

Angular is a full-fledged frontend framework developed by Google. It's used to build robust web applications and offers a powerful data-binding system, services, and a wide array of features that make it ideal for large-scale projects.

Angular interacts with JSON data through HTTP requests (using HttpClient service) to fetch data from APIs. It also uses data binding to display this data dynamically in the user interface.

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-user-list',
  template: `
    <h1>User List</h1>
    <ul>
      <li *ngFor="let user of users">{{ user.name }}</li>
    </ul>
  `,
})
export class UserListComponent implements OnInit {
  users: any[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // Fetching JSON data from API
    this.http.get<any[]>('https://jsonplaceholder.typicode.com/users')
      .subscribe(data => {
        this.users = data; // Setting the JSON data to users array
      });
  }
}

• HttpClient: Angular's HttpClient service makes it easy to send HTTP requests and handle responses as JSON.
• *ngFor Directive: The *ngFor directive is used to loop through the JSON data and render it dynamically in the UI.
• Two-way Binding: Angular allows two-way data binding, where updates to the UI can reflect on the underlying JSON data and vice versa.

Vue.js is a progressive JavaScript framework used for building user interfaces and single-page applications. It is known for its simplicity and flexibility, making it ideal for smaller projects and scalable apps.

Like React and Angular, Vue.js also fetches data from APIs and dynamically updates the UI. It uses a reactive data model to manage state and updates automatically when the JSON data changes.

<template>
  <div>
    <h1>User List</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: []
    };
  },
  mounted() {
    // Fetching JSON data from API
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => {
        this.users = data; // Setting the data to the users array
      });
  }
};
</script>

• v-for Directive: Vue’s v-for directive is used to loop through the JSON data and display it in the template.
• Reactivity: Vue's reactivity system ensures that whenever the users array is updated with new data, the DOM will automatically update.
• Mounted Hook: The mounted lifecycle hook is used to fetch data when the component is created.

Frontend frameworks also use JSON for sending data to the server (backend). When users fill out a form or perform any action that requires sending data, JSON is often used to serialize the data and send it over HTTP.

import React, { useState } from 'react';

function UserForm() {
  const [name, setName] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    const response = await fetch('https://example.com/api/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name }) // Sending JSON data
    });

    const data = await response.json();
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter Name"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

export default UserForm;

• JSON.stringify: Converts the JavaScript object into a JSON string before sending it.
• Content-Type: The Content-Type header tells the server that the request body contains JSON data.
• Sending Data: Use the fetch API (or libraries like Axios) to send the JSON data to the backend.

In React, Redux is a popular state management library that helps manage global state. JSON is often used to store the application's state and passed between components.

const initialState = { users: [] };

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_USERS':
      return { ...state, users: action.payload };
    default:
      return state;
  }
}

In this example, the users state is stored in JSON format and updated by actions.

In Vue.js, Vuex is the state management pattern and library. Like Redux, JSON is used to store and manage the state of the application.