DEV Community: Emmanuel Fordjour Kumah

Mastering State Management in React: A Guide to useContext and useReducer Hooks

Emmanuel Fordjour Kumah — Mon, 30 Sep 2024 09:30:00 +0000

In this article, you'll learn how to manage the state in a React app using the Context API and the reducer function. The context API enables access to the state globally without prop drilling. Reducers provides a structured approach to update state logic.

At the end of the tutorial, you will build a contact address book that uses the context API, reducer functions, and React hooks. Here is the code

Prerequisite

To begin, you should be familiar with:

Building a React app
Using useState hooks in the React app

Let’s get started!

Overview of state management?

When building complex web applications, you should learn how to manage and synchronize the application's data effectively. This means:

Keeping state organized
Structuring how the state is updated
And how the data flows within the components of your application.

You can use state management libraries like Redux, Mobx, and Zustand to manage. This tutorial focuses on managing the state using the contextAPI and the reducer function.

Let’s understand these concepts.

The Context API: Passing data from parent to child components without prop drilling

Generally, we use props to pass data from parent to child components. The challenge is that, if the element requesting data is located further away from the parent, we will pass that data via props through many components in the middle. With this approach, components that do not need access to the data will still have to receive it, and then pass it on to the required component. This is generally referred to as prop drilling. Passing data via props can be cumbersome for certain types of props (e.g User authentication, theme, locale preference) that are required by many components within an application

To avoid prop drilling, you can use the Context API. Context enables a parent component to share values between components without explicitly passing props. This approach, allows the parent to make the data available to any element in the tree below it.

Inserting the state logic into a Reducer

The more complex your components become, the more difficult it becomes to manage the state logic. Reducers combine all the state update logic (e.g. Add contact, Edit contact, Delete contact) in a single function. This means, that when an event is fired within a component, instead of the state update occurring in that component, all the updates will happen in a reducer function.

Combining all the state updates into a single function (reducer) provides a window for you to view all the state updates at a glance.

You have learned what the Context API and reducer do. Next, you will learn how to add the Context API in a React app.

Steps to add context in the React app

Follow these steps, to add the Context API in React:

Create the context: First, you create the context by importing the createContext method from React. This method provides a context that components can provide or read. It returns an object with a SomeContext.Provider and SomeContext.Consumer properties which are also components. The SomeContext.Provider component lets you give some values to components.

The code below indicates how to create a context
```
//Context.js
import { createContext } from 'react';
//create a SomeContext object and export 
export const SomeContext = createContext();
//properties in the SomeContext object are:
// SomeContext.Provider , SomeContext.Consumer which are also components
```

Wrap your components into a Context Provider and pass it some values: Every context you create has a Provider component. The provider component is wrapped around the component tree. It accepts the value prop.

The code below illustrates a provider component with a value prop.

//ceate a context object called SomeContext
export const SomeContext = createContext();
// create a provider component for the SomeContext object and pass it a value
<SomeContext.Provider value="some context value accessible by all components">
  <App/>
</SomeContext.Provider>

Defining a component that returns the Provider and using that component to wrap up the main is recommended.

//MyProvider.jsx
//Define  a component called MyProvider that return the Context Provider component
function MyProvider(props) {
    return (
        <SomeContext.Provider value="some context value accessible by all components">
            {props.children}
        </SomeContext.Provider>
    );
}
export default MyProvider

// App.js
//wrap the MyProvider component around the App component
//This ensures the value provided is accessbile by all components.
function App(){
  return (
   <MyProvider>
     <App/>
   </MyProvider>
)
}

Use the context value: To use the context value in any component
1. Import the useContext hook from React.
2. Import the created context (e.g. SomeContext)
3. Call the useContext hook. It accepts the created context as an argument and returns the context value

//MyComponent.jsx
import { useContext } from 'react';
import {SomeContext} from "./Context"
//MyComponent is child component that need access to the context value
const MyComponent = ()=>{
//return the context value
const value = useContext(SomeContext);

return (
<div>The child component has the context value displayed here:{value}</div>
)
}

Congratulations, you know how to use the context API to pass data deeply in the component tree without prop drilling.

Next, let’s learn how the reducer function combines state updates.

Steps to add reducers in your React app

Follow these steps to define the reducer function in your React app:

Create a reducer function: The reducer function contains all the logic for the state update. It takes the current state and action as parameters and returns the new state based on the type of action sent by the event handler function in the component

//reducer.js

//define the reducer function. It accepts the state and action object
function yourReducer(state, action) {
// all logic to upate the state will be here  
 if(action.type === "added"){
 //perform this state update logic
}else if (action.type === "deleted"){
 // perform this state update logic
}
...
// return next state for React to set
}

Use the state logic in your component: Import the useReducer hook from React to use the reducer function in any component. This hook accepts the reducer function, and the initial state as arguments and returns the current state and a dispatch function. The current state and dispatch will be passed to other components using context.
Call the dispatch in the event handler function to update the state: Don’t manage the state in your components. Instead, when an event happens (e.g when you submit user details), call the event handler function, which then dispatches an action (send an action) to the reducer function. The reducer function examines the type of action sent. If the action type sent matches any action type in the reducer it updates the state and returns the latest state.

//insider your function component eg. MyComponent.jsx
//import the useReducer hook and call it inside the component
import {useReducer} from "react"
import yourReducer from "./reducer"
const MyApp = ()=> {
const [state, dispatch] = useReducer(yourReducer, initialState)
//state is the current state of the app
//dispatch allows you to send action to update the state

const handleAddContact(){
//dispatch is a function that will trigger the state changes in the reducer
    dispatch({
      type: 'added',
      id: nextId++,
      text: name,
    });
}
return (
<div>
  <h2>Dispatching action </h2>
  <button onClick={handleAddContact}>Click here to dispatch action </button>
</div>
)
}

Here is a summary of the reducer function usage:

Instead of defining the state update logic in the required component, the logic is in the reducer function.
Call the dispatch function in your component and within an event handler function. The dispatch function contains the occurred action.
Based on the action type, the reducer function will update the state and return the latest state.

Combining the Reducer and Context API

Let’s learn how to combine the reducer and context API in our React app.

Use the context API to pass data deeply to child components without prop drilling
Use the reducer function to handle the state update logic
The state is updated based on the action type
The latest state can be accessed with the useReducer hook.
The state is passed down to the other component using the Context Provider component
The state value is read using the useContext hook.

Let’s combine all this knowledge to build our contact address book app.

Project: Building Contact address app

In this section, we will build a contact address app using the Context API and reducer knowledge. The app will enable users to:

Add Contact
Edit contact
Delete contact

Setting up the React app

Set up your React environment using any preferred library and run the app. These are the steps to follow:

Create a component folder in your src directory. All you need in the component folder are Form.jsx, ContactList.jsx, ContactDetails.jsx components. The Form.jsx contains the input elements for adding contacts. The ContactList maps over the array of contacts, and display each contact detail in the ContactDetails component.
Create a context folder. Define a Provider.jsx component inside that folder. In the Provider component create the context and pass your state to the value prop in the ContactContext.Provider component.
Create areducer folder. Create a contactReducer.jsx file inside the folder. Define all the logic to update the state in the reducer function
In the App.jsx component, import the Form, ⁣ContactList. To make the context value accessible by all components, wrap the Provider components around the component tree.

Let’s begin with adding context to our app.

Adding Context to our app

First, we will create the ContactContext in the Provider component. Follow these steps:

Import createContext API from React
Create and export the ContactsContext

//component/context/Provider.jsx
import { createContext } from "react";
export const ContactsContext = createContext(null); // context with a default value of null

The ContactsContext provide access to the ContactsContext.Provider component. In the value prop, you will pass the data to access in the component tree.

//Here the provider component accepts a string as value though it can accept object
<ContactsContext.Provider value="some value">
        {children}
 </ContactsContext.Provider>

Let’s declare the Provider component which accepts children as props and returns the ContactsContext.Provider. Go ahead and add the code below in the Provider.jsx file

// context/Provider.jsx file 
//code above remains the same 
import { createContext} from "react";
import {useState} from "react"

//create the context
export const ContactsContext = createContext(null);

//declare the Provider component which returns the ContactsContext.Provider component
const Provider = ({ children }) => {
//The data to pass to the component tree is in a state variable
  const [state, setState] = useState('some value')
  return (
    <>
      <ContactsContext.Provider value={state}>
        {children}
      </ContactsContext.Provider>
    </>
  );
};

export default Provider;

Wrap the `Provider` component around your components.

Next, we will wrap the Provider component around the Form and ContactList components. This ensures the values assigned to ContactsContext.Provider is accessed by all child components inside the App.jsx

//App.jsx
import "./styles.css";
import Provider from "./context/Provider";
import Form from "./component/Form";
import ContactList from "./component/ContactList";

export default function App() {
  return (
    <div className="App">
      <Provider>
        <Form />
        <ContactList />
      </Provider>
    </div>
  );
}

Access the context value with the `useContext` hook

Now, we want to access the context value in the ContactList component. But first, let’s modify the Provider.jsx component and pass the initialContact as the state variable

//Provider.jsx
import { createContext } from "react";

export const ContactsContext = createContext(null);
//define an initial state for the app
const initialContact= {
  contacts: [
    {
      id: Math.floor(Math.random() * 10),
      name: "Emmanuel Kumah",
      phone: "0244234123",
    },
  ],
  editingContact: null,
};

const Provider = ({ children }) => {
// pass the initial contact as the state variable
  const [state, setState] = useState(initialState)
//pass the state as the context value
  return (
    <>
      <ContactsContext.Provider value={state}>
        {children}
      </ContactsContext.Provider>
    </>
  );
};

export default Provider;

To use the context value in the ContactList component:

Import ContactsContext. This is the context you created with createContext API in the Provider.jsx file
Import the useContext hook from React.
Call the useContext hook and pass the ContactsContext as an argument.

This returns the state. We loop through the array and display details in the SingleContact component.

//components/ContactList.jsx
//import the useContact hook 
import { useContext} from "react";
import SingleContact from "./SingleContact";
//import the created context
import { ContactsContext } from "../context/Provider";

const ContactList = () => {
//call the useContext hook and pass the ContactsContext
  const state = useContext(ContactsContext);


  return (
    <div>
      <section className="contacts">
        <h3>Your Address book </h3>
        {state.length === 0 ? (
          <p>Start Add contacts</p>
        ) : (
          <ul>
            {state.map((contact) => (
              <div key={contact.id}>
                <SingleContact key={contact.id} contact={contact} />
              </div>
            ))}
          </ul>
        )}
      </section>
    </div>
  );
};

export default ContactList;

The app should look something like this:

Now, it doesn't matter how many layers of components you have in your app. When any component calls the useContext(ContactsContext), it will receive the context value ( the state)

Add the reducer logic

In the previous section, you learned how to add and access the context value in the ContactList component. In this section, we will learn how to manage state logic using the reducer and pass the updated state to the components using the context.

Let’s create a contactReducer.jsx file in our reducer folder. We will define a reducer function in this file. Previously, we learned that a reducer function accepts the current state and action as arguments and returns the updated state based on the action type.

Let’s define the reducer function

export const contactReducer = (state, action )=>{
//return the next state for React to set
switch(action.type){
}
}

We will dispatch three action types to the reducer function. These are

Add_Contact
Delete_Contact
Edit_Contact

Because we want to handle all the state logic in a single function, we will use a switch statement to handle each action object. Dispatched actions have a type property to indicate the type of action dispatched.

Let’s see how to handle each action.type

If an action.type matches the Add_Contact , we will define the logic to add a new contact to the state and return the updated state
If an action.type matches the Delete_Contact, we will define the logic to remove that contact from the state and return the updated state
If an action.type matches the Edit_Contact, we will edit the contact details and return the updated state
If the dispatched action.type does not match any of the cases, we will return the state.

Here is the complete code for the contactReducer function and

//contactReducer.jsx
export const contactReducer = (state, action) => {
  switch (action.type) {
    case "Add_Contact": {
// handle the logic for adding a contact
      return {
        ...state,
        contacts: [...state.contacts, { id: Date.now(), ...action.payload }],
        editingContact: null,
      };
    }
    case "Delete_Contact": {
//handle the logic for deleting a contact
      return {
        ...state,
        contacts: state.contacts.filter(
          (contact) => contact.id !== action.payload
        ),
        editingContact: null,
      };
    }
    case "Edit_Contact": {
//handle the logic for editing a contact
      return {
        ...state,
        contacts: state.contacts.map(
          (contact) => {
            if (contact.id === action.payload.id) {

              return action.payload;
            } else {
              return contact;
            }
          }

        ),
        editingContact: null,
      };
    }
    case "SetEdit_Contact": {
      return {
        ...state,
        editingContact: action.payload,
      };
    }

    default: {
      throw Error("Unknown action", action.type);
    }
  }
};

Use the reducer from your component

We defined the logic to update the state, now we want to manage this state in our app. We will use the useReducer hook. It is similar to useState, but it is designed for managing a more complex state.

The useReducer hook accepts two arguments:

A reducer function
An initial state

And it returns:

A stateful value ( a state)
A dispatch function. To assist in dispatching the actions to the reducer.

We will use the state in the Context.Provider component. This is to allow all the components access to the state.

Let’s see how to accomplish our task.

In the Provider component, import the useReducer hook and contactReducer function.
Call the useReducer hook and pass the contactReducer and initialState
This will return the stateful value and the dispatch function

Here is how to achieve that:

//Provider.jsx
import { createContext, useReducer } from "react";
import { contactReducer } from "../reducer/contactReducer";

//define the initial state
const initialState = {
  contacts: [
    {
      id: Math.floor(Math.random() * 10),
      name: "Emmanuel Kumah",
      phone: "0244234123",
    },
  ],
  ed
const Provider = ({ children }) => {
  //use the useReducer hook
  const [state, dispatch] = useReducer(contactReducer, initialState);
//state contains the initial state
//dispatch enables you to update state
    return (
        ...
)

};

Pass the `state` and `dispatch` function as context value

Lastly, we will pass the state and dispatch as an object to the value prop of the Contacts.Provider component. This will enable all the children component access these values

Here is the code below

//Provider.jsx
const Provider = ({ children }) => {
  //manage state with reducers
  const [state, dispatch] = useReducer(contactReducer, initialState);
//pass state and dispatch to the provider component
  return (
    <>
      <ContactsContext.Provider value={{ state, dispatch }}>
        {children}
      </ContactsContext.Provider>
    </>
  );
};

Here is the complete code:

import { createContext, useReducer } from "react";
import { contactReducer } from "../reducer/contactReducer";

export const ContactsContext = createContext(null);

const initialState = {
  contacts: [
    {
      id: Math.floor(Math.random() * 10),
      name: "Emmanuel Kumah",
      phone: "0244234123",
    },
  ],
  editingContact: null,
};

const Provider = ({ children }) => {
  //manage state with reducers
  const [state, dispatch] = useReducer(contactReducer, initialState);
  return (
    <>
      <ContactsContext.Provider value={{ state, dispatch }}>
        {children}
      </ContactsContext.Provider>
    </>
  );
};

export default Provider;

Dispatching actions in your components

Finally, let’s dispatch actions to the reducer to update the state.

We have a reducer function (contactReducer) which contains all the state update logic. This means our component would be free of state update logic. It will mainly contain event handlers which dispatch an action object anytime an action occurs.

The Form.jsx component holds the form elements. In this component, we will listen for a change in the input fields and update the name and phone state. On submission, we will dispatch the Add_Contact action to the reducer function. The reducer will check if the action type( Add_Contact) matches any case. If it does, it updates the state by adding the new contact.

In the Form.jsx, we access the dispatch function using the useContext hook. Thedispatch accepts an object with type and payload as properties.

The type key enables you to specify the type of action that occurred
The payload holds any data to pass to the reducer.

Here is the code for dispatching an action on form submission


  const onFormSubmit = (e) => {
    e.preventDefault();
    if (state.editingContact) {

      dispatch({
        type: "Edit_Contact",
        payload: { id: state.editingContact.id, name, phone },
      });
    } else {
      dispatch({
        type: "Add_Contact",
        payload: {
          id: Date.now(),
          name,
          phone,
        },
      });
    }

    //clear input fields
    setName("");
    setPhone("");
  };

In the code above, If the state.editingContact is true, it indicates we want to edit a contact. Hence we dispatch a Edit_Contact action type, and pass the edited contact details to the payload property.
Else we dispatch a Add_Contact action type, and pass the details of the contact to the payload property.

Here is the complete code for the Form.jsx component

//Form.jsx
import { useState, useEffect, useContext } from "react";
import { ContactsContext } from "../context/Provider";

const Form = () => {
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");

  const { state, dispatch } = useContext(ContactsContext);


  useEffect(() => {
    if (state.editingContact) {
      setName(state.editingContact.name);
      setPhone(state.editingContact.phone);
    }
  }, [state.editingContact]);

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setContactDetails((prevState) => ({ ...prevState, [name]: value }));
  };

  const onFormSubmit = (e) => {
    e.preventDefault();
    if (state.editingContact) {
   // dispatch Edit_Contact if you are editing
      dispatch({
        type: "Edit_Contact",
        payload: { id: state.editingContact.id, name, phone },
      });
    } else {
// dispatch Add_Contact if we want to add a new contact
      dispatch({
        type: "Add_Contact",
        payload: {
          id: Date.now(),
          name,
          phone,
        },
      });
    }

    //clear input fields on form submission
    setName("");
    setPhone("");
  };
  return (
    <>
      <section className="formSection">
        <h2 className="heading">Create your buddy list</h2>

        <form onSubmit={onFormSubmit}>
          <input
            type="text"
            name="fullname"
            placeholder="Enter  name"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />

          <input
            type="text"
            name="phone"
            id=""
            placeholder="mobile"
            value={phone}
            onChange={(e) => setPhone(e.target.value)}
          />
          <button className="btnAdd" type="submit" disabled={name === ""}>
            {`${state.editingContact ? "Update" : "Save"}`}
          </button>
        </form>
      </section>
    </>
  );
};

export default Form;

Finally, in the ContactDetails component, we will dispatch the Delete_Contact type to delete a contact, and dispatch the Set_EditContact if we are editing a contact.

Take a look at the code below:

import { useContext } from "react";
import { ContactsContext } from "../context/Provider";

const ContactDetails = ({ contact }) => {
  const { dispatch } = useContext(ContactsContext);

  const handleEdit = () => {
    dispatch({
      type: "SetEdit_Contact",
      payload: contact,
    });
  };
  const handleDelete = () => {
    dispatch({
      type: "Delete_Contact",
      payload: contact.id,
    });
  };
  return (
    <>
      <div className="contact">
        <h3 className="contactName">Name: {contact.name}</h3>
        <p>Contact:{contact.phone}</p>
        <div className="actionBtn">
          <button className="btnContact" onClick={handleEdit}>
            Edit
          </button>
          <button className="btnContact" onClick={handleDelete}>
            Delete Contact
          </button>
        </div>
      </div>
    </>
  );
};

export default ContactDetails;

Conclusion

Congratulations, you have learned how to use context API and the reducer hook. You have learned that:

Context enables a parent component to share values between components without explicitly passing props
Reducers combine all the state update logic (e.g. Add contact, Edit contact, Delete contact) in a single function. This means, that when an event is fired within a component, instead of the state update occurring in that component, all the updates will happen in a reducer function.
useContext is a React Hook that lets you read and subscribe to context from your component
useReducer is a React Hook that lets you add a reducer to your component

A comprehensive introduction to GraphQL: for efficient data queries and mutations

Emmanuel Fordjour Kumah — Wed, 27 Mar 2024 14:05:30 +0000

This article will teach you the concepts in GraphQL to enable you to perform queries and mutations on a data set. GraphQL is a query language and specifications for APIs that enable clients to request specific data, promoting efficiency and flexibility in data retrieval.

At the end of this article, you will know:

What GraphQL is
The problem GraphQL solves
The difference in using HTTP methods in REST API vrs query and mutation in GraphQL API to fetch and manipulate data.
How to define the shape of the data to query using Schema
How to query and mutate data on a GraphQL server using ApolloSandbox

In this tutorial, you will learn how to fetch and mutate using the local data of students and course array. The complete code snippet is on Github

Prerequisite

Familiarity with JavaScript
Familiarity with NodeJS

Introduction to GraphQL

GraphQL is a query language for your API, and a server-side runtime for executing queries using a type system you define for your data.

This means it provides a way to request and modify data from multiple data sources ( for instance, a REST API, SQLite database, and services) in a single query

GraphQL adopts the concept of a graph an approach of interconnecting different data to form a relationship. In modern applications, numerous data can be connected to form the app data graph. For instance, if you are building a blogging app that has resources (data) such as:

Posts
Authors
Comments
Followers

These entities can be connected to form a relationship. Whenever a developer wants to access a resource, he writes a query that specifies exactly what data he needs.

GraphQL is akin to visiting a restaurant, and telling the chef exactly what you want for your menu rather than accepting the provided menu.

For your menu, you can specify:

The type of protein (chicken, fish, tofu) to be served
The cooking method (grilled, baked, etc) to be used.
The sides ( salad, veggies, etc) to be added
And any specific sauces or toppings.

Similarly, with GraphQL, you can request specific fields from different parts of a data. The server then fulfills your request, giving you the exact data you need, without any unnecessary information.

There are two main components of GraphQL:

GraphQL Server
GraphQL Client

The GraphQL server is responsible for implementing the GraphQL API on the server side. Examples of GraphQL servers are:

Express
Apollo server

The GraphQL client allows apps to interact with the GraphQL server. It enables fetching and updating data in a declarative manner.

Examples of GraphQL clients are:

Relay
Apollo Client

What problem does GraphQL solve: data fetching with REST API vrs GraphQL

Generally, front-end developers display data on the UI of an app by sending requests to multiple endpoints.

For instance in building a blogging app. You will have a screen that displays the titles of the posts of a specific user. The same screen also displays the names of the last 3 followers of that user.

With a REST API, these resources may be on different endpoints. To fetch these resources, you may need to send different requests.

For instance, here are the steps to fetch and display the data in the blogging app using a REST API:

Fetch request to /users/<id> endpoint to fetch the initial data for a specific user.
Another request to the /users/<id>/posts endpoint is to return all the posts and then filter out the title.
Finally, a request to /users/<id>/followers endpoint to return a list of the followers for the specified user.

In this scenario, you are making three requests to different endpoints to fetch the required data to build the UI.

This introduces two issues:

Over-fetching
Under-fetching

Overfetching is when a client downloads additional information than is required in the UI. For instance in the /users/<id>/posts/ endpoint, the data required is the title for each post. However, additional information may be returned such as:

id
post body,
likes, etc.

These will not be displayed in the UI, and can lead to:

Unnecessary transmission of data over the network.
Increased response times, and possibly impacting the performance of the client app.

Underfetching is when a client needs to make multiple requests to the server to gather all the necessary data for a particular view or operation. This happens when a specific endpoint doesn’t provide enough of the required information hence the client will have to make additional requests to fetch everything it needs.

Underfetching can lead to unnecessary network calls as numerous exchanges between the client and server increase the request time and network traffic.

GraphQL solves these issues of underfetching and overfetching by enabling clients to specify their exact data requirements in a *single query*. A "single" query means only one request is made to a GraphQL server to fetch specific data. That query will contain all the data required by the client.

Understanding the client and server roles

The GraphQL API is built on top of a GraphQL server. The server is the central point for receiving GraphQL queries. Once the query is received, it will be matched against a defined schema (you will learn more about schema as you proceed). The server retrieves the requested data by interacting with databases, microservices, or other data sources.

The GraphQL server consists of:

Schema: This represents the structure or shape of your data set.
Resolvers: They are functions that specify how to process specific GraphQL operations and contain the logic for fetching the requested data.
Data Sources: any available data source. Eg. MySQL, MongoDB, etc

The GraphQL Client enables apps to interact with a GraphQL API. You will describe the data your app needs in the GraphQL client, send queries and mutations to the server, and receive the response.

Examples of GraphQL clients are:

Apollo Client
Fetch QL
Relay

So far, you know what GraphQL is and the problem it solves. In the next section, you will learn how to build a GraphQL Server using the Apollo server.

Setting up a GraphQL Server

In this section, you will:

Build and run an Apollo Server
Define the GraphQL Schema that represents the structure of your data sets.

Let's get started

Step 1: Creating a new project

Create a directory and navigate into the directory
Inside the directory, initialize a Node.js project and set it up to use ES modules
```
npm init --yes && npm pkg set type="module"
```
Install graphql and apollo-server dependencies using the command below:
```
npm install @apollo/server graphql
```

Step 2: Create an instance of the Apollo server

Create an index.js file inside the root directory. This will contain all the server requirements.

Add the code below to the index.js file

import { ApolloServer } from "@apollo/server";
import { startStandaloneServer } from "@apollo/server/standalone";

const server = new ApolloServer({
  //typeDefs,
 //resolvers,
});
const { url } = await startStandaloneServer({
  server,
  listen: { port: 4000 },
});

console.log(`Server ready on port ${url}`);

In the code above:

The new ApolloServer() constructor creates a new instance of the server. This accepts an object with two properties: the schema definition and the set of resolvers.
Next, you will pass the server instance to the startStandaloneServer function. This will create an Express server, install the ApolloServer instance as middleware, and prepare your app to handle incoming requests.

Step 3: Define your GraphQL Schema and types

The GraphQL schema specifies the available data, its format (data types), and the operations(queries, mutation) that can be performed on it. When the query is initiated the data returned should match the structure defined in the schema.

Here is what you should know about a schema:

The schema is a collection of types (and the relationship between these types).
Every type you define can be categorized into:
- Scalar: This is similar to the primitive types in JavaScript ( String, Float, Int,Boolean, ID , etc)
- Object: This represents the core items that can be fetched and what fields it has.
The schema also has two special types:
- Query and Mutation : These detail what data you can request or mutate. You will learn more about queries and mutations types later.

Below is the syntax of an object type definition:

type EntityName {
#field name and the corresponding type
fieldName:  scalarType 
}

In this tutorial, clients can query from an array of students and course data. Hence, you will define the structure for the Course and Student as object type in the schema.

Here's an example of a Course object in a schema definition.

# Example of schema defintion
# This represents a Course object with fields that object has
type Course {
    id:ID
    name:String
    cost:String
    rating: Float
}

Let's examine the type above:

Course is the name of the object type.
The details between the { and } are fields of the Course type. That means id, name, cost , and rating are the only visible fields in any GraphQL query that works on the Course object.
The ID, String and Float are the scalar types. It means the returned data for the field should be of type String, Float or ID

Now, let's create a schema.js file in the root directory, and define a variable called typeDefs to store all our types in the schema. Later, you will pass this typeDefs to the server.

#schema.js
export const typeDefs = `#graphql
# Your schema will go here
`;

export const typeDefs = `#graphql
# define the Course object 
type Course {
    id:ID
    name:String
    cost:String
    rating: Float
}
# define the Student type
type Student {
    id: ID
    name: String
    level: String
    courses:[String]
}

`;

In the above, we have two objects in our schema: Course and Student each with its structure.

Understanding the`Query` Type

Let's tell GraphQL what to retrieve when we query. The Query type indicates what you can fetch from the data source.

Here is what you need to know about the Query type:

It can be compared to the 'read' operations in a CRUD (Create, Read, Update, Delete) system.
In the Query type are fields that acts as entry points into the rest of our schema.

The advantage of GraphQL is that you can fetch data from various resources using a single query ( Query type). However, with REST APIs different endpoints are required to fetch various resources (e.g api/students, api/courses).

Below is the syntax for a Query :

# This is the Root Query
type Query {
 # within indicate the specify fields to query and what the expected results should be
field: returnedType
field: returnedType
}

On the front-end, we want to fetch an array of courses, students, and the details of a specific student

Here is how we will define them in our root Query

# Use the Root Query to define what you can fetch from the data source
type Query {
    #get courses array
    courses: [Course]
    #get students array
    students:[Student]
#Fetch a specific student by providing a student's ID as argument
    student(id:ID!): Student
}

In the code above, clients will be able to execute a single query by specifying the courses and students fields.

courses: This returns an array of courses of type Course
students: This returns an array of students of type Student
student: This field accepts anid parameter and returns specific student details

Step 4: Define your data set

In the previous steps, we define the structure of our data and what we can query. Now, we will define the data itself.

Apollo Server can fetch data from any source you connect to ( for instance, SQLLite database, REST API, etc).

In this tutorial, you will use a local data source.

Create a db.js file in your root directory
Add the code below

let courses = [
  {
    id: "1",
    name: "Web Development",
    cost: "300",
    rating: 4.5,
  },
  {
    id: "2",
    name: "Digital Marketting",
    cost: "230",
    rating: 3.0,
  },
  {
    id: "3",
    name: "Data Analytics",
    cost: "345",
    rating: 3.9,
  },
  {
    id: "4",
    name: "Cyber Security",
    cost: "341",
    rating: 3.1,
  },
  {
    id: "5",
    name: "Mobile Apps",
    cost: "465",
    rating: 2.1,
  },
  {
    id: "6",
    name: "Artificial Intelligence",
    cost: "604",
    rating: 5.0,
  },
  {
    id: "7",
    name: "Maching Learning",
    cost: "345",
    rating: 2.5,
  },
  {
    id: "8",
    name: "Dev Ops",
    cost: "567",
    rating: 2.6,
  },
  {
    id: "9",
    name: "Backend Development",
    cost: "345",
    rating: 3.1,
  },
];

let students = [
  {
    id: "1",
    name: "Emmanuel Smith",
    level: "100",
    courses: ["Web Development", "Dev Ops"],
  },
  {
    id: "2",
    name: "Robert Taylor",
    level: "200",
    courses: ["Backend Development", "Machine Learning"],
  },
  {
    id: "3",
    name: "Emly Lastone",
    level: "100",
    courses: ["Frontend Development"],
  },
  {
    id: "4",
    name: "Clement Sams",
    level: "300",
    courses: ["Mobile Apps"],
  },
  {
    id: "5",
    name: "Lius Gracias",
    level: "100",
    courses: ["Machine Learning", "Backend Development"],
  },
  {
    id: "6",
    name: "Jeniffer Baido",
    level: "200",
    courses: ["Data Science"],
  },
  {
    id: "7",
    name: "Natash Gamad",
    level: "300",
    courses: ["Cyber Security"],
  },
  {
    id: "8",
    name: "Paul Graham",
    level: "100",
    courses: ["Web Development"],
  },
  {
    id: "9",
    name: "Musti Madasd",
    level: "300",
    courses: ["Artiificial Inteligence"],
  },
  {
    id: "10",
    name: "Victor Bruce",
    level: "200",
    courses: ["Mobile Apps", "Backend Development"],
  },
  {
    id: "11",
    name: "Lilian Taylor",
    level: "200",
    courses: ["Web Development"],
  },
  {
    id: "12",
    name: "Smith Chef",
    level: "100",
    courses: ["Backend Development"],
  },
];

export default { courses, students };

Step 5: Add the typeDefs to the server

The Apollo Server needs to know about the types defined in the schema.js.

In the index.js file:

import the typeDefs specified in the schema.js
Pass the typeDefs as an argument to the new ApolloServer({})

#index.js
...
import { typeDefs } from "./schema";

const server = new ApolloServer({
  typeDefs, #type defs passed as an argument
 #resolvers will be passed here later
});
....

Next, we will define the logic for querying and mutating the data. To accomplish this, you will use resolvers

Step 6: Set up a resolver

Resolvers are functions that generate a response for every GraphQL query. A resolver's mission is to populate the data for a field in your schema. It connects schemawith the data sources, fetches the requested data, and populates the fields in the schema with that data. Resolvers have the same name as the field that it populates data for.

In the schema.js you have the Query type below:

#schema.js
type Query {
    # specify fields to query and what the expected results should be
    courses: [Course]
    students:[Student]
}

You will define resolvers for the courses and students fields of the root Query type so that they always return an array of Course and Student when queried.

Add the code below to the index.js file

//index.js
const resolvers = {
  Query: {
  //resolver function for students field
    students() {
//connect to the data source and return students data
      return db.students; 
    },
// resolver function for courses field
    courses() {
// connect to the data source and return courses data
      return db.courses;
    },
  },
};

Here are the steps to define a resolver:

Define all the resolvers in a JavaScript object named resolvers. This object is called the resolver map
The resolver will have a key of Query with an object value
Within the object, you will define a function that connects to the data source performs the needed operation, and returns the specified data. The function name should be the same as the field to query

In the code above the students and courses resolver functions connect to the data in the db.js file, and return the students and courses data respectively.

Next, you will pass the resolvers object to the server:

...
// Pass schema definition and resolvers to the ApolloServer constructor
const server = new ApolloServer({
  typeDefs,
  resolvers,
});
...

Let's recap what we have done:

Created an Apollo server
Defined the schema
Defined the resolver
Connected the resolver to the data
Passed the resolver and schema to the Apollo server instance

In the next sections, you will start the server, query, and mutate data from the source.

Step 8: Start the server

Let's start the Apollo server by running the command below:

node index.js
// if you have nodemon install use the command
nodemon index.js

You should now see the following output at the bottom of your terminal:

🚀  Server ready at: http://localhost:4000/

Fetching resources from the server

Our server is up and running. Now, we need to fetch data from the source. To do that, you will execute GraphQL queries on the server. Queries are operations that fetch resources from the server.

Because we do not have a frontend app, we will use Apollo Sandbox to execute the query. It provides a quick way to test GraphQL endpoints.

Visit http://localhost:4000 in your browser to open the sandbox. The Sandbox includes the Apollo Studio Explorer, which enables you to build and run operations on the Apollo server.

The Sandbox UI displays:

A middle panel for writing and executing queries
A right panel for viewing responses to the query results
Tabs for schema exploration, search, and settings
A URL bar for connecting to other GraphQL servers (in the upper left)

Let's learn how to fetch data from the GraphQL server.

Below is the syntax for a query:

query Query_name{ 
someField 
}

Now, Let's execute a query for the students and courses fields

Enter the query keyword
Type the name for your query ( e.g StudentQuery, CoursesQuery, etc)
Within the curly brackets ( {} ), enter the name of the field to query as defined by the root Query in your schema
Open another curly bracket ({} ) and specify the exact fields to query for the object

Because you are using the ApolloSandbox, you can enter these steps in the "Operations" panel and click the "blue" button in the upper right.

Now, type the code below into the Operations panel and click the blue button.

# executing a query
query CourseStudentsQuery{
  courses {
# only get these fields from the query
    name
    cost
  }
  students {
# only get these fields from the query
    name
    courses
  }
}

This action will:

connect to the server
call the resolver function for that field.
The resolver function connects to the data sources, performs the needed logic, and returns a response
The response is a JSON object containing only the specified fields.
The response will appear in the "Response" panel

Here is a screenshot of the operations and the response

One advantage of GraphQL is enabling clients to choose to query only for the fields they need from each object

In the query above, we requested only these fields for each query

courses: name and cost fields
students: name and courses fields

Hence, only these fields will show in the response. Now, we have fetched the specified data for two different resources with a single query eliminating over-fetching.

Understanding GraphQL arguments: querying for a specific field

In our schema, we have defined the entry points for courses and students, but we still need a way to query for a specific student by its ID. To do that, we'll need to add another entry point to our schema.

An argument is a value you provide for a particular field in your query to help:

retrieve specific objects
filter through a set of objects
or even transform the field's returned value.

To define an argument:

Add parentheses after the field name. Eg. fieldName()
Inside the parentheses, write the name of the argument followed by a colon, then the type of that argument. Eg. (id:ID ). Separate multiple arguments with commas.

Below is the syntax

type Query {
fieldName(argName: argType)
}

In this tutorial, we want to query for a specific student by ID

Inside the Query type in schema.js:

Add the student field
Within the parenthesis specify the id argument and its type (id: ID)
Specify the returned object type Student


type Query {
 #initial queries remains    
... 
#Fetch a specific student by providing a student's ID as argument
  student(id:ID!): Student
}

Next, in the index.js define a resolver for the student field that uses the provided ID to fetch details of the student.

//index.js
const resolvers = {
  Query: {
  ...
//resolver for the student field to fetch a specific student
    student(parent, args, contextValue, info) {
      return db.students.find((student) => student.id === args.id);
    },
  },
};

A resolver can optionally accept four positional arguments: (parent, args, contextValue, info)

The args argument is an object that contains all GraphQL arguments provided for the field in the schema.
Inside the body of the resolver function, we connect to the database and find a student with id that equals the args.id

Because we have defined the resolver function for the student, we can query for a specific student with the ID.

Here is how the operation will look like in ApolloSandbox

In the "Variables" section, we have a variable studentId with a value of 5
In the "Operation" section is Student query. It accepts the variable $studentId with a type of ID!
The $ indicates a variable and the name after indicates the variable name
Next, we specify the field to query and pass in the variable
We then specify that we only want to return the name field for that query

You know how to fetch data from the server using the ApolloSandbox. Next, let's learn how to mutate data.

Mutating data on a GraphQL server

A mutation is an operation that allows you to insert new data or modify the existing data on the server. This is similar to POST, PUT, PATCH and DELETE requests in REST

To modify data, you use the Mutatation type.

Here is how to mutate data in our schema:

Start with the type keyword followed by the name Mutation
Inside the curly braces, specify the entry point. That is the field to mutate.
We recommend using a verb to describe the specific action followed by the data the mutation will act on. Eg. addStudent, deleteStudent, createStudent
Pass the ID as an argument to the field to mutate
Specify the return type after the user makes the mutation.

Let's delete a student from the database. Here is how to do that

#schema.js
type Mutation{
#entry point to delete a student
    deleteStudent(id: ID!): [Student]
}

In the code above:

We use deleteStudent(id: ID!) field to indicate we want to delete a student's data by passing the id as an argument.
Once the user has deleted a student, we return updated data that specifies an array of Student object.

Next, you will define the resolver function for this mutation. Inside the index.js and in the resolver object, type the code below:

//index.js
const resolvers = {
//code here remains the same
  ...
  //The Mutation object holds the resolver methods for all mutations
  Mutation: {
//function to mutate data of a specified student
    deleteStudent(_, args) {
      db.students = db.students.filter((student) => student.id !== args.id);
      return db.students;
    },
  },
};

In the code above:

We added a Mutation property to the resolvers object to indicate the mutation of data
We defined the deleteStudent(_, args) method and passed the args object as parameter
Inside the method, we access the database and filter out all students whose id does not match the args.id
Finally, we returned the results.

Now, let's delete a student using the Sandbox.

Open a new tab and in the "Operation" section, add the following code below:

mutation DeleteMutation($deleteStudentId: ID!){
 deleteStudent(id: $deleteStudentId) {
//Student object should have the following fields
   id,
   name,
   level,
 }
}

In the above:

We used the mutation key to indicate a mutation of data
DeleteMutation is the general name for the mutation. We pass the $deleteStudentId variable as a parameter. This will hold the value passed in the 'Variable" section of the ApolloSandbox
The deleteStudent(id: $deleteStudentId) is the field defined in the schema. It accepts the ID we passed in the "Variable" section
Within the body of the deleteStudent we specify the fields the Student object should return after deleting

Finally, in the "Variable" section, indicate the ID of the student to delete and click on the "DeleteMutation" button. The specified student will be deleted and the response is displayed in the "Response" section.

Let's learn how to add a new student.

In the Mutation type, define addStudent field. This field will accept a student argument of type StudentInputsand return a Student type

Add the code below the Mutation:

#schema
type Mutation{
   # add addStudent field
    addStudent(student: StudentInput!): Student
}

In the next line after the Mutation, define the StudentInput. This will contain all the fields the new student will have

#Mutating data 
type Mutation{
    deleteStudent(id: ID!): [Student]
    addStudent(student: StudentInput!): Student
}
# data to pass to addStudent
input StudentInput{
    name: String
    level: String
    courses:[String]
}

Next, go to the index.js and in the Mutation property of the resolvers object, we will define a addStudent resolver function that adds a new student to the data.

Add the code below the Mutation:

//index.js 
const resolvers = {
Query: {
...
},
//The Mutation object holds the resolver methods for all mutations
  Mutation: {
   ...
// this will add new student to the students data
    addStudent(_, args) {
      let student = {
        ...args.student,
        id: Math.floor(Math.random() * 1000).toString(),
      };
      db.students.push(student);
      return student;
    },
  },
}

In the code above:

Within the body of the addStudent method, we have defined a student object
The args.student contains all the arguments we will pass to the method and the id will generate a random ID
The db.student access the students' data source, and we push the new student object to it
Finally, we return the details of the student we created.

Here is the screenshot on how to add a new student in the sandbox:

The AddMutation accepts a $student variable of type StudentInput
The $student is passed to the addStudent function
In the "Variable" section, we define the input data. This is a student object with name, level and courses properties.

Summary

You now have the required knowledge to query and mutate data with GraphQL. In summary, GraphQL is a query language for API that provides a way to request and modify data from multiple data sources in a single query.

For further studies, check this comprehensive tutorial on ApolloGraphql

How to use Typescript in React apps

Emmanuel Fordjour Kumah — Wed, 07 Feb 2024 12:31:50 +0000

In this article, you will learn how to use Typescript in your React applications to write better, more type-safe code. Typescript adds rules on how different kinds of values can be used. This helps developers catch and fix type-related errors as they write their code in the editor.

At the end of the article you will know:

What Typescript is and why it is important
Understand the everyday types you will use in your app
How to type props in a component
How to type events handlers
How to type values in useState, useRef and useContext hooks

Prerequisite:

Basic understanding of React
Familiarity with TypeScript everyday types

Introduction to TypeScript: a static type checker

Developers encounter a lot of type errors when building apps. This means some value was used where we would expect a specific kind of value. For example, you accessed a property on an object that was not present.

Here is an example:

const userDetails = {name:"Emmanuel", location:"Ghana"}
//loction property does not exist on the userDetails
console.log(userDetails.loction) //check the spelling of loction

The objective of Typescript is to be a static type checker for JavaScript programs. Static type checking is how to determine what is an error and what's not based on the kind of value being operated on. Typescript is a tool that runs before your code runs to ensure the correct types of values.

Using Typescript developers can check for errors when programming before running the app. It achieves this by checking the type of values assigned to variables, function parameters, or values returned by a function. If the value assigned to the variable does not match the data type defined for that variable, Typescript catches that as an error and allows you to fix it.

This improves the development experience as it catches errors as you type the code rather than checking the browser or console to detect the error.

Why add Typescript to JavaScript

JavaScript is a dynamic type(loosely typed) language. This means you do not specify the type stored in a variable in advance. With dynamic typed language, variables can change their type during runtime. A variable can be assigned a string and later assigned an object. This means type errors may only be discovered at run time.

To avoid this experience, Typescript has been added as a layer on top of the JavaScript language. This introduces static typing to JavaScript. In static typing, you explicitly define data types of the values, function parameters, and return values while writing the program and cannot change during runtime.

A Typescript compiler in your project enforces type correctness by checking the types of variables and expressions before the app is executed. If an error is detected, the app will not be compiled until the errors are fixed. As a result, Typescript catches type-related errors during development, improving code quality.

In the next section, we will look at the type annotation and common types in Typescript.

Understanding type annotation

You can add a type annotation to explicitly specify the type of the variable, functions, objects, etc.

Type annotations are specified by adding a colon (:) followed by the specified type after the identifier.

For example, in the context of variables and constants, the syntax for type annotations is as follows:

let variableName: type;
let variableName: type = value; 
const constantName: type = value;

Here is an example of how to annotate and assign primitive data types ( string, number , boolean) to variables.

let userName: string = "Emmanuel" //assigns a string value to userName
let age: number = 23 // assigns a number value to age
let isLoggedIn: boolean = true // assigns a boolean value to isLoggedIn

Once a variable is annotated with a type, it can be used as that type only. If the variable is used as a different type, TypeScript will issue an error.

For instance, you can only assign a string value to the userName. If you try assigning a number, it will throw an error.

See the example below:

userName = 23
//error logged
Type 'number' is not assignable to type 'string'.

Basic Types

In this section, we will revisit some basic types to help you understand the TypeScript type system. Here are some basic types:

Array: To annotate a array type you use the specific type followed by a square bracket.

Here is the syntax:


let arrayName: type[];

For instance, the code below specifies an array of strings

let persons: string[] = ["Emmanuel", "Robert", "Thomas"]

Object: To specify a type for an object, you use the object type annotation. Here is an example:

//annotate the type for each property in the object
let userDetails: {
    name: string, 
    age: number,
    location: string,
    isLoggedIn: boolean
}
// assign the expected values to each property
userDetails = {
    name:"Robert",
    age: 23,
    location: "Ghana",
    isLoggedIn: true
}

In the example above, the properties of theuserDetails has been annotated with the preferred type:

name of type string
age of type number
location of type string
isLoggedIn of type boolean

Functions: Functions are the primary way of passing data in JavaScript. Typescript allows you to specify the types for both the parameters and the return values.

On declaring a function, you can add type annotation after each parameter.

The example below shows a function with type annotation for the name parameter:

// Parameter type annotation
function greetUser(name: string) {
  console.log(`Hellos ${name});
}

Now that the name has a string type, any argument passed to the function will be checked. If it does not match the expected type, Typescript catches it and throws an error.

Here is an example:

//when executed, it will generate a runtime error
greetUser(34)
//error log
Argument of type 'number' is not assignable to parameter of type 'string'.

Return Type annotation: Return type annotations appear after the parameter list to indicate the type of the returned value.

Here is an example:

// the function would return a number
function getNumber(): number {
  return 26;
}

If a function does not return any value, the return type is void

function greetUser(): void {
console.log("Hi there")
}

Function parameter types

If object is passed as a parameter to a function, you will use the object type annotation. To annotate an object type, you annotate the type for each property.

Here is an example:

function showUserDetails(user:{firstName: string, age: number}){
 console.log(`Hello ${user.firstName}, you are ${user.age} years`)
}
showUserDetails({firstName:"Emmanuel", age:23})

Optional Properties

You can specify that a property in an object is optional. To do this, add a ? after the property name.

Using the previous example, you can set the lastName property as optional.

Here is an updated version:

//parameter with optional lastName
function showUserDetails(user:{firstName: string, lastName?:string, age: number}){
 console.log(`Hello ${user.firstName}, you are ${user.age} years`)
}
showUserDetails({firstName:"Emmanuel", age:23}) // lastName is optional
showUserDetails({firstName:"Rober", lastName:"King",age: 24}) //lastName is included

Union Types

Union Types allows developers to build new types by combining different types.

Below is the syntax

let variableName: type | anotherType

For instance:

let userId: string | number 
//userId can be assigned either a string or number type
userId = 2
userId = "2"

In the example below, we have declared a function that can accept either a string or number type as a parameter

//type can be a number or string
function getUserId(id:number | string){
  console.log(`The user ID is ${id}`)

}
getUserId(9) // works when a number is passed
getUserId("23") // works when a string is passed

Type aliases

Type aliases allow developers to use the same type more than once and refer to it by a single name.

The syntax for a type alias is:

type alias = existingType

The existingType can be any valid type.

Here are some examples:

type chars = string
let message: chars //same as assigning a string type
//object type now has an alias UserType
type UserType = {
  firstName: string, 
  lastName?: string, 
  age: number
}

function showUserDetails(user:UserType){
 console.log(`Hello ${user.firstName}, you are ${user.age} years`)

Interfaces

Interfaces are similar to type aliases. However, they only apply to object types.

Here is an example of an interface

//declare the interface
interface UserInter {
  firstName:string, 
  lastName?: string, 
  age: number
}
function showUserDetails(user:UserInter){
 console.log(`Hello ${user.firstName}, you are ${user.age} years`)

We have covered all the common types used in TypeScript. In the next section, we will know how to add TypeScript to a React app.

Setting up Typescript in a React project

To start a React app project with TypeScript, you can run:

npx create-react-app my-app --template typescript

This will add TypeScript to your React app. Replace "my-app" with the name of your app. Notice that all the familiar .jsx extensions will be replaced by .tsx. Also, any component you create should end in the .tsx . For instance MyComponent.tsx

Here is the GitHub for the tutorial. For easy reference, the concepts to learn are in a separate branch

First, let's learn how to type React Components

Typing React Function Component

Use React.FC to explicitly specify the type of a React Function component including its props. This provides type-checking and autocomplete for static properties. When you define a component using React.FC, you can specify the type of the component's props within angle brackets.

Below is the syntax

React.FC<MyProps>

Here are some examples of typing function components

import React from "react";

const MyComponent: React.FC = () => {
  return <div>MyComponent</div>;
};

export default MyComponent;

Typing component props

Components accept props. props have values hence, you can type props. With this approach, TypeScript will provide type checking and validation for props passed to the component. When you call the component and assign a value of the wrong type to the prop, TypeScript will throw an error.

There are four approaches to typing props:

Using React.FC
Define types inline
Use a type alias
Use an interface
Inline typing with destructuring

Here is an example of using React.FC to type props

import React from "react";

//Example of typing React Component props
const MyComponent: React.FC<{ hasLoggedIn: boolean }> = ({ hasLoggedIn }) => {
  return <div>{hasLoggedIn && "Welcome to learn TypeScript"}</div>;
};

export default MyComponent;

In the example above we:

MyComponent is of type React.FC
Explicitly type the props using angle brackets: React.FC<{ hasLoggedIn: boolean }>
The hasLoggedIn prop is of type boolean

Here is another example of using React.FC to type props:

//Greetings2 accepts firstName and lastName props
const Greetings2: React.FC<{ firstName: string; lastName: string }> = ({
  firstName,
  lastName,
}) => {
  return (
    <div>
      Hello {firstName} {lastName}
    </div>
  );
};

You can also type the props within the parameter (inline typing of props)

Here is an example of inline typing of props:

export const MyComponent2 = ({ hasLoggedIn }: { hasLoggedIn: boolean }) => {
  return (
    <div>
      {hasLoggedIn && "Welcome to learn inline typing of props TypeScript"}
    </div>
  );
};

In the example above we:

Destructure the hasLoggedIn props
Annotate the type of the hasLoggedIn as boolean

If the component accepts more than one prop, you can perform inline destructuring of the props and type each prop.

Here is an example:

export const MyComponent3 = ({
  firstName,
  age,
}: {
  firstName: string;
  age: number;
}) => {
  return (
    <div>
      Hello {firstName} you have {age} years of development experience
    </div>
  );
};

When the MyComponent3 is called and we assign the value "Emmanuel" to the firstName prop only, TypeScript will underline the component with a red squiggly line to indicate there is an error. On hovering, it indicates what the errors are

In this example:

TypeScript performs a type-checking and realizes the age prop has not been passed to MyComponent3
Such errors would have been unnoticed in React when writing the code and only show when the app runs but with TypeScript functionality added, we can quickly spot and fix the error.
To fix it, we pass the age prop to the MyComponent3 .

Here is the fixed component

      <MyComponent3 firstName="Emmanuel" age={3} />

Using type alias with inline typing

Instead of using inline prop type: ({firstName, lastName}: { firstName: string; lastName: string }) , you can use a type alias which is another name you are giving to the defined type, and replace the inline type with the alias.

Let's call the type alias Greetings

//type alias Greetings is an object with typed properties
type Greetings = {
  firstName: string;
  lastName: string;
};

Now, replace the inline typing with Greetings

//using type aliase
const Greetings = ({ firstName, lastName }: Greetings) => {
  return (
    <div>
      <p>
        Welcome {firstName}
        {lastName}
      </p>
    </div>
  );
};

Using Type alias with React.FC

Here's an example of using a type alias with React.FC in TypeScript

//The props is of type TGreetings
type TGreetings = {
  firstName: string;
  lastName: string;
};
//Type the props using React.FC
const Greetings3: React.FC<TGreetings> = ({ firstName, lastName }) => {
  return (
    <div>
      Hello {firstName}
      {lastName}
    </div>
  );
};

Typing component that accepts an array of object

When typing a component that accepts an array of objects in TypeScript, you can use a type alias to define the structure of the objects within the array

Here is an example of how to achieve that:

import React from "react";
//define the structure of the objects within the array
type UserType = {
  name: string;
  age: number;
  hasPaid: boolean;
};

//UserType[] has an alias UserTypeArray
type UserTypeArray = UserType[];
//use the type alias for the data props within React.FC
const Users: React.FC<{ data: UserTypeArray }> = ({ data }) => {
  return <div>{/* Something goes here */}</div>;
};

export default Users;

In the above we:

Renamed the type for each property in the object with an alias UserType.
Because we expect an array of objects we use the syntax {}[]. Hence UserType[] represents a type alias composed of an array of objects
Renamed the UserType[] with type alias UserTypeArray
Type Users component with React.FC .
Finally, we type the data props with alias UserTypeArray

Now, we can mount the User component and pass it the required values. TypeScript will compile and validate that the type of each property matches the expected type

import React from "react";
import Users from "./components/TypingProps/Users";

function App() {
  const userDetails = [
    { name: "Roberty Hagan", age: 23, hasPaid: true },
    { name: "Timothy Tans", age: 12, hasPaid: false },
    { name: "Cynthia Robets", age: 34, hasPaid: true },
  ];
  return (
    <div>
      <h3>React TypeScript Tutorial</h3>

      <Users data={userDetails} />
    </div>
  );
}

export default App;

Using components as props

Generally, to pass components as props, you wrap the Child component around the Parent component. Here is an example:

<Parent>
  <Child />
 </Parent>

In such situations use React.ReactNode to type the children prop in the Parent component

Let's see an example

import React from "react";

const Parent = ({ children }: { children: React.ReactNode }) => {
  return (
    <div>
      This is the Parent component
      {children}
    </div>
  );
};

export default Parent;

In the code above:

The Parent component accepts the children props.
The children props is of type React.ReactNode
This indicates to TypeScript the parent component will accept another component as a prop.

Typing `events`

React events are triggered by actions such as clicks, changes in input elements, etc. TypeScript allows you to type different event passed as parameters to event handler functions.

Here are some examples:

React.MouseEvent<HTMLButtonElement>: This represents the type of event object that is created when a button is clicked.
React.ChangeEvent<HTMLInputElement> : This represents the type of event object created when the value of an input element is changed.

Let's see an example of typing an onClick event:

import React from "react";

const UserInput = () => {
  const handleClick = (e) => {
    console.log("button clicked");
  };
  return (
    <div>
      <form>
        <input type="text" name="" id="" placeholder="Enter name" />
        <button onClick={handleClick}>Submit </button>
      </form>
    </div>
  );
};

export default UserInput;

In the example above, we have a handleClick event handler that accepts an e prop. Because we have not typed the e parameter, TypeScript annotates the type with any , and compiles with an error.

To fix this in TypeScript, when you define an event handler for a button click, the event parameter is of type React.MouseEvent<HTMLButtonElement>. This ensures type safety and provides access to properties specific to the mouse event linked to the button click.

import React from "react";

const UserInput = () => {
//add type to mouse event
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    console.log("button clicked");
  };
  ...
};

export default UserInput;

TypingonChange event

When the input elements such as text fields, checkboxes, radio buttons, etc accept an onChange event, in the event handler, the type of the event will be React.ChangeEvent<HTMLInputElement>

Below is an example:

//typing the event parameter in an onChange event handler
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
  };
...
  <input
          type="text"
          name=""
          id=""
          placeholder="Enter name"
          onChange={handleInputChange}
   />
...

In summary, When you want to type a native event handler, just hover over on the event: onClick, onChange etc to find the event type to use.

Here is an example using the onClick event

In the next section, you will learn how to type useState hooks.

Typing `useState` hook

When using the useState hook in a TypeScript component, there are ways to type the state and the setState function to ensure type safety

Here are some approaches:

Inferring type
Providing type
Custom type
Explicitly setting types for complex objects
Type signature of useState

Let's see some examples:

Inferring type: Typescript can infer type based on the initial value

const [value, setValue] = useState(""); //string type inferred
const [value, setValue] = useState(0); // number type inferrred

Providing type: Use TypeScript Generics to explicitly provide the type

const [value, setValue] = useState<string>("Hello World");
 // Typed the initial value as a string
const [value, setValue] = useState<string|null>(null); 
// Typed initial value as string or null using union type

Custom type: When dealing with values like objects or arrays, TypeScript generics can be used to specify the custom type.

Here is an example:

export const Example2 = () => {
//define a type alias for the object
  type TUser = {
    name: string;
    age: number;
    hasRegistered: boolean;
  };
//user is of type TUser
  const [user, setUser] = useState<TUser>({
    name: "Emmanuel",
    age: 23,
    hasRegistered: true,
  });
  return (
    <div>
      <h2>Example of custom type with object </h2>
      <p>
        Hello {user.name}, you are {user.age} years old and
        {user.hasRegistered && "has registered"}
      </p>
    </div>
  );
};

In the code above, we :

type each property in the object, and renamed the object type as TUser using type alias
Specified the user state to be of type TUser

InitializinguseStatewith empty array

When the useState hook is initialized with an empty array [], TypeScript will infer the type of state variable as never array. This means the state variable will never contain any elements. Therefore, if you attempt to update the state to an array of object , it will result in an error.

Below is the screenshot of useState initialized with an empty array []. When you hover over the useState in your code editor, the type is <never[]>

Now, on button click, we call the handleUser event listener and the setUsers updates the users state to an array of objects .
In the jsx , we map over each item in the state and return the userName

This code will work fine in a general React app, but with TypeScript support added, you will notice errors in the editor. Because the useState hook uses type inference to initialize the users state to the type never[]. Later the setUsers method tries to update it to an array of object. TypeScript is not happy so it compiles with errors.

To fix this, we need to initialize the users state with a type.

Here is how to achieve that:

Just after the useState, define a generic type <>
Between the < and > , specify the type for the state. In this example, the type is an array of objects. {}[]
Specify the type for each property in the object {id:number, userName:string}[]

The code is as below:

//adding type to the useState hook.
  const [users, setUsers] = useState<{ id: number; name: string, age:number }[]>([]);

You can give the object an alias and use the alias instead. Here is an example:

//type alias
type TUser = {
    id: number;
    name: string;
    age: number;
  };
  const [users, setUsers] = useState<TUser[]>([]);

Typing `useContext` hook

To type the useContext with TypeScript, you will create a context object and specify the type of the context value using the generic type parameter. Now, when you consume the context with useContext, TypeScript will infer the type based on the content object.

Here is an example:

import { createContext } from "react";

//define a type alias for the object type
type Theme = {
  color: string;
  background: string;
};

export const ThemeContext = createContext<Theme>({
  color: "black",
  background: "red",
});

In the example above :

The ThemeContext is created with a generic type parameter Theme. This specifies the type of the context value

Next, in your component, call the useContext hook. When you use the hook, TypeScript infers the type of the context value based on the type provided when creating the context

Here is an example

import React, { useContext } from "react";
import { ThemeContext } from "./ThemeContext";

const ThemeComponent = () => {
  const theme = useContext(ThemeContext);
  return (
    <div style={{ color: theme.color, background: theme.background }}>
      <h3>Theme Component</h3>
    </div>
  );
};

export default ThemeComponent;

In the example above we:

Call the useContext hook.
Read the value from the ThemeContext

If you don't have any default value when you create the context, you can specify null and set the type of value the createContext will have.

Here is an example:

import { createContext } from "react";

//define type alias
type Theme = {
  color: string;
  background: string;
};
//default value is set to null
export const ThemeContext = createContext<Theme | null>(null);

This means the type of the ThemeContext value can be null or Theme.

Now that the type context can be null, you'll get a TypeScript error if you try to access any value from theme
To fix this, add optional chaining to the theme? to ensure the object exist before accessing any property.

Here is an example:

import React, { useContext } from "react";
import { ThemeContext } from "./ThemeContext";

const ThemeComponent = () => {
  const theme = useContext(ThemeContext);
  return (
//add optional chaining to the `theme`
    <div style={{ color: theme?.color, background: theme?.background }}>
      <h3>Theme Component</h3>
    </div>
  );
};

export default ThemeComponent;

Typing `useRef` hook

You can specify the type of the referenced element by providing a generic type parameter to the useRef function.

Here is an example:

import { useRef } from "react";

const Example = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <div>
      <input type="text" placeholder="Please enter name" ref={inputRef} />
    </div>
  );
};

In this example, inputRef is a reference to an input element, and the type HTMLInputElement is specified as the generic type parameter.

Let's summarize what you know

In Summary

TypeScript adds static typing to React code. This allows developers to specify the type of the data being passed around within the code.
With type checking, you wil catch type-related errors during development, not at runtime.
Code editors like VSCode with TypeScript support provides features like autocompletion and type checking.
Props typing helps specify the types of data that component expect, ensuring the component receives valid data.
You can type hooks useState, useContext, etc to specify the type of the arguments and return values

Congratulations, you now know how to use TypeScript in your React App. For further reading check out this React TypeScript cheat sheet

Fetching, caching and revalidating server-side data with SWR

Emmanuel Fordjour Kumah — Tue, 19 Sep 2023 18:51:08 +0000

In this tutorial, you will learn how to use SWR to fetch data in a React application. SWR is a library for data fetching, revalidating, and caching.

By the end of the article you will know:

What is SWR?
The problem SWR solves?
How to set up SWR in your React app
How to use SWR to fetch data in a React component
How to use SWR for Pagination, auto revalidation, caching, etc.

Prerequisites

Before you begin you should be familiar with:

Basic understanding of JavaScript concepts such as the fetch method
React hooks
React components

What is SWR?

SWR is a React Hooks for data fetching. It is derived from stale-while-revalidate an HTTP cache-control mechanism that allows a web browser to cache a response for a resource on a server and store a copy of the response in the browser's local storage.

This allows the browser to display the cached response to the user without further request to the server. Periodically, the browser revalidates the cache to ensure responses are still up-to-date.

There is a Cache-Control header returned by the server to specify the duration the browser should use the cache while in the background revalidating the data with the server. As a result, improving the performance of a web app

The strategy behind SWR is:

Display the cached response to the client for a specified duration( in seconds)
Revalidates the data (i.e. request fresh data) asynchronously while still displaying the stale data.
Get the up-to-date data and display the response to the user.

What problem does SWR solve?

The Axios library and the fetch APIs are great options used to request resources on a server. However, whenever you initiate a request for a resource, there is a waiting period for the response.

In a React app, you generally handle this waiting period with the loading state or loading animation on the UI. When you get the response, you will use the set function to update the state of your app, which triggers a re-render of your components.

There are several issues with this approach:

Whenever the component is mounted, you will need to make another request to the API endpoint for data.
When a response is returned by the server, you will need to perform the extra task of caching and paginating data as fetch and axios does not automate caching and pagination

To solve these challenges, you will use a React hook called useSWR. It provides an easier approach to fetch data from a server, cache , and paginate it.

Why Do You Need To Use SWR?

Below are some benefits of using SWR in your React app:

Ease of use: SWR provides a straightforward API that makes it easy to fetch data from a server and cache it.
Automatic caching: SWR automatically caches data in the browser's local storage and displays the cached response to the user. This reduces the number of requests made to the server for a resource. As a result, it improves the performance of your app.
Auto-revalidation: SWR ensures users view the most up-to-date data. Regardless of the number of tabs opened, the data will always be in sync when the tab is refocused.
Stale-while-revalidate (SWR) caching strategy: SWR uses a stale-while-revalidate (SWR) caching strategy, which means that the cached data is used even after it has expired until the new data has been fetched from the server. This ensures that the user never sees stale data.
Error handling: SWR handles errors neatly. If the request fails, the user is not presented with an error message.

SWR has various hooks that can be used to improve the performance of your app. The most basic hook is the useSWR which can be used for data fetching.

A basic example using the useSWR hook is shown below:

const { data, error } = useSWR(key, fetcher);

Data fetching with `fetch` vs `useSWR`

Let's use the fetch API to fetch data and compare it to how to fetch data using useSWR

Fetching data with the fetch API

Generally, to fetch data using the in-built JavaScript fetch method in your React app, you will follow these steps:

Import useEffect and useState hooks from React
Fetch the data once using the useEffect in the parent component.
In the callback function of the useEffect(), call the fetch() method and pass the API endpoint as the argument.
Update the state variable with the data.
Now, all child components can access the fetched data when passed as props

The code snippet below fetches a list of products using the fetch method and pass the data as props in the Products component.

import { useEffect, useState } from "react";
import Products from "./Products";

export default function App() {
  const [products, setProducts] = useState("");
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    fetch("https://fakestoreapi.com/products")
      .then((res) => res.json())
      .then((data) => {
        setIsLoading(false);
        setProducts(data);
      })
      .catch((err) => setError(err));
  }, []);

  //check if data has been fetched
  console.log(products);

  //check if error
  console.log(error);

  return (
    <div className="App">
      {isLoading && <h2>Fetching data... </h2>}
      <Products products={products} />
    </div>
  );
}

There are some issues with this approach:

There is too much code to write just to handle data fetching. This code will be difficult to maintain if we keep adding data dependency to the page
You will need to keep all the data fetching in the parent component and pass it down to child components via props
You will need to manage a lot of state: Loading, error, and the fetched data. Whenever the state is updated, the parent component as well as the child components need to re-render to reflect the changes. This unnecessary re-rendering decreases the performance of the application.

Now, let's see how to fetch the same data using SWR. You can find the code snippet on the data-fetching branch on the GitHub repo.

Follow these steps to fetch data with the useSWR hook :

Inside your React app run the command: npm i swr . This will install SWR in your React app.
Navigate to the component to fetch data (eg. <App/>). Type import useSWR from "swr" at the top of the component.
Within the <App/> component, create a fetcher function. The fetcher is an async function that accepts the API endpoint as a parameter to fetch the data.
In the body of the fetcher function , you can use any library like fetch and axios to handle data fetching.

Below is the code snippet for the fetcher function

//fetch data using fetch api
const fetcher = url => fetch(url).then(res => res.json())

In the body of your top-level component, type the code below
```
//App.js
const { data, error, isLoading, isValidating, mutate } = useSWR(key, fetcher, options)
```
- At the right hand side of the expression, we call the useSWR() hook. It accepts the following arguments
  - The key is a unique string representing the URL to the API endpoint.
  - The fetcher will pass the key to the fetcher function and then proceed to fetch the data.
  - option is an object of options to help with data fetching
On the left hand side of the expression , we use the array destructuring to extract the fetched data, error, and isLoading and mutate response.

const { data, error, isLoading, mutate } = useSWR(key, fetcher, options)
Now that you have access to the data , you can use it in the required component. In this example, we are passing the data to the <Products/> component.

The code snippet to fetch data from the API is as below:

import "./App.css";
import Products from "./components/Products/Products";
import useSWR from "swr";

//function to fetch data
const fetcher = (...args) => fetch(...args).then((res) => res.json());
//api endpoint
const url = "https://fakestoreapi.com/products";

function App() {
  const { data, error, isLoading } = useSWR(url, fetcher);

  if (error) return <p>Error loading data</p>;
  if (isLoading) return <div>loading...</div>;
  return (
    <>
      <main>
        <h1>Data fetching with useSWR </h1>
        <Products data={data} />
      </main>
    </>
  );
}

export default App;

Now that the Products component has access to the data, we can use it to display the individual products.

Calling the useSWR() method returns the following:

data: This represents the response or result returned by the fetcher function
error: error that is thrown by the fetcher if unable to fetch the data
isLoading: This helps you display a loading state if there's an ongoing request.
isValidating: If there is a request or revalidation loading
mutate: This is a function to modify the cached data.

Using useSWR hook :

It reduces the amount of code to write to fetch data resulting in clean and maintainable code
No need to manage a lot of state and side effects with useState and useEffect hooks

In the next section, we will use useSWR hook to paginate data.

Handling Pagination with `SWR`

To handle pagination in React, you will generally use a react-paginate package or any suitable alternative. However, the useSWR hook automatically handles pagination.

In this section, we will demonstrate pagination using the Rick and Morty Character API.

You can find the code in this pagination branch repo.

Below is the final version of the application

Let's get started:

Create a "Characters" sub-folder in the "Component" folder of your React app
Create a Characters.jsx and SingleCharacter.jsx files inside the "Characters" folder

Type the code below into your Characters.jsx file

//component/characters/Characters.jsx 
import React, { useState } from "react";
import useSWR from "swr";
import SingleCharacter from "./SingleCharacter";
import "../../../App.css";

const Characters = () => {
  const [pageIndex, setPageIndex] = useState(1);

  const fetcher = (...args) => fetch(...args).then((res) => res.json());

// The API URL includes the page index, which is a React state.
  const { data, error, isLoading } = useSWR(
    `https://rickandmortyapi.com/api/character/?page=${pageIndex}`,
    fetcher
  );

  if (error) return <h3>Failed to fetch characters</h3>;

  if (isLoading) return <h3>Loading characters...</h3>;

  return (
    <div>
      <section className="character_card">
        {data.results.map((character) => (
          <div className="character_card__item">
            <SingleCharacter key={character.id} character={character} />
          </div>
        ))}
      </section>
      <div>
        <button onClick={() => setPageIndex(pageIndex - 1)}>Previous</button>
        <button
          className="character_btn"
          onClick={() => setPageIndex(pageIndex + 1)}
        >
          Next
        </button>
      </div>
    </div>
  );
};

export default Characters;

In the code snippet we:

Import the useSWR from "swr" and useState from "react"
useState helps us to keep track of the page number to be used to navigate to the next page or previous page.
useSWR enables us to fetch data from the API endpoint. It accepts the API endpoint and fetcher functions as arguments. The endpoint will return 20 characters per request.
The response from the API is assigned to the data.
Finally, we iterate over each item in the array and display a single character with the SingleCharacter.jsx component.

To handle pagination:

We defined the "next" and "previous" buttons in the <App/> component
Whenever you click on the "next" button, we update the pageIndex ( setState(pageIndex + 1)). This initiates another request to the API endpoint for the next page.
Similarly, whenever you click on the "previous" button, we decrease the pageIndex (setState(pageIndex -1 ).

//code snippet for previous and next page
...
    <div>
        <button onClick={() => setPageIndex(pageIndex - 1)}>Previous</button>
        <button
          className="character_btn"
          onClick={() => setPageIndex(pageIndex + 1)}
        >
          Next
        </button>
      </div>
...

In the next section, you will learn how to prefetch data in SWR

Prefetching Data

SWR can be used to preload data before rendering a component. It has preload API to prefetch resources and store the results in the cache. With that, all incoming requests for the same URL will reload the cached data. This prevents waterfalls in your application (waterfalls occur when data takes a long time to load, slowing down your applications).

For instance, you can preload all comments to a post from a CMS. Whenever the user clicks on the "show comments" button it displays the cached data, resulting in a faster and smoother user experience.

The preload accepts key and fetcher as the arguments. You can call preload even outside of React.

Below is the syntax for the preload API:

preload(apiEndPoint, fetcher)

The code for this section is in the preload branch of the GitHub repo

Below is the code snippet to preload comments

import useSWR, { preload } from "swr";

const fetcher = (url) => fetch(url).then((res) => res.json());

// Preload the resource before rendering the Comments component below,
// this prevents potential waterfalls in your application.
preload("https://jsonplaceholder.typicode.com/posts/1/comments", fetcher);

const Comments = () => {
  const { data, isLoading, error } = useSWR(
    "https://jsonplaceholder.typicode.com/posts/1/comments",
    fetcher
  );

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error loading data</div>;
  return (
    <div>
      {data.map((comment) => (
        <div className="comments_card" key={comment.id}>
          <h3>{comment.body}</h3>
          <p>
            <span>author</span>
            {comment.name}
          </p>
        </div>
      ))}
    </div>
  );
};

export default Comments;

Auto Revalidation

Revalidation involves clearing the cache data in the local storage and retrieving the latest data from the server.

A use case is when data changes in your app and you want to ensure you display the most up-to-date data.

There are several approaches to revalidating data:

Revalidate on focus
Revalidate on interval
Revalidate on reconnect

Revalidate on Focus

This automatically revalidates the data to immediately sync to the latest state whenever you switch between tabs or re-focus a page. This is helpful for refreshing data when the laptop "goes to sleep", or a tab is suspended.

In the screenshot below, you will notice that in the "network" section of the DevTools, whenever you switch between tabs, a request is made to revalidate the data and fetch the latest data (if any)

With the example below, whenever the page is refocused, a network request is made to automatically revalidate the daa to ensure the latest data is displayed to the user.

(Demonstrating revalidation of data when the tap is suspended)

Revalidate on interval

Whenever you have multiple tabs opened, for the same application, the data for each tab may vary. To keep all the tabs up-to-date, SWR provides the option to automatically re-fetch data at an interval. The re-fetching happens only when the component associated with the hook is on screen.

For instance, you have opened a Todo App on multiple tabs, and on the current tab, you added a new todo. Whenever the item is added, both tabs will eventually render the same data even though the action happened on the active tab.

To enable this feature, call the useSWR() method, pass the refreshInterval as an object of option and set refreshInterval value in milliseconds

The syntax is as below:

useSWR('/api/todos', fetcher, { refreshInterval: 1000 })

{ refreshInterval: 1000 } tells SWR to refresh the data every 1 second.

Revalidate on reconnect

In a scenario where the computer has lost connection to the internet, the data can be revalidated when the network connection is restored.

In the screenshot below, the network is offline, and when it is restored, SWR initiate a request to the API to fetch the latest data.

Automatic Caching

A key benefit of SWR is to automatically cached data from the server and display the response from the local storage.

You can use the DevTools to verfiy if a network request is cached:

Check the Size column in the Network tab. If the "Size" column says disk cache or Memory cache, then the response was served from the cache.

Global Configuration with SWR

Whenever the same fetcher function is needed to fetch resources, you can use the context SWRConfig to provide global configuration for all SWR hooks. The SWRConfig servers as a wrapper component allowing all child components to access the value assigned to the SWRConfig.

The syntax is as below:

<SWRConfig value={options}> //options to be available to all components
  <Component/>
</SWRConfig>

In the example below, all SWR hooks can use the same fetcher function to load JSON data from an API endpoint.

//main.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import { SWRConfig } from 'swr'
import App from './App'
import './index.css'

//common fetcher function
const fetcher = (...args) => fetch(...args).then((res) => res.json())

ReactDOM.render(
    <React.StrictMode>
        <SWRConfig value={{ fetcher: fetcher }}>
            <App />
        </SWRConfig>
    </React.StrictMode>,
    document.getElementById('root')
)

// App.js
import useSWR, { SWRConfig } from 'swr'
 //no fetcher function needed here
function App () {
  const { data: events } = useSWR('/api/events')
  const { data: projects } = useSWR('/api/projects')
  const { data: user } = useSWR('/api/user') 

}

Instead of declaring the fetcher function in every file, we created it in the main.jsx and passed it as a value to SWRConfig. Now, the App.js and all its child components can fetch data without the need to create the fetcher function again to avoid redundancy.

Error handling and revalidation

If an error is thrown in the fetcher , it will be returned as error by the hook.

The code snippet is as below:

const fetcher = url => fetch(url).then(res => res.json())

// ...
const { data, error } = useSWR('/api/user', fetcher)

if(error) return <div>Error loading data </div>

In the event of an error, the last successfully generated data will continue to be served from the cache. On the next subsequent request, the app will retry revalidating the data.

Summary

In this tutorial you used useSWR hook to fetch and paginate data. You learned how to auto-revalidate data when the tab is refocused or when offline. To further deepen your knowledge learn how to use react-query or rtk-query to fetch data in your app

How to manage state in a React app using Redux.

Emmanuel Fordjour Kumah — Fri, 15 Sep 2023 23:36:54 +0000

In this tutorial, you will manage the state of a React app using Redux. Redux helps you track and manage the state of an entire application in a single object instead of having the state and logic in a top-level component.

You will build a to-do app that centralizes the state and logic using Redux.

By the end of the tutorials you will know:

What Redux is and the benefit of using Redux for state management.
Understand and use Redux concepts such as the store, reducer, actions, etc. in a Todo app.

The tutorial will be in two sections. The first section explains key concepts, the Redux architecture, and the basic usage of Redux. In the next section, we will build a Todo app using Redux for state management.

Prerequisite

To get the most out of this tutorial you should be familiar with:

Functions in JavaScript
Knowledge of React terminology: State, JSX, Components, Props, and Hooks
Building a basic React app

Introduction to State Management

React enables developers to build complex user interfaces easily. To add interactivity to the UI, React components need access to data. The data can be a response from an API endpoint or defined within the app. This data will be updated in response to an interaction, such as when a user clicks on a button, or types into an input field.

Inside a React component, the data is stored in an object called state. Whenever state changes, the component will re-render, and React will update the screen to display the new data as part of the UI.

In a React app, multiple components may need access to the state. Hence, it needs to be effectively managed. Effective state management entails being able to store and update data in an application.

What is Redux?

Redux is a pattern and library for managing and updating application state, using events called "actions". It serves as a centralized store for state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion.

With Redux, you have a central store to keep, update, and monitor the state of your application. That means, our components may not have states. The state will be in a central location and can be accessed by multiple components in your application.

What problem does Redux solve?

A basic React app can be segmented into the following:

State: The current condition of the app
View: The UI of the app
Actions: A function that updates the state when an event occurs in your app (generally referred to as Event handlers).

Every component in an app can have a state. However, it becomes a challenge if multiple components need access to the same data. To solve this issue, we "lift the state up". Lifting state up is a process where you move the state from a child component to its parent (top-level) component. With this approach, you can easily share state between multiple child components.

However, there are disadvantages to "lifting state up":

It can complicate your code: Lifting the state up can add huge boilerplate code to your components. The state must be passed down from the parent component to the child components resulting in prop-drilling. Additionally, the state is updated in the parent component.
It can impact performance: When you lift the state up, you increase the number of components that will re-render when the state changes. This can affect performance, especially on mobile devices.

In a large-scale single-page application, our code will manage more states. This state can include server responses and cached data, as well as locally created data that has not yet been persisted to the server. It will get to the stage where you will lose control over when, why and how the state updates. Making it difficult to reproduce bugs or add new features.

A better approach is to extract the shared states from the parent component and put them into a centralized location outside the component tree.

This is a better approach because:

It eliminates prop drilling.
Regardless of the component position, you can trigger actions from any component inside the parent component, and the state can be modified.

That is the concept behind Redux. It helps developers manage global state (a state that is needed across many parts of our app), and make the state accessible by all components irrespective of how deeply nested they are.

The first rule of Redux is that everything that can be modified in your application should be represented in a single object called the state or the state tree.

There are key terms to know when using Redux. To make it easy to understand these terms we will first consider an analogy for Redux. After this, we will define the terms in the next sections.

Redux analogy

Imagine you are the Managing Partner of a huge restaurant. To be well versed in managing the restaurant, you decide to keep track of the state of the restaurant.

You might want to track:

The stock of the various ingredients available
Financial status (weekly income and expenditure pattern)
The number of employed chefs
The number of hired waitresses
Weekly customers etc

To keep all this information in your brain will be a hassle. Instead, you keep them in a central location called the store (redux store).

You hire an attendant (reducer) who is the only person who can update the store's information.

There are shareholders (components) who rely on the state(data) of the restaurant to update their portfolio (UI). These shareholders can only access data and cannot modify it.

Now let us assume the shareholders hire a new chef and the store's data need to be updated. Because they cannot update the data, a shareholder can send (dispatch) a note with that new information to the attendant(reducer). He then updates the previous data in the store with the latest information.

Anytime data is updated, the rest of the shareholders are notified (subscribers), and they can update their portfolio (UI)

Understanding the Redux Terminologies

Below are the new terms to be familiar with:

Actions

The second rule of Redux is that the state is read-only. You can only modify the state tree by sending an action. This ensures that neither the views nor the network callbacks will ever write directly to the state. Instead, they express an intent to transform the state.

In other words, action is the only recommended way to change the application state.

An action describes what has occurred in the application. It is a JavaScript object passed as a parameter to the store and holds the information required for the store to update the state.

An action varies in any given application. For instance, in a counter app, you will only need the following actions:

increased the count
decreased the count

In a todo app, you may have the following actions:

Added todo item
Deleted todo item
Complete todo item
Filter todos, etc.

With Redux, because we are separating the state from the components, the components don't know exactly how the state changes. All they care about is that they need to send an action.

The action object has a type property where you specify what event occurred in your component. That means whenever an event occurs, the event handler function will dispatch an action with what has occurred to help update the state in the store.

The action object also has a payload property. Any new data about the event will be in the payload. For instance, when I dispatch an action of type "addedTodo", the payload can contain the new to-do item and the ID.

Below are examples of action objects:


//action 1
const addTodoAction = {
  type: 'todos/todoAdded', //what happened
  payload: {todoID, newTodo} //data
}
//action 2
const getOrder = {
type: 'orders/getOrderStatus', //what happened
payload: {orderId, userID} //data
}

Action Creators

The action creators are functions that return action objects. Because the action creators contains the logic that can be used in multiple instances of the application, you can pass it some parameters that can be accessed in the action objects.

Below are examples of action creators:

//example 1
function addTodo(todo){
//return action object
return {
  type: 'todos/addTodo',
  payload: todo // what happened
    }
}
//example 2
function getOrders(orderID, userID){
//return action object
  return {
       type: 'orders/getOrderStatus',
       payload: {orderId, userID} //what happened
   }
}

Reducers

A reducer is a pure function that accepts the current state and an action as arguments and returns the updated state. It is called a reducer because similar to the Array.reduce() method, the Redux reducer reduces a set of actions over time into a single state.

The reducer should be a pure function. A pure function is a function that will return the same output for the same input. It does not change or modify the global state or the state of any other functions.

What this means is :

A reducer function is not allowed to modify the current state. Instead, they must make a copy of the current state and update the copied values.
A reducer function should not update the state by reading from a database
A reducer function should not make a call to any third-party API

Below is the syntax of a reducer function:

const myReducer = (state, action) => newState

The logic inside the reducer function is as below:

In the body of the function, we check the action.type property.
If the type of action matches something you have defined, you will make a copy of the state, and modify that state with the new value from the action.payload
If the action.type does not match anything you have defined, you will return the existing state

Below is an example of a todoReducer function:

const intialTodo = [{id:1, todo:""}]

const todoReducer = (state = initialTodo, action)=>{
if(action.type === "todos/AddedTodo"){
  return [...state, todo: action.payload]
}else{
return state
 }
}

Below is what is happening:

In the if statement verify if the action.type matches the expression on the right (action.type === "todos/AddedTodo")
If it does, then we use the spread operator (...) to make a copy of the state , and update the copy with the new todo data derived from action.payload
If not, we return the previous state

The third principle of Redux is that to describe state changes, you declare a function that accepts the previous state of the app, the action being dispatched, and returns the next state of the app

Store

A store in an object that holds the entire state of your application. It is the central location of data and where data is updated.

The store has three main methods:

getState(): Returns the current state of the application
dispatch(action): This is how to instruct the component to send an action to the store to change the state of the application.
subscribe(listener): The subscribe method will allow the components to listen for a change in data. It accepts a listener as a callback function that helps you:
- Update the UI to reflect the current state
- Perform side effects or any other task that needs to be done when the state changes.

Below is an example of how to create a store in redux.

//store.js

//import your root reducer
import rootReducer from "./rootReducer"
//import createStore from redux
import {createStore} from "redux"

//create the store
const store =createStore(rootReducer)

Dispatch

Dispatch is used to send action to our store . It is the only way to change the state of our app.

To update the state , you will call the store.dispatch() method. When dispatch() is called, the store will execute the reducers (the reducers have access to the current state and an action as input, and perform some logic). The store then updates its state with the output of the reducers.

The store.dispatch() method accepts the action object as an argument.

store.dispatch({ type: 'todo/addedTodo' })

In the snippet above, for instance, whenever a user enters a new to-do, you will dispatch the action to the store. Because there is a reducer function inside the store, it will use the dispatched action.type to determine the logic for the new state.

Selectors

Selectors are functions that help you extract specific data from the state. It accepts the state as an argument and returns the data to retrieve from the state.

You will use the selector in your component to get specific data from the state.

const selectLatestTodo = state => state.data //selector function

const currentValue = selectLastestTodo(store.getState())
console.log(currentValue)
// Buy milk

Illustration of the Redux architechture

In this section, we will use all the terminologies learned to explain how data flow in our app, and how the UI is re-rendered when the state changes.

Let's take a look at the setup of Redux:

Create a redux store
Define the reducer logic and pass the reducer function to the store. The reducer accepts the state and action object as arguments.
The store will run the logic in the reducer function
The value returned by the reducer function becomes the initial state of the app.
When the component is mounted, it connects with the store, gets the initial state, and uses the state to display the UI. Because the component is connected to the store, it will have access to any state update.

Updating the state:

An event occurs in the app. For instance, a to-do item has been added
The component dispatches the action to the redux store
The store re-runs the reducer function. It has access to the previous state, the action object, and returns the updated state
The store notifies all the connected components of the state change.
Each UI component will verify if it needs to use the updated state.
If it does, it re-renders the UI with the new state and updates what is on the screen.

Creating a `store`, `subscribing` and dispatching `actions`

In this section, we will learn how to create a store and dispatch actions to the store.

The Redux store brings together the state, reducer and action of our application. It is the central location of the application's state.

The functions of the store are to:

Hold the current state of the application.
Allow access to the current state
Allow the state to be updated
Dispatch actions
Subscribe to changes

Creating a store

Use the createStore() method from the Redux library to create the store. This method accepts a reducer function as an argument.

Below is a code snippet on how to create a store:

//store.js
import { createStore} from 'redux'

const store  = createStore(rootReducer)

Next, you will need to pass the "root reducer" function to the createStore(). The root reducer combines all of the other reducers in your application.

To create a root reducer, you import the combineReducer() method from the Redux library. The combineReducer helps you combine all the different reducer functions. It accepts an object of reducer functions as its argument. The key of the object will become the keys in your root state object, and the values are the reducer functions.

Below is an example of how to create a rootReducer :

import { combineReducers } from 'redux';

const reducers = {
  user: userReducer,
  cart: cartReducer,
  orders: ordersReducer,
};

const rootReducer = combineReducers(reducers);

Now, you have learned how to

Create a store
Add a root reducer to the store

Next, you will learn how to get the initial state of the store and dispatch actions to the store

Dispatching `actions` to the `store`

To update the state of the application, the component needs to dispatch actions.

Below is how to do that:

Import the store into your application
call the store.dispatch() methods and pass it the action objects.

//actions object
const addTodo = {
  type: 'todos/todoAdded',
  payload: "Buy milk"
});

const completeTodo = {
  type: 'todos/todoRemoved',
  payload: 2 // id of the todo to complete
}
//dispatch the action to update the state 
store.dispatch(addTodo)
store.dispatch(completeTodo)

Subscribing to the store

Use the subscribe() method to subscribe to a store. The subscribe() method will listen for changes to the state of your app. This will help you update the UI to reflect the current state, perform side effects, or any task that needs to be done when the state changes.

In the code snippet below illustrates how to listen for updates, and log the latest state to the console:

const subscription = store.subscribe(() => {
  // Do something when the state changes.
  console.log('State after dispatch: ', store.getState())
});

Adding Redux to a React app

In this section, you will use the concept learned to build a to-do app with basic functionalities ( add, delete, and complete a todo) while using redux for state management.

We will not go in-depth into each implementation as we have covered the concepts earlier.

Here are the steps to follow:

Set up your React project and install the required dependencies
Create your Todo components for the UI
Create a redux store to track and manage the state of your app
Define the reducer logic and connect to the store
Dispatch actions to update the state
Read data from the store

The repository for the project is found here. It has branches for each major step we will implement.

Let's get started

Step 1: Setting up your project

Create a React app in your project directory by following the steps below:

Start a project from the basic template using Vite by running the command below in your terminal:

npm create vite@latest my-react-app --template react
// Replace "my-react-app" with the name of your project.

Install the redux and react-redux dependencies in your package.json file. Run the command
```
npm install redux react-redux --save
```
This installs the core redux architecture and simplifies connecting the react app with redux.
Run the app with npm run dev

Step 2: Creating the Todo components

Below is the UI for our app.

Now, let's create the required components

Create a "components" folder in the "src" directory
The components needed to create the UI of the app are:
- <TodoHeading/> : contains the heading text
- <TodoInput/> : an input to enter a todo
- <TodoItem/> : displays a single todo, with a delete and complete button
- <TodoList/> : display the lists of todos.

Step 3: Creating the `store`

Next, we will need to create a store to keep track of and manage the entire state of the application. We do that using the createStore() method from Redux.

Follow these steps:

Create a "store" folder in the root directory of your app
Create a store.js file inside the "store" folder
Import the createStore method from redux
Call the createStore() method, and pass the todoReducer as an argument ( we will define this in the next step)
Export the store to be used inside your React app

//store/store.js
import { createStore } from "redux";
import todoReducer from "../reducer/todoReducer";

const store = createStore(todoReducer);

export default store;

Step 4: Defining the `reducer` function

We will define our reducer inside a todoReducer.js file. Reducers are functions that contain the logic required to update the state and return a new state. The todoReducer.js will also contain the initial state of our app.

Follow the steps below to define a reducer function:

Create a todoReducer.js insider a "reducer" folder

Add the code snippet below to the file

//state object
const initialState = {
  todos: [
    {
      id: 1,
      item: "Learn redux fundamentals",
      completed: false,
    },
    {
      id: 2,
      item: "Build a todo-app",
      completed: false,
    },
  ],
};

//define the reducer logic
const todoReducer = (state = initialState, action) => {
  switch (action.type) {
//logic to add a new todo
    case "todos/addedTodo":
      return {
        ...state,
        todos: [...state.todos, action.payload],
      };
//logic to delete a todo
    case "todos/deleteTodo":
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.payload),
      };
// logic to complete a todo
    case "todos/completeTodo":
      return {
        ...state,
        todos: state.todos.map((todo) => {
          if (todo.id === action.payload) {
            return {
              ...todo,
              completed: !todo.completed,
            };
          } else {
            return todo;
          }
        }),
      };
    default:
      return state;
  }
};

export default todoReducer;

In the code above:

We added the initial state of our app. It is prefilled with an array of todos to enable us to display some dummy data when the app is rendered.
We define the todoReducer function. This function accepts the state and action objects as parameters.
In the body of the function, we implemented a switch statement. Based on the expression (action.type) there is a logic in each case on how the state will be updated and returned.
Finallly, we export the todoReducer and pass it as an argument to the createStore() method (as previously indicated).

Step 5: Wrapping the `Provider` component around your app

The Provider component enables the Redux store to be available to any nested components that need to access the store.

Since any React component in a React Redux app can be connected to the store, most applications will render a Provider at the top level, with the entire app’s component tree inside of it.

Below is how to wrap our root component inside a Provider

Import the store in the main.jsx
Import the Provider component from "react-redux"
Wrap your root component <App/> in the Provider
The Provider accepts a store props with the imported store as its value

//main,jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { Provider } from "react-redux"; //Provider
import store from "./store/store.js"; //store 

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Provider store={store}> 
      <App />
    </Provider>
  </React.StrictMode>
);

In the code above, we have wrapped the <Provider/> around <App/> component to enable all nested components to access the store

Next, we would read and display data from the store using the useSelector hook

Step 6: Reading and displaying the todos with `useSelector` hook

React-Redux has its custom hooks, which you can use in your components. The useSelector hook lets the React components read data from the Redux store. It accepts a selector function that takes the entire Redux store state as its argument, reads some value from the state, and returns that result.

Follow the steps below to read and display data:

Import the useSelector from "react-redux"
Call the useSelector() method. It accepts a selector function as a callback
Return the todos from the state

The code below illustrates how to read the todos from our store.

//components/TodoList.jsx
import React from "react";
import { useSelector } from "react-redux";
import TodoItem from "./TodoItem";

const TodoList = () => {
//callback function
  const selectTodos = (state) => state.todos; 
//extract the todos
  const returnedTodos = useSelector(selectTodos);

  const displayTodos = returnedTodos.map((todo) => (
    <TodoItem key={todo.id} todo={todo} />
  ));
  return <div>{displayTodos}</div>;
};

export default TodoList;

Let's understand the code above:

The first time the <TodoList/> component renders, the useSelector hook will execute the selectTodos callback function.
What is returned by the selectTodos will be returned by the useSelector hook to be used in our component.
The const returnedTodos will hold the same data as the state.todos inside our Redux store state.
We use the JavaScript map() method to iterate over each todo and display a single todo.
The useSelector automatically subscribes to the Redux store. Hence, whenever an action is dispatched, it will call the selectTodosfunction. If the value returned by the selectTodos has been updated, useSelector will force the TodoList component to re-render with the new data.

We know how to read and display data from the store. Next, we will learn how to dispatch actions from the components to update the store

Step 5: Dispatching actions with `useDispatch` hook

The useDispatch hook provides access to the dispatch method that is needed to dispatch actions to update the state.

We can call const dispatch = useDispatch() in any component that needs to dispatch actions, and then call dispatch(someAction) as needed.

In the TodoInput component, let's dispatch an action to add a new todo:

import useDispatch from "react-redux"
Call the useDispatch() method. It returns the dispatch function
Enter and submit the new todo

Call the dipatch() method in the addTodo and pass the action object

//components/TodoInput.jsx
import React, { useState } from "react";
import { useDispatch } from "react-redux";

const TodoInput = () => {
  const [todo, setTodo] = useState("");
  const dispatch = useDispatch();

  const onInputTodo = (e) => {
    setTodo(e.target.value);
  };
  //handle submission of todo
  const handleTodoSubmit = (e) => {
    e.preventDefault();
    addTodo(); // addTodo 
    setTodo("");
  };
//action creators
  const addTodo = () => {
//dispatch action to add a todo
    return dispatch({
      type: "todos/addedTodo",
      payload: { id: Math.floor(Math.random() * 20) + 1.1, item: todo },
    });
  };
  return (
    <div>
      <form className="todo_form_container" onSubmit={handleTodoSubmit}>
        <input
          className="todo_input"
          type="text"
          placeholder="Enter your todo"
          value={todo}
          onChange={onInputTodo}
        />
        <button className="todo_btn">Add Todo</button>
      </form>
    </div>
  );
};

export default TodoInput;

In the code above, on submitting a new todo:

The handleTodoSubmit function executes the addTodo() function
The addTodo() dispatches the action object to the todoReducer function to update the state

Because we have imported the useSelector hook, we can easily add a new todo to the store's state, and it will reflect in the UI.

Below is what we have done so far

Create the store
Wrap the <Provider store={store}> around your top-level <App> component to enable all other components to access and update the store.
Call the useSelector hook to read data in React components
Call the useDispatch hook to dispatch actions in React components

Dispatching action on clicking the "delete" and "complete" buttons

In the TodoItem components, we can now click on the "delete" and "complete" button. On clicking these buttons we dispatch actions to delete and complete a todo. These are handled in the onDelete and onComplete action creators.

The code snippet is as below:

//components/TodoItem.jsx
import { useDispatch } from "react-redux";

const TodoItem = ({ todo }) => {
  const dispatch = useDispatch();
  //delete a todo
  const onDelete = (id) => {
    return dispatch({
      type: "todos/deleteTodo",
      payload: id,
    });
  };
  //complete Todo
  const onComplete = (id) => {
    return dispatch({
      type: "todos/completeTodo",
      payload: id,
    });
  };
  return (
    <div>
      <h3 className={`todo${todo.completed ? "Completed" : ""}`}>
        {todo.item}
      </h3>
      <div>
        <button onClick={() => onComplete(todo.id)}>Complete</button>
        <button onClick={() => onDelete(todo.id)}>Delete</button>
      </div>
    </div>
  );
};

export default TodoItem;

Clicking the "delete" and "complete" button calls the onDelete() and onComplete functions respectively. The onDelete function dispatches an action to the todoReducer to delete the specified item while the onComplete function dispatches an action to the todoReducer to complete the selected item.

Redux vs Context API

The difference between Redux and Context API is how they manage states. In Redux state is managed in a central store. However, the Context API deals with state updates on a component level, as they happen within each component.

You might ask, can't you use the useContext hook from the Context API to pass state to multiple components since that eliminates prop drilling?

In a scenario where a state affects multiple components or is required by all the components in an app, you can use the useContext hook to manage state. This avoids props drilling and makes data easily accessible in all components.

However, there are some disadvantages to using useContext:

The useContext hook has a complex setup: When building an enterprise-level app where multiple components may need access to state, you might have to use the context API to create multiple contexts and provide each context with the data required for the different aspects of your application. For instance, you will create
- Authentication Context: to easily authenticate users
- Theming Context: to change the theme. For example, enable dark mode
- Form Context: to pass form data to the form component, etc.
This phenomenon might result in having to create multiple contexts to meet a specific need, leading to deeply nested Context Provider components in your application.

Secondly, useContext is not optimized for enterprise-level apps where the state changes frequently. This will decrease the performance of your app.
Lastly, when using useContext, UI logic and state management will be in the same component.

Below are some scenarios you might use Redux over useContext:

There are lots of states in your application, and these states are required in many places in the app.
The app state is updated frequently over time
The logic to update that state may be complex
The app has a medium or large-sized codebase and might be worked on by multiple developers

Conclusion

In this tutorial, you managed the state of a React Todo app using Redux. Next, learn how to manage the state using the Redux Toolkit. Redux Toolkit makes it easier to write good Redux applications and speeds up development. Furthermore, learn Redux DevTools to help you trace when, where, why, and how your application's state changed.

Implementing CI/CD pipeline with GitHub Actions, and GitHub Pages in a React app.

Emmanuel Fordjour Kumah — Fri, 18 Aug 2023 20:19:35 +0000

In this article, you will learn how to implement continuous integration and continuous delivery in your React application using GitHub Actions.

You will learn:

What is continuous integration (CI)?
What is continuous delivery (CD)?
How to use GitHub Actions for CI/ CD workflows
How to deploy React apps to GitHub Pages

At the end of this article, you should be able to implement continuous integration and continuous delivery in your React apps.

The article will be in two sections. The first section explains key concepts in continuous integration and continuous delivery. In the next section, we will use the knowledge of CI/CD to build and deploy a React app.

Prerequisite

To get the most out of this article, you should be familiar with:

Creating a repository on GitHub
Connecting your local repository with the remote repository
How to use Git for version control
How to create a basic React application.

Overview

Adding new features to software projects can be challenging. Multiple developers need to work on the assigned features, test, and finally integrate these features into the existing software.

On successful integration of the new features into the software, it needs to be deployed to the staging environment for further testing, then pushed to the production environment.

For widely used software with globally distributed end-users, adding new features to an existing product built by various developers can be prone to bugs, time-consuming and complex, and there shouldn't be any downtime during the deployment of the new features to the production environment.

To address this challenge, developers need to implement continuous integration and continuous development into their workflow. Continuous Integration (CI) and Continuous Delivery (CD) help solve the challenges with manual development, integration, and deployment of software by enabling developers to automate the software development cycle.

What is continuous integration (CI)?

CI is a practice where developers merge all their code changes into a central repository early and often. It is the use of automated tools to test each change you merge, insisting on the new code’s correctness before integration.

What problem does CI solve?

Generally, multiple developers work on different feature branches of the software for an extended period, and in isolation. When they have completely built that feature, they will all merge their changes to the main repository to be deployed to the production environment.

Merging the different branch features with the main branch can lead to code conflicts, bugs, and unexpected security concerns. These challenges can be time-consuming, and complex to resolve. With a large code base, there are high rates of failure and slower feature releases as it requires developers to cross-check every step and be vigilant during the integration. This makes it difficult to release new features to end users swiftly.

However, you can implement a process that enables each developer to push their changes to the main branch in small batches. That is the essence of CI.

Another critical part of CI is continuous testing, where the CI tool test the code for vulnerabilities throughout the development process. Both unit and integrated testing can be run automatically.

To summarize, the objective of CI is to help in the early detection and resolution of bugs, increase code quality, and ensure the code remains stable.

What is continuous delivery?

Continuous delivery (CD) is a practice where code changes are automatically built, tested, and released to the production environment. It ensures that software can be released frequently with little resistance.

CD is an extension of CI, it automates the deployment process by ensuring all code changes are deployed to a testing environment and or a production environment after the build stage.

Relationship between Continuous Integration, Continous Delivery, and Continuous Deployment

The three phases of an automated software release pipeline are:

Continuous integration
Continuous delivery
Continuous deployment

The continuous integration phase is when multiple developers work on separate features and when the feature is complete, merge their code with the central repository of a project.

Continuous delivery is an extension of continuous integration. With continuous delivery, the code changes are built, tested, and pushed to the staging environment. Continuous deliveries entail running automated building tools to package an artifact( an artifact may consist of the source code, dependencies, and other resources)to be delivered to the end users.

Continuous deployment is the last phase of the pipeline. It is responsible for automatically launching and distributing the artifact to end-users

With continuous delivery, the code is manually approved before it's pushed to the production environment. However, in continuous deployment, the code is pushed to production automatically without explicit approval

GitHub Actions Architecture: How GitHub Actions can be used for CI/CD

GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that enables developers to build, test, and deploy apps right in your GitHub repository.

The CI/CD is achieved by using workflows. A workflow is an automated process that will run one or more jobs (tasks to be done). You can create workflows that build and test every pull request to your repository, or deploy merged pull requests to production. The workflows are defined inside a YAML file in your local repository and will be pushed to the GitHub repo.

Whenever an event occurs in your GitHub repository for instance, when a developer pushes code to a repository or submits a pull request the set of tasks outlined in your workflow automatically starts.

You can create multiple workflows in your repository. Below are examples of workflows you can create in GitHub Actions:

Build workflow: This helps us build our code from the source ensuring the code works well on all platforms and environments
Test workflow: This runs tests (unit and integrated) on every pull request to your repository ensuring the code is bug-free
Deploy workflow: This helps developers to deploy code to a production environment.
Notification workflow: This is used to send a notification when an event occurs in a repository.

In summary, using GitHub Actions developers can create a CI/CD pipeline to automate the software development lifecycle workflows.

It covers a couple of stages:

Source stage: At this stage, you develop or implement the required features using version control software like Git.
Build Stage: This step put together the source code with all its dependencies into an artifact (executable format)
Test stage: At this stage, you integrate automated testing to validate the quality of the code, and detect and fix bugs. Various tests can be executed at this stage, once the code passes the tests, it is ready to be deployed.
Deployment: The final stage is to automatically deploy the app to the staging or production environment.

Constituent of GitHub Action workflow file

Central to GitHub Actions are workflows. You can set up a workflow to be activated when an event occurs in your repository.

Below is an example of a workflow file. We will use this sample to explore the constituent of a workflow flow.



name: learn-github-actions
on: [push]
jobs:
  build-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '14'
      - run: npm i
      - run: npm run build
      - run: npm run test

name:

This represents the name of your workflow. When set, GitHub will display the name of the workflow in the "Actions" tab of your repository.

on:

The on will automatically activate the workflow based on the specified events. You can specify single or multiple events to trigger a workflow.

The syntax is as below:



on: event // for a single event 
on: [event1, event2] // for multiple events

For example:

on: delete will run a workflow when the delete event occurs in your repository.
on: push will run a workflow when you push code to the repository.
on: [push, fork] will run a workflow when a push is made to any branch in the repository or when someone forks the repository.

jobs:

jobs are the building blocks of the workflows. It represents a set of executable steps. Each job consists:

a name
a runner
set of step,

The name should correspond with your objective. In the code snippet below, we define a job named build-test.



jobs:
  build-test

runs-on

The runs-on represents a runner. A runner is a virtual server hosted by GitHub that runs your workflows when they are triggered by an event. You can set up your job to run on Ubuntu Linux, Microsoft Windows, and macOS virtual machines.

In this example, the code runs on the latest version of the Ubuntu Linux virtual machine.



runs-on: ubuntu-latest

steps:

The steps: contains all the processes that will run the job. In each step, you can run an action or script. Use the uses and run keyword to specify an action or script to run respectively.

uses:

Specify the uses keywords when there is an action to run. An action is a custom application for the GitHub Actions platform that performs a complex but frequently repeated task.

For instance, uses: actions/checkout@v3 will run version 3 (v3) of the actions/checkout application. This checks out your repository onto the specified runner (virtual machine).

Assuming you want to install Node.js on the runner, you will the action: uses: actions/setup-node@v3

run:

The run keyword executes a command on the runner. In the code snippet below, we are running npm i to install dependencies defined in our package.json on the runner.

You can run npm run build and npm run test to build and test the app on the virtual machine.



 - run: npm i
 - run: npm run build
 - run: npm run test

In this section, we covered GitHub Actions, and the constituents of a workflow file, and learned some terminologies.

In the next section, we will utilize the knowledge gained by building a React app and implementing CI/CD.

Part 2: CI/CD tutorial in React app

In this tutorial, we are going to:

Create a basic React application using vite.
Create a GitHub repository for our project
Set up CI/CD workflow with GitHub Actions in our project directory
Automatically Deploy the React app to GitHub Pages whenever a commit is pushed to the GitHub repository.

Creating a React app

We will be using Vite to create the React project. Vite is a tool to quickly start a project from a basic template for popular frameworks such as React, Angular, Vue, etc

Copy and paste the code below into your terminal and press the enter key to spin up a React app. (Prior, change the my-react-app to your project name)



npm create vite@latest my-react-app --template react

Next, Vite will prompt you to select a framework. Select React.

Vite will also ask you to select a variant. Select JavaScript.
When the setup is complete, navigate to the project directory
Install the dependencies by running npm install
Run the project using the command : npm run dev

Set up the GitHub Repository

Follow these steps to create a GitHub repository

Visit https://github.com/ and sign in to your account.
Click the "New" button at the top-right corner of the page
Select "Repository" from the drop-down menu
Enter the name for your repository in the "Repository name" field
(Optional) In the "Description" field, enter a description for your repository.
The default visibility for the repo is "Public" meaning anyone can see and access your repository.
(Optional) Select the "Initialize this repository with a README" checkbox to create a README file in your repository.
Click the "Create repository" button.

After successfully creating the repository, you can push your React project into the repo.

Copy and paste a similar command below from your GitHub page into the terminal window of your application



echo "# ci-cd-testing" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/emmanuelkumah/ci-cd-testing.git
git push -u origin main

The command above will initialize the repository as a git project, connect the remote repository to the local project directory and finally push the local React project to the GitHub repository.

Configuring GitHub Action Workflow

Next, we will create the GitHub Action workflow in your project directory. This workflow will display "Hello World!" anytime you push code to the repository.

Navigate to the root of your project directory and create the .github directory
Inside the .github, create a workflows directory to store your workflow files.
In the .github/workflows/ directory, create a new file called ci-cd.yml (the naming convention for the file is entirely up to you) and add the following code.



name: hello-world
on: push
jobs:
  sample-job:
    runs-on: ubuntu-latest
    steps:
      - name: my-step
        run: echo "Hello World!"

Commit these changes and push them to your GitHub repository.

The GitHub Actions workflow file is now installed in your repository. It will run automatically each time a developer pushes a commit to the repository.

Displaying the activity for a workflow run

Whenever an event triggers your workflow, the workflow file will run. You can view the run's progress on your repository.

Navigate the main page of your GitHub repository
Click on the "Actions" tab on your GitHub repository
In the left sidebar, click the workflow you want to see. Our workflow is named "hello-world"
Click the workflow run to view the summary.

In the left sidebar, click the job you want to see. We named our job sample-job

View the details of the job. It lists out all events occurring on the runner in real-time

Automating app deployment to GitHub Pages

In this section, we will add continuous deployment into our workflow. Whenever we push code to our repository, GitHub Actions will automatically build and deploy our app to GitHub pages. GitHub pages enabled developers to host websites directly from their GitHub repository.

Creating access token in GitHub

Before we can deploy our app to GitHub pages, we need to create a personal access token. Personal access tokens help access GitHub resources on your behalf. We will access the repository

Follow these steps to create a personal access token:

In the upper-right corner of any page, click your profile photo, then click Settings.
In the left sidebar, click Developer settings

In the left sidebar, under Personal access tokens, click Tokens (classic).

Select Generate new token, then click Generate new token (classic).
In the "Note" field, give your token a descriptive name.
To use your token to access repositories from the command line, select repo.
Click Generate token.
Copy the new token to your clipboard

We will use the access token in our Actions secrets in the repository. This will allow GitHub Actions to access our repo to deploy.

Follow the steps below:

Click on the Settings tab in your repository
In the left sidebar, select Secrets and variables
From the dropdown, select Actions

Click on the New repository secret button
Enter the secret name in the Name field
Paste your copied personal access token in the secret field

Click on the Add Secret button

Later, we will reference the secret name in our workflow.

Initially, our workflow was set up to echo "Hello World!" whenever a commit is made to the repo. Now, we will modify our workflow files to contain two jobs:

Build
Deploy

The workflow for the build is as below:



name: DevOps-GitHibActions
on: push
jobs:
  # Build Job
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Code
        uses: actions/checkout@v3
      - name: Install Node
        uses: actions/setup-node@v3
        with:
          node-version: 18.x
      - name: Install Dependencies
        run: npm install
      - name: Build Project
        run: npm run build
      - name: Upload artifact to enable deployment
        uses: actions/upload-artifact@v3
        with:
          name: production-files
          path: ./dist

Let's examine the stages:

First, we specify the name of the workflow as DevOps-GitHibActions (you can use any name)
The on:push event will trigger the workflow whenever we push code to the repository
We specify the job to run as build
runs-on: the job will run on Ubuntu virtual machine hosted by GitHub
steps : This details how to run the job
- To begin, we check out the source code on the virtual machine using the actions/checkout@v3
- Next, we installed Node on the virtual machine using actions/setup-node@v3 , and specify which version of node to install using with: node-version: 18.x
- We installed our NPM dependencies located in the package.json file on the virtual machine using the command run: npm install
- We build our artifact using the command run: npm run build
- Next, we upload the artifact to the runner using the command uses: actions/upload-artifact@v3
- Finally, we specify the path to the build using path: ./dist ( dist is the default build output location for apps built with Vite)

The next job is to deploy the app to GitHub pages.

The workflow is captured below:



...  // initial code remains the same, just add the following
 # Deploy Job
  deploy:
    # Add a dependency to the build job
    needs: build
    # Specify runner + deployment step
    runs-on: ubuntu-latest
    steps:
      - name: Download artifact
        uses: actions/download-artifact@v3
        with:
          name: production-files
          path: ./dist
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.CI_CD_TOKEN }}
          publish_dir: ./dist

deploy: signifies the name of the job
Before deploying we will need the build artifacts. This is achieved by adding needs: build
Next, we specify the virtual machine to run on using runs-on: ubuntu-latest
steps to deploy the app
- First, we download the build artifact using uses: actions/download-artifact@v3.
- We also specify the path to the build using path: ./dist
- To deploy the app to GitHub pages, we will use peaceiris/actions-gh-pages@v3
- Now, at the github_token section, we will need the personal access token to enable GitHub pages to deploy our app from the repository. We will indicate the secret name we set up earlier. (My secret was named CI_CD_TOKEN, yours will be different). The format is : github_token: ${{ secrets.YOUR_SECRET_NAME }}
- Finally, we specify the directory to publish the app using publish_dir: ./dist

Updating the `package.json` and `vite.config.js`

Anytime you push code to your repository, the workflow will run, and the app will be built and deployed. However, if you visit your app on GitHub pages, it will display a blank page.

To fix this issue, go to your local repository:

Add the homepage of the website to the package.json file
Add the base URL to the vite.config.js file.

By default, a build is produced assuming your app is hosted at the server root. Because our app is located in a sub-directory of our GitHub domain, we specify the homepage in the package.json file

Add the snippet below to the package.json file



  "homepage": "https://emmanuelkumah.github.io/ci-cd-testing/" 
// You can get the URL from your GitHub pages section

Next, locate the vite.config.js file in your local repository. Add the base section to the file



import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";


export default defineConfig({
  plugins: [react()],
  base: "/ci-cd-testing/", // Add only this section
});

The base will set up the URL root of our website. For example, instead of displaying our app at https://emmanuelkumah.github.io/ (the Base URL is /), we will display our website at https://emmanuelkumah.github.io/ci-cd-testing/ by setting the Base URL to /ci-cd-testing/.

Finally, commit your changes to your remote repository

To view your new changes, on the right sidebar, click on the Deployments section, and click on the URL to view changes to the site.

Congrats, you have successfully implemented CI/CD in your React app.
View the repo here

Summary

CI is a practice where developers merge all their code changes into a central repository early and often
Continuous delivery (CD) is a practice where code changes are automatically built, tested, and released to the production environment. It ensures that software can be released frequently with little resistance.
Setting up a CI/CD tool helps the team to focus on writing code and committing to the shared repository.
GitHub Actions is a CI/CD tool that handles the automatic building, testing, and deploying of code
This can save your team time and reduce the risk of errors in your software.

ReactJs: Everything you need to know to get started

Emmanuel Fordjour Kumah — Thu, 25 May 2023 12:47:10 +0000

This article explains ReactJS from a beginner's perspective. It is designed to guide developers who are comfortable building dynamic user interface with JavaScript transition into building large scale user interfaces with ReactJS

At the end of this article, you should learn:

What is ReactJS
The problem that ReactJS solves
Declarative vs Imperative Programming
The Difference between Real DOM and Virtual DOM
Understand Single page applications
Separation of Concern
Introduction to JSX
Components, props and states
Introduction to Hooks

Before you start

To get the most out of this article, you should be comfortable building websites with

HTML
CSS
JavaScript

Introduction

Building websites and web applications have become increasingly challenging with time. Modern web applications require complex user interfaces, and you will need to factor business logic, structure, and data that changes constantly in the development process.

Using pure JavaScript to build modern user interfaces can be challenging.
To update the front end of an application using pure JavaScript, you will need to:

Select the DOM node
Listen for an event (e.g. click of a button, submitting a form, etc) on the node
Create new elements that describe the user interface
Assign content to these elements.
Finally, update the DOM with the required element.

Whenever you use pure JavaScript to build the user interface, it consumes a great deal of development time, and introduces a lot of bugs to our application.

ReactJS provides solution to this problem, by allowing developers to build complex user interfaces without having to write difficult-to understand JavaScript code, and numerous DOM manipulations.

In the next section, we will explore what ReactJS is and the solution it provides.

What is ReactJS?

ReactJS is a frontend JavaScript library for building user interfaces. It lets you create complex UIs
from small and isolated pieces of code called “components”.

This library has been used to build popular web applications like Facebook, PayPal, Netflix, etc.

What is unique about ReactJS?

React enables developers to create large scale web application that accepts data likely to change over time without the need to reload the page to view the updates. This makes the frontend of apps load faster and provides better user experience especially on mobile devices.

Generally on websites, whenever the data changes on the server, the web client(browser) makes a request to the server to fetch the latest informatio, this requires a reload of the browser to view the changes.

ReactJS avoids reloading the page whilst providing access to real-time data changes.

To understand how data changes constantly in mordern web app, let's consider the example below using the Facebook web app(since it was built with ReactJS).

For instance, your favorite influencer goes on Facebook Live, and you login to watch the video.
Whilst watching, you liked it and proceed to read comments.
In browsing through the comments, you notice the live count,likes,comments etc keeps updating.
There was no reload of the page, however the user interactions on the video keeps increasing.
That is ReactJS in action, data on the site is changing without reloading the page.

In the next section, we will examine the problems ReactJS solves.

The problems ReactJS Solves

Developers use tools to solve problems encountered in daily work. Knowing what problem exist and how the specified tool solves the problem will propel your knowledge about the tool significantly.

In this section, we will take a look at the problems that exist when building user interfaces and how ReactJS work out these problems.

Let's get started

Managing complex DOM interactions

Updating the UI with plain JavaScript is very verbose and complicated. You will need to give out instructions on what elements are to be created, assign content to these elements, select an element from the DOM, and then attach the newly created elements to the selected element to create an updated UI in response to an event.

Assuming you will need to go through these steps multiple times to create the UI of an eCommerce app, this will require a great deal of development time.

Also, as the DOM operations in the background increases,the app will begin to run slowly.

ReactJS is built to handle complex DOM updates and interactions.

For instance, if you are building an application that requires a lot of interaction (button clicks, submitting a form, posting, commenting, editing and deleting items, updating profiles, etc), ReactJS can be used to quickly create the user interface of the application, increasing the development speed and performance of your app

Handling higher performance app.

If you are building an application that requires users to be commenting on a post regularly, you will need a way to quickly update the DOM to reflect an updated UI.

You don't want to reload your app just to see the latest comment or to see the like counts go up.

ReactJs is able to handle this using the concept of Virtual DOM. Whenever you render a page using React, it stores the state of the DOM tree. If there is an update to be made on the UI, React compares the previous DOM state to the current DOM, and only updates the elements that has changed.

With this approach, a lot of DOM operations are minimized improving the performance of your application.

Writing scalable and easily maintainable frontend code

Traditionally, if you want to develop the UI of an application, each HTML file you create will represents the screen or page of your app.

For instance, if you are building the Home page, every required element (button, text, images, div, paragraphs, headings etc) will be defined in that single file ( eg. index.html).

You then link the CSS and JavaScript files to the index.html.

Assuming the Home, About, and Contact pages of your app requires a Navbar and footer section, you will have to *write the same lines of code for the Navbar and footer in the required pages. *

If you decide to change some text in the footer, the same changes will have to be made in all the pages that uses the footer section

Building web app this way introduces huge lines of code in a single file, and that makes maintaining and updating the app very tedious.

However, whenever you build the user interface of an app in React, you will slice the UI into smaller units called components and develop each component separately.

Each component will contain all the markup and logic needed to make the app functional.

Writing code this way makes your app modular, reusable and maintainable. If there is an error, you can quickly locate the component the error occured in and fix it, and the changes will reflect in all the pages that uses the component.

The components can also be used in different sections of the app solving the need to rewrite the entire functionality again.

For instance, if you develop a Footer component. It can be reused in different pages of your application that requires a footer.

We have learned some challenges with building user interface with pure JavaScript and how ReactJS addresses these challenges.

In the next section, we explore declarative programming and learn how it helps build user interfaces.

Imperative vrs Declarative Programming

We often use imperative programming, when building user interface with pure JavaScript.

In imperative programming, you write the steps for how the user interface should be updated.

For instance:

Create a div element
Create a h1 element
Assign text to the h1
Create a button element
Add text to the button
Select the element with the id of container
Attach the div to the element with id of container to update the DOM

The steps above will contain a lot of DOM methods just to create a div with an h1 and button element on the HTML document.

A declarative programming approach is recommended when building user interfaces, because it can speed up the development process.

Rather than writing DOM methods, the developer declares what to display (in this case, a div, with and h1 tag with some text and a button)

Instead of having to write DOM methods, it would be helpful if developers were able to declare what they want to display in the frontend (in this case, an h1 tag with some text, and a button).

Because React is a declarative UI library, you can inform React of what the user interface should display, and React will figure out the steps to update the DOM on your behalf.

In the next section, we explore how React update the DOM.

Difference between the Virtual DOM and Real DOM

React is built on the premise that DOM manipulation is a costly operation and should be minimized.

Using pure JavaScript to update the DOM to reflect UI changes in a large scale application will consume more memory whenever the document is reloaded. In effect the operation speed of the browser becomes slower due to the huge usage of memory.

For any change in the UI, the browser has to search, check, and parse the number of nodes to reflect the changes. When the number of UI changes increases, efficiency decreases, making the browser slower.

For example, if you have used JavaScript to build a Todo app that lists 20 Todo items.

Whenever you check off one item from the list, JavaScript rebuilds the entire list in the DOM. *This is 19 times too much work! There was only one change, but the other nineteen were rebuilt exactly as they were *

To combat this, React provides the developer a virtual DOM to render to instead of the real DOM.

The virtual DOM is a programming concept where an ideal or "virtual" representation of a UI is kept in memory and synced with the "real" DOM by a library such as ReactDOM. This process is called reconciliation.

The virtual DOM is a lightweight JavaScript object that is a copy of the real DOM and the UI is rendered on the Virtual DOM instead of the real DOM.

Whenever the UI changes, React renders the entire UI in the Virtual DOM.
The Virtual DOM works in these simple steps:

React uses two Virtual DOM to keep track of UI changes.
Whenever the UI or any underlying data changes, it stores the change in the new DOM whilst keeping the previos DOM
It compares both DOM and detect which part of the DOM got updated.
Once detected, it re-renders only those objects which got updated inside the Real DOM, instead of complete re-rendering the Real DOM

This increases DOM efficiency, improves browser performance and makes the application faster to load.

Introduction to Single Page Application

In most traditional websites, the entire website loads whenever you navigate from the current page.

For instance, if you move from www.example.com to www.example.com/about a request is sent to the server for that resource, it returns the appropriate response and the entire website is reloaded.

On completion, certain aspects of the website may not have changed. For instance, on each page of the website, the navigation bar, sidebar, and footer will remain the same.

Because these sections remain the same, a full reload is unnecessary. This will take a long time and decrease the performance of the website

React solves this challenge with the concept of a single page application.

A single-page application is an application that loads a single HTML page and all the necessary assets (such as JavaScript and CSS) required for the application to run.

Any interactions with the page or subsequent pages do not require a round trip to the server for a response. That means, the page is not reloaded.

You have only one single page that is loaded the first time you launch the web app. Afterwards, the app will not be fully reloaded no matter where you navigate to.

The objective of single-page application is faster transitions making website feel more like a native app.

To detect a single-page application, you will notice that the loading icon of the browser will not reload when you move from one page to another, as opposed to traditional websites.

In building React apps, you will notice there is only one App.js file. This file is the location for your components (sections of your applications About, Dashboard, Admin Contact pages etc).

It is only the App.js file that will be rendered to the DOM.

See example below:

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
      <App />
  </React.StrictMode>
);

It is this single javascript file, that helps to display the user interface of our app. All the other pages will be a component inside the App.js and you then utilize a client-side routing tool (eg. React Router) to navigate to the other pages

See example below

function App() {
  return (
    <>
      <div className="app">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/services" element={<Services />} />
        </Routes>
      </div>
    </>
  );
}

Understanding JSX

HTML, CSS and JavaScript are the main tools for building the web.

The HTML controls the structure and content of the website
The CSS is responsible for the design
JavaScript handles the logic.

Generally, the HTML, CSS, and JavaScript live in separate files and should not be mixed.

As the web became more interactive, logic increasingly decided content, making JavaScript in charge of the HTML, and introducing a concept called JSX.

JSX stands for JavaScript XML, it allows you to write HTML inside JavaScript and place them in the DOM without using functions like appendChild() or createElement(). It is used in React to describe what the UI should look like.

The createElement method enable you to create a React element, and serves as an alternative to writing JSX.

The syntax is as below:

const element = createElement(type, props, ...children)

If you want to create a p inside a div, without using JSX, you would have to create these elements like below:

const paragraph = React.createElement('p', {}, 'This is a paragraph'); 
const container = React.createElement('div',{},paragraph ); 

ReactDOM.render(container,rootElement);

Using JSX, the above can be simplified as

const container = ( 
<div> 
  <p>This is a paragraph</p> 
</div> 
); 
ReactDOM.render(container,rootElement);

In the code above, we are directly using HTML inside JavaScript.

Using this approach, you can build the user interface of your application, by nesting the HTML structure in a JavaScript file.

See an example below:

Understanding React Components

React let you build the user interface of your applicaton from individual pieces called Components.

The concept of component enables you to break down the UI design of an application into smaller units, and build each unit separately. Later, these units can be combined to form the desire UI.

Consider the UI of this Map application below:

We can separate the UI into smaller pieces, so that we can build each unit separately.
The units is what we call components. For instance, we have the TopNav, Menu, Sidebar, Features, Map and MapDetails components.

A component is a JavaScript function containing JSX that can be rendered in the ReactDOM to create the user interface.

It let you split your UI into reusable pieces, and think about each piece separately.

Because components are functions, they accept inputs (called props) and return React elements that describes what should appear on the screen.

They are responsible for controilling a part of the app's UI and logic, and allows developers to focus on the logic of the application, rather than the user interface.

Components are reusable. For instance, you can use the TopNav component you have developed in any page that requires a top navigation.

They can also be nested to create a complex UI. For instance, when building the Home page of the UI above, we will nest the TopNav, Menu, Sidebar, Features, Map, and Map Details together.

Props vrs State

Updating the UI with State

Component keep track of data. State is the store that holds data or information about your component.

Because data or information in a Component changes frequently, the State will also change to reflect the current data. Anytime State changes, the Component will re-render to store the latest information or data, hence an updated information will be displayed in the user interface of your application.

Passing data with Props

Props are inputs to components. In React, components use props to communicate with each other. Parent component can pass information to its child components by giving them props.

Props are single values or objects containing a set of values that are passed to components using a naming convention similar to HTML-tag attributes, and enable you access data or information inside that component.

Using props to pass data to a component is similar to using attributes in HTML elements.

In HTML elements attributes provide additional information about elements
Similarly, in React,props passes information to Components
Attributes usually come in name/value pairs like <input name="value"/>
Similarly, props are written in name/value pair inside a component. For instance <Welcome name="Sara" />

Let's understand the differences between state and props using the analogy below.

Consider water for this analogy. There are properties and states associated with water.

Water's color and smell are examples of its properties(props).
Water has no color or odor. When pure water is heated, boiled, or cooled, it remains transparent and does not smell different.

Temperature is an example of water's state. Put it in a refrigerator and cool it to 0°C and it will freeze, at 100°C it will be boiling. The state has changed from freezing to boiling.

This is the difference between state and property. Properties are inherent features of something. Properties do not change over time, like water’s color, smell, and taste.

State can be controlled, just like controlling water temperature.

In React:

props are immutable (cannot be changed), while state is mutable.
props are passed to component, while state is defined inside the component

Exploring built-in Hooks

At the core of building React apps is the usage of Hooks

Hooks are function built into React that fires on specific events such as data changes, or component loading into the DOM.

You can either use the built-in Hooks or combine them to build your own.

Examples of built-in hooks

State Hooks

State helps a component to keep track of information. To add state to a component, you can use any of these Hooks:

useState : declares a state variable that you can update directly
useReducer: declares a state variable with the update logic inside a reducer function

Context Hooks

Context lets a component accept information from a faraway parent without passing it as props.

The benefit of context is to allow top-level component pass some data to all components below it, no matter how nested they are avoiding prop drilling.

An example is the useContext hook that allows you to reads and sign up to a context.

Effect Hooks

Effects enables a component to connect and sync with systems outside of the React ecosystem. For instance, fetching data from an external application, widgets written using a different UI libarary and other non-React code.

Examples of effect hooks:

useEffect:connects a component to an external system.
useLayoutEffect: fires before the browser repaints the screen. You can measure layout here.
useInsertionEffect:fires before React makes changes to the DOM. Libraries can insert dynamic CSS

Performance Hooks

You can skip unnecessary re-rendering of components and optimize optmize performance using the following hooks:

useMemo: allows us to “remember” a computed value between renders
useCallback:used when you have a component in which the child is rerendering again and again without need

Ref Hooks

Refs enable a component hold some data that isn't used for rendering, like a DOM node or a timeout ID.
Compared to States, updating a ref wil not re-render your component.

Use the Refs hooks whenever you work with a non-React systems, such as the built-in browser APIs.

Example of ref hooks are

useRef: lets you reference a value that's not needed for rendering
useImperativeHandle:lets you customize the ref exposed by your component. This is rarely used.

Summary

In this article, you have learned most of the underlying concepts used in ReactJS to help build modern user interface.

You learned what ReactJS is, how it helps solves the challenge of building complex modern user interface, and the different types of hooks in ReactJS applicaton.

Has the article helped you in your quest to build great user interface with ReactJS ?

Do you have any feedback to provide, or perhaps you want to throw more light on a section. Please do drop your comment, and don't forget to share the article on your social handles. It would be of great help to the dev community.

How to master the DOM to build interactive web apps

Emmanuel Fordjour Kumah — Mon, 15 May 2023 18:47:00 +0000

Frontend JavaScript uses the DOM, hence if you want to be good at JavaScript you will need to master the DOM.

In this article, you will learn how to use the Document Object Model (DOM) to connect and manipulate the elements of a web page to make it dynamic.

At the end of this article, you will learn:

What the DOM is
Understand the DOM Tree
How to select, create, add, and remove elements from a web page
Styling a web page using JavaScript
Traversing the DOM
Event handling in the DOM etc

You will use this knowledge to create this basic web app, called "Hey Buddy", that enables you to create and access the contact details of your favorite buddies.

Prerequisite

Before getting started, you will need to be familiar with

Basic HTML
Basic CSS
Basic JavaScript

Introduction

Websites consist of static HTML and or XML documents. Being static, you need an approach to make them lively and functional.

You may want to change the background color of a specified content on the web page when the user hovers over it.

You may also want to validate a form whenever a user enters a piece of information, warning the user of any incorrect input.

You may even want to expand an image when the user hovers it.

These interactivities are made possible when you have access to the elements on the web page.

How do you access these elements? Whenever a HTML document is loaded in a web browser, the browser models the HTML document into a structure.

With this structure, you can use a programming language like JavaScript to access and modify the various elements in the HTML document.

Whenever any section of the HTML document is modified with JavaScript, the web page reloads to reflect the changes.

This approach enables developers to add interactivity and control the elements in any HTML file making websites dynamic and functional.

In the next section, you will learn about the Document Object Model.

What is the DOM?

Whenever a web page is displayed in a browser window, the browser depicts everything on the page (heading, paragraph, images, links, text, etc) as objects. These objects represents the structure and content of every element on the website, and is generally referred to as the Document Object Model (DOM).

The Document Object Model (DOM) is a tree-like representation of the content of the web page.

It enables you to use a programming language such as JavaScript to change the content, style, and structure of web pages to make them dynamic and functional.

The DOM and JavaScript

Whenever a web page is loaded, the browser creates a Document Object Model (DOM) of the page. This means, every element on the web page is represented as an object, and these objects act as a link between JavaScript and the web page.

Because every element on the web page has been represented as an object, you can use JavaScript to interact with the elements on a web page.

The elements that will be depicted as object could be any of the below:

Content: these include text, video, and images on the web page.
Structural elements: These include, div, section, body etc that forms the main structure of the HTML document.
Attributes: Every element on the web page has attributes, such as class, placeholder, size etc.

JavaScript can now be used to:

add, change, and remove any of the HTML elements and attributes
add or change any of the CSS styles
add, update, or delete the content on the website
handle events such as clicking a button.

The DOM is not a programming language, however, without it, the JavaScript language will have no idea of how to interact with a web page.

It is the DOM that gives JavaScript the superpower to access and manipulate the structure, content, and appearance of a web page.

In the next section, we will explore how an HTML document is represented as the DOM

The `Document` Object

The actual page loaded in the browser window is represented in JavaScript by the Document object. You can use this object to manipulate the HTML and CSS of the web page.

The basic elements of a HTML document are:

A text header, represented with the <h1>, <h2>, <h3>, <h4>,<h5>,<h6> tags.
A paragraph, represented with the <p> tag.
An image, represented with the <img> tag.
A divider, represented with the <div>tag etc.

You can refer to these elements in the DOM, and because each element is an object, it can be accessed using JavaScript, to enable you to modify the web page.

Modifying the web page entails changing the text content, applying new styles to it, creating new HTML elements and adding them to the current element as children, or even deleting elements on the web page.

To achieve the above, the DOM comprises a set of APIs listed in the Document object. It has properties, methods, and events useful for manipulating and creating web pages.

For instance, the Document.documentElement property helps us to refer to any HTML element on the web page. Again, the document.body is an object representing the <body> element, you can use this method to manipulate the body of the HTML document.

Soon we’ll learn more ways to manipulate the DOM, but first, we need to know about its structure.

Understanding the DOM tree

Whenever the HTML document is loaded in the browser window, the DOM structures the HTML file like a genealogical tree or family tree.

In a family tree, at the top you have the grandparents, followed by your parents and their siblings, then you and your siblings and cousins.

Similarly, the DOM will represent all the elements in the HTML document like a family tree structure. Each entry in the tree is a node, and each node contains an element on the web page.

The majority of nodes in a DOM tree will be Element and Text nodes. The nodes in the node tree have a hierarchical relationship to each other.

Every tree begins with the root node, beneath, you would have head and body elements. Below the body elements, you may find the header, main and footer elements.

Consider the HTML source code below:



<!doctype html>
<html>
  <head>
    <title>DOM Manipulation</title>
  </head>
  <body>
    <h1>What is DOM</h1>
    <p>This article explain what the DOM is</p>
    <p>DOM allows you to manipulate web pages</p>
    <button>View DOM </button>
  </body>
</html>

The diagram below illustrates the DOM derived from the HTML above

Referencing the image above:

Each blue and yellow circle in the diagram represents a node. The blue represents an element node whilst the yellow represents a text node.
Every tree begins with the root node, which is the html element. From the root node, you can branch into other nodes.
Whenever a node, has another node inside it, the initial node is called a parent node. From the above, html is the parent node because we have the head and bodynodes under it. Alsobodyis the parent node ofh1,p,pandbutton` elements.
A child node is a node directly inside another node: h1, p and button are child nodes of body
A sibling node is a node that sits on the same level in the DOM tree. For instance, all the blue circles in the same level are sibling nodes: head and body are siblings, as well as h1, p, p and button
A node anywhere inside another node is the Descendant node
Whenever there is content in each node, it will be represented as #text (as displayed in the yellow circle). A text node contains only a string. It may not have children and is always a leaf of the tree. For instance title element has the text DOM manipulation
The entire HTML document is represented by the document object (a node as well)

Exploring the DOM using the Developer tools

You can explore the DOM using the developer tools in your browser, by right-clicking on a webpage and selecting "inspect" in the context menu. Using the icon below in the left-upper corner, you can choose a node from the webpage and inspect it.

This gives access to the DOM element in addition to the styling applied to the element. You can interact with any of the elements, and apply styling and that change will reflect on the web page.

Even though you can find elements using the developer tool, it is not preferred.

In the next section, you will learn how to find an element in the DOM.

Finding Elements in the DOM

You can access the DOM elements using the Id, class, tag and selectors.

The methods for accessing elements are:

document.getElementById(id)
document.getElementsByTagName(tagName)
document.getElementsByClassName(className)
document.querySelector(cssSelector)
document.querySelectorAll(cssSelector)

In the next section, you will use the above methods to find any element in the HTML document.

Using the getElementById() method

The getElementById() finds an element in the HTML document with an assigned ID. Since element Ids are required to be unique, it provides a way to access a specific element quickly.

The syntax is as below

document.getElementById('ElemId')

Supposing in our HTML document you have an element with an id firstPara.

For instance:

<p id="firstPara"> Let's begin with the frist paragraph </p>

In the JavaScript file, you can access the element with that id (firstPara) and manipulate it.

//access element with id firstPara const para = document.getElementById('firstPara')

Using the getElementsByTagName() method

You may want to find all the paragraphs in an HTML document.

The getElementsByTagName() method searches the document and returns a collection of elements with the given tag name.

The syntax is as below:

document.getElementsByTagName(name)

Let's find all the p tags in the index.html document below:

Because you want to access all the p elements, you use the p tag as the tag name hence document.getElementsByTagName('p')

Using the getElementByClassName() method

The getElementByClassName() method allows you to locate an element with the specified class name(s). It returns an array-like object of all child elements which have all of the given class name(s).

The syntax is as below:

document.getElementsByClassName(names)

Usage

Get all elements that have a class name of container in the HTML document.

document.getElementsByClassName('container')

Get all elements that have a class name of container and wrapper in the HTML document document.getElementsByClassName('container wrapper')

Using the querySelector() method

The document.querySelector() returns the first element within the document that matches the specified CSS selector. If no matches are found, null is returned.

The syntax is as below:

document.querySelector('.myClass')

Let's assume in the code snippet below, you want to access an element with the class name container

The screenshot below illustrate the implementation

Importance of finding elements in the DOM

Whenever you find elements using the methods above, you can improve functionality on web page either by changing the content, styling the element or adding an event listener to it.

Creating HTML elements

Developing the user interface of websites involves adding new elements to the HTML document. These elements can be a button, an image, a paragraph, or a heading.

In this section, you will learn how to create elements in your JavaScript file and join them to other elements to help create user interfaces. For instance, you can create a paragraph element and attach a button to it.

Use the document.createElement() method to create an HTML element. The method accepts the HTML tag as an argument

The syntax is as below:

document.createElement(tagName)

The tagName specifies the tag to be created for instance div, button, paragraph, etc.

Let's create a heading, paragraph, button and div elements in our JavaScript file using the syntax above

Whenever an element is created, you can use the innerText property to add or get the text content within the element.

In the example below, we add content to the headingOne, btn and paragraph elements

Adding elements to the HTML document

After creating an element, you need to add it to the parent element to gradually build the user interface. The appendChild() method helps you with that.

The method adds a node to the end of the list of child nodes or a specified parent node

The syntax is as below:

parentNode.appendChild(childNode)

The childNode is the element to attach to the parentNode

Let's attach the paragraph , headingOne, and btn elements to the div (parent node )
Next, access the body of the HTML document and attach the div to the body

The output below displays the user interface as expected

Moving and removing elements from HTML Documents

In the previous section, you learn how to gradually build the user interface of a web page by creating and adding elements to the DOM.

In this section, you will learn how to move and remove elements in the DOM.

The appendChild() enables you to move an existing child node to a new position within the document.

In the index.html below, you have two unordered lists with id's listOne and listTworespectively, you can move the first item in listOne (i.e HTML) to be positioned after the last item in listTwo (i.e MongoDB)

Let's learn how to achieve that:

Write the following code in your JavaScript file

The output is as below:

To remove a node from its parent, use the Node.removeChild()

In the example below, you can remove all the items from listOne from the body node.

The output will be

Adding and getting the content of an element

Use the methods below to read and add content to an element

element.textContent
element.innerText
element.innerHTML
The textContent property returns all the text contained by an element and all of its descendants including spaces and CSS hidden text, except the tags

In the code below, you can use the textContent to get the text inside the h1 element

Output

"This is heading one"

If you prefer to rather add text to the element, you can do:

The HTML document will reload to reflect the changees
The innerHTML property gets or changes the HTML markup of an element

The syntax below can be used to read the content of an element

let content = element.innerHTML;

In the example below, you want to get the HTML markup contained in the the ul.

Below is how it will be implemented in our JavaScript file using the innerHTML property.

The output will be

<li>HTML</li> <li>CSS </li>

The innerText property can also be used to write dynamic text on the html document. Here, text will not be interpreted as html text but a normal text. The syntax is as below

element.innerText = "new content:

Let's access the h1 tag and add a text to it.

The output will be

Styling elements with JavaScript

It is possible to manipulate CSS styles with JavaScript. The general approach is to add inline styles directly onto the elements you want to style.

Let's take a look at how to achieve that.

Inline styling of elements

Using the HTMLElement.style syntax, you have access to an object containing all the CSS properties (color, background color, font size, font weight, etc)

For instance, to change the color of an element to red, you use the color property and assign the value.

The syntax is as below:

HTMLelement.style.color = 'red'

If there are hyphens (-) in the CSS property to use, for instances -webkit-text-stroke , you can use the array-like notation ([]) to access the property.

If there is one hyphen (-) in the property, for instance background-color, you should write it as backgroundColor

See the examples below:

HTMLelement.style.['-webkit-text-stock'] = 'unset'; HTMLelement.style.backgroundColor = 'red'

In the example below, we changed the background color of the first list to red;

The output is as below:

Styling HTML elements with setAttribute() method.

The setAttribute() assigns value to an attribute on a specified HTML element.

The syntax is as below:

HTMLelement.setAttribute(name, value)

It accepts two arguments name and value

The name represents the attribute you want to set on the HTML element

The value is a string containing the value to assign to the attribute.

You can use the setAttribute() to apply a specified class on an HTML element.

See the example below,

The CSS file section contains a .container class that list all the CSS properties to apply to the HTML element.

Let's review the process:

In the JS section, we selected the body of the HTML document and style it using the CSS declaration in the .container
Using the setAttribute() method, specify the attribute to set on the element, in our case it will be a class and then specify the value to apply on the class which will be the .container CSS declaration

The output is as below:

In the next section, you will learn how to find elements in the DOM based on their relation to other elements.

Traversing the DOM

Occasionally, you need to search upwards, downwards, or even sideways to locate elements. This is referred to as Traversing.

Traversing refers to "moving through", and it is the process of finding elements in the DOM tree based on their relation to other elements.

Traversing involves starting with one selection and moving through that selection until you reach the elements you desire.

Using methods like document.querySelector(), document.getElementById() , you can access elements in the DOM tree.
The limitation of using these methods is that they perform a full search of the DOM tree in order to locate an element.

Wouldn't it be easier to locate a node by moving from one element to another element compared to the full search?

Why DOM Traversing

Assuming you want to visit the nearest pharmacy in your neighborhood, what will be the fastest and most effective way to get there?

If you already know the location of the pharmacy, you can move from your house directly to the pharmacy.
Alternatively, you can search for the location of the nearest pharmacy on Google Maps, then follow the given directions.

Moving from your house to the neighboring pharmacy is the most effective and recommended approach. This analogy is equivalent to traversing the DOM, selecting one element from a neighboring element.

If you look up the address of the nearest pharmacy using Maps, you are using the equivalent of document.querySelector to find elements (i.e performing a full search which is ineffective)

Whenever you have access to a given node in the DOM tree, you can access its related node in three directions:

Downwards
Sideways
Upwards

Traversing downwards

The two methods to traverse downward are:

querySelector or querySelectorAll
children

Using the selector method to traverse downwards

Use the element.querySelector or element.querySelectorAll method to traverse downwards from a specified element.
Locate a starting point (element) and then use the querySelector() method on the starting element to move downwards to the required element.

For instance in the code below, to locate the h1 element, you start from the section and move downward.

The output is as below:

<h1 class="heading">Travesing Downwards </h1>

Let's understand the code above

Use the document.querySelector('.container') to specify the element to start searching from.
Now, that we have access to the starting point, you can move down to the required element using the sect.querySelector('.heading')

Traversing downwards using the children or childNodes properties

The children property selects all child elements that are immediately nested in another element.

It returns a live HTMLCollection that contains all of the child elements.

Because the HTMLCollection is an array-like object, you can use the bracket notation to select the required item.

In the example below, you have an unordered list of fruits in the HTML section.

In the JavaScript file, you first find the parent element and use the children property to move downwards to select all the li's
Finally, you can now access the third item from the list

The output is as below:
<li>Pineapple</li>

Traversing Upwards

You can also move up the DOM to find elements. The two methods to navigate up the DOM are:

parentElement
closest
Using parentElement to traverse upwards

The parentElement allows you to move to the selected element's parent node one level up.

In the code below, we select the ul and move one level up to the parent element (div)

Traversing upwards using the closest property

The closest property selects an element multiple levels above the current element.

The search begins from the current element, then moves up until it reaches the document. During the process, whenever it reaches the element to find, it stops and returns the element.

The syntax is as below:

const closestAncestor = Element.closest(selector)

In the example below, we start from the a element and select the div element **multiple levels **above the a element.

Traversing sideways

There are two methods of walking the DOM sideways:

nextElementSibling
previousElementSibling
Using the nextElementSibling to traverse sideways

You can select the next element using the nextElementSibling

The syntax is as below:

const nextElem = Node.nextElementSibling

Let's select the next item in the list in the example below

Using the previousElementSibling

You can select the previous element with previousElementSibling .

In the example below, we first select the second list item (Apples), then select the previous element (Mango)

Introduction to Events

In the previous sections, you learned how to create and attach elements to the DOM to create the user interface. You also learned how to traverse the DOM.

In this section, you will learn how to interact with these elements to make your web page lively.

Whenever a user or browser interacts with a web page it generates an Event.

Events are signals that something has happened.

Examples of events are:

Submission of a form
Resizing the browser window
Selecting, clicking, or hovering over certain elements, etc.

These events can be categorized into mouse, keyboard, and window events.

Example of Mouse events:

click – when the mouse clicks on an element
contextmenu – when the mouse right-clicks on an element.
mouseover / mouseout – when the mouse cursor comes over / leaves an element.
mousedown / mouseup – when the mouse button is pressed/released over an element.
mousemove – when the mouse is moved.

Example of Keyboard events:

keydown and keyup – whenever a keyboard key is pressed and released.

Example of Window events:

onload: fired when the whole page has loaded
onunload : when the page has unloaded or the browser window is closed onafterPrint etc

Event handler

To react to the event, you attach an event handler function, that listens for that event happening. Whenever the event occurs, for instance, a form is submitted, the event handler function runs in response to the event happening.

The body of the event handler function contains a block of code detailing the actions to take.

Below are several ways to assign a handler

HTML attribute
DOM Properties
addEventListeners

In this section, we will focus on using the addEventListener method.

Using the addEventListener() method

The addEventListener() is a built-in method that enables you to handle events.

Below is the syntax:

element.addEventListener(event, handler, [options]);

event: represents the event name. Eg. click, scroll, submit, etc
handler: represents the handler function
options: additional options object with properties

To remove the handler, use the removeEventListener.

The syntax is as below:

element.removeEventListener(event, handler, [options]);

Let's target the button element on a web page and listen for a click of the button.

When the event occurs, the handler function will be called in response to the event.

In this example below, the function will log "button clicked" to the console.

Passing events as arguments

Whenever you need additional information on the event, such as the element clicked, or get the value in an input field when a form is submitted, you need to pass the global event object as an argument to the handler function.

The event object contains numerous properties (type, target, currentTarget, etc).

The example below uses event.currentTarget to return the element whose event listener triggered the event

Active learning: Building the "Hey Buddy" app

In this section, you will consolidate the knowledge gained to build a "Hey Buddy" app. It is a basic contact list application that displays the full name and phone number of your favorite buddies.

It is recommended that as you follow along, actively type all the code snippets in your text editor. This will help build muscle memory and fluency.

Let's look at the general approach to building the app

You will have three files in your project directory, an index.html, style.css and index.js file.
The index.html will contain the basic boilerplate, an h1, span ul and form` elements.
All the other required elements will be built using JavaScript.
You will create the following elements using JavaScript:
input,div ,button,li,h1 and p
The form will be nested with two input elements. The first handle the name of the contact, and the next input handles the phone number
To learn how to listen for events, you will attach an eventhandler function to the form. On submission, you will fetch the name and contact values from the inputs and display them as a list inside the ul.
You will append a "remove button" to the every submitted contact, and attach another eventListener to the button. This will enable you to remove the submitted contact from the DOM.
Finally, you will use the styles declared in the style.css file to style your application. This will enable you learn how to use the setAttribute property to apply styling using JavaScript.

Let's get started.

Setting up the Project Directory

Open your favorite editor, and in your project directory, create the following files index.html , index.js, style.css

Link the index.js and style.css to your index.html file

Open the index.html, type the following code snippet into it:

This index.html file contains the form and ul elements enclosed within the main tag.

The file also has a section with the heading Hey Buddy

Selecting elements from the DOM

Next, in the index.js file, you will select the form and ul tags from the DOM.

Write the following code snippet in your index.js file:

Creating the required elements

The form should contain div's , label's , input 's and a button element.

The input elements will accept data from the user.The first input will accept the full name **of your buddy
The second input will accept the **phone number.
The label 's provide captions for the inputs whiles the button will help in submission of the form.

Let's create these elements in our index.js file

Setting attributes on the elements

Attributes provide additional information on elements.

The setAttribute() method is used to set or add an attribute to a particular element and provide a value to it.

You will set the following attributes on our input elements:

type: the type attribute specifies the type of input to create. Because you will be entering the full name of your buddy in the first input, it will be a text input whiles the second input becomes a number input.
placeholder: The placeholder attribute specifies a short hint that describes the expected value of an input field. You will set the placeholder value for the text input to "Please enter the name of buddy" and that of the phone number to "Enter the phone number of buddy"
You will also add a name attribute to the inputs. Generally, the name attribute is used to handle input value after form submission. It can also be used to reference an element in Javascript.
Set the value on the name attribute on the text input to name, and that of the number input to contact.

The code snippet for the above instructions is as below, kindly include them in your index.js file.

Adding content to the elements

Next, you will add text to the label's for visual cues, and a text on the button element to instruct the user to click the button to submit the form.

The innerText property is used to set or get the text content of an element. In this example, you want to set the content of the label and button element.

To achieve that, add the below snippet to the index.js file

Attaching elements to the DOM

In the previous sections, you created the required elements and set the attributes on these elements. You also added text to the labels and the button.

In this section, you will attach these elements to the form to create the user interface of the app.

Whenever elements are attached to the parent node in the DOM, the web page will reload to reflect these additions.

Let's attach the created elements to the parent node (element) using the appendChild() method.

First, you want a label for the inputs, you will later attach the label to a div.

To achieve that follow the instructions below:

Select the nameLabel element and attach it to the nameInput
Select the nameDiv and attach the nameLabel
Select the contactLabel and attach the contactInput
Select the contactDiv and attach the contactLabel

The code snippet is as below

Next, you attach both the nameDiv and contactDiv to the form. Then, you attach the button to the form

The entire code snippet for the above steps is as below

Below is how the HTML structure will look like

Then on our web page, you will notice the elements have been displayed

Let's focus on the functionality for now, the styling will be dealt with later.

In the next section, you will focus on creating the elements that will help us display the data from the inputs.

Creating the additional user interface

You will declare a createBuddy function, and in the body of the function, you will create the following elements:

li, h2, p and button

You will use the ul tag in the index.html together with the li to create a list.

This list will contain the contact name and phone number represented by the h2 and p elements respectively.

The button element will help remove the contact details from the DOM.

Type the code below into the body of the createBuddy function.

Add an event handler to the form

Next, you will get the full name, and phone number when the form is submitted, and assign their values to variables.

You will implement an event handler to handle and verify user inputs and actions. When the button is clicked, you will get the data in the input fields and assign their values to a declared variable.

Let's create an event handler function called, handleFormSubmit



//get the value from inputs on btn click 
const handleFormSubmit= (event)=>{
  event.preventDefault()

}

The handleFormSubmit accepts an event parameter.

When we call the handleFormSubmit(), we will pass an event object as an argument.

The event object will keep track of various events that occur on the page, such as the user submitting the form, and allows you to react to them.
The event.preventDefault() in the body of the function alerts the browser that if there is a default behavior for this event, then skip that default behavior.
For example, because we will be submitting a form, the default behavior would be to submit the data to a server. However, due to the event.preventDefault(), the browser would not submit the form when the button is clicked. This enables us to get the values entered in the input fields and display them on the page.

Let's now attach the handleFormSubmit event handler to the form

You will attach the handleFormSubmit to the form with the help of the addEventListener() method and listen for a submit of the form.

The code snippet is as below:



form.addEventListener('submit', (e)=>handleFormSubmit(e))

Fetching the data from the form

You will use the event.currentTarget method to reference the elements that the event handler has attached.

In our example, the handleFormSubmit has been attached to the two input elements.

You can now get the data entered in the input elements by referring to the name we set on the elements and using the value property to get the entered data.

Below, we get the entered data for the full name and phone number and assign them to the buddyName and buddyContact variables respectively.



const handleFormSubmit= (event)=>{
//prevent default submission of form 
  event.preventDefault()
//get the data entered in the input fields
  const buddyName = event.currentTarget.name.value
  const buddyContact = event.currentTarget.contact.value

}

Adding the values in the inputs to the DOM elements

Next, when we submit the form, we want to pass the values stored in the buddyName and buddyContact variables as arguments to the createBuddy function.

This will enable us to add their data as text to the h2 and p elements we have in the createBuddy

The code snippet is as below:



const handleFormSubmit= (event)=>{
//prevent default submission of form 
  event.preventDefault()
//get the data entered in the input fields
  const buddyName = event.currentTarget.name.value
  const buddyContact = event.currentTarget.contact.value

// pass data to createBuddy  
createBuddy(buddyName,buddyContact)
}

The createBuddy function you will define later will accept name and contact as parameters.

In the body of the createBuddy function, you will use the textContent property to assign the values in the name and contact to the buddyHeading and buddyPara variables.

You will also add text to the buddyBtn

The code snippet is as below:



const createBuddy = (name,contact)=> {
 ... //initial code remains the same

//add the content from the inputs to the heading and paragraph
  buddyHeading.textContent = name;
  buddyPara.textContent = contact
 // add content to the button element
  buddyBtn.textContent = "remove buddy"
}

In the next section, you will learn how to attach these elements to the DOM

Attaching elements to the DOM

In the previous section, you created the required elements for the contact details and assign text to them.

In this section, you want to attach elements with their content to the DOM to build the user interface.

Follow the steps below:

Append the p to the h2
Append the h2 to the li
Append the button to the li
Append the li to the ul

Add the code below to the createBuddy function



 //attach the elements to the dom
  buddyHeading.appendChild(buddyPara)
  buddyItem.appendChild(buddyHeading)
  buddyItem.appendChild(buddyBtn)
// append the li to the ul to create the unordered list
  ul.appendChild(buddyItem)

The entire code for this section is as below:



// create buddy 
const createBuddy = (name,contact)=> {
  const buddyItem = document.createElement('li')
  const buddyHeading = document.createElement('h2')
  const buddyPara = document.createElement('p')
  const buddyBtn = document.createElement('button')

  //add content to the elements
  buddyHeading.textContent = name;
  buddyPara.textContent = contact
  buddyBtn.textContent = "remove buddy"

  //attach the elements to the dom
  buddyHeading.appendChild(buddyPara)
  buddyItem.appendChild(buddyHeading)
  buddyItem.appendChild(buddyBtn)
  ul.appendChild(buddyItem)

}

Below is the user interface when data has been entered into the inputs and the form has been submitted

The output in the DOM is as below:

Clearing the form fields

You want to clear the values in the input fields whenever the form has submitted.

You will declare a clearFormfunction, and use the reset() method on the form to clear all the values in the input fields.

The code is as below:



//clear form field when submitted
const clearForm = ()=>{
  form.reset()
}

You will execute the clearForm function in the body of the handleFormSubmit so that whenever the form is submitted, you can clear the inputs.

The code is as below:



const handleFormSubmit= (event)=>{
  ... // previous code remains the same

  //clear field values 
  clearForm()

}

Removing the contact from the DOM

Finally, you can choose to delete any of our favorite buddy from the contact list. This action will remove the item from the DOM as well

To achieve that, you will use the removeChild() method.

This method removes a child node from the parent node.

In this tutorial, the ul is a parent node and the li is child node.

Because the contact details are in the li, you will attach an event handler to the "remove buddy" button.

Whenever the button is clicked, you will remove the li from the ul in effect removing the contact details.

The code snippet is as below:



//remove buddy on button click
const removeBuddy = (item, btn )=> {
  btn.addEventListener('click',()=>{ ul.removeChild(item)})
}

Let's call the removeBuddy inside the createBuddy function, so that you can pass the buddyItem and buddyButton as arguments to the removeBuddy



// create buddy 
const createBuddy = (name,contact)=> {
... // previous code remains the same
 //pass item and button as arguments
  removeBuddy(buddyItem, buddyBtn)
}

The entire code for all the above steps is as below:



// select the elements from the Document
const form = document.querySelector('form');
const ul = document.querySelector('ul')

//create label elements
const nameLabel = document.createElement('label')
const contactLabel = document.createElement('label')

//create input elements
const nameInput = document.createElement('input')
const contactInput = document.createElement('input')

//create div elements
const nameDiv = document.createElement('div')
const contactDiv = document.createElement('div')

//create button element.
const btn = document.createElement('button')



//set Attributes on elements
nameInput.setAttribute('type','text')
nameInput.setAttribute('placeholder', 'Please enter name of buddy')
nameInput.setAttribute('name', 'name')

//set attributes on the contact
contactInput.setAttribute('type', 'number')
contactInput.setAttribute('placeholder','Enter phone number of buddy')
contactInput.setAttribute('name', 'contact')

//add content to  the labels
nameLabel.innerText = "Buddy name"
contactLabel.innerText = "Buddy contact"


//add text to the button 
btn.innerText = "Add buddy"


//attach the created elements to the form 
nameLabel.appendChild(nameInput)
nameDiv.appendChild(nameLabel)

contactLabel.appendChild(contactInput)
contactDiv.appendChild(contactLabel)

form.appendChild(nameDiv)
form.appendChild(contactDiv)
form.appendChild(btn)

// create buddy elements
const createBuddy = (name,contact)=> {
  const buddyItem = document.createElement('li')
  const buddyHeading = document.createElement('h2')
  const buddyPara = document.createElement('p')
  const buddyBtn = document.createElement('button')

  //add content to the elements
  buddyHeading.textContent = name;
  buddyPara.textContent = contact
  buddyBtn.textContent = "remove buddy"

  //add class to the button
  buddyBtn.setAttribute('class', 'removeBtn')
  //attach the elements to the dom
  buddyHeading.appendChild(buddyPara)
  buddyItem.appendChild(buddyHeading)
  buddyItem.appendChild(buddyBtn)
  ul.appendChild(buddyItem)

  //remove item from list on button click
  removeBuddy(buddyItem, buddyBtn)
}


//clear form field when submitted
const clearForm = ()=>{
  form.reset()
}

//get the value from inputs on btn click 
const handleFormSubmit= (event)=>{
  event.preventDefault()
  const buddyName = event.currentTarget.name.value
  const buddyContact = event.currentTarget.contact.value
 // call create items
  createBuddy(buddyName,buddyContact)
  //clear field values 
  clearForm()

}
//submit the form
form.addEventListener('submit', (e)=>handleFormSubmit(e))


//remove buddy on button click
const removeBuddy = (item, btn )=> {
  btn.addEventListener('click',()=>{ ul.removeChild(item)})
}

Styling the app

Let's now focus on styling our web app.

In the style.css we have declared all the required selectors and their corresponding CSS properties.



 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding:0;
  font-family: 'Poppins', sans-serif;
}
header {
  display:grid;
  place-items:center;
  color: #361D2E;
  margin-top:2rem;

}
header > h1 {
  padding: 1rem;
  font-size: 3rem;
  font-weight: 600;
}
header > h1 > span {
  font-weight: 100;
}
header > p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}
.body_container {
  background-color: #F2F4CB
}
.main_container {
  width: 50vw;
  border: 5px solid #593D3B;
  border-radius: 1rem;
   padding:2rem;
}
ul {
  list-style-type:none;
  display:flex;
  flex-wrap: wrap;
  gap: 3.5rem;
  margin-top:2rem;
}
ul > li {
 background-color: #361D2E;
 padding-left: 1rem;
 padding-right: 1rem;
 border-radius: 20px;
 color: #fff;
 flex-basis: 45%

}
ul > li > h2 {
 font-size: 1.3rem;
 text-transform: Capitalize;
 padding: 1rem 0rem;
 font-weight: 600


}
ul > li > h2 > p {
  margin-top: 1rem;
  font-weight: 100;
  color:  #F2F4CB;
}
input {
  width: 70%;
  font-size: 1.1rem;
  border:none;
  padding: 0.5rem;
  margin: 1rem;
  border-radius:10px;
}
input[type="text"] {
  margin-left: 2.2rem;
}

.labelContent {
  font-size: 1.3rem;
}
button {
  font-size: 1.2rem;
  border:none;
  outline:none;

}
.addBtn {
   background-color: #593D3B;
  color: #fff;
  margin: 1rem 0rem;
  padding:1rem;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.addBtn:hover, .addBtn:active {
  background-color: #8A7968;
  cursor: pointer;
  transition: all 0.5s ease-in;
}
.removeBtn{
  background-color: #8A7968;
  margin: 1.5rem 0rem;
  color: #fff;
  padding:0.5rem;
  width: 100%;
  border-radius: 10px;
}
.removeBtn:hover, .removeBtn:active {
  cursor: pointer;
  background-color: #fff;
  color: #361D2E;
  transition: all 0.5s ease-in
}

A quick look at what has been implemented

Import the Poppins font from Google
Define the background color of the app in the body-container class
Declared the style for the input elements, buttons, labels, li's etc.

Now, the task is to dynamically style our app using JavaScript.

First, select the body element and apply the body_container class to it using the setAttribute property



const body = document.querySelector('body')

body.setAttribute('class','body_container')

Next, select the input elements, and using the setAttribute and apply the required class to it.



nameInput.setAttribute('class','inputFields')
contactInput.setAttribute('class', 'inputStyling')

Select the label elements, and apply the required class to it



//label
nameLabel.setAttribute('class', 'labelContent')
contactLabel.setAttribute('class','labelContent')

Finally, select the button element, and style it



btn.setAttribute('class','addBtn')

Below is the output of the web app after applying the styles and submitting the form

The source code to the tutorial is as below

Summary

In this article, you learn that

The Document Object Model (DOM) is a tree-like representation of the content of the web page
It is the DOM that gives JavaScript the superpower to access and manipulate the structure, content, and appearance of a web page.
Access the DOM elements using the Id, class, tag and selectors.
Use the document.createElement() method to create an HTML element
Add elements to the DOM using parentNode.appendChild(childNode)
Style HTML elements with the setAttribute() method.

If you have found value in this article, or what to provide some feedback, please do leave your comment. I am looking forward to reading your messages. Don't forget to also share this article on your social media handles, to reach more audience.

Till then, keep learning, keep growing !

Why JavaScript is a Prototype-based OOP

Emmanuel Fordjour Kumah — Thu, 30 Mar 2023 20:11:09 +0000

In object-oriented programming, we can distinguish between two types of languages. Class-based and prototype-based languages.

Class-based languages are centered around classes as the blueprint for creating objects. However, in prototype-based language classes are explicitly excluded, and objects inherit from other objects using prototypes.

Compared to class-based languages like C++ and Java, JavaScript is considered a Prototype-based object-oriented programming language.

This article delves deep into understanding prototype-based object-oriented programming in JavaScript.

By the end of this article you should be able to know:

The differences between class-based and prototype-based OOP
How inheritance works in class-based programming
How inheritance works in prototype-based programming
Prototypes and __proto__ properties
How to implement prototypal inheritance

Let's get started

Introduction

Whiles working at Netscape, Brendan Eich developed JavaScript as a scripting language to be used in Netscape Navigator, the company's flagship web browser.

Netscape had initially partnered with Sun to incorporate Java programming language into the Navigator. However, the language had some complexities (for instance the JVM consumes a lot of resources, it took several seconds to start a Java applet, etc) that would not appeal to scripters who need to add interactivity to web pages.

To rectify this, Brendan Eich developed JavaScript as a utility language targeted toward scripters and designers.

Netscape's management instructed Brendan Eich not to include advanced features such as classes and modules in JavaScript, to prevent it from appearing to compete with Java.

Because Brendan was not allowed to include classes (which provides a convenient approach for creating objects and inheriting properties and methods), he had to find a way to still maintain the Object-oriented model in JavaScript. He opted for prototypes and implemented prototypal inheritance instead.

Javascript didn't adopt the object-oriented model used by C++ or Java when it was designed because the creator had no time to copy any classical OO model, and Sun didn't want classes included in JS, since JS was supposed to be just a 'sidekick' to Java.

JavaScript is therefore a prototype-based, object-oriented language and uses prototypal inheritance instead of classical inheritance.

Simply put, JavaScript does not have classes, it has prototype objects cloned to produce new objects. Classes are only syntactic sugar for prototypes.

Class-based Programming language

In Class-based programming, objects are built based on the classes. The properties and behavior of an object are defined by a class that serves as a blueprint to create concrete objects.

Consider this analogy, if you were to develop a mobile phone device, you would first design a blueprint that contains all the structure and behavior needed to build the mobile phone. For instance the exterior, operating system, circuit boards, etc, and then build the phone based on that blueprint.

This blueprint is referred to as a class . It is an expandable program code template for creating objects. An object is a real-world entity (for instance a mobile phone).

The blueprint (class) can be extended to build other variations of mobile phone devices ( basic phones, feature phones, and smartphones)

Simply put, in class-based programming, an object must be explicitly created based on a class.

Prototype-based Programming language

Prototype-based programming is a style of object-oriented programming in which classes are not explicitly defined. Inheritance is performed by reusing existing objects that serve as prototypes (objects inherit from other objects through a prototype property).

It permits the creation of an object without first defining its class.

Consider the same analogy of developing a mobile phone device in prototype-based programming.

You first begin by creating the objects ( no blueprints or classes). You assemble the exterior, operating system, circuit boards, etc, and spin up a mobile phone. We can then clone the initial mobile phone and then extend the structure and behavior for the required mobile device (for instance, a smartphone with a wider screen size, touch functionality, sensors, etc).

Using this approach, each mobile phone would be cloned from the generic mobile phone object.

In the world of prototype-based OOP, you build an object and swiftly create "clones" of it compared to the class-based approach, which requires a class to create an object, and then extend the child class to inherit properties and methods from the parent.

Understanding the concept of Prototype-based OOP

In class-based OOP, a class serves as a blueprint for creating objects. A child class will inherit the properties and methods defined in the parent class , and distinct objects are created using the constructor function.

However, in prototype-based OOP, we do not need to define a class to enable us to create object. Objects are created directly.

Because we don't define classes, we need an approach that will enable other objects to inherit properties and methods from the initial object.

There is a hidden property in every object called prototype that enables us to achieve that.

Let's explore this further in the next section.

What is a Prototype?

A prototype is a built-in (hidden) property represented by [[Prototype]] that points to another object. The value pointed at by the [[Prototype]] is casually known as "the prototype of that object"

Consider the example below:



//user object
const user = {
    name: "Emmanuel",
    age: 23,
    city: "Accra"
}

console.log(user)

In the console, you can view the properties of user, alongside the [[Prototype]] (hidden property).

Because the value of the [[Prototype]] is an Object, we say, it is the prototype of the user object. The Object will also have a prototype property (represented as __proto__ ) including other built-in methods.

This __proto__ is not the same as the hidden [[Prototype]]. It allows us to read and assign details to the [[Prototype]]

Let's expand the Object to investigate

Prototype chain

Whenever the __proto__ property points to an object . That object will also have a prototype that will also point to another object. In effect, it creates a prototype chain. The prototype chain ends with an object that has a value of null

How prototype works

Consider the user object below.

It has three properties: name, age and city.



const user = {
    name: "Emmanuel",
    age: 23,
    city: "Accra"
}

We can access these properties, via the dot (obj.propName ) or bracket (obj['propName']) .

Let's access the name property



user.name
// which returns 
Emmanuel

We instantly have access to the value(Emmanuel)

Now, what happens if we access a property that does not exist in an object?

If we access a property and the object does not directly have that property, the JS engine will look for a property with that name by first searching the [[Prototype]], and because it references an object, it looks for the property in that object.

If it cannot locate the property, that object [[prototype]] will be searched. This search will continue in turns until it a match is found, or reaches the end of the prototype chain.

At the top of the prototype chain is null, at this stage, the property was not found, and undefined is returned.

The code below illustrates the prototype chain



let person  = {
  eats: true,
  hasLegs: 2,
  walks(){ console.log('I can walk')}
}
//define another object
let man = {
  hasBreast: false,
  hasBeard : true,

}
//set the prototype of man to person object
man.__proto__ = person;
//define a third object
let samuel = {
   age: 23
}
//set the prototype of samuel to man
samuel.__proto__ = man;
//access walk method from samuel
console.log(samuel.walks())
//access hasBeard from samuel
console.log(samuel.hasBeard)

We define a person object with eats and hasLegs properties, including a walks method
We create a man object and set the prototype of man to the person object using man.__proto__= person
We create a specific man samuel and set the prototype of samuel to man using samuel.__proto__ = man
Now, we try accessing the samuel.walks() and samuel.hasBeard It is clear from the samuel object that there is no walk method and a hasBeard property.

How then, do we get the output I can walk and true ?

Whenever samuel.walks() is called, the JavaScript engine will first search the object samuel for the method.
If it is not found, the [[Prototype]] of samuel will be searched.
The [[Prototype]] has been set to the object man , hence the JavaScript engine checks the man for the walk method.
If it is not found, the [[Prototype]] of man will be searched.
Its [[Prototype]] has been set to the person , so we check the person for the walk method.
Finally, at the top of the prototype chain, we can locate the method walk in the object person and the JavaScript calls the method even though it wasn't defined in the object samuel.

Let's consider another example. Supposing we want to convert user.name to upper case, we can do it as below:



//convert from Emmanuel to EMMANUEL
const user = {
    name: "Emmanuel",
    age: 23,
    city: "Accra"
}

console.log(user.name.toUpperCase())

When we call the method toUppercase()

The JavaScript engine looks for the toUpperCase in the user object
If it can't locate it there, it searches the [[prototype]] property of user for toUpperCase
Finds it there, and executes the method.

Dimming Properties

Whenever you define a property in an object, and that property has the same name as a property in the [[prototype]], the object's prototype is dimmed and that of the defined property takes precedence.

Consider this example



const myDate = new Date(1999,05,26)
console.log(myDate.getFullYear()) // 1999
//define a method for myDate
myDate.getFullYear = function(){
    console.log('changed the default getFullYear method')
}
myDate.getFullYear()

getFullYear() is a built-in method on the myDate object. When executed, it returns the full year
We assign a property with the same name to the myDate object, the value of the property is a function that consoles changed the default getFullYear method
This approach overwrites the built-in method, this is because the JS engines first check the myDate object for the getFullYear property. Since it finds it there, there is no need to check the object's prototype

This is called "shadowing" the property

Setting the prototype on an object

There two main approaches in setting an object's prototype are:

Object.create()
Constructor

Let's explore this further.

Using `Object.create()` to set the prototype

The Object.create() creates a new object and allows you to use existing objects as the new object's prototype.

The syntax is as below:



Object.create(proto) // proto is the existing object

See the example below:



const user = {
    isLoggedIn: false,
    greetUser(){
        console.log(`Howdy ${this.name} !`)
    }
}
//create a new object and set the prototype
const admin = Object.create(user)

We defined a user object, with isLoggedIn property and greetUser method.
The Object.create() creates a new admin object.
We set the prototype of the admin object to the user using the Object.create(user)

Below is the result of logging the admin to the console

Let's examine the code above:

When we first investigate the details of the admin object, it looks empty. However, we notice there exists a [[Prototype]] property. This property is in-built and references the prototype of the admin object.
We conclude that the prototype has been set to the existing user object.

We can also assign properties to the admin object. See the example below:



const user = {
  isLoggedIn: false,
    greetUser(){
        console.log(`Howdy ${this.name} !`)
    }  
}

//create an object an set the prototype
const admin = Object.create(user)
console.log(admin)
//assign name property to the admin object
admin.name = "Emmanuel"

The admin now has name property assigned to it. This name property is set on admin but not on user.

Now that we've set the prototype of the object, let's try accessing the greetUser() that was defined in the user object from the admin.



const user = {
  isLoggedIn: false,
    greetUser(){
        console.log(`Howdy ${this.name} !`)
    }  
}

//create an object an set the prototype
const admin = Object.create(user)
console.log(admin)
//assign name property to the admin object
admin.name = "Emmanuel"
//access greetUser from admin 
admin.greetUser()
// output
Howdy Emmanuel !

The output is as below:

How was it possible to access, the greetUser method when it was not defined in the admn object?

Let's examine this further

name is the only visible property in the admin object
There is also a hidden [[Prototype]] property, that reference an Object
That Object is the existing user we passed to the Object.create() method.
As explained, when we access a property on an object, and that property does not exist, we will look at the prototype of the object for the property.
In this scenario, the prototype of the object admin has been set to user.
In the user prototype, we have access to the greetUser method
Now we can call greetUser() on the admin, and the prototype will handle the implementation.
This explains why, the admin.greetUser() executes the method even though it was not defined in the admin .
Note that, the this keyword used in the user will reference the newly created object ( in this example admin). Hence, this.name references Emmanuel

Using the constructor function to set the prototype

In JavaScript, every function has a prototype property. The prototype enables us to add properties and methods to a constructor function.

Whenever we create an object from the constructor function, the object can inherit the properties and methods from the function's prototype.

Here is an example



//constructor function
function User (name) {
  this.name =name,
  this.age = 34
}

//add greet method to the function's prototype
User.prototype.greet = function(){console.log(`Howdy ${this.name}`)}
//create a new object
const admin = new User("Jonas");
//access the greet method from the admin
console.log(admin.greet()) // Howdy Jonas

We define a constructor function User, with name and age properties
The User has a prototype property that allows us to assign the greet method.
We created an admin object from the User
Now, even though greet has not been defined in the admin, it inherits that method from the prototype.
This explains why we can call the greet method on the admin object.

New objects created from the constructor function will also inherit the greet method as well as additional properties and methods assigned to the prototype.

Furthermore, if a prototype value is changed, all the new objects will have the updated value.

See the example below:



function User (name) {
  this.name =name,
  this.age = 34
}
//create a new object
const admin = new User("Jonas");

//add greet method to the constructor function 
User.prototype.greet = function(){console.log(`Howdy ${this.name}`)}

//in effect extending the object
console.log(admin.greet())

//add additional method to the prototype 
User.prototype.userAction = function(){console.log(`${this.name} what do you like to learn today`)}

//access the new method  (*)
const user2 = new User('Clement')
user2.userAction() 
//output
Clement what do you like to learn today
//change the prototype property
User.prototype.greet = function(){console.log(`Hi ${this.name}`)}

//verify the update method
user2.greet() // Hi Clement

Understanding the `proto`

We can access the prototype of an object using the obj.__proto__ syntax.

__proto__ is the internal property of an object, pointing to its prototype.

In the example below, we read the prototype of the object user2



console.log(user2.__proto__)

Reading the prototype with __proto__ is considered outdated and has been deprecated. The current approach is to use the Object.getPrototypeOf(obj)



Object.getPrototypeOf(user2)

We can also set the prototype of an object using the __proto__ .

Take a look at the example below:



const obj = {
  greet: function(){console.log('How are you today')}
}

const obj2 = {

}
//set the prototype of obj2
obj2.__proto__ = obj;

//access the greet method
console.log(obj2.greet())

We define an obj with a greet method
We define obj2 with is an empty object literal
We access the __proto__ of obj2 and assign the details of obj . This will copy all the properties and methods in obj to obj2
Henceforth, we can call the greet method on obj2 even though it was not defined there
obj2 has inherited the greet method from obj

Using __proto__ is the same thing as using the extends keyword in OOP languages.

The current approach to setting the prototype of an object is to use the Object.setPrototypeOf(obj, proto) . This sets the [[Prototype]] of the obj to what we define in the proto argument.

The example below changes the prototype of the user2 object



//using user2 object created earlier
Object.setPrototypeOf(user2, {changeProto: function(){console.log('changing the prototype')}}); // change the prototype of user2

We have changed the prototype of user2 from greet method to changeProto method
We can verify the change by reading the prototype using the Object.getPrototypeOf(user2)

The output of the above is as below

Importance of prototypes in OOP

A prototype is a flawless approach to defining the OOP model in JavaScript, classes are only syntactic sugar for prototypes.

Whenever we define a class, it is transpiled to a constructor function with an in-built prototype property

Below is an illustration



class User {

 greetUser(){

         console.log('Hello world')

 }

}

//transpiled to 

function User {

  User.prototype.greetUser = function(){ console.log('Hello world')}

}

Prototypal Inheritance

In programming, inheritance occurs when one object is able to access all the properties and methods in another object.

Unlike other languages like C++ and Java which implements classical inheritance, JavaScript implements Prototypal inheritance.

With classical inheritance, the child class extends the parent class to enable it to inherit the properties and methods defined in the parent class. A definite object can then be built from the instance of the class.

However, we don't need to define class when dealing with prototypal inheritance. We define a object with its properties and methods, access the initial object, and extend it using the prototype. This new object will then inherit all the properties and methods defined in the initial object.

Prototypal inheritance is a mechanism involving objects inheriting from any other objects rather than from classes.

Everything we discussed previously made use of the concept of prototypal inheritance. For instance, we had defined an object user with its properties and methods, then new objects we create will inherit the properties and methods defined in the user object

Why are there so many ways to manage Prototype

There are different approaches to managing [[Prototype]] and most often it becomes confusing. How did that happen and why?

The JavaScript language has had prototypal inheritance included in its since its inception. However, ways to manage it have evolved.

The prototype property of a constructor function has been the oldest way to create objects with a given prototype.
Late 2012, Object.create provided the ability to create objects with a given prototype, however, it lacked the ability to get or set the prototype. To give more flexibility to developers, browsers implemented the __proto__ accessor allowing the user to get or set a prototype.
Object.setPrototypeOf and Object.getPrototypeOf were added to the standard in 2015, to handle the same functionality as __proto__. As __proto__ was the de-factor, it was deprecated and pushed to Annex B of the standard, that is: optional for non-browser environments
In 2022. it was officially allowed to use __proto__ in object literals {...} but not as a getter/setter (still in Annex B).

Summary

In Class-based programming, objects are built based on classes.
Prototype-based languages permit the creation of an object without first defining its class.
There is a hidden property in every object called prototype that enables us to inherit properties and methods
The value pointed at by the [[Prototype]] is casually known as "the prototype of that object"
Prototypal inheritance is a mechanism involving objects inheriting from any other objects rather than from classes.

^{If you have found value in this article, please comment or share it on your social handles. It will be of help to somebody. Follow me on} ^{https://twitter.com/emmanuelfkumah} ^{for dev tips.}

The easy approach to learning Object-Oriented Programming in JavaScript

Emmanuel Fordjour Kumah — Tue, 21 Mar 2023 20:58:00 +0000

The core idea in object-oriented programming is to divide a program into smaller pieces and make each piece responsible for managing its own data.

This article provides a comprehensive but easily-to-understand approach to learning OOP. The objective is to understand the basic concepts of class-based object-oriented programming

At the end of the article, you will learn the following concepts:

Objects
Classes
Abstraction
Inheritance
Polymorphism
Encapsulation

Let's get started!

What is Object-Oriented Programming?

Object-oriented programming (OOP) is a programming methodology where all software units are organized around objects rather than functions and logic.

Like how cells form the basic unit of life, objects form the basic units of object-oriented programming.

OOP provides a way of creating and managing different aspects of your app in isolation from objects and connecting them independently. It also facilitates code reusability, provides cleaner maintainable code, and removes redundancy.

OOP consists of four pillars

Encapsulation
Abstraction
Inheritance
Polymorphism

These concepts will be detailed in our next sections, in the meantime, let's explore the importance of OOP

Importance of OOP

Object Oriented Program was introduced to remove the deficiency encountered in Procedural Programming.

The procedural style of programming uses a sequential approach and regards data and procedures (functions) as two different entities. Whenever you write your application using Procedural Programming, you will find that functions are scattered throughout the program as it develops.

The disadvantages of the Procedural approach are as below:

The Procedural code is often not reusable as you may have to copy and paste lines of code (recreate the code) if it is required in an aspect of the application.
Because priority is given to the procedures rather than the data, data is exposed to the entire application posing issues in some data-sensitive cases.

With the introduction of OOP, data and functionality are combined into a single entity called an object.

This makes it easier to create and manage different aspects of your app in isolation and connect them independently.
Because our application is built in units (objects) our code is well organized, more flexible, and easier to maintain ( avoiding "spaghetti code").

Understanding Objects in OOP

Objects are the core of Object-oriented programming. An object can represent a real-life entity with some data and behavior. It is a collection of related data (properties) and or functionality(methods).

Consider a common real-life object, a dog. The dog has certain characteristics: color, name, weight, etc. It can also perform some actions: bark, sleep, eat, etc.

In OOP terms, these characteristics of the dog are referred to as Properties , and the actions are referred to as methods.

In building a web app, each unit will be represented by an object.

Consider a scenario where you are developing a digital banking web app. An example of a real-world entity of the app will be a Person.

The Person represents an object consisting of properties and methods.

Examples of these properties could be first name, last name, date of birth, age, account details, and branch.

The Person can have methods such as: logging in, changing the account details, checking the account balance, withdrawing and depositing funds, etc.

Below is a representation of the Person object:

const Person = { 
  //properties
  firstName: "Emmanuel",
  lastName: "Kumah",
  dob: "22/12/99",
  branch: "Accra"

  //methods
 logIn(){
  console.log(`Welcome ${this.firstName}`)
}
  changeAccDetails(){
  console.log('Account details changed')
}
  checkAccBalance(){
   console.log('Checking balance...')
 }
 withdrawFunds(){
   console.log("Cash withdrawn")
 }
 depositFunds(){
   console.log("Cash deposited")
 }
}

Whenever Objects are utilized, other parts of the app do not need to worry about what's going on inside an object. Because it provides an interface to other code that wants to use it, but it maintains its own private, internal state.

With our digital bank app, assuming we have over 25K persons on the app, we may have to declare 25K objects each with their unique properties and methods.

To solve this tedious task of creating 25K unique objects, JS introduces a concept called Classes

Classes and instances

Classes provide a way of grouping similar objects under one umbrella.

For instance, the over 25K persons on the app, can be categorized into users

Because each user represents an object and s*hares common properties and methods, we generally create a conceptual definition representing the **types of objects we can have in the application.*

Whenever we are dealing with a lot of objects in our app, we can avoid this repetition of writing properties and methods for each object and speed up development by defining a template or blueprint (which is a high-level plan) for creating these objects.

This template is referred to as a Class

What is a class?

Classes specify a layout to create objects with predefined properties and methods.

It can be likened to an Architect who has designed a blueprint for creating houses. Based on the blueprint, we can develop as many buildings as possible, each sharing common features defined in the blueprint.

The class lists the data and methods that will be included whenever a new object is created.

The basic Class syntax is as below:

class MyClass {
  constructor() { ... }
  // class methods
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
}

Now, instead of defining each Person object resulting in over 25K objects, we use a class to design a layout to help us easily create these objects.

We will give our class the name User since each Person is a user of the app, and we will define all the properties and methods common to each user

Below is how the User class is defined

class User{
   // initialize properties
  firstName,
  lastName,
  dob,
  branch,
  // constructor function 
    constructor(firstName, lastName, dob, branch){
     this.firstName = firstName;
     this.lastName = lastName;
     this.dob = dob;
     this.branch = branch;
    }  
   //action performed by all users
 logIn(){
  console.log(`Welcome ${this.firstName}`)
}
}

The above defines a Userclass with

Four properites: first name, last name, dob, branch
The constructor function: useful for creating the objects
The login() methods available to all users.

Instances

A Class does nothing on its own, it serves as a guide for creating specific objects. Each object we create becomes an instance of the class.

An instance is an object containing data and behavior defined by the class.

Constructor

In creating an instance we use a special method in the body of the class called a constructor.

Typically, the constructor is written out as part of the class definition. It enables assigning values to the properties we want to specify in the new instance.

Below is the snippet of the constructor in the Userclass:

class User {
 ...
  // constructor function 
    constructor(firstName, lastName, dob, branch){
     this.firstName = firstName;
     this.lastName = lastName;
     this.dob = dob;
     this.branch = branch;
    } 
 ...
}

The constructor in the code above takes four parameters, so we can assign values to the firstName, lastName, dob and branch properties when we create a new Userobject.

In the next section, we will learn how to create objects from a class.

Creating new Objects from a Class

We use the new operator to create a new object (instance of the class) with all the listed methods and properties.

The syntax is as below:

new constructor(arg1, arg2,...)

Let's create an instance of the Userclass in our earlier example using the new operator.

//creating a new object from User class
const cus1 = new User (arg1, arg2,...)

When new User(arg1, ag2, ...) is called:

A new object is created.
The constructor function (which has the same name as the Class) runs with the given arguments so it can assign the values to the new object

Below is how we create three different objects from the Userclass in our app.

class User{
   // initialize properties
  firstName
  lastName
  dob
  branch
  // constructor function 
    constructor(firstName, lastName, dob, branch){
     this.firstName = firstName;
     this.lastName = lastName;
     this.dob = dob;
     this.branch = branch;
    }  
   //actions performed by the user
 logIn(){
  console.log(`Welcome ${this.firstName}`)
};
}

//create a user object from User class
const firstUser = new User('Emmanuel','Kumah','22/12/89','Accra')
const secondUser  = new User('Robert','Taylor','12/12/77', "Accra")
const thirdUser = new User('Edmond',"Sims",'8/03/99', 'Accra')

//log the details 
console.log(firstUser);
console.log(secondUser);
console.log(thirdUser)

The above creates three User objects in our app.
These three objects were derived from the defined Userblueprint. Because we used the User blueprint, we did not need to write the entire code (both properties and methods) for each user we created.

The output of the code above is as below:

Each object can have access to the logIn() method declared in the class.
See the code below

//access the methods defined in the User class
firstUser.logIn()

"Welcome Emmanuel"

In the next section, we explore Inheritance, one core pillar of OOP

Inheritance

Our digital banking app will definitely need clients who can log in and perform transactions ( deposit and withdraw cash).

We also need Managers who will be responsible for monitoring the activities of the bank.

The Client and BranchManager will have these properties and methods in common:

Properties: first name, last name, date of birth, and branch
Method: logIn()

Besides logging in to the app, the branch manager can view the details of all users and their transaction history. The client can also deposit and withdraw cash

Let's represent the BranchManager and Client as below:

class BranchManager {
 // initialize properties
  firstName
  lastName
  dob
  branch
  // constructor function 
    constructor(firstName, lastName, dob, branch){
     this.firstName = firstName;
     this.lastName = lastName;
     this.dob = dob;
     this.branch = branch;
    }  
   //actions performed by the branch manager
 logIn(){
  console.log(`Welcome ${this.firstName}`)
};
 //additional actions
  viewTransactions(){
   console.log(`${this.firstName} can view transactions `)
  }
  viewUserDetails(){
   console.log(`${this.firstName} can view user details`)
  }

}

// Client class
class Client {
 // initialize properties
  firstName
  lastName
  dob
  branch
  // constructor function 
    constructor(firstName, lastName, dob, branch){
     this.firstName = firstName;
     this.lastName = lastName;
     this.dob = dob;
     this.branch = branch;
    }  
   //actions performed by the branch manager
 logIn(){
  console.log(`Welcome ${this.firstName}`)
};
 depositCash(){
 console.log('Cash deposited')
 }
 withdrawCash(){
  console.log('Cash withdrawn')
 }
}

We notice that the User class we defined earlier and the Branch Manager and Client classes above share certain properties and methods in common.

They both have the first name, last name, branch, and date of birth
They both have the logIn() method

Because they share certain properties and methods in common, it is generally recommended we define a class User, that possesses all the common properties and methods for all other entities we will need in our app. This helps reduce redundancy

The class User is defined as below:

class User {
    // constructor function 
    constructor(firstName, lastName, dob, branch){
     this.firstName = firstName;
     this.lastName = lastName;
     this.dob = dob;
     this.branch = branch;
    }  
   //common method to all entities
 logIn(){
  console.log(`Welcome ${this.firstName}`)
};
}

The class User defined above is referred to as the superclass or parent class
Whenever we declare a parent class, we can declare child classes that will acquire all the properties and methods of the parent. This phenomenon is referred to as inheritance

Inheritance is the ability of a class to derive properties and characteristics from another class while having its own properties as well.

In real-life, inheritance is how children are able to acquire certain features like height, the color of hair, the shape of the nose, intelligence, etc, from their parents.

Similarly, in programming, the child classes can acquire all the properties and methods of the parent.

The goal of inheritance is to reuse common logic

Inherit using the extend and super keywords

The keyword extend is used to show inheritance between classes and to declare the parent class we want to succeed from.

The syntax is as below:

childClassName extends parentClassName{
    //child class definition
}

Using the keyword extends, we can instruct the BranchManager and Client classes to inherit all the properties and methods of the parent class User. The BranchManager and Client classes can add additional properties and methods to their class.

In the code below, we extend the User class to include the BranchManager and Client classes.

class User {
    // constructor function 
    constructor(firstName, lastName, dob, branch){
     this.firstName = firstName;
     this.lastName = lastName;
     this.dob = dob;
     this.branch = branch;
    }  
 logIn(){
  console.log(`Welcome ${this.firstName}`)
};
}
//Client class inherits from User
class Client extends User {
 constructor(firstName, lastName, dob, branch, accType,amtDeposited){
      //call the super before adding option
       super(firstName, lastName, dob, branch);
       //added new properties 
       this.accType = accType;
       this.amtDeposited = amtDeposited 
    }
 //additional methods 
 depositCash(){
  console.log(`${this.firstName} deposited ${this.amtDeposited} USD`)
 }
 withdrawCash(){
  console.log(`${this.firstName} withdrew cash`)
 }
}

//BranchManager class inherits from User
class BranchManager extends User {
    constructor(firstName, lastName, dob, branch, expLevel){
      //call the super before adding option
       super(firstName, lastName, dob, branch);
       this.expLevl = expLevel;//added new props
    }
    //additional actions
  viewTransactions(){
   console.log(`${this.firstName} can view transactions `)
  }
  viewUserDetails(){
   console.log(`${this.firstName} can view user details`)
  }
}
//create two instances of the Client
const client1 = new Client('Ruby', 'Smit', '05/09/88', 'Accra', 'Savings', 20) 
console.log(client1)

//access all methods of the Client class
 client1.logIn()
 client1.depositCash()
 client1.withdrawCash()

// create an instance of Branch manager
const firstManager = new BranchManager('Jose','Adams','22/09/1999',"Kumasi",12)

console.log(firstManager)
//access the login method
firstManager.logIn()
//access the additional method
firstManager.viewUserDetails()
firstManager.viewTransactions()

The parent class is the User whiles the the BranchManager and Client are the child classes.
Using the keyword extend , the BranchManager and Client inherits all the properties and methods of the User class.
The super is used to call the constructor of its parent class to access the parent's properties and methods.
The this.expLevl = expLevel , this.accType = accType and this.amtDeposited = amtDeposited allows us to add extra properties to the BranchManager and Client classes respectively.
We also added two extra methods viewTransactions and viewUserDetails to BranchManager
In the Cleint class, we added the depositCash and withdrawCash methods.
Because the BranchManager and Client classes inherit from the User class, the logIn() has been added automatically, and can be accessed by instances of the class.

The concept of inheritance now allows any instance of the BranchManager and Client classes to inherit all properties and methods defined in the User class.

Even though the logIn() was not defined in the BranchManager and Client classes, we are still able to access it.

The output of the code above is as below:

Importance of inheritance:

Inheritance enables us to define a class that takes all the functionality from a parent class and allows you to add more
It helps in code reusability, provides cleaner maintainable code, and removes redundancy

Polymorphism

Polymorphism allows a method with the same name to have a different implementation in different classes.

In Polymorphism, a child class can overwrite a method that is inherited from a parent class. The goal is to permit greater flexibility and make code reusable.

For instance, the logIn() method in the User can be overwritten in the BranchManager class.

See the code below:

//BranchManager class inherits from User
class BranchManager extends User {
//same code snippet used earlier
 ...
 //overwrite method in superclass
 logIn(){
  console.log(`Howdy ${this.firstName}`)
   }
}

const manager = new BranchManager('Simon','Tagoe','13/02/2000',"Accra",14)
//access the logIn() method
manager.logIn()

// output will be 
Howdy Simon

Encapsulation

Encapsulation is the process of wrapping data and methods that work with them in a single component ( a Class). The concept of encapsulation is to allow only the object access to the state data. It is used to hide the values or state of the objects inside the class, to prevent modification by unauthorized code.

Its significance is to keep the data private to the object and avoid any direct access outside the object

Encapsulation encourages information hiding and reduces complexity by removing implementation details

Imagine using a TV remote control, you have some interface to work with such as the power button, and numbers button. You can use these interfaces for some actions, such as turning the TV on or off, changing the current TV channel, saving a favorite channel, etc.

You use these interfaces without bothering about how it works. In other words, the actual implementation of the interface is hidden from you.

Similarly, in OOP, you can use an object by callings its methods. Whether you wrote these objects yourself or utilized a third-party library, your code pays no attention to how the methods work internally.

The data contained in an object can only be accessed through a public interface (that is the object's own method). Whenever you want to use data contained in an object, you define a method within that object to handle the action.

It is considered bad practice to retrieve data inside an object and write separate code to perform actions with the data outside of the object.

For instance, if you want to promote a Branch Manager with more than 5years of experience to the next rank, we might have to implement it as below:

//create a instance of Branch Manager class
const branchManager = new BranchManager('firstName','lastName', '04/1/80', 7)
// code snippet to promote a manager
if(branchManager.expLevl >= 5){
 console.log('You will be promoted to the next rank')
}else {
 console.log('better luck next time')
}

The code to promote a manager can be used at any required place in our system.

With this implementation, if we decide to change the criteria for promoting a manager, we will have to find everywhere the code is implemented in our app and update it.

However, the idea of encapsulation requires that data inside an object should only be accessed by the object's own method.

It would be better to have a promoteManager() method within the BranchManager class that handles the logic in just one place. So that when the logic is being updated, it is updated in only one place.

Below is the recommended procedure:

//BranchManager class inherits from User
class BranchManager extends User {
    constructor(firstName, lastName, dob, branch, expLevel){
      //call the super before adding option
       super(firstName, lastName, dob, branch);
       this.expLevl = expLevel;//added new props
    }
    //additional actions
  viewTransactions(){
   console.log(`${this.firstName} can view transactions `)
  }
  viewUserDetails(){
   console.log(`${this.firstName} can view user details`)
  }
  //method to promote manager
  promoteManager(){
 if(this.expLevl >= 5){
 console.log('You will be promoted to the next rank')
  }else {
 console.log('better luck next time')
  }
 }
}

We can now access the promoteManager() from the instance of the class

//access method from the instance of the class
branchManager.promoteManager()

Encapsulation: Private properties and method

An object's internal data can be kept private, making it accessible only by the object's own method and not from other objects.

For instance, if we don't make the expLevel property private, someone can access it and change its value to this.expLevel = 10

To make the property private, we place an underscore ( _ ) next to the property name. For instance (this._propertyName)

Let's make the expLevl private in the BranchManager class


class User {
 ...
}
//BranchManager class inherits from User
class BranchManager extends User {
    constructor(firstName, lastName, dob, branch, expLevel){
      //call the super before adding option
       super(firstName, lastName, dob, branch);
      //protected property
       this._expLevl = expLevel;
    }
   ...
  //method to promote manager
  promoteManager(){
 if(this._expLevl >= 5){
 console.log('You will be promoted to the next rank')
  }else {
 console.log('better luck next time')
  }

}

// create an instance of Branch manager
const firstManager = new BranchManager('Jose','Adams','22/09/1999',"Kumasi",12)
// try accessing the expLevl property and the output wil be undefined
console.log(firstManager.expLevl)

This implementation does not make the property truly private hence it's termed protected property.

To make the property truly private, we prepend the property with a # and it should be defined outside any method. Eg. #firstName

We can also protect a method to prevent it from being accessed outside of the class.

Below is how to protect the promoteManager method:

  //protect the promoteManager method
  _promoteManager(){
 if(this._expLevl >= 5){
 console.log('You will be promoted to the next rank')
  }else {
 console.log('better luck next time')
  }
 }
//try accessing the method 
manager.promoteManager()

The output of the code will be :

Uncaught TypeError: manager.promoteManager is not a function

The benefits of encapsulation are outlined below:

Data within an object, cannot be modified unexpectedly by an external code in an entirely different part of the application
Whenever we use a method, we only need to know the result and don't care about the internal implementation.
Functionality is defined in a logical place: that is the place the data is kept hence it becomes easy to alter the functionality of your application.

Abstraction

Abstraction is hiding or ignoring details that don't matter, allowing us to get an overview perspective of the thing we are implementing.

The objective of abstraction is to handle the complexity by hiding all irrelevant details from the user resulting in a simplified design that is easier to understand and maintain.

It is usually achieved by specifying methods for interacting with objects through interfaces. The implementation details of these methods are hidden behind these interfaces

This allows programmers to work with objects at a higher level of abstraction, without having to worry about the low-level details of their implementation.

For instance, whenever you purchase a smartphone, you may be only interested in the following

How to switch the phone on or off
How to dial a number to make a call
How to access information via the internet

The low-level details like

How does the phone gets connected to the internet to pull the specified information
What happens under the hood when you switch the phone on or off
How the gyroscope sensor works to enable you to rotate the phone
How the vibration, ambient temperature, magnetic field sensors, etc work are irrelevant to you hence these details can be hidden making the phone easy to use

Abstraction deals with simplification. For instance the Array object in JavaScript enables storing a collection of multiple items under a single variable name.

It has methods like:

Array.length that enables you to get the number of items in the array
Array.push() that pushes an element into the array etc

Whenever you use these methods, you don't need to know about all the intricacy that went into defining the Array object. Those low-level details have been abstracted (removed) to make it easy to use the method. The goal is to simply use the methods expose to you to complete specific tasks.

One main benefit of abstraction is that it reduces the impact of change. The developers of the Array object can change the internal implementation, for instance, to improve its performance. However, as long as there is still array.push() and array.length methods, you can continue to use the Array methods just like before without being negatively impacted by the changes

Summary

The core idea in object-oriented programming is to divide a program into smaller pieces and make each piece responsible for managing its own state.
Classes specify a layout to create objects with predefined properties and methods.
Inheritance is the ability of a class to derive properties and characteristics from another class while having its own properties as well.
Polymorphism allows a method with the same name to have a different implementation in different classes.
Encapsulation is the process of wrapping data and methods that work with them in a single component ( a Class).
Abstraction is hiding or ignoring details that don't matter, allowing us to get an overview perspective of the thing we are implementing.

If you have found value in this article, or seen areas of improvement, please do comment. Also kindly share the article with your social networks, it might be beneficial to someone else.

An easy guide to understanding databases

Emmanuel Fordjour Kumah — Tue, 21 Feb 2023 19:41:08 +0000

Every web application you use has a way to store and manage the information you have access to, and this information is kept in a database.

In this article, you will learn about databases. By the end of this article, you should be able to understand the following:

The similarities between data, information, and knowledge
What is a database
Advantages of database
Types of databases
Database management system etc

Let's get started

Introduction

Consider a scenario where you stumbled upon this awesome website that enables you to sell slightly used household items. You visit the website and are required to create an account to get started.

There is a sign-up form on the screen asking for the following details:

First and last name
Username
Email address
Password
City

You proceed to enter these details and you clicked on the "Sign up" button.

What is the use of the information you just submitted, where is it stored, and who has access to it?

The information you provided is referred to as data, and this information is stored and managed on the web server in a database.
The web server will use this information to track certain actions you perform on the site. For instance:
- Verify your logged-in details whenever you attempt logging in to the site
- Publish any new item you want to sell
- Notify you whenever a user interacts with a posted item etc.

Consider another instance, where you want to inform users of the website you have a slightly used sofa to sell.

You visit the website and you are required to log in with an email address and password, so you enter the email address and password you used when creating the account and clicked on the login button.

What happens to the information you submitted?

Once submitted, the website will go to a place where all this information is kept and verify if the information (email address and password) you submitted matches any of the information they have available. If there is a match, you are allowed access to the website to post your item.

Finally, you proceed to sell your first item, the website has a form where you can enter the name, and description and upload an image of the item to sell.

You then clicked on the post button to submit the information so all users of the website can view your item

Where does this information go to?

A major component of all dynamic websites or web apps is the database.

It is the location where all entered information is stored. A database is composed of data.

Data can be any information you submit on the website
The database will refer to where the information is being kept and managed

Let's dive deeper to understand what these terms mean.

Similarities between data, information, and knowledge

Data

Data is information with no context that is collected in various formats such as text, numbers, media, etc. either individually or as a set.

For instance, if I give you the numbers, "21, 35, 14, and 5", I would've given you data but you have not learned or gained anything from the data presented.

There are two types of data: quantitative and qualitative. Whiles quantitative data is numeric, qualitative data is descriptive, for instance, "red car", "first name", "email address" etc.

Information

In order for data to be useful, it needs to be in context. For instance, if I told you the numbers "21, 35, 14, and 5", are the ages of users that viewed my website, that would be information.

By adding context, we have converted data into information

Knowledge

Whenever we put data into context, aggregate it, and analyze it, we can use it to make decisions. The utilization of information produces knowledge. This knowledge can be used to set policies, make decisions and generate conversation.

In broad terms, data can be a collection of information. For instance, in a social media application, data can be a collection of

number of users
All user email addresses
All posts made by a specific user
number of posts a user has made etc

What is a database?

A database is an organized collection of related information (data) that is stored in a way that it can be easily accessed, retrieved, managed, and updated.

It is where all data is stored and organized in a way for the end-user to retrieve, manage and edit. The data can be orders, customer information, inventory, etc.

An analogy of a database could be a library that houses a wide range of books. In this analogy, each book is data, and the library is the database.

The objective of many web apps is to convert data into information to help generate knowledge useful for decision-making.

To achieve this, the app must be able to accept the data, put the data into context, and provide tools for aggregation and analysis. A database is designed for such a purpose.

In a database, all data is described and associated with other data(organized collection). All the information in a database should be related as well. A separate database should be created to manage unrelated information.

For instance, a database that contains information about customer details should not hold information about company stock prices.

Uses of databases

Generally, databases are used for data processing operations. The operations could be the Create, Read, Update, and Delete (CRUD) operations.

Using a programming language, web apps can store or retrieve data from databases.

Typical uses of databases are:

Storing and retrieving different types of data
Persisting information for future use
Aggregating, sorting, filtering and processing data for analysis
Establishing the relationship between all the stored data.

Types of databases

There are numerous databases available. These includes

Hierarchical databases
Relational databases
Non-relational databases
Object-oriented databases

Hierarchical databases

A hierarchical database is a data model in which data is stored in the form of records and organized into a tree-like structure, or parent-child structure.

Its structure is similar to a family tree. A parent has one or more children beneath it. Hierarchical databases provide easy access and quick querying increasing their performance.

An example of a hierarchical database is the Windows registry.

Relational databases

Relational databases organize data into tables with columns and rows.

The rows also known as records describe a collection of related values. Each row is identified by a unique key. The fields of the table form a column.

In a relational database, information is stored in tables containing specific types of data. For instance, a shop could store details of their customer's names and addresses in one table, and details of their orders in another.

These separate tables can be joined together by fields known as foreign keys. For instance, the customer table can be joined to the orders table

Whenever data is added to a relational database, new records are inserted into the existing tables, and relationships can be formed between these tables.

It generally uses Structured Query Language (SQL) to perform tasks such as creating, reading, updating, and deleting (CRUD) data.

Examples of relational databases are MySQL, Microsoft SQL Server, and Oracle.

Non-relational databases

Non-relational databases commonly referred to as NoSQL databases do not use the tabular schema of rows and columns. There is no relation at all between the tables.

In a non-relational database, data is represented as an object or JSON-like documents. The document contains different types of information in varying formats. It is mostly made up of key:value pairs.

Document databases help developers to store and query data in a database by using the identical document model format that they use in their application code.

A single stored data might have different attributes or fields from the next piece of data in the same database

Databases that are non-relational are great if you don't know exactly the data you need to store, or if you have a lot of data with different attributes but you still need to compare them.

It is possible to develop applications that require a dynamic database that can change rapidly and accommodate large amounts of complex, unstructured data using non-relational databases.

For instance, in a NoSQL database, each customer has their own document containing all of their information.

A customer record is usually stored as a JSON document. The name, city, email address, phone number, purchase history, credit card information, etc are stored as attributes in a single document.

This helps data to be optimized for intuitive development and horizontal scalability.

Examples of non-relational databases include MongoDB. Apache Cassandra, Couchbase, Redis, etc.

Object-oriented databases

An object-oriented database is a type of database that is based on the principles of object-oriented programming (OOP). With an object-oriented database, data is organized and stored as objects, which are self-contained units that contain data and the methods that can be applied to it.

They are mainly used in applications that demand integration of varying data types and sources, high performance, calculations, and rapid results.

It enables you to store multimedia data like pictures, audio video, and other types of data that are generally not recommended to store in relational databases.

Examples of applications that use object databases are real-time systems. architectural and engineering for 3D modeling, and scientific products.

Database management systems (DBMS)

Specific software is required to enable you to create, read, update, and delete data in the database.

To analyze the data or change the database structure, you also require software. These software applications are commonly referred to as database management systems (DBMS)

Database Management System or DBMS is a type of software that powers the management of a database. It can be used to find and update data in a database as well as analyze and generate reports. It also provides a layer of security to the database.

Advantages of DBMS

The advantages of DBMS are outlined below

Data Security: DBMS ensures data security and privacy by enforcing authentication and access control measures
Data Integrity: Data must be safe from corruption, loss, and outside attack. DBMS provides this integrity by ensuring regular archiving, backups, data audits, input validations, removing redundancies, etc
Quick Access: DBMS ensures that users can retrieve and store data effortlessly.
Backup and Recovery: DBMS can be designed to take care of periodic backup and recovery in case of failure

Examples of DBMS

Popular examples of database management systems (DBMS) are:

MySQL
MongoDB
MariaDB
PostgreSQL
Oracle
Cassandra

Designing a database

Software developers are required to not only know how to use a database but be well-equipped to design a database.

A properly designed database gives you access to up-to-date, accurate information.

Steps in Designing a relational database

The following steps provide general guidance on how to design a relational database

Define the database goal
Define the requirements for the various stakeholders
Define the database entities in terms of tables
Identify and define the attributes of each entity
Specify the primary and foreign key constraints for each relational table
Define and establish relations between each table
Apply the database normalization rules to normalize the table
Create and build the database using the DBMS

In our next article, we will learn how to design a database.

Summary

In this article we learned that:

Data can be any information you submit on the website
The database will refer to where the information is being kept and managed.
There are varying databases, these are relational,non-relational, hierarchical, and object-oriented database
DBMS is a specific software required to enable you to create, read, update, and delete data in the database. Examples are MySQL, MongoDB, PostgreSQL, etc

This article is the day 9 post on the 30-day challenge I am undertaking to learn backend development. Please feel free, to drop some insights, comment, or share the post to your networks

How to effectively perform CRUD operation on an ExpressJS app using PostMan

Emmanuel Fordjour Kumah — Mon, 13 Feb 2023 20:23:01 +0000

In this article, we will build a basic web app using ExpressJS and learn how to perform CRUD (create, read, update, delete) operations.

By the end of this article, you should be able to :

Read information from a server
Post information to the server
Update posted information
Delete information from the server
Use Postman as an HTTP client

Prerequisite

Before starting this article, you should be familiar with the following:

Introduction

There are two parts to a web application: the front end and the back end. The front end represents what users see in the browser. The backend (also known as server-side) is everything that happens "under the hood".

Backend components include servers and databases. Servers control how users access files and databases are organized collections of data.

When building a web app, the preferred method is to use a framework to speed up development. ExpressJS is a web framework that enables backend developers quickly build robust web applications.

It enables developers to set up a server, connect it to a database, and provide an API to allow front-end developers to build the client side of the web application.

APIs enable you to develop all kinds of web applications having all possible CRUD (create, retrieve, update, delete) operations.

We perform these CRUD ( Create, Read, Update, Delete) operations whenever the client (eg. web browser) sends HTTP requests with varying HTTP methods ( GET, POST, PUT etc.) to the server.

In this article, we will learn how to perform CRUD operations without building a separate front-end app to handle the requests.

The Approach

Generally, server-side apps wait for HTTP requests from the web browser (or other clients). On receiving the request, the application determines the action to take based on the URL pattern and perhaps any information contained in the POST data or GET data.

The app may read or write information to the database or execute required tasks based on the requests. The application then returns a response to the client.

Typically, we need a front-end app to help send HTTP requests to the server, hence most developers are aligned to building the front-end of the web app as well.

Instead of building the front end, we can use a tool called Postman to send the request, receive the request, and post data to the server.

In this tutorial focuses on using Postman as an HTTP client to initiate requests and perform CRUD operations on the server.

Generally, CRUD operations are performed on top of a Database Management System (a tool that stores databases) like MySQL, MongoDB, PostgreSQL, etc. However, for this tutorial, we will not use a DBMS yet, we will define an array of items in a data.js file (to serve as our database) and use it for the CRUD tasks.

Now, let's learn how to create a web server

Creating a basic Express app

The code below creates an Express app and listens for a connection to the app

const express = require("express"); //require express
const app = express(); //create the app

app.get("/", (req, res) => {
  res.send(`Hello World`);
}); // send a response to the client

app.listen(8000, () => {
  console.log("App has started and running ");
}); // listen for connection to the app

Understanding the Express Code

The below explain the code snippet above:

The require() module import the express module to enable us to create an Express app
Calling the express() function returns an object typically named app. This object has methods for routing HTTP requests, setting up middleware, rendering HTML views, and registering a template engine.
The app.get() specifies a route definition with path and callback function passed as arguments
The callback will be invoked whenever a client initiates a HTTP GET request
The callback accepts a request and response objects as arguments.
The response object has a send method (i.e res.send() ) that enables us to return a response to the client. In this scenario, it returns the string Hello World.
Lastly, the app.listen() listens for a connection to the server.

Whenever the server is run, we can go to localhost:8000 using the web browser to view the returned response.

Understanding the CRUD Principle

Web apps keep track of data. These data could be customer data, login account details, payment details, health data, etc. The data is typically organized into a database

CRUD is an acronym for (Create, Read, Update, and Delete). It represents the operations used in web apps that have an underlying database to perform specific operations on the database from the front-end

The Create allows users to create a new record in the database
The Read allows users to search and retrieve specific information from the database
The Update is used to modify existing data in the database
The Delete allows users to delete specified data in the database

Consider a scenario where you have been tasked to build a web app that displays the product catalog for an eCommerce store.

The application would have a front-end admin functionality enabling the logged-in user to do the following:

Add a new product to the catalog
Delete an out-of-stock product from the catalog
Modify the details of a specified product
Request for the details of a product

Each product is an object with the following details

"product":{
  id: <Integer>,
  name: <String>,
  price: <Number>,
  desc: <String>,
  image: <String>
}

In building this app, the admin needs to send requests to the server in order to perform the CRUD operations:

Create : add a new product to the catalog
Read: view all products in the catalog
Update: modify the details of a single product
Delete: remove a product from the catalog

An introduction to Postman

Because we would not be developing any frontend for this project, that means we don't have access to a web browser to send HTTP requests, we need a client that will enable us to post, update, delete, and read data from our backend.

Postman is a REST client that enables us to send requests, inspect responses and perform other HTTP methods (GET,POST, PUT, PATCH, DELETE, etc). It can be likened to a browser that doesn't render HTML.

We will use it to initiate requests to the Express app and ultimately perform the CRUD operations.

Project Structure

Below is a guide on how your project folder should look like

We created a crud_app directory
- app.js represents the Express app
- data.js will contain all the data required to perform the crud operations.
- package.json is the initialized file containing all the dependencies.

The data.js file contains the products arrays that will be exported to be used in the app.js

The content of the data.js file is as below, it is an array of product items

//data.js
//sample products
const products = [
  {
    id: 1,
    name: "albany sofa",
    image:
      "https://dl.airtable.com/.attachments/6ac7f7b55d505057317534722e5a9f03/9183491e/product-3.jpg",
    price: 39.95,
    desc: `I'm baby direct trade farm-to-table hell of, YOLO readymade raw denim venmo whatever organic gluten-free kitsch schlitz irony af flexitarian.`,
  },
  {
    id: 2,
    name: "entertainment center",
    image:
      "https://dl.airtable.com/.attachments/da5e17fd71f50578d525dd5f596e407e/d5e88ac8/product-2.jpg",
    price: 29.98,
    desc: `I'm baby direct trade farm-to-table hell of, YOLO readymade raw denim venmo whatever organic gluten-free kitsch schlitz irony af flexitarian.`,
  },
  {
    id: 3,
    name: "albany sectional",
    image:
      "https://dl.airtable.com/.attachments/05ecddf7ac8d581ecc3f7922415e7907/a4242abc/product-1.jpeg",
    price: 10.99,
    desc: `I'm baby direct trade farm-to-table hell of, YOLO readymade raw denim venmo whatever organic gluten-free kitsch schlitz irony af flexitarian.`,
  },
  {
    id: 4,
    name: "leather sofa",
    image:
      "https://dl.airtable.com/.attachments/3245c726ee77d73702ba8c3310639727/f000842b/product-5.jpg",
    price: 9.99,
    desc: `I'm baby direct trade farm-to-table hell of, YOLO readymade raw denim venmo whatever organic gluten-free kitsch schlitz irony af flexitarian.`,
  },
];

module.exports =  products ;

Relationship between frontend and backend.

Frontend and backend communicate with each other - via HTTP requests.

The backend is the code that runs on the server and receives requests from the client. Whenever the client sends requests to retrieve or modify resources, the server receives the request and contains the logic to send the appropriate data back to the client.

The backend also includes the database, which will continuously store all of the data for the application. CRUD operations are performed on the database at the backend

Understanding the back-end logic

At the backend, develops write logic on how to respond to requests based on the HTTP request method (GET, POST, etc) and the URI originating from the HTTP client

What is routing?

Routing refers to determining how an application responds to a client request to a particular endpoint, which is a URI (or path) and a specific HTTP request method (GET, POST, PUT, etc).

With routing, you are matching incoming request paths (eg. https://localhost/api/products) from the web client(eg. web browser) to a resource in the database.

Each route can have one or more handler functions, which are executed when the route is matched.

In other words, the application “listens” for requests from the client that match the specified route(s) and method(s), and when it detects a match, it calls the specified callback function ( handler function)

At the back-end, we define routing using methods of the Express app object that matches the HTTP methods; for example, app.get() to handle GET requests and app.post to handle POST requests.

The syntax for route definition is as below:

app.method(path, handler)

Where:

app is an instance of express.
method represents the HTTP request method used
path : represents a path on the server where we can access a resource
handler : It is a function that executes specified tasks whenever the route is matched.

Defining the logic for retrieving resources

Let us examine how to READ data from a server when a route matches.

We will first define a route to allow the client to request information from the server.

Because we want to retrieve a resource, we will use the GET method, we will also define the URI (path) the client needs to enter, and lastly the function that will be executed when the route matches

The code is as below:

//route to read data
app.get("/api/products", (req, res) => {
//code to be executed
  const newProduct = products.map((product) => {
    const { id, name, price } = product;
    return {
      id,
      name,
      price,
    };
  });
  res.json(newProduct);
});

GET is the default HTTP method a web browser uses to fetch data from a server. Hence on our server, we used the app.get() method to indicate that a request from the client to the app will use the HTTP GET method
The api/products represents the path the client will enter in the URL in order to read information from our server.
Once the http method and the path specified by the client matches the route defined on our server, we execute the callback function.
Note that by default, anytime you enter the URL in the web browser to access a resource from a server, you are using the GET method.

The code snippet below indicates the logic we define in the callback function

The details of the logic are as below:

Use the array.map() method to iterate over each product item
Access the id, name and price for each item
Return a newProduct object with the following values the id, name and price
Finally, use the res.json () method to send the appropriate response to the client

Note: The products array is from the data.js file and is included in our app using the snippet below:

//import the products array into the app.js
const { products } = require("./data");

Retrieving a resource from the server using Postman.

As mentioned, Postman will act as a web browser to enable us to initiate requests to the server without the need for a front-end application.

Because we want to access information from the server, we will use the HTTP GET method to send the request.

The steps to accomplish that are as below:

Enter the request URL in the field provided
Set the http method at the default selection (i.e GET)
Click on the send button to initiate a request to the server
Whenever the server receives the request, it executes the callback function, and sends the response to Postman
The requested data will display in the "Body" tab of Postman

See the screenshot below:

Defining the logic for Inserting data

In this section, we will learn how to insert or post data to our server. Sending data to the server is commonly referred to as Create in the CRUD acronym

The syntax to send data to our Express app is as below:

app.post(path, handler)

At the backend, we define the logic to handle Post requests when the route entered by the client matches that on the server.

To post data to our Express app, we utilize express.json() middleware. It parses incoming requests and converts the request body to JSON

The express.json() middleware returns an object, this object will contain the data we are posting to our server.

We define this middleware in our app as below:

//app.js
//parse json 
app.use(express.json());

The logic for posting data to the server is as below:


app.post("/api/products/new", (req, res) => {
//accessed the data using the req.body
  res.send({ success: true, data: [...products, req.body] });
});

We used the app.post method routes the HTTP POST request to the specified path and with the specified callback function.
The api/products/new specify the path the client will enter to post data. For instance, if the domain is www.example.com, then the full path to enter in the address bar will be www.example.com/api/products/new
Whenever the request is initiated, the form data can be accessed using the req.body method
The res.send() function basically sends the HTTP response. The body parameter can be a String or a Buffer object or an object or an Array.
The res.send() method sends the HTTP response. The body parameter can be a String, Object or an Array.In our scenario, we sent an object with success and person keys.
We assign true to the success to indicate a positive response.
The value of the datakey is an array. We copied all the existing products into that array and included the submitted data using the req.body method.

Now that we defined our backend logic, let's make a POST request to http://localhost:8000/api/products/new using Postman.

Sending data to the server using Postman

Postman defaults to a GET method that does not contain the request body. To submit data, we need to change the request method to POST.

The action is highlighted in blue in the screenshot below:

Follow the steps below to send data

Set the http method to POST
In the Enter request URL field, enter the URL to send the request to
Enter the request body. This is the data we want to send to the server
- Click on the "Body" tab
- Click on the "raw" radio button, this will display a field to enter the required data
- Click on the "Text" tab and select "JSON" from the dropdown menu
- In the provided text area, enter the information to send. The body content can be any valid JSON object. For instance:
```
{
   "FirstName": "Peter",
   "LastName" : "Piper",
   "UserName" : "ppiper",
   "Email"    : "ppiper@example.com"
 }
```
- In our scenario, each data is an object with the following key-value pairs
  - id, name , image, price and desc hence we enter it like below:
```
{
"id": 5, 
"name":"TV set",
"image": "http:dl.airtable...",
"desc": "Smart TV"
}
```
Click on the "Send" button to initiate a request

Viewing the response on Postman

Postman has a response section for viewing responses sent by the server.

See the screenshot of the section below:

The screenshot of the response returned by the server is as below:

Examining the response will indicate a new data has been added to our dataset.

See the code below:

//entire response from Postman
{
    "success": true,
    "data": [
        {
            "id": 1,
            "name": "albany sofa",
            "image": "https://dl.airtable.com/.attachments/6ac7f7b55d505057317534722e5a9f03/9183491e/product-3.jpg",
            "price": 39.95,
            "desc": "I'm baby direct trade farm-to-table hell of, YOLO readymade raw denim venmo whatever organic gluten-free kitsch schlitz irony af flexitarian."
        },
        {
            "id": 2,
            "name": "entertainment center",
            "image": "https://dl.airtable.com/.attachments/da5e17fd71f50578d525dd5f596e407e/d5e88ac8/product-2.jpg",
            "price": 29.98,
            "desc": "I'm baby direct trade farm-to-table hell of, YOLO readymade raw denim venmo whatever organic gluten-free kitsch schlitz irony af flexitarian."
        },
        {
            "id": 3,
            "name": "albany sectional",
            "image": "https://dl.airtable.com/.attachments/05ecddf7ac8d581ecc3f7922415e7907/a4242abc/product-1.jpeg",
            "price": 10.99,
            "desc": "I'm baby direct trade farm-to-table hell of, YOLO readymade raw denim venmo whatever organic gluten-free kitsch schlitz irony af flexitarian."
        },
        {
            "id": 4,
            "name": "leather sofa",
            "image": "https://dl.airtable.com/.attachments/3245c726ee77d73702ba8c3310639727/f000842b/product-5.jpg",
            "price": 9.99,
            "desc": "I'm baby direct trade farm-to-table hell of, YOLO readymade raw denim venmo whatever organic gluten-free kitsch schlitz irony af flexitarian."
        },
        {
            "id": 5,
            "name": "TV set",
            "image": "http:dl.airtable...",
            "desc": "Smart TV"
        }
    ]
}

Defining the logic for Updating data

We have covered how to CREATE, and READ data. In this section, we will Update the data on the server.

The syntax for updating data is as below:

app.put(path, handler)

Use the PUT method to update or modify a resource on the server
The path indicates the route to the resource. Because we will be updating specific data, we need to provide the id of the item to update. In our scenario, we will define the path as api/products/:id.

The logic is defined below:

app.put("/api/products/:id", (req, res) => {
  //get the id of the item to update
  const { id } = req.params;
  //get the value in the request body
  const { name } = req.body;

  //updating the item
  const updatedProducts = products.map((product) => {
    if (product.id === Number(id)) {
      product.name = name;
    }
    return product;
  });

  res.send({ success: true, data: [...updatedProducts] });
});

The app.put() method routes the HTTP PUT request to the specified path and with the specified callback function.
The api/products/:id represents the path.
The :id is a placeholder, it allows for dynamic routing based on whatever parameter was added to the api/products path
The req.params is an object that gets populated with the value from the parameter.
Using gain access to the parameter using
```
const {id} = req.params
```
The req.body enable us to access whatever is in the request's body
We used the .map() method to iterate over each item in the array. If the id of the item equals that receives from the req.params , we update the name of the item with the value received from the req.body and return the item
We used the res.send() method to send a response to the client

Updating data using Postman

To update data, we change the HTTP request method to PUT

Follow these steps to update information

Set the http method to PUT
In the Enter request URL field, enter the URL to send the request.
In this scenario, because we want to update the first data with an id of 1, the URL will be: localhost:8000/api/products/1
Enter the request body. This is the data we want to send to the server to modify with an id of 1
- Click on the "Body" tab
- Click on the "raw" radio button, this will display a field to enter the required data
- Click on the "Text" tab and select "JSON" from the dropdown menu
- In the provided text area, enter the information to send.
- In this example, we will modify the name of the first item in our array to the below:

{
"name":"House"
}

Click on the Send button to initiate the request

Defining the logic for deleting data from the server

We have covered how to Create, Read and Update data from our server.

Finally, let's examine how to delete data from our app.

The syntax for deleting data is as below

app.delete(path, handler)

Deleting data follows a similar approach as posting data.

We specify the id of the item to delete and use the filter() method to filter out all the items with an id key that does not match the specified id.

Lastly, we return the response as JSON to the client

The code is below:

// deleting the item
app.delete("/api/products/:id", (req, res) => {
  const { id } = req.params;

  const filteredProducts = products.filter(
    (product) => product.id !== Number(id)
  );
  return res.json({ success: true, data: filteredProducts });
});

Deleting data from the server using Postman

Follow these steps to delete a resource from the server

Set the http method to DELETE
In the Enter request URL field, enter the URL to send the request.
In this scenario, because we want to delete the first data with an id of 1, the URL will be: localhost:8000/api/products/1
Click on the Send button to initiate the request
View the response in the Body. You will notice the item with an id of 1 has been excluded, and we now have three items

The screenshot is below

Click here for the complete code

Summary

CRUD is an acronym for (Create, Read, Update, and Delete). It represents the operations used in web apps that have an underlying database to perform specific operations on the database from the front-end
At the backend, develops write logic on how to respond to requests based on the HTTP request method (GET, POST, etc) and the URI originating from the HTTP client
Postman is a REST client that enables us to send requests, inspect responses and perform other HTTP methods (GET,POST, PUT, PATCH, DELETE, etc). It can be likened to a browser that doesn't render HTML.

We used it to initiate requests to the Express app and ultimately perform the CRUD operations.

^{This article is the day 8 post on the 30-day challenge I am undertaking to learn backend development. Please feel free, to drop some insights, comment, or share the post to your networks}

DEV Community: Emmanuel Fordjour Kumah

Mastering State Management in React: A Guide to useContext and useReducer Hooks

Prerequisite

Overview of state management?

The Context API: Passing data from parent to child components without prop drilling

Inserting the state logic into a Reducer

Steps to add context in the React app

Steps to add reducers in your React app

Combining the Reducer and Context API

Project: Building Contact address app

Setting up the React app

Adding Context to our app

Wrap the Provider component around your components.

Access the context value with the useContext hook

Add the reducer logic

Use the reducer from your component

Pass the state and dispatch function as context value

Dispatching actions in your components

Conclusion

A comprehensive introduction to GraphQL: for efficient data queries and mutations

Prerequisite

Introduction to GraphQL

What problem does GraphQL solve: data fetching with REST API vrs GraphQL

Understanding the client and server roles

Setting up a GraphQL Server

Step 1: Creating a new project

Step 2: Create an instance of the Apollo server

Step 3: Define your GraphQL Schema and types

Understanding theQuery Type

Step 4: Define your data set

Step 5: Add the typeDefs to the server

Step 6: Set up a resolver

Step 8: Start the server

Fetching resources from the server

Understanding GraphQL arguments: querying for a specific field

Mutating data on a GraphQL server

Summary

How to use Typescript in React apps

Prerequisite:

Introduction to TypeScript: a static type checker

Why add Typescript to JavaScript

Understanding type annotation

Basic Types

Setting up Typescript in a React project

Typing React Function Component

Typing component props

Using components as props

Typing events

Typing useState hook

Typing useContext hook

Typing useRef hook

In Summary

Fetching, caching and revalidating server-side data with SWR

Prerequisites

What is SWR?

What problem does SWR solve?

Why Do You Need To Use SWR?

Data fetching with fetch vs useSWR

Handling Pagination with SWR

Prefetching Data

Auto Revalidation

Revalidate on Focus

Revalidate on interval

Revalidate on reconnect

Automatic Caching

Global Configuration with SWR

Error handling and revalidation

Summary

How to manage state in a React app using Redux.

Prerequisite

Introduction to State Management

What is Redux?

What problem does Redux solve?

Redux analogy

Understanding the Redux Terminologies

Actions

Action Creators

Reducers

Store

Dispatch

Wrap the `Provider` component around your components.

Access the context value with the `useContext` hook

Pass the `state` and `dispatch` function as context value

Understanding the`Query` Type

Typing `events`

Typing `useState` hook

Typing `useContext` hook

Typing `useRef` hook

Data fetching with `fetch` vs `useSWR`

Handling Pagination with `SWR`

Creating a `store`, `subscribing` and dispatching `actions`

Dispatching `actions` to the `store`

Step 3: Creating the `store`

Step 4: Defining the `reducer` function

Step 5: Wrapping the `Provider` component around your app

Step 6: Reading and displaying the todos with `useSelector` hook

Step 5: Dispatching actions with `useDispatch` hook

Updating the `package.json` and `vite.config.js`