Then, in 2015, a promise-based API request, the Fetch API, was built into JavaScript ES6 to ease the process. After that, libraries like Axios and Alova also appeared.

But why would anyone consider using a third-party API when the lightweight inbuilt Fetch API is an effective option? Well, Axios and Alova provide more than just fetching simple JSON responses. While Axios automates the parsing of JSON and provides shorthand methods for requests, Alova caches responses which prevents making new requests that are redundant.

So which should you stick to – Fetch API, Axios, or Alova?

In this guide, we’ll examine each of these tools based on their features, performance, and project suitability. Walk with me…

Table of Contents

1. Prerequisites

2. The Fetch API

   • Key Features of the Fetch API

   • Limitations of the Fetch API

3. Axios

   • Key Features of Axios

   • Limitations of Axios

4. Alova

   • Key Features of Alova

   • Limitations of Alova

5. Feature-by-Feature Comparison

6. Use Cases and Best Scenarios

   • When to Use Fetch API

   • When to Use Axios

   • When to Use Alova

7. Community and Ecosystem

   • Ecosystem and Integrations

8. Conclusion

Prerequisites

Before you start this tutorial, you should have a basic understanding of JavaScript and ES6+ features, such as async/await, arrow functions, and object destructuring. Being familiar with the fetch() API will also be helpful, as we’ll compare it with Axios and Alova.

You should also have a fundamental knowledge of HTTP methods (GET, POST, PUT, DELETE, PATCH) and handling API responses based on status codes to better understand the API examples.

While this tutorial focuses on JavaScript, some examples use React. So you should be familiar with React and understand the basics of components, state, and hooks (like useState and useEffect). Alova also works with frameworks like Vue and Svelte.

Basic experience with package managers (NPM or Yarn) is useful for installing dependencies like Axios and Alova. And understanding Node.js and browser environments will help, as Alova works in both contexts.

Lastly, familiarity with state management and caching concepts will enhance your understanding of Alova’s features, as it integrates state management and caching directly into API requests.

The Fetch API

Fetch API is a promise-based API request feature in JavaScript that was released to replace the old callback-based XMLHttpRequest (XHP). Unlike the old tool, Fetch API is compatible with modern website features, including service workers and Cross-Origin Resource Sharing (CORS).

With this tool, calling API data is as simple as making a fetch() request on the API URL, as shown below:

fetch("https://fakestoreapi.com/products")

The fetch() returns the server’s promise which is fulfilled with a response object. Then, you pass in some optional arguments to configure the response as JSON or text, attach it to a variable, and use the data.

let products;

  fetch("https://fakestoreapi.com/products")

    .then((res) => res.json())

    .then((data) => {

      products = data

      console.log(products)

    })

    .catch((error) => console.error("Error fetching data:", error))

In the code above, the fetch() requests API data from the URL. The response res gets parsed as JSON res.json. Then, the resulting data is attached to the products variable and logged on the console.

Since Node.js v17.5, the Fetch API has been available natively, eliminating the reliance on external packages like node-fetch, got, or cross-fetch for handling HTTP requests. This native support in both browsers and Node.js removes the need for additional dependencies, reducing the overall bundle size of your application. With this built-in functionality, the Fetch API has become the go-to tool for making asynchronous API calls in JavaScript applications.

Key Features of the Fetch API

Promises-based syntax

As I mentioned earlier, the Fetch API uses a promise-based syntax that sends a promise from the server and executes it with a response object. While the .then chaining can be optimal for simple requests, using several .thens can lead to callback hell and give you a hard time tracking errors. This is why the async/await alternative is a more optimal solution. Check out the code example below:

const fetchData = async () => {

      try {

        const response = await fetch("https://fakestoreapi.com/products");

        if (!response.ok) {

          throw new Error(`HTTP error! Status: ${response.status}`);

        }

        const data = await response.json();

        products = data

        console.log(products); //

      } catch (error) {

        console.error("Error fetching data:", error);

      }

    };

    fetchData();

As shown above, the fetch makes a get request. Then, the server returns an error status if the response is not ok (returns an error status like error 404). Then, the response gets parsed as JSON and used.

Keep in mind that all methods passed on the response are asynchronous, including the fetch() and the json() parsing.

Supports the GET, POST, PUT, PATCH and DELETE methods

GET, used to receive responses, is the Fetch API’s default method. So when you’re using it, you don’t have to define it explicitly or attach a body. But for methods that send requests like POST, PUT, PATCH and DELETE, you must specify their method and attach a body.

All these methods send requests to the backend. You can send data to the server with POST, completely replace an existing resource with new data using PUT, partially update with PATCH, or remove the resource with DELETE.

1. Here’s how you can define a method:

In the code below, I set the POST method to send data to the specified API:

const response = await fetch("https://example.com/products1", {

          method: "POST"

          //...

        });

Apart from posting data, you can also clear data on the server using DELETE:

const response = await fetch("https://example.com/products1", {

      method: "DELETE"

      //...

    });

2. Then, define the header:

Defining the header lets the server understand the type of content you are sending for proper data handling. As shown here, the header asks the server to store the content as a JSON file and set the authorization token to my-classified-token. Keep in mind that the token is the API key that will be used to verify user identity upon use.

const response = await fetch("https://example.com/products1", {

          method: "POST",

          header: {

            "Content-Type": "application-json",

            "Authorization": "Bearer my-classified-token",

          }

          //..

        });

Here is a full list of parameters that can be passed into the header:

3. Next, attach the body:

After specifying the header, you then attach the body. The body is the data being sent to the backend server. It cannot be used with the GET method which only fetches responses. Besides, the information attached should always be in a valid format that matches the content type specified in the headers. You can add as much value as you require to the body.

const response = await fetch("https://example.com/products1", {

          method: "POST",

          header: {

            "Content-Type": "application-json",

            "Authorization": "Bearer my-classified-token",

          },

          body: JSON.stringify({ name: "Laptop", price: 1200 })

        });

Streaming Data

It is also worth noting that the Fetch API facilitates large data handling via streaming. It receives copious data in chunks instead of loading the whole data and buffering in the process. So it data displays real-time as they arrive. Here is a simple example of streaming:

 const fetchData = async () => {

const response = await fetch('https://www.example.com/large-text-file.txt');

      const reader = response.body.getReader();

      const decoder = new TextDecoder();

      while (true) {

        const { done, value } = await reader.read();

        if (done) break;

        const chunk = decoder.decode(value, { stream: true });

        console.log(chunk); // Process the chunk (e.g., display it in UI)

      }

      console.log('Stream complete');

    }

    fetchData();

Fetching Documents with the DOM Parser

Unlike its predecessor, XHP, which can directly return a document, Fetch API can’t achieve the same results without using the DOM Parser. To use it, you have to set the response type to text, then convert to a document using the DOMParser. Here is an example:

fetch("example.xml")

  .then(res => res.text()) // Get raw text

  .then(data => {

    const parser = new DOMParser();

    const doc = parser.parseFromString(data, "text/xml"); // Convert text to Document

    console.log(doc); // Now it's a Document object

  })

  .catch(console.error);

Request Cancellation with AbortController

Previously, the Fetch API couldn’t abort requests. But it is now possible with AbortController and AbortSignal. But the AbortController API is not native either, which means there is extra bundle and set up required.

Limitations of the Fetch API

Response Flexibility or No automatic JSON parsing

Depends on how you see it. Having to specify whether you want your response as JSON res.json() or text res.text() or blob res.blob() lets you set which response type you want from the get go. But it can also be a limitation since most API fetches are in JSON. This means that alternatives like Axios, which sets defaults as res.json(), helps write shorter and cleaner code, and is therefore often preferred by developers.

No built-in request/response interceptors

Unlike Axios, Fetch API does not have built-in methods that intercept and modify requests or responses. This limitation means you have to write boilerplate code to create a custom interceptor.

For instance, via interception, you can attach an Authorization token automatically before sending requests or asking all 401 errors to automatically reload when receiving responses. With the Fetch API, you have to wrap the fetch() in a function to do that, which means more lines of code.

Here is some code built to mimic request/ response interception:

const customFetch = async (url, options = {}) => {

      // Request Interception

      const modifiedOptions = {

          ...options,

          headers: {

              'Content-Type': 'application/json',

              Authorization: Bearer ${localStorage.getItem("token")}, // Interceptor behavior

              ...options.headers

          }

      };



      try {

          const response = await fetch(url, modifiedOptions);



          // Response Interception

          if (!response.ok) {

              console.error("Intercepted Error:", response.status);

          }



          return await response.json();

      } catch (error) {

          console.error("Fetch error intercepted:", error);

          throw error;

      }

  };

  // Usage (No need to set headers manually)

  customFetch('https://api.example.com/data')

      .then(data => console.log(data))

      .catch(error => console.error(error));

Error handling requires additional logic

The Fetch API only rejects network errors, not failed HTTP status codes like 404 or 501. This means that when a fetching request fails, it does not return a 404 Not Found or 500 Internal Server Error unless you configure that with additional code. But Axios does.

fetch('https://jsonplaceholder.typicode.com/invalid-url')

  .then(response => {

    if (!response.ok) { // Manually handle non-2xx responses

      throw new Error(`HTTP Error! Status: ${response.status}`);

    }

    return response.json();

  })

  .then(data => console.log(data))

  .catch(error => console.log('Error:', error.message));

Axios

After XHP was replaced with the Fetch API, Axios emerged in 2016 to address some issues with the new JavaScript-native fetching tool. Built on top of XHP, Axios quickly gained widespread adoption due to combining many Fetch API promise-based features with some methods on the legacy XMLHttpRequest. In no time, it became a popular choice amongst developers.

Axios stands out because it:

• Automates JSON parsing

• Has a built-in method to intercept and modify requests and responses

• Automates error handling

• Automates timeout handling

• Can track upload and download progress

And many more features.

In particular, Axios is widely loved because it reduces boilerplate code. Since most API requests encode data with JSON, Axios sets its default parsing to accordingly, which means you don’t have to define JSON again. And why worry anyway, since developers use far fewer res.text() and res.blob() API responses in comparison.

const fetchData = async () => {

    const response = await axios.get('https://api.example.com/data');

    console.log(response.data); // JSON is already parsed

  };

Now, compare that to a like-for-like fetching with Fetch API:

const fetchData = async () => {

    const response = await fetch('https://api.example.com/data');

    const data = await response.json(); // Extra step

    console.log(data);

  };

Yeah, there’s an extra line, right? That could mean several lines of code for larger codebases.

Key Features of Axios

Automatic JSON Parsing

As explained above, you don’t have to call res.json() again while using Axios, since the method is automatically set. But what happens, in rare cases, when you want to fetch a blob or text using Axios? Then, you have to set the response type accordingly. Here’s how you can do that:

const fetchData = async () => {
    const response = await axios.get('https://api.example.com/data', {
      responseType: 'text', // Treats response as plain text
    });

    console.log(response.data); // Plain text string
  };

Built-in Interceptors to Modify Requests and Responses

Axios comes with its built-in interceptors to intercept and modify API responses or requests. Interceptors can help set authorization tokens for requests or modify global responses and errors before they render. Use the .interceptors.request.use() for requests and .interceptors.response.use() for responses.

import axios from "axios";

  const apiClient = axios.create({

      baseURL: "https://api.example.com",

      headers: {

          'Content-Type': 'application/json'

      }

  });



  // Request Interceptor: Attach Authorization headers

  apiClient.interceptors.request.use(config => {

      config.headers.Authorization = Bearer ${localStorage.getItem("token")};

      return config;

  }, error => Promise.reject(error));

  // Usage: Axios automatically includes the Authorization header

  apiClient.get("/data")

      .then(response => console.log(response.data))

      .catch(error => console.error(error));

To achieve that with Fetch API, you will have to write an interceptor wrapper on your API, which needs far more boilerplate code.

Request cancellation with CancelToken

Although now deprecated, Axios used to have its native request cancellation method known as CancelToken. But now, the AbortController API is regarded as a globally-recognized and reliable method for request abortion.

Error Handling

Axios handles errors better by automatically rejecting all non-2xx status codes like Error 404 and 501. You do not need to check any response.ok message:

axios.get('https://jsonplaceholder.typicode.com/invalid-url')

  .then(response => console.log(response.data))

  .catch(error => {

    console.log('Error Status:', error.response?.status); // Axios auto-rejects non-2xx responses

    console.log('Error Message:', error.message);

  });

Built-in Progress Tracking

Axios incorporates XHP methods like onDownloadProgress and onUploadProgress. This inbuilt feature facilitates tracking download and uploads progress. Whereas with the Fetch API, you’d need ReadableStream to achieve similar results.

Here is an example showing how you can use onUploadProgress:

axios.post(url, data, {

    onUploadProgress: progressEvent => console.log(progressEvent.loaded)

  });

Supports Other Methods, too

Just like the Fetch API, Axios’ default Method is GET. But you can use the POST, PUT, PATCH or DELETE methods using axios.request(). Here’s how:

import axios from "axios";

  axios.request({

      method: "POST",

      url: "https://api.example.com/users",

      body: { name: "Abdullah", age: 25 }, // Request body

      headers: {

          "Authorization": Bearer ${localStorage.getItem("token")},

          "Content-Type": "application/json"

      }

  })

  .then(response => console.log(response.data))

  .catch(error => console.error("Axios Request Error:", error));

Axios also provides a shorthand with methods like axios.get, axios.post, axios.put, axios.patch, and axios.delete, as shown below:

// POST Request

axios.post("https://api.example.com/users",

  { name: "Abdullah", age: 25 }, // Request body

  { headers: { "Content-Type": "application/json" } }

)

.then(response => console.log(response.data))

.catch(error => console.error("Axios POST Error:", error));

// PUT Request

axios.put("https://api.example.com/users/123",

  { name: "Updated Name" }, // Updated data

  { headers: { "Authorization": Bearer ${localStorage.getItem("token")} } }

)

.then(response => console.log(response.data))

.catch(error => console.error("Axios PUT Error:", error));

// DELETE Request

axios.delete("https://api.example.com/users/123", {

  headers: { "Authorization": Bearer ${localStorage.getItem("token")} }

})

.then(response => console.log("User deleted successfully"))

.catch(error => console.error("Axios DELETE Error:", error));

Limitations of Axios

Slightly larger bundle size

Axios adds 35 kb of extra bundle, while FetchAPI adds 0. While Axios clearly offers more features than Fetch in every other metric, you have to make do with the larger bundle size. And in an age where lightweight and fast applications are often preferred, you might not want that load.

Dependency on third-party maintenance

Depending on a third-party option for something as crucial as API might not be desirable. So a native tool like the Fetch API, built within JavaScript, offers more reliability.

Alova

Alova is a request management library that combines simple API fetching with other functionalities like state management, hooks, and caching, amongst many others.

While we use react-query and SWR to process Axios-fetched data, Alova saves you those extra installations and coding by providing these methods natively. The all-in-one alternative not only fetches responses and sends requests, but also merges requests, caches responses, and optimizes them for UI frameworks.

Built in 2022, Alova’s adoption is still early but nonetheless seems promising. It is supported on browsers, Node.js, and most frameworks, including Vue, React, Svelte, and vanilla JavaScript. But it has limited usage for Angular.js.

At just 10kb, it is about 3 times smaller than Axios, making it a more lightweight alternative for building fast applications.

You can also use Alova to either replace react-query to facilitate Axios or be the one-stop-shop for everything API integration-related.

Here is a simple Alova fetch:

const response = await alovaInstance.Get('https://jsonplaceholder.typicode.com').send();

console.log(response); // Response data

When you are fetching Alova on React components, you can use the createAlova() to set parameters and useRequest() to manage state.

import React from "react";

import { createAlova, useRequest } from "alova";

import GlobalFetch from "alova/GlobalFetch";

// Initialize Alova

const alovaInstance = createAlova({

  statesHook: React,

  requestAdapter: GlobalFetch(),

});

// GET request with useRequest

const Profile = () => {

  const { data, loading, error } = useRequest(() => alovaInstance.Get("https://jsonplaceholder.typicode.com"));

  if (loading) return <p>Loading...</p>;

  if (error) return <p>Error fetching profile</p>;

  return <div>Username: {data.username}</div>;

};

export default Profile;

Key Features of Alova

One-Stop Shop

For some functionalities that come built into Alova, Fetch API or Axios might need additional libraries like react-query or SWR to fulfill.

Request Sharing Prevents Redundant Requests

Alova fuses identical requests. Let’s say several components ask for the same data from the API. The Fetch API and Axios send multiple identical requests to the server which creates traffic. But Alova merges them, sends a single request, and shares its response across all components, which reduces network traffic.

State Management

With tools like Fetch API and Axios, you have to manage data, loading, and error states manually. Alova lets you do that on the go within a single line of code. Here is how it looks:

//...

const { data, loading, error } = useRequest(alova.Get("/posts/1"));

//...

Advanced Request Management

Alova offers several request management functionalities with each tailored to specific use cases. With its request management, you can request preload for data to be used later, cache data to prevent reload, manage form submission, handle pagination, and automate refetching when needed. Check out their docs to read more.

Multi-Level Caching

You can also use Alova to cache data, especially when the response isn’t constantly changing and does not need refetching. Unlike react-query that simply stores caches in RAM, Alova offers a more flexible framework.

Its three-pronged caching modes include the memory mode, cache occupying mode, and recovery mode. While memory mode stores data in the RAM, recovery mode persistently stores it in a Local Storage and is made available for longer periods and even offline. Meanwhile, the occupying mode prevents duplicate or redundant requests coming in quick succession.

Independent on any component, cached data can be accessed anywhere in the app if the request URL and parameters match. These features lower traffic going to servers, reduce buffering, and help facilitating a swifter and better user experience.

//...

// Initialize Alova instance

const alovaInstance = createAlova({

  baseURL: "https://jsonplaceholder.typicode.com",

  statesHook: React,

  requestAdapter: GlobalFetch(),

});

// Define GET request

const getPosts = alovaInstance.Get("/posts", {

  cache: {

    mode: "memory", // Caches in memory

    expires: 1000 * 60 * 5, // Expires in 5 minutes

  },

});

const PostList = () => {

  const { data, loading, error } = useRequest(getPosts);

  if (loading) return <p>Loading...</p>;

  if (error) return <p>Error fetching data</p>;

  //...

};

In the example above, Alova caches the response using the memory mode cache: {mode: "memory"} and sets the cache expiration to 5 minutes expires: 1000 * 60 * 5. You can change “memory” to “recovery” if you want a longer storage duration.

Usage Flexibility

You can use Alova with either Axios or the Fetch API. Here is an example where I fetched data using Axios and complemented it with Alova state management.

//...

// Initialize Alova

const alovaInstance = createAlova({

  statesHook: React,

  requestAdapter: GlobalFetch(),

});

// Manage state with Alova

const { data: posts, setData } = useSnapshot([]);

const fetchPosts = async () => {

  const response = await axios.get("https://jsonplaceholder.typicode.com/posts");

  setData(response.data); // Store data in Alova state

};

//...

Supports Other Methods

Alova also makes GET its default option while supporting other methods like POST, PATCH, PUT and DELETE. Here is how to use POST in Alova, for example:

import React, { useState } from "react";

import { createAlova, useRequest } from "alova";

import GlobalFetch from "alova/GlobalFetch";

const alovaInstance = createAlova({

  baseURL: "https://jsonplaceholder.typicode.com",

  statesHook: React,

  requestAdapter: GlobalFetch(),

});

const PostForm = () => {

  const [title, setTitle] = useState("");

  const { send: createPost } = useRequest(alovaInstance.Post("/posts", { title }), { immediate: false });

  createPost().then(console.log)

};

export default PostForm;

Of course, it has shorthand methods too:

import React, { useState } from "react";

import { createAlova, useRequest } from "alova";

import GlobalFetch from "alova/GlobalFetch";

const alova = createAlova({

  baseURL: "https://jsonplaceholder.typicode.com",

  statesHook: React,

  requestAdapter: GlobalFetch(),

});

const { send: createPost } = useRequest(alova.Post("/posts", { title: "New Post" }), { immediate: false });

const { send: updatePost } = useRequest(alova.Put("/posts/1", { title: "Updated Post" }), { immediate: false });

const { send: patchPost } = useRequest(alova.Patch("/posts/1", { title: "Patched Post" }), { immediate: false });

createPost().then(console.log);

updatePost().then(console.log);

patchPost().then(console.log);

Bundle Size

Alova is three times smaller than Axios, but that does not even tell the full story. With Axios and the Fetch API, you need different libraries to handle caching, request deduplication, and retries. But Alova has everything in-built. So using Axios and Fetch API in real code production will always require more bundles than Axios. And overall, Alova facilitates lighter-weight applications compared to Axios and sometimes the Fetch API as well.

Limitations of Alova

Adoption Is Still Low

While writing this article, I had a hard time getting enough resources on Alova. And that is because it only debuted in July 2022 which means adoption is still early. So, troubleshooting Alova might be problematic since there are fewer Alova-themed API communities, as well as fewer StackOverflow answers, Youtube Tutorials, or GitHub contributions.

Potential Stability & Long-Term Maintenance Risks

Newer libraries have a higher risk of abandonment. Axios has been around for years, while Alova is still growing. Besides, it has fewer production use cases and battle-tested applications compared to Axios and Fetch.

Learning Curve

Alova’s learning curve can take some getting used to because it handles API requests differently from tools like Axios or the Fetch API.

Instead of making requests directly, you work with request instances and manage state within Alova’s system. This requires learning new ways to structure API calls and use features like caching and request merging. While it may feel unfamiliar at first, it can help reduce redundant API calls and improve performance once you understand it.

Fewer Third Party Integrations

Alova has fewer third-party libraries built specifically for it, requiring more manual work for compatibility with existing tools.

Feature-by-Feature Comparison

Use Cases and Best Scenarios

Choosing the right HTTP client for your project depends on several factors, including project complexity, dependencies, and performance considerations. Let’s explore when it’s best to use the Fetch API, Axios, or Alova.

When to Use Fetch API

1. Suitable for Lightweight Projects and Simple Requests

The Fetch API is built into modern browsers and is ideal for handling basic HTTP requests without adding dependencies. If your project requires only simple GET, POST, or DELETE requests with minimal configurations, Fetch API is a great choice.

2. When Working in Environments Where Third-Party Libraries Are Restricted

Certain enterprise or security-sensitive applications may restrict the use of external libraries. Since the Fetch API is built into the browser, it remains a viable option when third-party packages like Axios or Alova are not allowed.

3. When Minimal Dependencies Are Preferred

Since Fetch API is native to JavaScript, it does not require installing extra libraries, making it perfect for projects that need to keep dependencies low. This can be particularly beneficial for small lightweight apps or static websites.

When to Use Axios

1. Ideal for Backend-Heavy Applications or Complex APIs

For projects that require multiple API calls, error handling, and efficient request management, Axios is a solid choice. It allows concurrent requests, request cancellation, and improved control over HTTP headers.

2. When Automatic JSON Handling, Interceptors, and Robust Error Handling Are Needed

Axios simplifies working with JSON data by automatically parsing responses. It also provides built-in interceptors for request and response transformations, as well as superior error handling compared to Fetch API.

3. Useful When Working with Node.js in Full-Stack Applications

Axios works both in the browser and in Node.js, making it an excellent choice for full-stack applications where a unified API client is needed across the frontend and backend.

When to Use Alova

1. When Working with Frontend-Heavy Applications (React, Vue, Svelte)

Alova integrates well with frontend frameworks and state management tools, making it a great choice for single-page applications (SPAs) that depend on smooth data fetching, pagination, and updates.

2. Best for Projects Requiring Optimized Caching and Data Synchronization

Alova is designed for performance optimization and better caching strategies. It is suitable for applications that rely on real-time data synchronization and need to minimize redundant network requests.

3. When Performance Optimization and Reduced Network Load Are Priorities

With its intelligent caching mechanisms, Alova can significantly reduce API call frequency, thereby improving the overall performance of the application. It is especially useful in scenarios where network efficiency is crucial, such as mobile applications or progressive web apps (PWAs).

Community and Ecosystem

The community and ecosystem surrounding an HTTP client can impact ease of use, available learning resources, and integration with other tools. Let's explore how the Fetch API, Axios, and Alova are perceived in 2025.

Ecosystem and Integrations

While Fetch API is widely supported, developers often supplement it with additional libraries for improved caching, timeouts, and request queuing. This can lead to increased development effort compared to using an out-of-the-box solution like Axios or Alova.

Meanwhile, Axios benefits from a well-established ecosystem with a variety of plugins and extensions, making it easy to integrate with different backend architectures, authentication systems, and request monitoring tools.

Alova is designed to work seamlessly with modern state management libraries such as React Query and Vue Query. These integrations make it an attractive choice for developers focused on optimizing frontend data fetching strategies.

Conclusion

Choosing between the Fetch API, Axios, and Alova depends on your project’s needs and priorities. The Fetch API is best for lightweight applications that require minimal dependencies, while Axios is a robust choice for full-stack applications and backend-heavy environments. Alova, on the other hand, is an excellent option for optimizing data fetching and caching in frontend-focused applications.

As developers explore new ways to enhance performance and reduce network load, Alova's adoption is expected to grow, particularly in SPAs and PWAs. But Axios remains a reliable and widely adopted solution, while the Fetch API continues to be the fundamental building block for HTTP requests in JavaScript.

If you are a React developer, you likely appreciate its component-based architecture, uni-directional data binding, huge community support, and the React team's passion for bringing features in front of developers.

If you are just getting started with React or a beginner at it, that's great – there's a complete React.js roadmap published here on the freeCodeCamp you can check out. And I think you'll find the library a lot easier to learn if you have a solid grip on basic JavaScript foundations.

Irrespective of where you stand with React, the real fun is in building things with it, don't you agree? So I thought of building a simple inventory list to explain a few powerful concepts like complex state management with useReducer.

And while we're doing that, we'll also create a mock API server using JSON Server, we'll use axios to call the API, and finally we'll use the useReducer hook to manage state.

Sounds interesting? Let's do it. If you would also like to check out the video version of this project, here it is: 😊

Table of Contents

• Project Setup with React and TailwindCSS
• How to Setup a Server with JSON Server
• How to Set Up and Use Axios
• How to Use the useReducer Hook from React
• How to Create Actions
• How to Create an Inventory Reducer
• How to Build the Inventory List Component
• How to Use Axios to Fetch Data and Dispatch it to the Reducer
• Let's Complete the JSX Part
• How to Use the Inventory List in the App Component
• Wrapping Up

Project Setup with React and TailwindCSS

Before we do anything else, let's get the project set up. Also, you can follow along with the source code as you read through.

To build this app, we will use React with Vite and TailwindCSS. You can set up these tools by following a few steps from the Vite and TailwindCSS documentation.

But, why not use something that provides everything built together? This will save you time for future React projects as you can use the same infrastructure to create a React projects every time.

Head over to this repository and click on the Use this template button as indicated in the image below. It will help you create a brand new repository out of a template repository with Vite, React, and TailwindCSS configured.

Create a React Project Repository with TailwindCSS and Vite from an Existing Template

Now provide a suitable name to your repository (let's call it inventory-list in this article) along with a description. You may chose to keep the repository private if you wish to, otherwise go ahead and create the repository by clicking on the button at the bottom.

Provide the Details of the New Repository

That's it. You have a repository with all the basic ingredients to get started. Now, go to the command prompt/terminal and clone the newly created repository:

git clone <YOUR NEWLY CREATED REPOSITORY URL>

Change directories to the project directory and install the project dependencies using the following commands:

## Change to the project directory
cd inventory-list

## Install dependencies

## Using NPM
npm install

## Using Yarn
yarn install

## Using PNPM
pnpm install

After the dependencies are installed successfully, execute the following command to run the project on a local server:

## Run the project locally

## Using NPM
npm run dev

## Using Yarn
yarn dev

## Using PNPM
pnpm dev

Now the project should be running locally and should be accessible on the default URL, http://localhost:5173. You can access the URL on yor browser and import the project source code into your favourite code editor (I use VS Code). We are all set to start the coding.

How to Setup a Server with JSON Server

JSON Server is the go-to option when you want to work with fake/mock APIs to serve data of your choice. It is easy to set up and customize to your use case.

Let's set up the JSON Server for our project. The first thing is to install it.

Open a terminal at the root of the project folder and type the following command to install JSON Server:

## Using NPM
npm install json-server

## Using Yarn
yarn add json-server

## Using PNPM
pnpm install json-server

JSON Server uses JSON files as the data sources to perform HTTP operations like GET/POST/PUT/PATCH/DELETE. Create a server/database directory under the src/ directory. Now create a file called data.json under the src/server/database/ with the following content:

{
  "edibles": [
    {
      "id": 1,
      "picture": "🍌",
      "name": "Banana",
      "price": 32,
      "quantity": 200,
      "type": "fruits"
    },
    {
      "id": 2,
      "picture": "🍓",
      "name": "Strawberry",
      "price": 52,
      "quantity": 100,
      "type": "fruits"
    },
    {
      "id": 3,
      "picture": "🍗",
      "name": "Checken",
      "price": 110,
      "quantity": 190,
      "type": "foods",
      "sub-type": "Non-Veg"
    },
    {
      "id": 4,
      "picture": "🥬",
      "name": "Lettuce",
      "price": 12,
      "quantity": 50,
      "type": "Vegetables"
    },
    {
      "id": 5,
      "picture": "🍅",
      "name": "Tomato",
      "price": 31,
      "quantity": 157,
      "type": "Vegetables"
    },
    {
      "id": 6,
      "picture": "🥩",
      "name": "Mutton",
      "price": 325,
      "quantity": 90,
      "type": "Non-Veg"
    },
    {
      "id": 7,
      "picture": "🥕",
      "name": "Carrot",
      "price": 42,
      "quantity": 190,
      "type": "Vegetables"
    }
  ]
}

The data.json file contains an array of edible items. Each of the items in the array has properties like picture, name, price, quantity, and type to show in the inventory list.

The last thing left is to add a script into the package.json file so that we can start the JSON Server easily every time. Open the package.json file and add this line inside the scripts object like this:

"start-server": "json-server --watch ./src/server/database/data.json"

Next, go to the terminal and use the following command to start the JSON Server to serve the API:

## Using NPM
npm run start-server

## Using Yarn
yarn start-server

## Using PNPM
pnpm run start-server

You should see a message like this in your terminal:

The Output

It indicates that the JSON Server is running locally on localhost:3000 and there is an API endpoint called edibles serves the data. Now you can access the URL http://localhost:3000/edibles from your browser to see the data (fetched by a GET method call):

The API Output

Great! Now we have the /edibles API endpoint ready to consume into the React component.

How to Set Up and Use Axios

Axios is an HTTP client that helps us make promise-based asynchronous calls from the browser and Node.js environment. It has a number of useful features that make it one of the most used libraries for asynchronous request-response.

Note that we could have used the fetch Web API from JavaScript instead of Axios in this project. The only reason for using Axios here is to introduce it progressively. In the future articles, you'll learn its usages in handling JWT tokens from a React application. Stay tuned!

Open the terminal at the root of the project folder and use the following command to install Axios:

## Using NPM
npm install axios

## Using Yarn
yarn add axios

## Using PNPM
pnpm install axios

That's it. We will use Axios in a bit after laying out the basic components needed for the inventory list.

How to Use the useReducer Hook from React

React is a user interface library that supports component-based architecture at the core. A component is a single entity that's supposed to perform one task well. Multiple components come together to compose the final user interface.

Often, a component will have its own private data. We call these the states of a component. The value of a state drives the behaviour and appearance of a component. When state changes, the component re-renders to keep itself up-to-date with the latest state value.

The traditional way of handling state in React is with the useState hook. It works great as long as your state changes are trivial. As the state change logic becomes more complex and if you need to manage multiple scenarios around it, useState may make things clumsy. This is where you should think about using the useReducer hook.

useReducer is a standard hook from the React library. It accepts two primary parameters:

• initState: the initial state value
• reducer: a JavaScript function that holds the state change logic based on an action (or trigger).

The hook returns the following:

• A state: the current state value.
• A dispatch function: a function that tells the respective reducer what to do next, and what data to act on.

The image below explains each of the entities of the useReducer hook. If you want to learn about this hook in a greater depth, feel free to check this out.

The Anatomy of the useReducer Hook

How to Create Actions

The reducer function is the heart of the useReducer hook. It performs all the necessary logic to keep your application state updated and valid.

But how would the reducer function be aware of its task? Who would tell the reducer function what to do and what kind of data to work on? Here comes actions, an object that contains all the details for the reducer.

We define actions with types that indicate the stages a state change will occur in the reducer function. The same action object may also carry the application data(at times we call it payload) to pass to the reducer function when a component performs a dispatch.

We will now get started by creating some actions. We will define the types here. As our reducer needs to manage the inventory state on a data fetch, data fetch success, and data fetch error, we'll be defining actions for each of those.

Create a directory called actions/ under the src/ directory. Now create a file called index.js under the src/actions/ directory with the following content:

const FETCH_ACTIONS = {
  PROGRESS: 'progress',
  SUCCESS: 'success',
  ERROR: 'error',
}

export { FETCH_ACTIONS };

We have defined three actions, PROGRESS, SUCCESS, and ERROR. Next, let's create the reducer.

How to Create an Inventory Reducer

We need a reducer where we will keep all the state change logic. The same reducer will be passed to the useReducer hook later to get the current state value and dispatch the function to the component.

Create a directory called reducers/ under the src/. Now, create a file called inventoryReducers.js under the src/reducers/ directory.

Our reducer will need the actions because it has to work on state changes based on the actions. So, let's import the actions into the inventoryReducers.js file:

import { FETCH_ACTIONS } from "../actions"

You can define an initial state in the reducer file. The useReducer hook needs a reducer and an initial state to give us the current state value, remember? Let's define an initial state.

We need to show a list of inventory items after getting a successful API response. While we are fetching the list of items by making an API call, we need to manage a loading data state.

In case there is any problem in fetching data, we need to report the error using the error state. So we can create an initial state with all these values as object properties.

Now, create an initialState variable with the following state object value assigned to it:

const initialState = {
  items: [],
  loading: false,
  error: null,
}

Next, let's create the reducer function. Create a function called inventoryReducer with the following code snippet:

const inventoryReducer = (state, action) => {

  switch (action.type) {
    case FETCH_ACTIONS.PROGRESS: {
      return {
        ...state,
        loading: true,
      }
    }

    case FETCH_ACTIONS.SUCCESS: {
      return {
        ...state,
        loading: false,
        items: action.data,
      }
    }

    case FETCH_ACTIONS.ERROR: {
      return {
        ...state,
        loading: false,
        error: action.error,
      }
    }

    default: {
      return state;
    }      
  }

}

Let's understand the above code snippet. The inventoryReducer function takes two arguments, state and action. The reducer function works on the state based on the action type. For example,

• When it is a PROGRESS action, we want the loading value to be true.
• For a SUCCESS action, we want to populate the items with the data received from the API response along with making the loading value as false.
• For an ERROR action, we'll provide a value to the error property of the state.

In any of the cases above, we do not mutate the state directly. Rather, we create a clone (a new reference of it using the ... operator) of the state and then update its properties accordingly. Finally, we return the updated state for each of the actions. If the passed actions do not match any of the given types, we return back the state as it is.

Last, export the inventoryReducer function and the initialState object:

export {inventoryReducer, initialState};

Here is the complete code from the inventoryReducers.js file:

import { FETCH_ACTIONS } from "../actions"

const initialState = {
  items: [],
  loading: false,
  error: null,
}

const inventoryReducer = (state, action) => {

  switch (action.type) {
    case FETCH_ACTIONS.PROGRESS: {
      return {
        ...state,
        loading: true,
      }
    }

    case FETCH_ACTIONS.SUCCESS: {
      return {
        ...state,
        loading: false,
        items: action.data,
      }
    }

    case FETCH_ACTIONS.ERROR: {
      return {
        ...state,
        loading: false,
        error: action.error,
      }
    }

    default: {
      return state;
    } 
  }

}

export {inventoryReducer, initialState};

How to Build the Inventory List Component

We will now create the inventory list component where we will use the reducer we created above.

Create a directory called components/ under the src/ directory. Now, create a file called InventoryList.jsx under the stc/components/ directory.

First import the required things like:

• The useReducer hook where we will use the inventory reducer.
• The useEffect hook to handle the async call with Axios.
• The inventory reducer and the initial state we created a few minutes back.
• The actions, as we need them to dispatch.
• The axios for making async calls.

import { useReducer, useEffect } from "react";

import { inventoryReducer, initialState } from "../reducers/inventoryReducer";

import { FETCH_ACTIONS } from "../actions";

import axios from "axios";

Now, create a function to define the component:

const InventoryList = () => {

  const [state, dispatch] = useReducer(inventoryReducer, initialState);

  const { items, loading, error} = state;

  return(
    <div className="flex flex-col m-8 w-2/5">

    </div>
  );
};

Here,

• We have used the useReducer hook. We passed the inventoryReducer and the initialState to it as arguments to get the current state value and the dispatch function.
• As we know the state object has the items, loading, and error as properties, we destructure them into our component. We will use them shortly.
• The component returns an empty div that we will change as we proceed.

Finally export the component as a default export like this:

export default InventoryList;

How to Use Axios to Fetch Data and Dispatch it to the Reducer

It's data fetching time! Data fetching by making an asynchronous call is a side effect you need to handle in your component. Copy and paste the useEffect code block inside the InventoryList function.

// -- The code above as it is

const InventoryList = () => {

  // --- The code above as it is


  useEffect(() => {
    dispatch({type: FETCH_ACTIONS.PROGRESS});

    const getItems = async () => {
      try{
        let response = await axios.get("http://localhost:3000/edibles");
        if (response.status === 200) {
          dispatch({type: FETCH_ACTIONS.SUCCESS, data: response.data});
        }
      } catch(err){
        console.error(err);
        dispatch({type: FETCH_ACTIONS.ERROR, error: err.message})
      }
    }

    getItems();

  }, []);

  // --- The JSX return statement below as it is

Let's understand the code flow:

• At the start of the useEffect callback, we dispatched a PROGRESS action. It invokes the reducer function with progress action type to turn the loading property value to true. We can use the loading property value in the JSX later to show a loading indicator.
• Then we use Axios to make an asynchronous call using the API URL. On receiving the response, we check if it's a success, and in that case we dispatch a SUCCESS action along with the items data(remember, payload?) from response. This time the dispatcher will invoke the reducer with the success action to change the items and loading properties accordingly.
• If there is an error, we dispatch an error action with the error message to update the state with the error information in the reducer.

Each time we dispatch an action and update the state, we also get back the latest state value into our component. It's time to use the state value in the JSX to render the inventory item list.

Let's Complete the JSX Part

The JSX part is fairly simple:

// -- The code above as it is

const InventoryList = () => {

  // -- The code above as it is

  return (
    <div className="flex flex-col m-8 w-2/5">
      {
        loading ? (
          <p>Loading...</p>
        ) : error ? (
          <p>{error}</p>
        ) : (
          <ul className="flex flex-col">
            <h2 className="text-3xl my-4">Item List</h2>
            {
              items.map((item) => (
                <li
                  className="flex flex-col p-2 my-2 bg-gray-200 border rounded-md" 
                  key={item.id}>
                  <p className='my-2 text-xl'>
                    <strong>{item.name}</strong> {' '} {item.picture} of type <strong>{item.type}</strong>
                    {' '} costs <strong>{item.price}</strong> INR/KG.
                  </p>
                  <p className='mb-2 text-lg'>
                    Available in Stock: <strong>{item.quantity}</strong>
                  </p>

                </li>
              ))
            }

          </ul>
        )
      }

    </div>
  )
}

export default InventoryList;

Here's what's going on in the code:

• We show a loading... message if the loading property of the state is true.
• We show the error message in case there's an error.
• In neither of the cases, we iterate through the inventory items using the map function. Each of the items in the items array has information like picture, name, price, and more. We show this information in a meaningful way.

Here is the complete code of the InventoryList component:

import { useReducer, useEffect } from "react";
import { inventoryReducer, initialState } from "../reducers/inventoryReducer";
import { FETCH_ACTIONS } from "../actions";

import axios from "axios";

const InventoryList = () => {

  const [state, dispatch] = useReducer(inventoryReducer, initialState);

  const { items, loading, error} = state;

  console.log(items, loading, error);

  useEffect(() => {
    dispatch({type: FETCH_ACTIONS.PROGRESS});

    const getItems = async () => {
      try{
        let response = await axios.get("http://localhost:3000/edibles");
        if (response.status === 200) {
          dispatch({type: FETCH_ACTIONS.SUCCESS, data: response.data});
        }
      } catch(err){
        console.error(err);
        dispatch({type: FETCH_ACTIONS.ERROR, error: err.message})
      }
    }

    getItems();

  }, []);


  return (
    <div className="flex flex-col m-8 w-2/5">
      {
        loading ? (
          <p>Loading...</p>
        ) : error ? (
          <p>{error}</p>
        ) : (
          <ul className="flex flex-col">
            <h2 className="text-3xl my-4">Item List</h2>
            {
              items.map((item) => (
                <li
                  className="flex flex-col p-2 my-2 bg-gray-200 border rounded-md" 
                  key={item.id}>
                  <p className='my-2 text-xl'>
                    <strong>{item.name}</strong> {' '} {item.picture} of type <strong>{item.type}</strong>
                    {' '} costs <strong>{item.price}</strong> INR/KG.
                  </p>
                  <p className='mb-2 text-lg'>
                    Available in Stock: <strong>{item.quantity}</strong>
                  </p>

                </li>
              ))
            }

          </ul>
        )
      }

    </div>
  )
}

export default InventoryList

How to Use the Inventory List in the App Component

Now we have to let the App component know about the InventoryList component so that we can render it. Open the App.jsx file and replace its content with the following code snippet:

import InventoryList from "./components/InventoryList"

function App() {

  return (
    <>
      <InventoryList />
    </>
  )
}

export default App

That's it. Make sure your application server is running. Now, access the app on your browser using the following URL http://localhost:5173/.

The Final Output - Inventory List

Wrapping Up

I hope you enjoyed building this project and learning more about React. Here is the source code on my GitHub. Please feel free to extend the project by adding features like:

• Adding an item to the inventory
• Editing an item from the inventory
• Deleting an item from the inventory

Hint: You need to create actions for each of these and enhance the reducer function to write state update logic to support these features. I hope you give it a try and if you do so, let me know (my contacts are mentioned below).

That's all for now. I also publish meaningful posts on my GreenRoots Blog, and I think you'll find them helpful, too.

Let's connect.

• I am an educator on my YouTube channel, tapaScript. Please SUBSCRIBE to the channel if you want to learn JavaScript, ReactJS, Next.js, Node.js, Git, and all about Web Development fundamentally.
• Follow me on X (Twitter) or LinkedIn if you don't want to miss the daily dose of Web Development and Programming Tips.
• Find all my public speaking talks here.
• Check out and follow my Open Source work on GitHub.

See you soon with my next article. Until then, please take care of yourself, and stay happy.

This interaction between your frontend application and the backend server is possible through HTTP requests.

There are five popular HTTP methods you can use to make requests and interact with your servers. One HTTP method is the GET method, which can retrieve data from your server.

This article will teach you how to request data from your servers by making a GET request. You will learn the popular methods that exist currently and some other alternative methods.

For this guide, we'll retrieve posts from the free JSON Placeholder posts API.

There are two popular methods you can easily use to make HTTP requests in JavaScript. These are the Fetch API and Axios.

How to Make a GET Request with the Fetch API

The Fetch API is a built-in JavaScript method for retrieving resources and interacting with your backend server or an API endpoint. Fetch API is built-in and does not require installation into your project.

Fetch API accepts one mandatory argument: the API endpoint/URL. This method also accepts an option argument, which is an optional object when making a GET request because it is the default request.

  fetch(url, {
      method: "GET" // default, so we can ignore
  })

Let’s create a GET request to get a post from the JSON Placeholder posts API.

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => response.json())
  .then((json) => console.log(json));

This will return a single post which you can now store in a variable and use within your project.

Note: For other methods, such as POST and DELETE, you need to attach the method to the options array.

How to Make a GET Request with Axios

Axios is an HTTP client library. This library is based on promises that simplify sending asynchronous HTTP requests to REST endpoints. We will send a GET request to the JSONPlaceholder Posts API endpoint.

Axios, unlike the Fetch API, is not built-in. This means you need to install Axios into your JavaScript project.

To install a dependency into your JavaScript project, you will first initialize a new npm project by running the following command in your terminal:

$ npm init -y

And now you can install Axios to your project by running the following command:

$ npm install axios

Once Axios is successfully installed, you can create your GET request. This is quite similar to the Fetch API request. You will pass the API endpoint/URL to the get() method, which will return a promise. You can then handle the promise with the .then() and .catch() methods.

axios.get("https://jsonplaceholder.typicode.com/posts/1")
.then((response) => console.log(response.data))
.catch((error) => console.log(error));

Note: The major difference is that, for Fetch API, you first convert the data to JSON, while Axios returns your data directly as JSON data.

At this point, you have learned how to make a GET HTTP request with Fetch API and Axios. But there are some other methods that still exist. Some of these methods are XMLHttpRequest and jQuery.

How to Make a GET Request with XMLHttpRequest

You can use the XMLHttpRequest object to interact with servers. This method can request data from a web server’s API endpoint/URL without doing a full page refresh.

Note: All modern browsers have a built-in XMLHttpRequest object to request data from a server.

Let’s perform the same request with the XMLHttpRequest by creating a new XMLHttpRequest object. You will then open a connection by specifying the request type and endpoint (the URL of the server), then you'll send the request, and finally listen to the server’s response.

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1");
xhr.send();
xhr.responseType = "json";
xhr.onload = () => {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.response);
  } else {
    console.log(`Error: ${xhr.status}`);
  }
};

In the above code, a new XMLHttpRequest object is created and stored in a variable called xhr. You can now access all its objects using the variable, such as the .open() method, when you specify the request type (GET) and the endpoint/URL where you want to request data.

Another method you will use is .send(), which sends the request to the server. You can also specify the format in which the data will be returned using the responseType method. At this point, the GET request is sent, and all you have to do is listen to its response using the onload event listener.

If the client's state is done (4), and the status code is successful (200), then the data will be logged to the console. Otherwise, an error message showing the error status will appear.

How to Make a GET Request with jQuery

Making HTTP requests in jQuery is relatively straightforward and similar to the Fetch API and Axios. To make a GET request, you will first install jQuery or make use of its CDN in your project:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js" integrity="sha512-tWHlutFnuG0C6nQRlpvrEhE4QpkG1nn2MOUMWmUeRePl4e3Aki0VB6W1v3oLjFtd0hVOtRQ9PHpSfN6u6/QXkQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

With jQuery, you can access the GET method $.get(), which takes in two parameters, the API endpoint/URL and a callback function that runs when the request is successful.

$.get("https://jsonplaceholder.typicode.com/posts/1", (data, status) => {
  console.log(data);
});

Note: In the callback function, you have access to the request's data and the request's status.

You can also use the jQuery AJAX Method, which is quite different and can be used to make asynchronous requests:

$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts/1",
  type: "GET",
  success: function (data) {
    console.log(data);
  }
});

Wrapping Up

In this article, you have learned how to make the HTTP GET request in JavaScript. You might now begin to think — which method should I use?

If it’s a new project, you can choose between the Fetch API and Axios. Also, if you want to consume basic APIs for a small project, there is no need to use Axios, which demands installing a library.

Have fun coding!

Every developer who wants to build modern, robust web applications with React must understand how to consume APIs to fetch data into their React applications.

In this beginners guide, you will learn how to consume RESTful API in React, including fetching, deleting, and adding data. We'll also go over the two main ways to consume RESTful APIs and how to use them with React hooks.

Here's an interactive scrim about consuming REST APIs in React (more scrims below):

What is a REST API?

If you've ever spent any time programming or researching programming, you've likely come across the term "API."

API stands for Application Programming Interface. It is a medium that allows different applications to communicate programmatically with one another and return a response in real time.

Roy Fielding defined REST in 2000 as an architectural style and methodology commonly used in the development of internet services, such as distributed hypermedia systems. It is an acronym that stands for "REpresentational State Transfer."

When a request is made via a REST API, it sends a representation of the resource's current state to the requester or endpoint. This state representation can take the form of JSON (JavaScript Object Notation), XML, or HTML.

JSON is the most widely used file format because it is language-independent and can be read by both humans and machines.

For example:

[
   {
      "userId": 1,
      "id": 1,
      "title": "sunt excepturi",
      "body": "quia et suscipit\nsuscipit recusandae consequuntur "
   },
   {
      "userId": 1,
      "id": 2,
      "title": "qui est esse",
      "body": "est rerum tempore vitae\nsequi sint nihil"
   }
]

How to Consume REST API’s in React

You can consume REST APIs in a React application in a variety of ways, but in this guide, we will look at two of the most popular approaches: Axios (a promise-based HTTP client) and Fetch API (a browser in-built web API).

Note: To fully comprehend this guide, you should be familiar with JavaScript, React, and React hooks, as they are central to it.

Before we get into how to consume APIs, it's important to understand that consuming APIs in React is very different from how it's done in JavaScript. This is because these requests are now done in a React Component.

In our case, we'll be using functional components, which means that we need to use two major React Hooks:

• useEffect Hook: In React, we perform API requests within the useEffect() hook. It either renders immediately when the app mounts or after a specific state is reached. This is the general syntax we'll use:

useEffect(() => {
    // data fetching here
}, []);

• useState Hook: When we request data, we must prepare a state in which the data will be stored when it is returned. We can save it in a state management tool such as Redux or in a context object. To keep things simple, we'll store the returned data in the React local state.

const [posts, setPosts] = useState([]);

Let's now get into the meat of this guide, where we'll learn how to get, add, and delete data using the JSONPlaceholder posts API. This knowledge is applicable to any type of API, as this guide is intended for beginners.

How to Consume APIs Using The Fetch API

The Fetch API is a JavaScript built-in method for retrieving resources from a server or an API endpoint. It's built-in, so you don't need to install any dependencies or packages.

The fetch() method requires a mandatory argument, which is the path or URL to the resource you want to fetch. Then it returns a Promise so you can handle success or failure using the then() and catch() methods.

A basic fetch request is very simple to write and looks like the below code. We are simply fetching data from a URL that returns data as JSON and then logging it to the console:

fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
   .then(response => response.json())
   .then(data => console.log(data));

The default response is usually a regular HTTP response rather than the actual JSON, but we can get our output as a JSON object by using the response's json() method.

How to Perform a GET Request in React With Fetch API

You can use the HTTP GET method to request data from an endpoint.

As previously stated, the Fetch API accepts one mandatory argument, which is true. It also accepts an option argument, which is optional, especially when using the GET method, which is the default. But for other methods such as POST and DELETE, you'll need to attach the method to the options array:

fetch(url, {
    method: "GET" // default, so we can ignore
})

So far, we've learned how things work, so let's put everything we've learned together and perform a get request to fetch data from our API.

Again, we'll be using the free online API JSONPlaceholder to fetch a list of posts into our application:

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

const App = () => {
   const [posts, setPosts] = useState([]);
   useEffect(() => {
      fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
         .then((response) => response.json())
         .then((data) => {
            console.log(data);
            setPosts(data);
         })
         .catch((err) => {
            console.log(err.message);
         });
   }, []);

return (
   // ... consume here
);
};

We created a state in the preceding code to store the data we will retrieve from the API so that we can consume it later in our application. We also set the default value to an empty array.

const [posts, setPosts] = useState([]);

The major operation then occurred in the useEffect state, so that the data/posts are fetched as soon as the application loads. The fetch request yields a promise, which we can either accept or reject:

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts?_limit=10').then(
      (response) => console.log(response)
   );
}, []);

This response contains a large amount of data, such as the status code, text, and other information that we'll need to have to handle errors later.

So far, we've handled a resolve using .then(), but it returned a response object, which isn't what we want. So we need to resolve the Response object to JSON format using the json() method. This also returns a promise for us to get the actual data using the second .then().

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
      .then((response) => response.json())
      .then((data) => {
         console.log(data);
         setPosts(data);
      });
}, []);

If we look at the console, we'll see that we've retrieved 10 posts from our API, which we've also set to the state we specified earlier.

This is not complete because we have only handled the promise's resolve and not the promise's rejection, which we'll handle using the .catch() method:

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
      .then((response) => response.json())
      .then((data) => {
         console.log(data);
         setPosts(data);
      })
      .catch((err) => {
         console.log(err.message);
      });
}, []);

So far we have seen how to perform a GET request. This can be consumed easily into our application by looping through our array:

const App = () => {
// ...

   return (
   <div className="posts-container">
      {posts.map((post) => {
         return (
            <div className="post-card" key={post.id}>
               <h2 className="post-title">{post.title}</h2>
               <p className="post-body">{post.body}</p>
               <div className="button">
               <div className="delete-btn">Delete</div>
               </div>
            </div>
         );
      })}
   </div>
   );
};

export default App;

How to Perform a POST Request in React With Fetch API

You can use the HTTP POST method to send data to an endpoint. It works similarly to the GET request, the main difference being that you need to add the method and two additional parameters to the optional object:

const addPosts = async (title, body) => {
await fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
   title: title,
   body: body,
   userId: Math.random().toString(36).slice(2),
}),
headers: {
   'Content-type': 'application/json; charset=UTF-8',
},
})
.then((response) => response.json())
.then((data) => {
   setPosts((posts) => [data, ...posts]);
   setTitle('');
   setBody('');
})
.catch((err) => {
   console.log(err.message);
});
};

The major parameters that might appear strange are the body and header.

The body holds the data we want to pass into the API, which we must first stringify because we are sending data to a web server. The header tells us the type of data, which is always the same when consuming REST API's. We also set the state to hold the new data and distribute the remaining data into the array.

Looking at the addPost() method we created, it expects these data from a form or whatever. In our case, I created a form, obtained the form data via states, and then added it to the method when the form was submitted:

import React, { useState, useEffect } from 'react';
const App = () => {
const [title, setTitle] = useState('');
const [body, setBody] = useState('');
// ...
const addPosts = async (title, body) => {
   await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
         title: title,
         body: body,
         userId: Math.random().toString(36).slice(2),
      }),
      headers: {
         'Content-type': 'application/json; charset=UTF-8',
      },
   })
      .then((response) => response.json())
      .then((data) => {
         setPosts((posts) => [data, ...posts]);
         setTitle('');
         setBody('');
      })
      .catch((err) => {
         console.log(err.message);
      });
};

const handleSubmit = (e) => {
   e.preventDefault();
   addPosts(title, body);
};    

return (
   <div className="app">
      <div className="add-post-container">
         <form onSubmit={handleSubmit}>
            <input type="text" className="form-control" value={title}
               onChange={(e) => setTitle(e.target.value)}
            />
            <textarea name="" className="form-control" id="" cols="10" rows="8" 
               value={body} onChange={(e) => setBody(e.target.value)} 
            ></textarea>
            <button type="submit">Add Post</button>
         </form>
      </div>
      {/* ... */}
   </div>
);
};

export default App;

How to Perform a DELETE Request in React With Fetch API

You can use the HTTP DELETE method to remove data from an endpoint. It works similarly to the GET request, the main difference being the addition of the method:

const deletePost = async (id) => {
await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
   method: 'DELETE',
}).then((response) => {
   if (response.status === 200) {
      setPosts(
         posts.filter((post) => {
            return post.id !== id;
         })
      );
   } else {
      return;
   }
});
};

This gets triggered when the button is clicked, and we get the id of the specific post in which the button was clicked. Then we remove that data from the entire retuned data.

This will be removed from the API but not immediately from the UI, which is why we have added a filter to remove the data as well. For each item in the loop, your delete button will look like this:

const App = () => {
// ...

   return (
   <div className="posts-container">
      {posts.map((post) => {
         return (
            <div className="post-card" key={post.id}>
               {/* ... */}
               <div className="button">
                  <div className="delete-btn" onClick={() => deletePost(post.id)}>
                     Delete
                  </div>
               </div>    
            </div>
         );
      })}
   </div>
   );
};

export default App;

How to Use Async/Await in Fetch API

So far, we've seen how to make fetch requests normally using the promise syntax, which can be confusing at times. Then comes the chaining. We can avoid the .then() chaining by using Async/await and write more readable code.

To use async/await, first call async in the function. Then when making a request and expecting a response, add the await syntax in front of the function to wait until the promise settles with the result.

When we use async/await, all of our Fetch requests will look like this:

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

const App = () => {
   const [title, setTitle] = useState('');
   const [body, setBody] = useState('');
   const [posts, setPosts] = useState([]);

   // GET with fetch API
   useEffect(() => {
      const fetchPost = async () => {
         const response = await fetch(
            'https://jsonplaceholder.typicode.com/posts?_limit=10'
         );
         const data = await response.json();
         console.log(data);
         setPosts(data);
      };
      fetchPost();
   }, []);

   // Delete with fetchAPI
   const deletePost = async (id) => {
      let response = await fetch(
         `https://jsonplaceholder.typicode.com/posts/${id}`,
         {
            method: 'DELETE',
         }
      );
      if (response.status === 200) {
         setPosts(
            posts.filter((post) => {
               return post.id !== id;
            })
         );
      } else {
         return;
      }
   };

   // Post with fetchAPI
   const addPosts = async (title, body) => {
      let response = await fetch('https://jsonplaceholder.typicode.com/posts', {
         method: 'POST',
         body: JSON.stringify({
            title: title,
            body: body,
            userId: Math.random().toString(36).slice(2),
         }),
         headers: {
            'Content-type': 'application/json; charset=UTF-8',
         },
      });
      let data = await response.json();
      setPosts((posts) => [data, ...posts]);
      setTitle('');
      setBody('');
   };

   const handleSubmit = (e) => {
      e.preventDefault();
      addPosts(title, body);
   };

   return (
      // ...
   );
};

export default App;

Here's an interactive scrim to walk you through this:

How to Handle Errors with Fetch API

In this section, we'll look at how to handle errors both traditionally and with async/await.

We can use the response data to handle errors in the Fetch API, or we can use the try/catch statement when using async/await.

Let's look at how we can do this typically in Fetch API:

const fetchPost = () => {
fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
   .then((response) => {
      if (!response.ok) {
         throw Error(response.statusText);
      }
      return response.json();
   })
   .then((data) => {
      console.log(data);
      setPosts(data);
   })
   .catch((err) => {
      console.log(err.message);
   });
};

You can read more about Fetch API errors here.

And for async/await we can use the try and catch like this:

const fetchPost = async () => {
   try {
      const response = await fetch(
         'https://jsonplaceholder.typicode.com/posts?_limit=10'
      );
      const data = await response.json();
      setPosts(data);
   } catch (error) {
      console.log(error);
   }
};

How to Consume APIs Using Axios

Axios is an HTTP client library based on promises that makes it simple to send asynchronous HTTP requests to REST endpoints. This endpoint in our case is the JSONPlaceholder Posts API, to which we will make GET, POST, and DELETE requests.

Here's an interactive scrim that'll walk you through the steps as you read:

How to Install and Configure an Axios Instance

Axios, unlike the Fetch API, is not built-in, so we will need to incorporate it into our project in order to use it.

You can add Axios to your project by running the following command:

npm install axios

Once you've successfully installed Axios, we can proceed to create an instance, which is optional but recommended as it saves us from unnecessary repetition.

To create an instance, we use the .create() method, which we can use to specify information such as the URL and possibly headers:

import axios from "axios";

const client = axios.create({
   baseURL: "https://jsonplaceholder.typicode.com/posts" 
});

How to Perform a GET Request in React With Axios

We will use the instance we declared earlier for to perform the GET request. All we will do is set the parameters, if any, and get the response as JSON by default.

Unlike the Fetch API method, no option is required to declare the method. We simply attach the method to the instance and query it.

useEffect(() => {
   client.get('?_limit=10').then((response) => {
      setPosts(response.data);
   });
}, []);

How to Perform a POST Request in React With Axios

As previously stated, you can use the POST method to send data to an endpoint. It functions similarly to the GET request, with the main difference being the requirement to include the method and an option to hold the data we are sending in:

const addPosts = (title, body) => {
   client
      .post('', {
         title: title,
         body: body,
      })
      .then((response) => {
         setPosts((posts) => [response.data, ...posts]);
      });
};

How to Perform a DELETE Request in React With Axios

We can perform delete requests using the delete method, which gets the id and deletes it from the API. We'll also use the filter method to remove it from the UI, as we did with the Fetch API method:

const deletePost = (id) => {
   client.delete(`${id}`);
   setPosts(
      posts.filter((post) => {
         return post.id !== id;
      })
   );
};

How to Use Async/Await in Axios

So far, we've seen how to make Axios requests using the promise syntax. But now let's see how we can use async/await to write less code and avoid the .then() chaining.

When we use async/await, all of our Axios requests will look like this:

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

const App = () => {
   const [title, setTitle] = useState('');
   const [body, setBody] = useState('');
   const [posts, setPosts] = useState([]);

   // GET with Axios
   useEffect(() => {
      const fetchPost = async () => {
         let response = await client.get('?_limit=10');
         setPosts(response.data);
      };
      fetchPost();
   }, []);

   // Delete with Axios
   const deletePost = async (id) => {
      await client.delete(`${id}`);
      setPosts(
         posts.filter((post) => {
            return post.id !== id;
         })
      );
   };

   // Post with Axios
   const addPosts = async (title, body) => {
      let response = await client.post('', {
         title: title,
         body: body,
      });
      setPosts((posts) => [response.data, ...posts]);
   };

   const handleSubmit = (e) => {
      e.preventDefault();
      addPosts(title, body);
   };

   return (
      // ...
   );
};

export default App;

How to Handle Errors with Axios

For promise-based Axios requests, we can use the.then() and.catch () methods, but for async/await, we can use the try...catch block. This is very similar to how we implemented the Fetch API, and the try...catch block will look like this:

const fetchPost = async () => {
   try {
      let response = await client.get('?_limit=10');
      setPosts(response.data);
   } catch (error) {
      console.log(error);
   }
};

You can read more about handling errors with Axios here.

Fetch API vs Axios

You may have noticed some differences, but let's put them in a handy table so we can compare Fetch and Axios properly.

These distinctions will help you decide which method to use for a specific project. Among these distinctions are:

Conclusion

In this guide, we learned how to consume REST APIs in React using either the Fetch API or Axios.

This will help you get started with API consumption in React, and from there you will be able to consume data in more complex ways and manipulate your APIs however you choose.

Embark on a journey of learning! Browse 200+ expert articles on web development. Check out my blog for more captivating content from me.

This REST endpoint/API could be an external API like the Google API, GitHub API, and so on – or it could be your own backend Node.js server.

In this guide, we will learn how to make Axios GET, POST, and DELETE API requests in React. This simply refers to how we retrieve data from an API, add data to the API, and then delete data from our API.

Get, Post, and Delete API requests are among the most common daily requests made by developers. After all, we will always need to fetch data to display on our application or perform certain operations, as well as add and delete data to/from our API.

Here's an interactive scrim about how to make Axios GET, POST, and DELETE API requests in React:

Why Axios?

The next question you might have is why we are using Axios, given that we will need to install an additional library. Here are some reasons:

• Axios uses XMLHttpRequest under the hood, and it is widely supported by most browsers, including older ones like Internet Explorer 11. Fetch(), on the other hand, is only compatible with Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.3+ (you can see the full compatibly table on CanIUse.com).

• When sending requests, Axios automatically signifies the data, unlike fetch(), which requires us to do it manually.

• Unlike the Fetch API, which requires you to check the status code and throw the error yourself, Axios has better error handling and can throw 400 and 500 range errors.

How to Get Started with Axios in React

To get started with Axios in your React application, first install React into your project with the following command:

npm install axios

Once that is completed, we will be using the JSONPlacholder Posts API to learn how to fetch these posts into our React application, add new posts, and finally delete a specific post with Axios.

Because this is a React application, we will use React hooks to gain access to states and other features. The hooks we'll be using are useEffect() and useState().

Essentially, we'll use the useEffect() hook to fetch posts as soon as the app renders/mounts, while the useState() hook will help us create a local storage for our data.

How to Create the Axios Instance

Once you've successfully installed Axios, it's a good idea to create an Axios instance. It's not required, but it saves us time.

To create an instance, we'll use the .create() method, which lets us specify information such as the URL and possibly headers:

import axios from "axios";

const client = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com/posts" 
});

How to Make a GET Request with Axios in React

You can use GET requests to get data from an endpoint, and it'll happen as soon as the app renders thanks to the useEffect() hook.

We'll use the variable and then attach the .get() method to make a GET request to our endpoint/API. Then we'll use a .then() callback to get back all the response data, because we already have an Axios instance that holds the baseURL assigned to a variable (client).

Using the .data property, we obtain the response data, which is the actual data from the response object.

const App = () => {
   const [posts, setPosts] = useState([]);

   useEffect(() => {
      client.get('?_limit=10').then((response) => {
         setPosts(response.data);
      });
   }, []);

   return (
      // ...
   );
};

export default App;

We set the data to the state we created, so it can be consumed within our application.

How to Consume a GET Request

After successfully implementing the GET request, the next step is to consume the data stored in the posts state.

Because we are querying for an array of ten posts, we will have to loop through this state to get these ten posts into our application:

// ...

return (
  <div className="app">
    <h2>All Posts 📫</h2>
    {posts.map((post) => {
       return (
          <div className="post-card" key={post.id}>
             <h2 className="post-title">{post.title}</h2>
             <p className="post-body">{post.body}</p>
             <div className="button">
                <div className="delete-btn">Delete</div>
             </div>
          </div>
       );
    })}
  </div>
);

// ...

How to Make a POST Request with Axios in React

You use a POST request to send data to an endpoint. It works similarly to a GET request, except that the function created to perform this task will be triggered when the form is submitted or otherwise.

This takes an object to send the data in and also adds the data to the state by spreading the previous data and then adding the new data:

const App = () => {
   const [title, setTitle] = useState('');
   const [body, setBody] = useState('');
   const [posts, setPosts] = useState([]);

   // ...

   const handleSubmit = (e) => {
      e.preventDefault();
      addPosts(title, body);
   };

   const addPosts = (title, body) => {
      client
         .post('', {
            title: title,
            body: body,
         })
         .then((response) => {
            setPosts([response.data, ...posts]);
         });
      setTitle('');
      setBody('');
   };

   return (
      // ...
   );
};

export default App;

When the form is submitted, we call the handleSubmit() function, which prevents the page from reloading. It also calls the main function addPosts() by passing the data entered into the form as a parameter.

How to Perform a DELETE Request in React

As the name implies, you use this to delete specific data from your endpoint/API as well as your UI – DELETE can handle both.

For this, we will use the DELETE method in conjunction with the client variable where we initialized Axios. This is how the request will look:

const App = () => {
   const [posts, setPosts] = useState([]);

   // ...

   const deletePost = (id) => {
      client.delete(`${id}`);
      setPosts(
         posts.filter((post) => {
            return post.id !== id;
         })
      );
   };

   return (
      // ...
   );
};

export default App;

Basically, there is a onClick"=() =>"deletePost"("post."id) method on the delete button that triggers the deletePost() method. We passed it the ID of the particular post we are attempting to delete so we can identify the post.

We delete it from the UI after we delete it from the endpoint/API by using the filter method to return an array that does not contain that element.

How to Make Requests in React with Async/Await

So far, we've seen how to make Axios requests with the promise syntax. Now, let's see how we can use async/await to write less code and avoid the .then chaining, which is much more difficult to understand.

To use async/await, first call async in the function. Then add the await syntax in front of the function when making a request and expecting a response to wait until the promise settles with the result.

When we use async/await, all of our Axios requests will look like this:

const App = () => {
   const [title, setTitle] = useState('');
   const [body, setBody] = useState('');
   const [posts, setPosts] = useState([]);

    // GET with Axios
   useEffect(() => {
      const fetchPost = async () => {
         let response = await client.get('?_limit=10');
         setPosts(response.data);
      };
      fetchPost();
   }, []);

   // DELETE with Axios
   const deletePost = async (id) => {
      await client.delete(`${id}`);
      setPosts(
         posts.filter((post) => {
            return post.id !== id;
         })
      );
   };

   // handle form submission
   const handleSubmit = (e) => {
      e.preventDefault();
      addPosts(title, body);
   };

   // POST with Axios
   const addPosts = async (title, body) => {
      let response = await client.post('', {
         title: title,
         body: body,
      });
      setPosts([response.data, ...posts]);
      setTitle('');
      setBody('');
   };

   return (
      // ...
   );
};

How to Handle Errors in Axios

When consuming data from an API, it is always recommended that we handle errors to help show the type of error we get. These errors may occur as a result of us passing incorrect data, making a request to the incorrect API, or experiencing a network error.

We can handle errors in Axios by using the .then() and .catch() methods, or by using the try...catch block for async/await Axios requests.

How to Handle Errors in Axios with the .catch Method

You can implement this by attaching a .catch() method to the .then() method to handle errors. Suppose the .then() method fails:

useEffect(() => {
  client
     .get('?_limit=10')
     .then((response) => {
        setPosts(response.data);
     })
     .catch((error) => {
        console.log(error);
     });
}, []);

How to Handle Errors in Axios with the try…catch Block

For the async/await scenario, the try...catch block will look like this:

useEffect(() => {
  const fetchPost = async () => {
     try {
        let response = await client.get('?_limit=10');
        setPosts(response.data);
     } catch (error) {
        console.log(error);
     }
  };
  fetchPost();
}, []);

You can read more about handling errors with Axios here.

Conclusion

In this tutorial, you learned how to use Axios, one of the most powerful HTTP client libraries, to perform the three basic API requests.

You can see the full implementation of how I built the post's application using React and Axios in this repository.

You'll see why you should use Axios as a data fetching library, how to set it up with React, and perform every type of HTTP request with it.

Then we'll touch on more advanced features like creating an Axios instance for reusability, using async-await with Axios for simplicity, and how to use Axios as a custom hook.

Let's dive right in!

Want Your Own Copy?‬ 📄

Click here to download the cheatsheet in PDF format (it takes 5 seconds).

It includes all of the essential information here as a convenient PDF guide.

Table of Contents

• What is Axios?
• Why Use Axios in React?
• How to Set Up Axios with React
• How to Make a GET Request (Retrieve Data)
• How to Make a POST Request (Create Data)
• How to Make a PUT Request (Update Data)
• How to Make a DELETE Request (Delete Data)
• How to Handle Errors with Axios
• How to Create an Axios Instance
• How to Use the Async-Await Syntax with Axios
• How to Create a Custom useAxios Hook

What is Axios?

Axios is an HTTP client library that allows you to make requests to a given endpoint:

This could be an external API or your own backend Node.js server, for example.

By making a request, you expect your API to perform an operation according to the request you made.

For example, if you make a GET request, you expect to get back data to display in your application.

Why Use Axios in React

There are a number of different libraries you can use to make these requests, so why choose Axios?

Here are five reasons why you should use Axios as your client to make HTTP requests:

1. It has good defaults to work with JSON data. Unlike alternatives such as the Fetch API, you often don't need to set your headers. Or perform tedious tasks like converting your request body to a JSON string.
2. Axios has function names that match any HTTP methods. To perform a GET request, you use the .get() method.
3. Axios does more with less code. Unlike the Fetch API, you only need one .then() callback to access your requested JSON data.
4. Axios has better error handling. Axios throws 400 and 500 range errors for you. Unlike the Fetch API, where you have to check the status code and throw the error yourself.
5. Axios can be used on the server as well as the client. If you are writing a Node.js application, be aware that Axios can also be used in an environment separate from the browser.

How to Set Up Axios with React

Using Axios with React is a very simple process. You need three things:

1. An existing React project
2. To install Axios with npm/yarn
3. An API endpoint for making requests

The quickest way to create a new React application is by going to react.new.

If you have an existing React project, you just need to install Axios with npm (or any other package manager):

npm install axios

In this guide, you'll use the JSON Placeholder API to get and change post data.

Here is a list of all the different routes you can make requests to, along with the appropriate HTTP method for each:

Here is a quick example of all of the operations you'll be performing with Axios and your API endpoint — retrieving, creating, updating, and deleting posts:

How to Make a GET Request

To fetch data or retrieve it, make a GET request.

First, you're going to make a request for individual posts. If you look at the endpoint, you are getting the first post from the /posts endpoint:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts/1";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(baseURL).then((response) => {
      setPost(response.data);
    });
  }, []);

  if (!post) return null;

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

To perform this request when the component mounts, you use the useEffect hook. This involves importing Axios, using the .get() method to make a GET request to your endpoint, and using a .then() callback to get back all of the response data.

The response is returned as an object. The data (which is in this case a post with id, title, and body properties) is put in a piece of state called post which is displayed in the component.

Note that you can always find the requested data from the .data property in the response.

How to Make a POST Request

To create new data, make a POST request.

According to the API, this needs to be performed on the /posts endpoint. If you look at the code below, you'll see that there's a button to create a post:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);

  function createPost() {
    axios
      .post(baseURL, {
        title: "Hello World!",
        body: "This is a new post."
      })
      .then((response) => {
        setPost(response.data);
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={createPost}>Create Post</button>
    </div>
  );
}

When you click on the button, it calls the createPost function.

To make that POST request with Axios, you use the .post() method. As the second argument, you include an object property that specifies what you want the new post to be.

Once again, use a .then() callback to get back the response data and replace the first post you got with the new post you requested.

This is very similar to the .get() method, but the new resource you want to create is provided as the second argument after the API endpoint.

How to Make a PUT Request

To update a given resource, make a PUT request.

In this case, you'll update the first post.

To do so, you'll once again create a button. But this time, the button will call a function to update a post:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);

  function updatePost() {
    axios
      .put(`${baseURL}/1`, {
        title: "Hello World!",
        body: "This is an updated post."
      })
      .then((response) => {
        setPost(response.data);
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={updatePost}>Update Post</button>
    </div>
  );
}

In the code above, you use the PUT method from Axios. And like with the POST method, you include the properties that you want to be in the updated resource.

Again, using the .then() callback, you update the JSX with the data that is returned.

How to Make a DELETE Request

Finally, to delete a resource, use the DELETE method.

As an example, we'll delete the first post.

Note that you do not need a second argument whatsoever to perform this request:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    axios.get(`${baseURL}/1`).then((response) => {
      setPost(response.data);
    });
  }, []);

  function deletePost() {
    axios
      .delete(`${baseURL}/1`)
      .then(() => {
        alert("Post deleted!");
        setPost(null)
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={deletePost}>Delete Post</button>
    </div>
  );
}

In most cases, you do not need the data that's returned from the .delete() method.

But in the code above, the .then() callback is still used to ensure that your request is successfully resolved.

In the code above, after a post is deleted, the user is alerted that it was deleted successfully. Then, the post data is cleared out of the state by setting it to its initial value of null.

Also, once a post is deleted, the text "No post" is shown immediately after the alert message.

How to Handle Errors with Axios

What about handling errors with Axios?

What if there's an error while making a request? For example, you might pass along the wrong data, make a request to the wrong endpoint, or have a network error.

To simulate an error, you'll send a request to an API endpoint that doesn't exist: /posts/asdf.

This request will return a 404 status code:

import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function App() {
  const [post, setPost] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    // invalid url will trigger an 404 error
    axios.get(`${baseURL}/asdf`).then((response) => {
      setPost(response.data);
    }).catch(error => {
      setError(error);
    });
  }, []);

  if (error) return `Error: ${error.message}`;
  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
}

In this case, instead of executing the .then() callback, Axios will throw an error and run the .catch() callback function.

In this function, we are taking the error data and putting it in state to alert our user about the error. So if we have an error, we will display that error message.

In this function, the error data is put in state and used to alert users about the error. So if there's an error, an error message is displayed.

When you run this code code, you'll see the text, "Error: Request failed with status code 404".

How to Create an Axios Instance

If you look at the previous examples, you'll see that there's a baseURL that you use as part of the endpoint for Axios to perform these requests.

However, it gets a bit tedious to keep writing that baseURL for every single request. Couldn't you just have Axios remember what baseURL you're using, since it always involves a similar endpoint?

In fact, you can. If you create an instance with the .create() method, Axios will remember that baseURL, plus other values you might want to specify for every request, including headers:

import axios from "axios";
import React from "react";

const client = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com/posts" 
});

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    client.get("/1").then((response) => {
      setPost(response.data);
    });
  }, []);

  function deletePost() {
    client
      .delete("/1")
      .then(() => {
        alert("Post deleted!");
        setPost(null)
      });
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={deletePost}>Delete Post</button>
    </div>
  );
}

The one property in the config object above is baseURL, to which you pass the endpoint.

The .create() function returns a newly created instance, which in this case is called client.

Then in the future, you can use all the same methods as you did before, but you don't have to include the baseURL as the first argument anymore. You just have to reference the specific route you want, for example, /, /1, and so on.

How to Use the Async-Await Syntax with Axios

A big benefit to using promises in JavaScript (including React applications) is the async-await syntax.

Async-await allows you to write much cleaner code without then and catch callback functions. Plus, code with async-await looks a lot like synchronous code, and is easier to understand.

But how do you use the async-await syntax with Axios?

In the example below, posts are fetched and there's still a button to delete that post:

import axios from "axios";
import React from "react";

const client = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com/posts" 
});

export default function App() {
  const [post, setPost] = React.useState(null);

  React.useEffect(() => {
    async function getPost() {
      const response = await client.get("/1");
      setPost(response.data);
    }
    getPost();
  }, []);

  async function deletePost() {
    await client.delete("/1");
    alert("Post deleted!");
    setPost(null);
  }

  if (!post) return "No post!"

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
      <button onClick={deletePost}>Delete Post</button>
    </div>
  );
}

However in useEffect, there's an async function called getPost.

Making it async allows you to use the await keword to resolve the GET request and set that data in state on the next line without the .then() callback.

Note that the getPost function is called immediately after being created.

Additionally, the deletePost function is now async, which is a requirement to use the await keyword which resolves the promise it returns (every Axios method returns a promise to resolve).

After using the await keyword with the DELETE request, the user is alerted that the post was deleted, and the post is set to null.

As you can see, async-await cleans up the code a great deal, and you can use it with Axios very easily.

How to Create a Custom useAxios Hook

Async-await is a great way to simplify your code, but you can take this a step further.

Instead of using useEffect to fetch data when the component mounts, you could create your own custom hook with Axios to perform the same operation as a reusable function.

While you can make this custom hook yourself, there's a very good library that gives you a custom useAxios hook called use-axios-client.

First, install the package:

npm install use-axios-client

To use the hook itself, import useAxios from use-axios-client at the top of the component.

Because you no longer need useEffect, you can remove the React import:

import { useAxios } from "use-axios-client";

export default function App() {
  const { data, error, loading } = useAxios({
    url: "https://jsonplaceholder.typicode.com/posts/1"
  });

  if (loading || !data) return "Loading...";
  if (error) return "Error!";

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  ) 
}

Now you can call useAxios at the top of the app component, pass in the URL you want to make a request to, and the hook returns an object with all the values you need to handle the different states: loading, error and the resolved data.

In the process of performing this request, the value loading will be true. If there's an error, you'll want to display that error state. Otherwise, if you have the returned data, you can display it in the UI.

The benefit of custom hooks like this is that it really cuts down on code and simplifies it overall.

If you're looking for even simpler data fetching with Axios, try out a custom useAxios hook like this one.

What's Next?

Congratulations! You now know how to use one of the most powerful HTTP client libraries to power your React applications.

I hope you got a lot out of this guide.

Remember that you can download this guide as a PDF cheatsheet to keep for future reference.

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

In this free book, we will build two simple projects and deploy them on Netlify. We will use Vue.js as our front-end framework, and use different technologies to build our projects.

If you follow this tutorial to the end, you will build a simplified version of Twitter and a single page application for a portfolio using the GitHub API.

What you need to know to follow this tutorial

To follow along, you will need at least some basic knowledge of HTML, CSS, and JavaScript.

Knowledge of Vue.js isn't required, as you will learn the basics first and then we'll move into building the projects together.

At the end of each section, you'll find that information in video form via a YouTube link/embed. That way you can watch the videos to cement your knowledge of what you just read.

Table of Contents

• Introduction
• How to Install Vue
• How to Create a Vue Instance
• How to Work with Templates in Vue
• Vue Directives
• Methods
• Conditionals
• Loops
• How to handle user inputs with events Handling
• Two way model binding (v-model)
• Computed Properties and methods
• Project: Simple Twitter Clone
• Component basics
• Project Update: Simple Twitter clone with components
• Axios and RestAPI
• Routing with VueRouter
• Final Project: build a Portfolio with VueJS, VueRouter, Axios, GitHub API
• Deploy Continuous deployment with BitBucket and Netlify

Introduction

VueJS is a JavaScript framework that has become really popular in recent years.

In this guide, we will start by looking at the fundamentals first, with a quick look at two libraries: VueRouter and Axios. We will use them to build a cool portfolio project at the end.

Click to view the video on YouTube.

How to Install Vue

You can use Vue in your projects by installing it using a package manager like NPM or by using its CDN. If you've never used Vuejs before, I suggest that you use the CDN, as it will be easier if you want to code along with me.

Click to view the Repository

Click to view the YouTube-Video or find it at the end of this section to reinforce what you've learned.

The Vue CDN

For the CDN, we only need to include the script tag below inside our HTML file:

<!-- Development version for prototyping and learning -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

Alternatively, you can use a production-ready script that uses a specific stable release, like this:

<!-- Production version -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

In production, Vue suggests using the optimized version to replace vue.js with vue.min.js.

There is also an ES Modules-compatible build:

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js'
</script>

How to Install Vue via NPM

If you plan to build large scale applications, I recommend installing via NPM like this:

npm install vue

As I said above, we will use the Vue CDN so that anyone can follow this guide. So our final HTML file will look something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VueJS Tutorial</title>

    <!-- vue development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>



    <script src="./main.js"></script>
</body>
</html>

Let's break this code down. First, we've add a basic markup for an HTML file. Then we've included the script tag for the VueJs framework.

In the end, before closing the body tag, we've added our main.js script where we placed all the JavaScript code for our application.

Let's now move to the next step and add our first Vue instance inside the main.js file.

How to Create a Vue Instance

Once you've installed Vue or included it via its CDN, you can create a Vue instance. You can do that using the new Vue() function. This function accepts an object of options.

If you read the documentation, you will see that the vue instance is often stored inside a variable called vm, but you can call it anything you like. I'll call it app during this guide.

So now, inside the main.js file you need to create a variable and store in it the Vue instance like so:

let app = new Vue({
    // all options goes here
})

The object you pass to the Vue instance is called the options object. Inside the options object, you can add all the options described in the Vue API reference pages to build our application.

The options object has properties divided into multiple sections:

• Data
• DOM
• Life Cycle Hooks
• Assets
• Composition
• Misc categories

The first property that you need to build you Vue application is used to connect Vue with a root DOM element. Then you will need some data options to work with.

Let's start by connecting the Vue instance with a root DOM element.

You can click to view the Repository here.

And you can click to view the YouTube-Video or find it at the end of this section so you can review what you've learned.

Options/DOM: How to select the root DOM element

The Options/DOM API gives you an el property that you can use to select an existing DOM element that Vue will use to mount your application instance.

The el property accepts a string that contains a CSS selector for the element or directly a DOM element.

NOTE: Vue discourages using the body or HTML tags and suggests using a different element as a mounting point.

Let's do it. Inside the body of the index.html file, you need to put the following code:

    <div id="app">
    </div>

Now you have a root element that you can use to connect the Vue instance. Back inside the main.js file, let's select this element inside the options object.

You can now use the el property to select the element you created with an id of app.

let app = new Vue({
    // all options go here
    el: "#app",
})

You now have an element to work with. You can move on to the next step and add to the options object the data object.

You can read more about it in the documentation here:[https://vuejs.org/v2/api/#Options-DOM]

Options/Data: How to add the data object (or function when used in a component)

When a new instance is created, it adds all properties found in its data object to the Vue reactivity system. And when a value in the data object changes, the view will reflect these changes. This is at the base of the VueJS reactivity system.

To explain it, let's see a practical example.

Create a data object

Inside the main.js file you can create a data property that has an object as its value, like so:

let app = new Vue({
    // all options go here
    el: "#app",
    data: {}
})

The data object can be defined directly inside the Vue instance like in the code above, or outside the instance like in the code below.

let dataObject = {}
let app = new Vue({
    // all options go here
    el: "#app",
    data: dataObject
})

You can pick the one you like.

Add properties to the Data Object

Since VueJs is a JavaScript framework, it's helpful to remember that what you know about JavaScript is still valuable here.

Vue is just a JavaScript object that has a number of methods and properties that you can use to simplify and speed up your workflow.

Let's add some properties to the data object to see how it works.

// Create a data object
let app = new Vue({
    el:"#app",
    // create a vue instance, add the data property and the dataObject created
    data: {
        alert: "This is an alert message! ",
        projects: [
            {title: "portfolio", languages: ["HTML", "CSS", "VueJS"]},
            {title: "grocery shop", languages: ["HTML", "CSS", "PHP"]},
            {title: "blog", languages: ["HTML", "CSS", "PHP"]},
            {title: "automation script", languages: ["Python"]},
            {title: "eCommerce", languages: ["HTML", "CSS", "PHP"]},
        ];
    }
})

With the code above, you simply add two properties to the data object: an alert property and a projects property.

The alert property just a string while the projects property is an array of objects.

Now that you have some data to work with, let's see how you can access and modify their values.

Manipulate properties in the data object

You can access and manipulate the properties of a data object using the variable that contains the Vue instance app. Then you can reference the properties using dot notation, like app.alert.

In the browser, if you open the console you can see that when you write app you get the Vue instance object. So, like any other object with dot notation, you get its properties and methods.

Let's try this out inside the console:

// Access the alert property in the data object
app.alert // This is an alert message!
// update a data property value
app.alert = "This is a new alert message!" 
app.projects

The code above does three simple things:

• the first line accesses the alert property and prints its content "this is an alert message"
• the second line assigns a new value to the alert property with the equals operator
• finally, the third line returns the value of the projects array.

You can also access the entire data object using the shortcuts $data or _data

Back in the console:

// Access the entrie data object
app.$data // {__ob__: Observer} option 1
app._data // {__ob__: Observer} option 2

You can read more about this in the documentation here: [https://vuejs.org/v2/api/#Options-Data]

Options Data Methods

The Vue instance gives you access to a number of properties and methods. You can access default methods and properties using the $ sign. It is used to differentiate Vue defined methods from those defined by the user.

There are a number of instance methods and properties predefined and split into four different categories:

• Instance Properties
• Instance Methods / Data
• Instance Methods / Events
• Instance Methods/life cycle hooks

For instance, with the following code, you can get the data and options objects or access the watch or the on methods.

app.$data // returns the data object
app.$options // returns the options object
app.$watch() // function that watched for changes on the vue instance
app.$on() // listen for a custom event on the vue instance

I won't dive deeper into this since it's out of the scope of this guide. But if you are interested and want to learn more, here is the documentation.

Lifecycle Hooks

Vue gives you access to a series of functions called lifecycle hooks. They allow you to run code at specific stages of the Vue initialization steps.

Inside all lifecycle hooks you have access to their this variable that points to the Vue instance.

You will see how this works in more detail in future sections. But for now this is a short summary of the available hooks and what they let you do:

• beforeCreate (you can run code before the Vue instance is created)
• created (you can run code after the Vue instance is created )
• beforeMount (you can run code before your element is mounted to the DOM)
• mounted (you can run code when the element is mounted to the DOM)
• beforeUpdate (you can run code before values are updated in the DOM)
• updated (you can run code after values in the DOM have been updated)
• beforeDestroy (you can run code before an instance is destroyed)
• destroyed (you can run code when an instance is destroyed)

During the course, we will often use the mounted hook. If you are curious to learn more about this topic, I suggest you look at the diagram in the documentation first. Find the lifecycle Hooks diagram here.

How to Work with Templates in Vue

VueJS uses mustache syntax {{ }} to render data from the Vue instance inside the HTML element.

Using this syntax you can grab properties and methods defined in the Vue instance. The property is then parsed and rendered to the page.

You can click to view the Repository here.

And you can click to view the YouTube-Video here here, or find it at the end of this section to review what you've just learned.

Text Data binding

This is called text data binding. Let's see an example of how you can bind data between the Vue instance and your template file.

<div id="app">
    <h1>{{ title }}</h1>
</div>

The code above has an h1 tag inside the root element with an id of app we defined in the previous chapter.

Inside the h1 tag you use the double curly brackets syntax to render onto the page the value of a property in the data object called that you called title.

You don't have a title property yet inside your data object, so let's add it.

Inside the main.js file

let app = new Vue({
    el: "#app",
    data: {
        title: "John Doe portfolio",
        projects: [
            {title: "portfolio", languages: ["HTML", "CSS", "VueJS"]},
            {title: "grocery shop", languages: ["HTML", "CSS", "PHP"]},
            {title: "blog", languages: ["HTML", "CSS", "PHP"]},
            {title: "automation script", languages: ["Python"]},
            {title: "eCommerce", languages: ["HTML", "CSS", "PHP"]},
        ]
    }
})

Now, with the code above you can render the content of the property title inside the h1 tag in your template. The final result will be something like this:

<h1>John Doe portfolio</h1>

However, with this method, you can only pass a string. If you want to use HTML tags inside the string these will not be parsed but instead will be shown as simple strings.

For instance if you assign the following string to the title property

    title: "John Doe <span class='badge'>Portfolio</span>"

And then try to render it inside our HTML like so:

<h1 class="title">{{title}}</h1>

The property title will be rendered as a plain string including the HTML tags ie. John Doe <span class='badge'>Portfolio</span>

Of course you can parse HTML too.

How to parse raw HTML

To render a raw HTML element we need to introduce another important Vue concept called directives.

In this case, you will use the v-html directive inside your HTML tag as an attribute and pass to it the property title.

When you're using Vue directives, the text inside the quotes is considered a JavaScript expression. This means that it's computed and its result is rendered.

Let's create a separate property for the title with HTML tags inside so that you can see how both render onto the page.

let app = new Vue({
    el: "#app",
    data: {
        title: "John Doe Portfolio", 
        titleHTLM : "John Doe <span class='badge'>Portfolio</span>",
        projects: [
            {title: "portfolio", languages: ["HTML", "CSS", "VueJS"]},
            {title: "grocery shop", languages: ["HTML", "CSS", "PHP"]},
            {title: "blog", languages: ["HTML", "CSS", "PHP"]},
            {title: "automation script", languages: ["Python"]},
            {title: "eCommerce", languages: ["HTML", "CSS", "PHP"]},
        ]
    }
})

Now inside your HTML file, you will use this {{}} syntax to render the property title. But on the tag where you want to render raw HTML, with the titleHTML property, you use the v-html directive instead.

<div id="app">
    <div class="title">{{ title }}</div>
    <div v-html="titleHTML"></div>
</div>

Both elements will now render correctly including the second property that has HTML tags inside.

NOTE: Rendering HTML can expose XSS vulnerabilities. Never use this approach on user-provided content.

Now that you know how to render data onto the page, let's dig deeper into directives.

If you want to read more, visit the documentation here.

Vue Directives

Inside your HTML files, you can use directives to interact with HTML attributes. A directive applies effects to the DOM when its expression changes.

You can click to view the Repository here

And you can click to view the YouTube-Video here, or you can find it at the end of this section to review what you've learned.

The v-bind directive on HTML attributes

So far, you have used the {{}} syntax to render something between HTML opening and closing tags. But inside an HTML tag you cannot use the {{ }} syntax.

So how do you connect an HTML attribute to the Vue instance? You use the v-bind directive instead which lets you access data object properties as you have done before.

The v-bind directive is one of the directives that take arguments which are specified after the colon. In our case here, what's specified after the colon is the HTML attribute name like id, class, href, src and so on.

If you need to dynamically assign an attribute like href or even a class, you can bind it with the Vue instance using the v-bind directive. It will then be able to get what's in the options object, like properties in the data object.

Let's see v-bind in action and start connecting the id and class attributes so you can assign them values dynamically with Vue.

Inside our index.html file:

<div id="app">
    <div v-bind:class="dynamicClass" v-bind:id="dynamicId">Dinamically assign a class and an id to the div</div>
</div>

Let's break the code above and see what it's doing.

First, you have a div tag inside the root element. Then you use the v-bind directive on the class and the id attributes.

Inside the quotes, you specify two properties that later you'll define inside the data object of your Vue instance.

Remember that when using Vue directives the content between quotes is treated as a JavaScript expression.

Let's define these two properties inside the Vue instance.

let app = new Vue({
    el: "#app",
    data: {
        title: "John Doe Portfolio", 
        titleHTLM : "John Doe <span class='badge'>Portfolio</span>",
        projects: [
            {title: "portfolio", languages: ["HTML", "CSS", "VueJS"]},
            {title: "grocery shop", languages: ["HTML", "CSS", "PHP"]},
            {title: "blog", languages: ["HTML", "CSS", "PHP"]},
            {title: "automation script", languages: ["Python"]},
            {title: "eCommerce", languages: ["HTML", "CSS", "PHP"]},
        ],
        dynamicId : "projects_section",
        dynamicClass : "projects"
    }
})

So you have defined dinamicId: "projects_section" and dynmicClass: "projects" properties and assigned them two values.

Thanks to the data binding on the attributes, your HTML tag will be rendered as follows (and you can now dynamically change your attributes values and see them change reactively):

<div id="projects_section" class="projects">Dynamically assign a class and an id to the div</div>

V-bind with Boolean values

With attributes using a boolean value, the v-bind directive works differently. It will show the attribute only if the property's value is true. In all other cases, it won't render the attribute and its content.

For the next example, you will use a button with the disabled attribute.

Inside your root HTML element:

    <div id="app">
        <button v-bind:disabled="disabled">You can't click this button</button>
    </div>

Inside a Vue instance:

let app = new Vue({
    el: '#app',
    data: {
    //disabled: false, // wont render the attribute
    //disabled: null, // wont render the attribute
    //disabled: undefined, // wont render the attribute
    disabled: true // renders the attribute
}
})

Only if the disabled property is set to true does the attribute become visible and render its property content.

    <button disabled>You can't click this button</button>

This is something to keep in mind when working with such attributes.

Another thing to consider is that bindings can include a single JavaScript expression, with some restrictions:

• only expressions are allowed
• only a single expression
• no statements
• no flow control tools, but the ternary operator works.

If you want to read more, visit the documentation here:[https://vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions]

So far we have seen only two Vue directives, v-html and v-bind. But there are a number of directives available, and here are some more (to list just a few):

• v-html
• v-bind
• v-if
• v-else-if
• v-else
• v-for
• v-on All directives have a v- prefix, but there is shorthand for v-bind (:) and v-on (@).

They work in the same way. Here's a quick reference for the v-bind and v-on directives:

<!-- Long syntax -->
<a v-bind:href="url">Some link</a>
<!-- Shot syntax -->
<a :href="url">Some link</a>
<!-- Long syntax with dynamic arguments -->
<a v-bind:[attribute_name]="url">Some link</a>
<!-- Shot syntax with dynamic arguments -->
<a :[attribute_name]="url">Some link</a>

Shorthand for v-on

<!-- Long syntax -->
<a v-on:click="runFunction">Some link</a>
<!-- Shot syntax -->
<a @click="runFunction">Some link</a>
<!-- Long syntax with dynamic arguments -->
<a v-on:[attribute_name]="runFunction">Some link</a>
<!-- Shot syntax with dynamic arguments -->
<a @:[attribute_name]="runFunction">Some link</a>

Now let's see what dynamic arguments are and how they work.

Dynamic arguments in Vue

Directives have been able to have dynamic arguments since Vue 2.6.0. You can use a JavaScript expression in the directive argument if you wrap it inside square brackets.

But there are some restrictions:

• expressions should evaluate to a string
• spaces and quotes are invalid

Let's see a practical example

    <a v-bind:[attribute_name]="url">Visit my Website</a>

Inside your data object you can define the directive arguments as if they were properties, where the property value is the name of your HTML attribute like hef in the following example:

let app = new Vue({
    el: '#app',
    data: {
        attribute_name: 'href',
        url: 'https://fabiopacifici.com'
    }
})

The code above renders the attribute name href and its value dynamically when you bind it using the v-bind directive.

The result will be this:

<a href="https://fabiopacifici.com">Visit my Website</a>

Dynamic events in Vue

You can apply the same concept to event directives like v-on. This directive does the job of the JavaScript event listener.

v-on accepts an argument like click, for example v-on:click="doSomething".

To apply the concept of dynamicity, let's create a v-on directive and use the square brackets after it to specify a dynamic event.

Inside the index.html file you will place the following code:

    <div id="app">
        <a v-on:[event_name]="runFunction">Some link</a>
    </div>

Let's break down the code above.

First you have your root element, the div with an id of app. Inside the root element you add an anchor tag <a>Some link</a>.

The anchor tag has a v-on directive in it. After the directive you specify a dynamic argument v-on:[event_name] where event_name will be a property inside your Vue instance that you can change as you need.

The v-on directive works like any event listener, so between quotes you need to specify the name of the function that you want to run when the event is triggered, therefore runFunction.

Now, inside your main.js file:

let app = new Vue({
    el: '#app',
    data: {
    event_name: "click"
    },
    methods: {
        runFunction() {
            console.log("test click function");
        }
    }
})

Let's review what the code above does.

First, you create the Vue instance. Then you add the event_name property inside the data object and you assign to it a value of click. This is the event you will listen for.

Finally, we said that the v-on directive runs a function when the event is triggered, therefore you need to write a method inside your Vue instance. So inside the methods object, create a new function called runFunction that will simply output a message inside the console.

The power of dynamic events is clear when you replace the value of the event_name property with a different event name.

Methods in Vue

So far we've learned how to bind data using the v-bind directive inside your template. In the next section, you will learn more directives – but before diving into that, let's quickly talk about how to store your functions.

You can check out the Repository here

And you can see the video version of this section on YouTube if you want to review what you learn.

Since you are working in a big object, the Vue instance function will take the name of the methods. And as you might guess, the Options object has a property called methods where you can store your functions as you do for your data.

Inside your Vue instance, define a method that you can call anything you like – just remember to use a naming convention that clearly describes your code.

let app = new Vue({
    el: '#app',
    data: {
        firstName: "Fabio",
        lastName: "Pacific" 
    },
    methods: {
        // es6 syntax
        getFullName(){
            return this.firstName + " " + this.lastName;
        }
        // es5 syntax
    /* getFullName: function(){

        } */
    }
});

In the code above, you created a method inside the methods object. You called it getFullName. Inside a method, you have access to the this keyword that refers to the object instance, so you can use it to access from a method the properties stored in the data object.

When you call the method getFullName the method will return a single string that contains both the first and the last name.

Now inside your HTML file, you can simply call the method as you did when you needed to access properties in the data object {{ getFullName() }}

<div>{{ getFullName() }}</div>

Now that you know how to create a method and where to put it in the Vue instance, let's move forward and learn more about directives.

Conditionals in Vue (v-if/v-else-if/v-else/v-show)

Now it's time to learn more about directives. We will start by looking at how conditionals work in VueJS. The first directive of this section is the v-if, which allows you to render blocks of code based on a certain condition.

You can click to view the Repository here.

And you can click to view the video on YouTube here or use it to review at the end of the section.

Like the if-else statements in vanilla JavaScript, the v-if will check if the returned value of a conditional expression evaluates to true. If so it will render the HTML element and everything you place inside it.

Since it's a directive, it works on a single element (HTML tag). If you want to extend its behaviour on multiple elements, then you need to wrap them inside a <template> tag.

The v-if directive works in the same way as the v-bind directive works: it has access to the properties in the data object and accepts an expression between its quotes.

If the returned value of the expression or the value of the data property you use evaluates to true, then the directive renders the HTML element. Otherwise it doesn't.

Of course, you can check for multiple conditions and end up rendering an element if none of these evaluates to true. You do that using v-if together with the v-else-if and v-else directives.

Let's see a simple example and write some code inside your main.js file to show or hide an element.

The first thing to note is that if you have a property that returns a boolean value, it is enough to use it inside the v-if directive to show/hide an element, like so:

<h1 v-if="showTitle">{{movieTitle}}</h1>

And a vue instance with a showTitle property set to true.

let app = new Vue({
    el: "#app",
    data: {
        movieTitle: 'Shining',
        showTitle: true,
    }
})

In such a case, you are saying show the title property only if the value of showTitle is true. If you change it to false, the title won't show.

You can put a simple expression inside the quotes of a v-if directive that once computed evaluates to a boolean.

<h2 v-if="age >= 18">{{movieTitle}}</h2>

Inside your main.js file

let app = new Vue({
    el: "#app",
    data: {
        movieTitle: 'Shining',
        age: 18,
    }
})

In the code above we wrote an expression on the v-if directive that checks if the age property is greater than or equal to 18. If the result is true then the h2 will be shown onto the page.

Now let's move to a more complex example and add another condition using the v-else-if.

v-if/v-else-if

In the following example, you will first create a v-if condition similar to the one above – but this time you'll check if the user is over 18 but under 21 using the && operator.

If true, then you'll show the time with an additional note. If false, and the user is over 21, then we will simply show the title of the movie.

<h2 v-if="age > 21">{{movieTitle}}</h2>
<h2 v-else-if="age > 18 && age < 21"> {{ movieTitle }} | Watch with an adult</h2>

Inside the Vue instance you could have an age property. But to make your simple program dynamic, you can instead use a prompt to ask the user their age.

let userAge = Number(prompt("What's your age?"))
let app = new Vue({
    el: "#app",
    data: {
        movieTitle: 'Shining',
        age: userAge,
    }
})

So the code here first asks the user their age, then stores the result as a number inside the variable userAge.

You'll later use the userAge variable inside the data object to assign a value to the age property so that based on its value you will render one element or the other.

Let's move forward and use the v-else directive to show a different message in case the user is under 18.

v-else directive:

The v-else directive works differently. You don't have to pass it anything. It simply enters into action when none of the previous conditions evaluate to a true value.

So the new HTML element is fairly simple:

    <div id="app">
        <h2 v-if="age > 21">{{movieTitle}}</h2>
        <h2 v-else-if="age > 18 && age < 21"> {{ movieTitle }} | Watch with an adult</h2>
        <p v-else> Sorry You are too young to see this movie</p>
    </div>

Here we have a p tag with a v-else directive attached. As you can see, it looks like an attribute without values (like the disabled or required HTML attributes).

Your JavaScript file has not changed.

let userAge = Number(prompt("What's your age?"))
let app = new Vue({
    el: "#app",
    data: {
        movieTitle: 'Shining',
        age: userAge,
    }
})

That's all you need to know about conditional rendering to be able to move forward with your first project. But if you want to learn more, here is the documentation: [https://vuejs.org/v2/guide/conditional.html]

You need to learn a few more things before you'll be able to build your first project, which is a simplified Twitter clone. The next topic is about Loops.

Loops in Vue

Let's go back to the previous example and learn how to use the v-for directive to output each project of the array onto the page.

You can click to view the Repository here

And you can click to view the YouTube-Video here, or you can find it at the end of this section to review what you've learned.

For our next task, it would be useful if we could use a loop, and the v-for directive is here to help.

Its syntax doesn't have much in common with a classic for loop in JavaScript, but rather with a Python for in loop or with the for in JavaScript loop used to iterate over objects.

With this directive, you specify the elements of the array and the single element between quotes using the syntax project in projects. Here, projects are the property inside the data object that contains an array of objects, and project is the single element of the array.

You can call this as you like, but keep in mind that what follows the in keyword must be an iterable from your data object while what comes before can be anything you like to refer to each element of the iterable.

In your case, project seems the most appropriate choice since you have an array of projects.

Your JavaScript file will look like this:

let app = new Vue({
    el: "#app",
    data: {
        name: "John Doe",
        title: "Portfolio",
        projects: [
            {title: "portfolio", languages: ["HTML", "CSS", "VueJS"]},
            {title: "grocery shop", languages: ["HTML", "CSS", "PHP"]},
            {title: "blog", languages: ["HTML", "CSS", "PHP"]},
            {title: "automation script", languages: ["Python"]},
            {title: "eCommerce", languages: ["HTML", "CSS", "PHP"]},
        ],

    }

});

Now inside the HTML file, let's use the v-for to render the title of each project.

    <div id="app">
        <h1>{{name}} {{title}}</h1>
        <ul>
            <li v-for="project in projects">{{project.title}}</li>
        </ul>
    </div>

In the code above, you used {{name}} {{title}} to render the main title for your portfolio. Then you used the v-for directive and specified inside the quests that you want to assign each element of the iteration to a project variable v-for="project in projects".

Now on each iteration, the project variable holds an object from which you can retrieve its properties using dot notation like so: {{ project.title }}.

One thing to note is that the v-for directive also gives you access to the index of the element at each iteration. You can store it in a variable as you did with the single element you called project.

To do that, you need to wrap them between parentheses and separate the element and its index with a comma, like so v-for="(project, index) in projects".

Also, note that when working with objects Vue can show an alert to inform you that the use of a key is recommended. This means that it expects a key to identify each element when it's rendered.

You can do this using the key attribute and bind it, for instance to an id property on the object or to another different property, like so

<div id="app">
    <h1>{{name}} {{title}}</h1>
    <ul>
        <li v-for="project in projects" :key="project.title">{{project.title}}</li>
    </ul>
</div>

Here you used the v-bind shorthand directive to bind the key attribute to the project.id property if it exists or to another property if not.

let app = new Vue({
    el: "#app",
    data: {
        name: "John Doe",
        title: "Portfolio",
        projects: [
            {title: "portfolio", languages: ["HTML", "CSS", "VueJS"]},
            {title: "grocery shop", languages: ["HTML", "CSS", "PHP"]},
            {title: "blog", languages: ["HTML", "CSS", "PHP"]},
            {title: "automation script", languages: ["Python"]},
            {title: "eCommerce", languages: ["HTML", "CSS", "PHP"]},
        ],

    }

});

v-for can also be used to iterate over objects. In such a case, you have access to the value, the key, and also the index like so v-for="(value, key, index) in object" where 'object' is a property in the data object.

If you want to learn more, visit the documentation here: [https://vuejs.org/v2/guide/list.html]

Let's now move on to another important feature of Vue: how to handle user inputs and events.

How to Handle User Input with Event Handling (v-on) in Vue

To make the application react to a user's input, Vue provides a straightforward directive called v-on. This is one of the directives that accepts arguments, similar to the v-bind directive.

With such a directive, it's easy to listen for events triggered by a user.

The v-on directive lets you run a function that executes a block of code when the user performs an action, like when they click on a button, hover on an element, or press a specific key on the keyboard.

You can check out the Repository here.

And you can view the video on YouTube here or at the end of this section to review what you've learned.

V-on Syntax and Events

There are two types of syntax we can use, the long-form or the short. They're equivalent, so pick the one you prefer. What follows is just a representation of the syntax, and I'll explain it in detail in a minute.

Long syntax: v-on:EventName='doSomething' Shot syntax: @EventName='doSomething'

There are many events you can listen to, such as:

• click
• submit
• mouseover
• mouseenter
• mouseleave
• keyup
• keydown
• keypress

But you can also create custom events (which you will see when you reach the components section).

Let's pick the long-form syntax: v-on:EventName='doSomething. I'll explain it more now.

First, you have the directive v-on. Then you have an argument that is the event name you want to listen for, like click. After that, the doSomething can be any method that you have defined inside the methods object of the Vue instance.

This method is like any other function that you define inside a JavaScript object. It can have parameters or not. If it has them, you can call the method and pass parameters to it as usual like this: doSomething(param, param_2, param3).

You can have something like this <div v-on:click="likeProject">Like</div> and when the user clicks on this element, it will trigger a method and run some code to increase a like counter inside a project.

Let's first create the HTML you need for that:

<div class="projects" v-for="(project,index) in projects">
    <h1>{{project.title.toUpperCase()}}</h1>
    <p>Lorem ipsum dolor sit amet.</p>
    <div>Like
        <i class="fas fa-heart fa-lg fa-fw" @click="likeProject(index)">
        </i>
        {{project.likes}}
    </div>
</div>

In the code here, first you'll use the v-for directive to loop over the array of projects. Note that you should use the syntax (project, index) in projects because you will need to pass the index to the like method that you defined earlier.

After that, you output some data onto the page (like the project name in uppercase letters) then the description, and a div tag with an icon for the likes (remember to add font awesome to get the icon).

On the heart icon, add the directive v-on using the short syntax @click="likeProject(index)" between quotes that you used to invoke your likeProject(index) method. Then pass to it the index as a parameter so you can find the current project the user clicked on.

Finally, you'll render the likes onto the page for the current project using the {{project.likes}} syntax.

Now it's time to go in the Vue instance and write your method.

let app = new Vue({
    el:"#app",
    data: {
        projects: [
            {title: "My first project", description: "A simplified Twitter clone", likes: 0},
            {title: "My second project", description: "Projects portfolio with GitHub", likes: 0},
        ]
    },
        methods: {
            likeProject(index){
                const project = this.projects[index]
                project.likes++
                console.log(project.likes)
            }

    }
});

As I said earlier, you needed to define a method to call when the user clicks on a link. So you create the likeProject method, which accepts a parameter that will be the index of the element the user clicked on.

You can then add a likes property inside your projects array and access it for the current project to increment its value every time the user clicks on your link.

How to access the original event

If for any reason you need to access the original DOM event, you could have used the special $event variable inside the method like this on the v-on directive: doSomething(param1, param2, $event). Let's see an example of that now.

You need to add the special variable in the method call on your v-on directive like so:

<i class="fas fa-heart fa-lg fa-fw" @click="likeProject(index, $event)">
        </i>

Then you can access the original event inside your method like so:

likeProject(index, event){
    console.log(event); // get the original event
    const project = this.projects[index]
    project.likes++
    console.log(project.likes)
}

Now that you know how the v-on directive works, let's improve our Likes example and put something more in it. We will use key modifiers in the next example, so let's quickly see what they are and what you can do with them.

Event Modifiers in Vue

With events, Vue provides access to a number of Event modifiers. They are divided into 4 main groups. You can add these modifiers to a directive to change the way your event behaves. They are like postfix and you can chain them using dot notation.

Below there is a quick reference.

Categories:

• event modifiers
• key modifiers
• system modifiers keys
• mouse buttons modifiers

Event Modifiers: .stop .prevent .capture .self .once .passive

Key Modifiers: You can add these modifiers to the @keyup listener to listen for when these keys are pressed or use them as a combination with the @click event to listen for a click+space, for example. @click.enter="doSomething"

.enter .tab .delete (captures both “Delete” and “Backspace” keys) .esc .space .up .down .left .right

System modifiers: With these modifiers, you can trigger mouse or keyboard event listeners when the corresponding key is pressed. .ctrl .alt .shift .meta .exact (allows control of the exact combination of system modifiers needed to trigger an event)

Mouse buttons modifiers: These modifiers allow you to trigger a mouse event listener if the corresponding mouse button is clicked.

.left .right .middle

If you want to learn more, read the docs here.

How to like a project with key modifiers

In the previous example, you used the v-on:click directive to trigger a mouse event listener that aimed to simulate a like on a project.

But the user was able to add as many likes they wanted by clicking on the icon.

In the next example, you will do things a bit differently.

• First, you will prevent the user from adding more than one like to each project,
• Then you will let the user remove a like
• Finally, you will keep the likes on the page even after the user refreshes the page.

Let's get started. This time you will use mouse button modifiers to listen for clicks. The left mouse button click will trigger the add like behaviour and the right mouse button click will trigger the remove behaviour.

Inside your HTML file:

<div id="app">

    <!-- Users can like a project with a left click and dislike it with right click -->

        <div class="projects" v-for="project in projects">
            <h1>{{project.title.toUpperCase()}}</h1>
            <p>Lorem ipsum dolor sit amet.</p>
            <div>Like 
                <i class="fas fa-heart fa-lg fa-fw" 
                    @click.left="addLike(project)" 
                    @click.right="removeLike(project, $event)">
                </i> 
               {{project.likes}}
            </div>
        </div>


</div>

In the code above you have taken what you had before and simply added a left mouse button key modifier to the click event @click.left. Then you invoked the addLike method. This will make your project like counter increase by one as we have seen before.

Then you added another event listener to the same element, but this time you used the .right mouse button key modifier to listen when the user clicks on our icon using the right button @click.right="removeLike()".

In the remove like method, you have also passed the special variable $event so that you can use the original event later in your method to prevent its default behaviour and open the contextual menu.

But we said earlier that you can also chain key modifiers and indeed there is a .prevent key modifier that you can use here instead of the $event variable. You could do the same like this: @click.right.prevent="removeLike(project)"

Let's see how to structure your main.js file:

let app = new Vue({
    el: "#app",
    data: {
        name: "John Doe",
        title: "Portfolio",
        projects: [
            {title: "My first project", description: "A simplified Twitter clone", likes: 0},
            {title: "My second project", description: "Projects portfolio with GitHub", likes: 0},
        ]
    },
    methods: {
        addLike(project){
           console.log(project)  
        },
        removeLike(project, event){
            console.log(project)
            console.log(event)
        }
    }

});

So in the data object, you have a projects property that is an array of objects. Each object has a likes property that you will increment or decrement depending on what mouse button the user clicks.

Inside the methods object, you created the two methods you referenced in your v-on directives addLike() and removeLike(). For now, you are only logging to the console the project parameter value and the event value. You will implement the logic in a minute.

Let's start with the add likes method – it could look like this:

addLike(project){
    const projectTitle = project.title;
    if(!localStorage.getItem(projectTitle)) {
        project.likes++;
        localStorage.setItem(projectTitle, true);
    }              
}

There are a few things going on here. In the first line, you're storing the project title inside the projectTitle variable. Then, you said you wanted data to persist if you refresh the page so you are using the localStorage API to store information inside the client browser.

You increment the likes count by one, but you do that depending on a value inside the local storage.

You can do this by first checking to see if there is a key in the localStorage matching your project title, if(!localStorage.getItem(projectTitle)).

If this evaluates to false, then you will run the code inside the if block and first increment the likes project.likes++.

Second, use the .setItem() method of the local storage API to set a key-value pair with the project title as the key and a boolean value as its value localStorage.setItem(projectTitle, true).

To put an item in the local storage, you'll use localStorage.setItem(). The set item method accepts a key-value pair. Your key will be the title you saved in the variable projectTitle and the value will the boolean value true.

Now let's see if this works.

removeLike(project, event){
    event.preventDefault(); // This can be omitted if we use the prevent key modifier
    const projectTitle = project.title;
    if(project.likes > 0 && localStorage.getItem(projectTitle)) {
        project.likes--;
        localStorage.removeItem(projectTitle);
    }
}

This function does the opposite of the previous. When the user clicks their right mouse button, the method removeLikes() is executed and you do the following:

First things first, you need to prevent its default behaviour. Otherwise when the user right-clicks on the icon, the contextual menu will pop up and we don't want that. So, you'll use the event.preventDefault() method on the original event that is represented by the event parameter on your method.

Alternatively, you can omit this if you use the prevent key modifier in the v-on directive @click.right.prevent="removeLike(project).

The next step is to grab the project title. Since you also passed a parameter to the method to represent the current project object removeLike(project, event), you can store the project title in a variable projectTitle.

Then you need to make a couple of checks. First, you want to decrement the likes only if its value is greater than zero. Then you want to make sure the project title is in the local storage as a key with a value.

So, in your condition, you have done both checks if(project.likes > 0 && localStorage.getItem(projectTitle)). Now, if both conditions evaluate to true, the code inside the if block can run.

First you remove the like by decrementing its value project.likes--. Then you remove the project title from the local storage using the removeItem method and pass to it the key you want to remove (which is the project title localStorage.removeItem(projectTitle)).

To put it all together, you should now have the following code:

let app = new Vue({
    el: "#app",
    data: {
        name: "John Doe",
        title: "Portfolio",
        projects: [
            {title: "My first project", description: "A simplified Twitter clone", likes: 0},
            {title: "My second project", description: "Projects portfolio with GitHub", likes: 0},
        ]
    },
        methods: {
        addLike(project)
        {
            //console.log(project, "like");
            const projectTitle = project.title;
            // check if the current project is not in the local storage
            if(!localStorage.getItem(projectTitle)) {
                // set the item in the storage and increase the likes counter
                project.likes++;
                localStorage.setItem(projectTitle, true);
            }

        },
        removeLike(project){ 
            const projectTitle = project.title;
            console.log(project, "dislike");  
            if(project.likes > 0 && Boolean(localStorage.getItem(projectTitle))) {
                project.likes--;
                localStorage.removeItem(projectTitle);
            }

        }
    },
    mounted(){
        this.projects.forEach(project => {
            if(localStorage.getItem(project.title) !== null) {
                project.likes = 1; 
            }
        });
    }

});

To make the code work, you also need to add a life cycle hook called mounted. This will let you run code when the root element is mounted on the Vue instance. With it, you can check if the localStorage has a key corresponding to your project title and if so, update the value of the likes counter.

And your HTML is still the same:

<div id="app">
    <!-- Users can like a project with a left click and dislike it with right click -->

    <div class="projects" v-for="project in projects">
        <h1>{{project.title.toUpperCase()}}</h1>
        <p>Lorem ipsum dolor sit amet.</p>
        <div>Like 
            <i class="fas fa-heart fa-lg fa-fw" 
                @click.left="addLike(project)" 
                @click.right="removeLike(project, $event)">
            </i> 
            {{project.likes}}
        </div>
    </div>
</div>

Remember that you can get rid of the $event variable passed to the removeLike method by using the event key modifier like so: @click.right.prevent="removeLike(project)"

You have learned a lot so far! And now that you have seen key modifiers in action, we can move forward to the next topic: two-way model binding and the v-model directive. Then we'll start building our Twitter clone.

Two Way Model Binding (v-model) in Vue

All right, so far we have seen how to bind properties from the data object to our HTML tags and inside attributes, how to loop over a sequence of elements and, how to display conditionally elements onto our template with conditionals.

We have covered how to define methods inside the methods object so that we can perform more complex operations on our data and, we have learned how to work with events using the v-on directive.

In the next section, we will look at how Vue opens a two-way communication channel between a form's input and, a property defined inside the data object. Then we will use this knowledge to build our first project together.

You can check out the Repositoy here.

And you can view the video on YouTube here or at the end of the section if you want to review what you've learned.

How does the v-model directive work?

The v-model is another Vue directive. You can use it out of the box, and it's useful to simplify the way an input tag can communicate with a Vue instance's property in the data object.

It works like all the other directives. The main difference is that when it's implemented, your application will listen for changes inside the input with this v-model directive and update the attached property's value immediately inside the data object and vice-versa.

It is effectively a two-way communication channel between your template and the Vue instance. It's the Vue way to interact with user input and simplify your life as a developer.

Let's look at a straightforward example.

How to use the v-model on an input tag

First, you need an input tag inside the element you defined as the root element in the Vue instance, the div with an id of app.

<div id="app">
    <h2>What do you want to tweet about today?</h2>
    <input type="text" v-model="tweet" placehoder="What's happening today?">
</div>

In the HTML you have an input tag, which has the v-model directive attached to it as an HTML attribute. Anything between quotes is computed as a JavaScript expression, so you write the name of a property tweet that you will create inside the Vue data object.

So let's do it.

let app = new Vue({
    el: '#app',
    data: {
        tweet: ""
    }
});

So now you have a Vue instance and, in it, you have a data object with a tweet property that has an empty string as its value.

If you open the console and inspect the Vue element, you can see the two-way data binding in action.

By changing the value of the tweet property, you will immediately update the value inside the input tag and vice-versa.

You have this tweet property in the data object and you already know how to render its content onto the page. So now you can update your markup and add a paragraph under the input tag to see the value dynamically changing while you type.

<div id="app">
    <h2>What do you want to tweet about today?</h2>
    <input type="text" v-model="tweet" placehoder="What's happening today?">
    <p>{{tweet}}<p>
</div>

How cool is that? Now you can see the tweet property changing in real-time as you type.

That's the two-way data binding. If you change the content of the tweet property directly it will be reflected in your template, too.

If you want to learn more, make sure to read the official Documentation too.

How to build a tweet box

Now, let's raise the bar a little and build something together.

• We will create a simple textarea with a submit button,
• We will display the number of characters the user has left while they are typing so that they can submit the form without exceeding the max number of characters allowed.
• Like in a tweet, the maximum number of characters will be 200.

How to define the initial markup

Now you need to define a markup. So inside our index.html file, write the following code:

<div id="app">
    <h2>What do you want to tweet about today?</h2>
    <form v-on:submit.prevent="submitData">
       <!-- Code here -->

    </form>
    <!-- More code here -->
</div>

First you have first created your root element for the Vue instance so that it can monitor the markup and do its magic.

Then you created a form tag with an event listener using the directive v-on, which listens for the submit event and runs a function submitData that you still have to create.

You also added the .prevent modifier so that the page doesn't refresh when you submit the form.

How to define the Vue instance and methods

Let's define our Vue instance and create the submitData method so that you can use it later when you need it.

let app = new Vue({
    el: '#app',
    data: {
        // data object props here
    },

    methods: {
          submitData(){
             // Code here
        }
    },

});

How to add a text area and a submit button

Now back to the HTML: let's add the text area inside your form.

<div id="app">
    <h2>What do you want to tweet about today?</h2>
    <form v-on:submit.prevent="submitData">
       <!-- Code here -->
        <div class="form_group">
            <label for="name">Tweet</label>
            <textarea name="tweet" id="tweet" cols="80" rows="10" v-model="tweet" maxlength="200"></textarea>

        </div>

        <button type="submit">Tweet</button>

    </form>
    <!-- More code here -->
</div>

Inside the form tag, you create a label and a textarea for your tweet box. On the textarea you use the directive v-model to bind the textarea value to a tweet property and vice-versa. So now when one changes the other changes, too.

NOTE: The v-model directive is used on form elements like inputs, text areas, check box, and more.

After the textarea you put a button of type submit so that when a user clicks it the form's data are sent to your application's submitData() method and you can process them.

How to add properties to the Vue instance

Now inside your JavaScript file, you need to create the tweet property in the data object and do something with this information so that you can later show a list of tweets sent.

We also said that we want to limit the characters to 200 and show an error when they're in excess.

So let's add a few more properties here like:

• tweet for the current tweet message that the user inputs in the text area
• tweets for the list of tweets
• max_length for the characters limit

let app = new Vue({
    el: '#app',
    data: {
        tweets: [],
        tweet: "",
        max_length: 200,  
    },

    methods: {
          submitData(){
              /* Handle the tweet */
        }
    },

});

So now with the tweets property as an array and using the two-day binding between the tweet property and the textarea, you can push all tweets inside the tweets array when the user submits the form by triggering the submitData method.

How to implement the character counter

Before implementing the submitData method, you can show a character counter while the user types in the textarea.

Let's implement this feature so the user knows if they can submit the tweet or not.

Back in the HTML file, you can add a div with a couple of span elements and use a v-if directive to check the length of the character. It'll show the counter while the user is within the characters limit, otherwise it'll show an error message.

<div id="app">
    <h2>What do you want to tweet about today?</h2>
    <form v-on:submit.prevent="submitData">
        <div class="form_group">
            <label for="name">Tweet</label>
            <textarea name="tweet" id="tweet" cols="80" rows="10" v-model="tweet"></textarea>        
        </div>

        <button type="submit">Tweet</button>

    </form>
    <!-- Show character limits here -->
    <div>
        <span v-if="tweet.length < max_length"> {{ `Max: ${tweet.length} of ${max_length} characters` }}
        </span>
        <span class="errorMessage" v-else>{{`Max char limit reached! excess chars: ${max_length - tweet.length}`}}</span>
    </div>

</div>

The code above uses two-way data binding between the tweet property and the textarea to find out if the user has reached the character limit that you defined as the max_lenght property.

Since the tweet property is connected to the textarea, you can use the v-if directive combined with the tweet.length and the max_length properties to make the comparison.

Now, every time the user types something in the textarea, the string saved in the tweet property increases by one character. Then you can use the .length property to see how long the whole string is and compare it against your max_length property.

You use the directive v-if="tweet.length <= max_length" to make your comparison. When this comparison returns true, the user will see the span tag with its content, the counter.

Inside the span tag, you used the moustache syntax to show the user the current length of the property tweet and the character limit.

<span v-if="tweet.length < max_length"> {{ `Max: ${tweet.length} of ${max_length} characters` }}</span>

After the v-if directive, a v-else directive handles the error message that you show to the user when there are no characters left to use.

Here the content of the span element shows a message that tells how many characters there are in excess by subtracting the tweet length from the max_lenght property.

<span class="errorMessage" v-else>{{`Max char limit reached! excess chars: ${max_length - tweet.length}`}}</span>

How to submit the form

All that's left is to add the tweet to the list of tweets and show them on the page when the user submits the form.

Let's complete the submitData method so that every time it's executed it pushes a new object to the tweets array.

Inside the methods object the submitData methods now looks like this:

 submitData(){
    if (this.tweet.length <= this.max_length) {
        this.tweets.unshift(this.tweet);
        this.tweet = "";
    } 
}

The method above first checks if the length of the tweet property is less than or equal to the max_length property. If the condition evaluates to true, then you can add the tweet content to the array using the unshift method (which adds it to the beginning of the array).

Finally, you need to clear the value of the tweet property. You can do this by assigning to it an empty string again.

NOTE that since you are inside a method, you need to use the this keyword to grab properties and eventually methods inside the Vue instance.

How to show a list of tweets

Now, you can also show a list of tweets in your template.

To do that you will use a v-for directive and loop over the tweets array to show each tweet.

<ul>
    <li v-for="text in tweets">{{text}}</li>
</ul>

Put it all together

The final code now looks like this:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VueJs v-model</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- Fontawesome CDN -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css"
        integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
    <!-- VueJS CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <style>

    </style>
</head>

<body>
    <div id="app" class="container">

        <h2>What do you wanna tweet about today</h2>

        <!-- Tweet form -->
        <form v-on:submit.prevent="submitData">

            <div class="form-group">
                <label>Tweet</label>
                <textarea class="form-control" cols="30" rows="5" v-model="tweet"></textarea>
            </div>

            <button type="submit" class="btn btn-primary">Tweet</button>
        </form>

        <!-- Alert the user  -->
        <div class="my-3">
            <span v-if="tweet.length < max_length">
                {{ ` Max: ${tweet.length} of ${max_length} characters` }}
            </span>
            <span class="alert alert-danger" v-else> {{ `Max char limit reached! excess characters: ${max_length -
                tweet.length} ` }}</span>

        </div>

        <!-- Tweets message -->
        <ul>

            <li v-for="tweet in tweets">
                {{tweet}}
            </li>
        </ul>

    </div>

    <script src="./main.js"></script>

</body>

</html>

Our final javascript file

let app = new Vue({
    el: '#app',
    data: {
        tweet: "",
        tweets: [],
        max_length: 200        
    }, 
    methods: {
        submitData(){
            // Handle the tweet submission
            if(this.tweet.length <= this.max_length){
                this.tweets.unshift(this.tweet);
                this.tweet = "";
            }
        }
    }
})

Improvements you can make

If you take this bit of code from your index.html file, there is something you can do to clean up our code...

<!-- Show the max char messages -->
<div>
    <span v-if="tweet.length < max_length"> {{ `Max: ${tweet.length} of ${max_length} characters` }}
    </span>
    <span class="errorMessage" v-else>{{`Max char limit reached! excess chars: ${max_length - tweet.length}`}}</span>

</div>

To clean this template file, we can follow two approaches that are exactly the same, except that one is cached and the other one isn't.

• Computed Properties (cached)
• Methods (not cached)

In the next section, we will learn what computed properties are and how they differ from methods.

Computed Properties and methods

You should use computed properties instead of in-template expressions for complex logic that has the scope of changing the presentation of our data, not the data itself.

If we need to change the data, then you should use methods instead. Computed properties are cached based on their dependencies, meaning that it will re-evaluate only when its dependencies have changed.

With computed properties, the result of the previously run function is returned if the dependencies have not changed.

You can view the repository here and watch the video on YouTube here. The video is also listed at the end of this section so you can review what you've learned.

In the following example, we will use computed properties but we could also use methods. Generally speaking, we use computed properties when we have an expensive operation that we want to execute and cache so that the next time we don't have to run it again unless something has changed.

Let's implement a computed property for the following messages. Our HTML file will now change from this:

<!-- Show the max char messages -->
<div>
    <span v-if="tweet.length < max_length"> {{ `Max: ${tweet.length} of ${max_length} characters` }}
    </span>
    <span class="errorMessage" v-else>{{`Max char limit reached! excess chars: ${max_length - tweet.length}`}}</span>

</div>

to this much cleaner version:

<!-- Show the max char messages -->
<div>
    <span v-if="tweet.length < max_length"> {{ maxCharsText }}
    </span>
    <span class="errorMessage" v-else>{{errorMessage}}</span>

</div>

We have replaced the contents of both spans with two new properties that will be placed as methods inside our computed object.

Now inside our Vue instance, we will create a new object called computed where we will define two methods that will return the messages we had before.

let app = new Vue({
    el: '#app',
    data: {
        tweets: [],
        tweet: "",
        max_length: 200,  
        error: ""
    },
    // Computed Properties
 computed: {
        maxCharsText: function(){
            return `Max: ${this.tweet.length} of ${this.max_length} characters`;
        },
        errorMessage: function(){
            return `Max char limit reached! excess chars: ${this.max_length - this.tweet.length}`
        }
    },
    // Methods
 methods: {
          submitData(){
              if (this.tweet.length <= this.max_length) {
                  this.tweets.unshift(this.tweet);
                  this.tweet = "";
              } 
        }
    },

});

The first method maxCharsText returns exactly the same string we had before inside our HTML file. The only difference is that we are using the keyword this to reference the properties we needed to grab inside the Vue instance this.tweet.length and this.max_length.

The second method works in the exact same way and it also uses the keyword this to pick the properties defined in the Vue instance this.max_length and this.tweet.length.

All together

<div id="app">
    <h2>What do you want to tweet about today?</h2>
    <form v-on:submit.prevent="submitData">
        <div class="form_group">
            <label for="name">Tweet</label>
            <textarea name="tweet" id="tweet" cols="80" rows="10" v-model="tweet"></textarea>

        </div>

        <button type="submit">Next</button>

    </form>

    <div>
        <span v-if="tweet.length < max_length"> {{ maxCharsText }}
        </span>
        <span class="errorMessage" v-else>{{errorMessage}}</span>

    </div>
    <ul>
        <li v-for="text in tweets">{{text}}</li>
    </ul>
</div>

JavaScript file

let app = new Vue({
    el: '#app',
    data: {
        tweets: [],
        tweet: "",
        max_length: 200,  
        error: ""
    },
    // Computed Properties
 computed: {
        maxCharsText: function(){
            return `Max: ${this.tweet.length} of ${this.max_length} characters`;
        },
        errorMessage: function(){
            return `Max char limit reached! excess chars: ${this.max_length - this.tweet.length}`
        }
    },
    // Methods
 methods: {
          submitData(){
              if (this.tweet.length <= this.max_length) {
                  this.tweets.unshift(this.tweet);
                  this.tweet = "";
              } 
        }
    },

});

If we want to use methods instead of computed properties, we can simply move both methods from the computed object inside the methods object and invoke them with parenthesis inside our HTML file like so:

<div>
    <span v-if="tweet.length < max_length"> {{ maxCharsText() }}
    </span>
    <span class="errorMessage" v-else>{{errorMessage() }}</span>

</div>

Just remember that computed properties are cached while methods are not. If you want to learn more make sure to read the official documentation.

How to Create a Simple Twitter Clone

Now, let's put together everything we've learned so far and and build our very first project. It will be a minimalist and simplified twitter-like web application.

We want to create a simple application that has some kind of registration form, a box to add new tweets, and a section where we can show all tweets. We also want to be able to remove tweets.

All data must be persistent so that after the page is refreshed the list of tweets is still visible while the registration form will be hidden.

You can watch the video on YouTube here or at the end of this section if you want to review.

You can also view the repository here.

Define our tasks

Let's break this down into large tasks first. Then we will see what we need to do to complete each one.

• create a registration form
• create a tweets box form
• create a tweets section

To do our project we need to research what tools we need to use to achieve our goals, so lets put them down:

• VueJS (application logic)
• localStorage (make data persistent)
• font awesome (icons)

This application has no database so we are unable to record multiple users and their tweets. It's just a proof of concept, something we build to use our new knowledge.

Create the project structure

Now that we know what to do, let's start by creating our project structure and importing the tools we need to complete the first task, the registration form.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple tweetter clone</title>
    <!-- CDN Fontawesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

    <!-- VueJS development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- Style sheet -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
<div id="app">
    <!-- Register an account -->

    <!-- Add a tweet -->

    <!-- Show all tweets -->

</div>
<!-- Link our main.js file -->
<script src="./main.js"></script>
</body>

</html>

Now that our HTML file is ready, let's create the main.js file and create a Vue instance.

let app = new Vue({
    el: '#app',
    data: {

    },
    methods: {

    }

});

Finally, we need to create a style.css file that we will place for now in the root folder of our project.

We will use a CSS file that I have already written, and you can download it from here.

OK, our basic structure is ready to go. Inside our HTML file, we have some comments that reflect our 3 main tasks: create a registration form, create an add tweet box and, show a list of tweets.

Let's start with the first task and simulate a registration form.

How to simulate a registration form - HTML

Inside the root element <div id="app"></div> we need to create a registration form with the following fields: name, email, password, and a submit button. The form is contained in a card so we will wrap everything in a div and assign to it a card class.

The form won't submit data to a server, but will simply simulate a registration and update some property in the data object of the Vue instance.

We will place the following code inside our HTML file:

<!-- Register an account -->
<div class="card">
    <i class="fab fa-twitter fa-lg fa-fw"></i>

    <h2>Create your account</h2>
    <form v-on:submit.prevent="registerAccount">
        <div class="form_group">
            <label for="name">Name</label>
            <input type="text" v-model="name" maxlength="25" required>
        </div>
        <div class="form_group">
            <label for="email">Email</label>
            <input type="email" v-model="email" maxlength="25" required>
        </div>
        <div class="form_group">
            <label for="password">Password</label>
            <input type="password" v-model="password" maxlength="16" required>
        </div>
        <button type="submit">Register</button>
    </form>

</div>

Let's break this down. First, the form tag has a v-on directive with a submit argument so it will listen for a submit event. It also has an event modifier .prevent so when we hit the submit button the page doesn't refresh.

Inside the v-on directive there is a method called registerAccount that we need to create inside the methods of the Vue instance.

Inside the form, we have the three input fields: name, email, and password with labels. We wrapped each field inside a div with a class of form_group. Later we can replicate the style of the Twitter registration fields and show a character counter.

Each input field has a v-model directive that binds the input to its data property.

How to simulate a registration form - Vue

Let's move on to the Vue instance to make the binding between the form and the data object properties.

Here we also need a place where we can store the details that the user submits so we will create another property for that.

Looking at the input fields, we also put a maxlength property on them, which is 25 for the name and email and 16 for the password.

Like we did previously when we learned about the v-model, we can create a property for these limits so that we can use it to show the user how many characters the user has left.

The Vue instance will look like this:

let app = new Vue({
    el: '#app',
    data: {
        userData: {}
        name: "",
        email: "",
        password: "",
        max_length: 25,
        max_pass_length: 16
    },
    methods: {
        registerAccount(){
            // record user details
            // add registration to localStorage
            // clear the registration fields

        }
    }

});

Let's break this down. First inside the data:{} object, we defined an object to store and retrieve the userData. Then we added the properties name, email, and password to make the two-way data binding work. Finally we added the max_length and max_pass_length propeties.

How to show input character counter

OK, now that we have a binding between the input fields and our properties, we can show a character counter to the user while they're typing.

This is fairly simple – all there is to do is to show the length of each input property and compare it with the max length properties we have set in the Vue instance.

<div class="form_group">
    <label for="name">Name
        <span> {{ name.length + '/' + max_length }}</span>
    </label>
    <input type="text" v-model="name" :maxlength="max_length" required>
</div>

So here we created a string using an in-template expression. We've shown the length of the name property and the value of the max_length so that while the user types we show something like this: 13/25.

We've also used a v-bind directive on the maxlength attribute so that its value is bound to the value of the property we defined in the Vue instance. So in case we want to change it we can do so in one place.

We will do the same for the other fields.

<form id="register" v-on:submit.prevent="registerAccount">
    <div class="form_group">
        <label for="name">Name
            <span> {{ name.length + '/' + max_length }}</span>
        </label>
        <input type="text" v-model="name" :maxlength="max_length" required>
    </div>
    <div class="form_group">
        <label for="email">Email
            <span> {{ email.length + '/' + max_length }}</span>
        </label>
        <input type="email" v-model="email" :maxlength="max_length" required>
    </div>
    <div class="form_group">
        <label for="password">Password
            <span> {{ password.length + '/' + max_pass_length }}</span>
        </label>
        <input type="password" v-model="password" :maxlength="max_pass_length" required>
    </div>
    <button type="submit">Register</button>

</form>

How to add the logic to the registerAccount method

Now it's time to work on the form submission logic. We will simply populate the object stored in the property userData when the user submits the form.

Inside the registerAccount method we will add the details the user passes and build our object.

 registerAccount(){
            // record user details
            this.userData.name = this.name,
            this.userData.email = this.email,
            this.userData.password = this.password

            // add registration to localStorage

            // clear the registration fields
            this.name = "";
            this.email = "";
            this.password = "";
        }

Here we have taken the value of the properties name, email, and password and assigned them to properties we created in the userData object.

This seems fine mostly because we have put on our input fields the required attribute – but if we remove it we will be able to submit an empty form, and we don't want that.

So let's add a very basic form of validation to at least check if the user has typed something inside our form, otherwise we show an error.

To do this, we need to add an if block inside the method and also an error property to the data object. Our file now looks like this:

let app = new Vue({
    el: '#app',
    data: {
        userData: {},
        usersID: 0,
        name: "",
        email: "",
        password: "",
        max_length: 25,
        max_pass_length: 16,
        error: "",

    },  
    methods: {
        registerAccount(){
            if (this.name !== "" && this.email !== "" && this.password !== "" ) 
            {
                this.userData.id = ++this.usersID,
                this.userData.name = this.name,
                this.userData.email = this.email,
                this.userData.password = this.password

            } else {
                this.error = "Complete all the form fields"
            }

        /* Add registration data to the local storage */


        /* Clear the registration inputs */
        this.name = "";
        this.email = "";
        this.password = "";
        }

    }

});

Here in the registerAccount we've written a conditional that checks if the length of the name property is not empty, if the email property isn't empty, and if the password isn't empty this.name !== "" && this.email !== "" && this.password !== "".

If all these checks evaluate to a true value, then we run the code inside the block. Otherwise we run the code in the else block that updates the value of the error property that we will now use in our template to show the error message.

We also added a new property usersID: 0, that we used inside the if block to assign an id property to the userData object, just to make our application more realistic. But of course it is useless, as we will not have a database where we store all user details. We'll just store a single user inside their browser's local storage.

<form id="register" v-on:submit.prevent="registerAccount">
    <div class="form_group">
        <label for="name">Name
            <span> {{ name.length + '/' + max_length }}</span>
        </label>
        <input type="text" v-model="name" :maxlength="max_length" required>
    </div>
    <div class="form_group">
        <label for="email">Email
            <span> {{ email.length + '/' + max_length }}</span>
        </label>
        <input type="email" v-model="email" :maxlength="max_length" required>
    </div>
    <div class="form_group">
        <label for="password">Password
            <span> {{ password.length + '/' + max_pass_length }}</span>
        </label>
        <input type="password" v-model="password" :maxlength="max_pass_length" required>
    </div>
    <button type="submit">Register</button>
</form>


<div v-if="error.length > 0"> {{error}}</div>

Now our form is complete and we're also displaying an error message to the user if the required attributes are removed from our markup.

But our data do not persist and when the page is refreshed –everything's all gone. Let's tackle that using the localStorage API.

Inside our Vue instance, we need to set an item in the local storage. But we also need to save the entire userData object so that later we can use its data to display a message to the registered user.

/* Add registration data to the local storage */
localStorage.setItem('simple_tweet_registered', true)
/* Add the whole userData object as JSON string */
localStorage.setItem('simple_tweet_registered_user', JSON.stringify(this.userData))

Here we use the setItem method of the Local Storage API to add an item to the local storage so that later we can use it to check if the user is registered or not.

Then we also need to store the entire userData object as a string. To do that we use the JSON.stringify method that will turn the object into a JSON string that can be saved in the localStorage.

Our JS file is now as follows:

let app = new Vue({
    el: '#app',
    data: {
        userData: {},
        usersID: 0,
        name: "",
        email: "",
        password: "",
        max_length: 25,
        max_pass_length: 16,
        error: "",
    },  
    methods: {
        registerAccount(){
            if (this.name !== ""  && this.email !== "" && this.password !== "" ) {
                this.userData.id = ++this.usersID,
                this.userData.name = this.name,
                this.userData.email = this.email,
                this.userData.password = this.password

            } else {
                this.error = "Complete all the form fields"
            }

        /* Add registration data to the local storage */
        localStorage.setItem('simple_tweet_registered', true)
        /* Add the whole userData object as JSON string */
        localStorage.setItem('simple_tweet_registered_user', JSON.stringify(this.userData))


        /* Clear the registration inputs */
        this.name = "";
        this.email = "";
        this.password = "";
        }

    }

});

Now when the user visits our application page, we need to check inside the browser's local storage to see if there is a key called simple_tweet_registered. If there is, we can assume that the user is registered and we can show the next section, the tweet box. Otherwise, we show the registration form.

We will do that by creating a registered: false property in the data object and use it to display or hide the registration form.

data: {
    userData: {},
    usersID: 0,
    name: "",
    email: "",
    password: "",
    max_length: 25,
    max_pass_length: 16,
    error: "",
    registered: false,      
}

Wrap the form around a div with a directive v-if="!registered" like this:

<div class="register" v-if="!registered">
    // here goes the form
</div>

<div v-else> Tweetbox </div>

Our final HTML file now looks like this:

    <div class="card">
        <i class="fab fa-twitter fa-lg fa-fw"></i>
        <!-- Register an account -->
        <div class="register" v-if="!registered">
            <button form="register" type="submit">Register</button>
            <h2>Create your account</h2>
            <form id="register" v-on:submit.prevent="registerAccount">
                <div class="form_group">
                    <label for="name">Name
                        <span> {{ name.length + '/' + max_length }}</span>
                    </label>
                    <input type="text" v-model="name" :maxlength="max_length" required>
                </div>
                <div class="form_group">
                    <label for="email">Email
                        <span> {{ email.length + '/' + max_length }}</span>
                    </label>
                    <input type="email" v-model="email" :maxlength="max_length" required>
                </div>
                <div class="form_group">
                    <label for="password">Password
                        <span> {{ password.length + '/' + max_pass_length }}</span>
                    </label>
                    <input type="password" v-model="password" :maxlength="max_pass_length" required>
                </div>
            </form>


            <div v-if="error.length > 0"> {{error}}</div>
        </div>
        <!-- Add tweet -->
        <div class="tweetBox" v-else>
            <h2>Welcome username_here write your first Tweet</h2>
        </div>

    </div>

Now to make this work, we will use the lifecycle hook we created which lets us inject our code when the Vue instance has been created. This is because we want to check this before mounting our root element.

So let's add a life cycle hook to the Vue instance. We will check if our key is there, and if so we will update the value of the registered property to true.

We have also stored the full userData object in the local Storage so we can use it to repopulate the userData object when the page is refreshed with the details the user submitted.

created(){
    /* Check if the user is registered and set the registered to true */
    if(localStorage.getItem("simple_tweet_registered") === 'true'){
        this.registered = true;
    }
    // repopulate the userData object
     if(localStorage.getItem('simple_tweet_registered_user')) {
            this.userData = JSON.parse(localStorage.getItem('simple_tweet_registered_user'))
        }

}

To turn a JSON string back into an object, we can use the JSON.parse method.

Now it's all set for the next task – show a tweet form to the user after registration.

Our code so far looks like this:

The main.js file:

let app = new Vue({
    el: '#app',
    data: {
        userData: {},
        usersID: 0,
        name: "",
        email: "",
        password: "",
        max_length: 25,
        max_pass_length: 16,
        error: "",
        registered: false,
    },

    methods: {
          registerAccount(){

              if (this.name.length > 0 && this.name.length <= this.max_length && this.email !== "" && this.password !== "" ) {

                    this.userData.id = ++this.usersID,
                    this.userData.name = this.name,
                    this.userData.email = this.email,
                    this.userData.password = this.password
                    this.registered=true;



              } else {
                  this.error = "Complete all the form fields"
              }

            /* Add registration data to the local storage */
            localStorage.setItem('simple_tweet_registered', true)
            /* Add the whole userData object as JSON string */
            localStorage.setItem('simple_tweet_registered_user', JSON.stringify(this.userData))

            /* Clear the registration inputs */
            this.name = "";
            this.email = "";
            this.password = "";
        }

    },
    created(){
        /* Check if the user is registered and set the registered to true */
        if(localStorage.getItem("simple_tweet_registered") === 'true'){
            this.registered = true;
        }
        // repopulate the userData object
        if(localStorage.getItem('simple_tweet_registered_user')) {
            this.userData = JSON.parse(localStorage.getItem('simple_tweet_registered_user'))
        }

    }

});

And the HTML inside the app element:

<div class="card">
    <i class="fab fa-twitter fa-lg fa-fw"></i>
    <!-- Register an account -->
    <div class="register" v-if="!registered">
        <button form="register" type="submit">Register</button>
        <h2>Create your account</h2>
        <form id="register" v-on:submit.prevent="registerAccount">
            <div class="form_group">
                <label for="name">Name
                    <span> {{ name.length + '/' + max_length }}</span>
                </label>
                <input type="text" v-model="name" :maxlength="max_length" required>
            </div>
            <div class="form_group">
                <label for="email">Email
                    <span> {{ email.length + '/' + max_length }}</span>
                </label>
                <input type="email" v-model="email" :maxlength="max_length" required>
            </div>
            <div class="form_group">
                <label for="password">Password
                    <span> {{ password.length + '/' + max_pass_length }}</span>
                </label>
                <input type="password" v-model="password" :maxlength="max_pass_length" required>
            </div>
        </form>


        <div v-if="error.length > 0"> {{error}}</div>
    </div>
    <!-- Add tweet -->
    <div class="tweetBox" v-else>
        <h2>Welcome {{ userData.name }} write your first Tweet</h2>

    </div>

</div>

Here in the HTML, since we used the v-else on the add tweet section and used the local storage to retrieve the data submitted by the user, we can use an in-template expression to grab the user name so that we can output a welcome message.

In the next section, we will create a tweet box form so that after the registration the user can write a tweet.

How to create a tweet box form - HTML

Now it's time to build our add tweet form. We did something very similar earlier in this article, but now we will need to store and make the data persistent. This lets us show a list of tweets even when the page refreshes.

<div class="tweetBox" v-else>
    <h2>Welcome {{ userData.name }} write your first Tweet</h2>
    <form v-on:submit.prevent="sendTweet">
        <div class="form_group">
            <label for="tweet">
                Send your tweet
                <span> {{ tweetMsg.length + '/' + max_tweet }}</span>
            </label>
            <textarea name="tweet" id="tweet" cols="30" rows="10" v-model="tweetMsg" maxlength="200"></textarea>
        </div>
        <button type="submit">Tweet</button>
    </form>

</div>

This is nothing new to us now. Inside the tweetBox element we add a form with the usual v-on directive and a method sendTweet that we will need to define inside the methods object. This will take the tweet and save it somewhere, maybe in a property in the data object.

Inside the form, there is a textarea that has a v-model directive that binds it to a tweetMsg property that we need to create.

Finally, a submit button.

We also have a span inside the tweet label that shows a character counter to the user as we did before in the registration form.

Here we have a new property max_tweet that is used to show the limit and the tweetMsg.length is used to show the current number of the characters inserted.

You can watch the video on YouTube here if you want to review what you've learned.

Create a tweets box form - Vue

Let's go to the Vue instance and add the properties and the sendTweet methods.

Our data object now has three more properties, the max_tweet set to 200, the tweetMsg that binds to the textarea, and a tweets array that we will use to store all tweets the user sends.

data: {
    userData: {},
    usersID: 0,
    name: "",
    email: "",
    password: "",
    max_length: 25,
    max_pass_length: 16,
    max_tweet: 200, // max tweets lenght
    error: "",
    registered: false,
    tweetMsg: "", // current tweet
    tweets: [] // list of tweets
}

Inside the methods, we have a new method that will be invoked by the v-on directive when the form is submitted:

sendTweet(){
    /* Store the tweet in the tweets property */
    this.tweets.unshift(
        {
            text: this.tweetMsg,
            date: new Date().toLocaleTimeString()
        }

    );
    /* Empty the tweetMsg property */
    this.tweetMsg = "";
    //console.log(this.tweets);

    /* Tranform the object into a string  */
    stringTweets = JSON.stringify(this.tweets)
    //console.log(stringTweets);

    /* Add to the local storage the stringified tweet object */
    localStorage.setItem('simple_tweet_tweets', stringTweets)
},

The code above does four things:

• takes the tweets array and adds in it an object to represent a single tweet with text and date properties. To the text property, we assign the value of the tweetMsg that is bound with the textarea. For the date, we create a new date object with the new Date().toLocaleTimeString() method.
• we empty the value of the tweetMsg
• we transform the tweets property into a string using the method JSON.stringify(this.tweets)
• Then we add it to the local storage.

Our final main.js file now looks like this:

let app = new Vue({
    el: '#app',
    data: {
        userData: {},
        usersID: 0,
        name: "",
        email: "",
        password: "",
        max_length: 25,
        max_pass_length: 16,
        error: "",
        registered: false,
    },

    methods: {
          registerAccount(){

              if (this.name.length > 0 && this.name.length <= this.max_length && this.email !== "" && this.password !== "" ) {

                    this.userData.id = ++this.usersID,
                    this.userData.name = this.name,
                    this.userData.email = this.email,
                    this.userData.password = this.password
                    this.registered=true;



              } else {
                  this.error = "Complete all the form fields"
              }

            /* Add registration data to the local storage */
            localStorage.setItem('simple_tweet_registered', true)
            /* Add the whole userData object as JSON string */
            localStorage.setItem('simple_tweet_registered_user', JSON.stringify(this.userData))

            /* Clear the registration inputs */
            this.name = "";
            this.email = "";
            this.password = "";
        },
        sendTweet(){
            /* Store the tweet in the tweets property */
            this.tweets.unshift(
                {
                    text: this.tweetMsg,
                    date: new Date().toLocaleTimeString()
                }

            );
            /* Empty the tweetMsg property */
            this.tweetMsg = "";
            //console.log(this.tweets);

            /* Tranform the object into a string  */
            stringTweets = JSON.stringify(this.tweets)
            //console.log(stringTweets);

            /* Add to the local storage the stringified tweet object */
            localStorage.setItem('simple_tweet_tweets', stringTweets)
        },


    },
    created(){
        /* Check if the user is registered and set the registered to true */
        if(localStorage.getItem("simple_tweet_registered") === 'true'){
            this.registered = true;
        }
        // repopulate the userData object
        if(localStorage.getItem('simple_tweet_registered_user')) {
            this.userData = JSON.parse(localStorage.getItem('simple_tweet_registered_user'))
        }

    }

});

Now that we've completed this part, we can show a list of tweets and also handle when the page is refreshed, and the local storage has in it our tweets object. We will need to parse it back and add its content to the tweets property to see the list.

Next, we will learn how to show the list of tweets using a v-for directive.

How to show a list of tweets - HTML

Inside our root element, add the following code:

 <!-- Show all tweets -->
    <div class="card_tweets">
        <section class="tweets" v-if="tweets.length > 0">
            <h2>Tweets</h2>
            <div class="tweetMsg" v-for="(tweet, index) in tweets">
                <p>
                    {{tweet.text}}
                </p>

                <div class="tweetDate">
                    <i class="fas fa-calendar-alt fa-sm fa-fw"></i>{{tweet.date}}
                </div>

            </div>

        </section>
        <div v-else>No tweets to show</div>
    </div>

Here we wrap everything in a div with a class card_tweets. Then we use a v-if directive inside a child section to check if there are tweets in the tweets array v-if="tweets.length > 0".

Inside this section, we can loop over the tweets array using a v-for="(tweet, index) in tweets" directive. After that we use in-template expressions to show the tweet text property {{tweet.text}} and the data {{tweet.date}}.

After the section we can use a v-else directive to show a message in case there are no tweets stored inside the tweets array <div v-else>No tweets to show</div>. Done.

Now there's one last thing we need to do, and that is to figure out what to do to remove tweets from the list.

But when the user refreshes the page, everything is gone. So we need to work with the localStorage once again to repopulate our tweets array from it before rendering the root element.

Inside the created lifecycle hook we will now write some code to parse the tweets and save them back in the tweets property:

/* Parse all tweets from the local storage  */
if(localStorage.getItem("simple_tweet_tweets")) {
    console.log("There is a list of tweets");
    this.tweets = JSON.parse(localStorage.getItem('simple_tweet_tweets'))
}else {
    console.log("No tweets here");
}

Here we used the localStorage API to first check if there was a key called simple_tweet_tweets. If so, we grab the tweets property using this.tweets and assign to it the content of the localStorage. But we parse the string back to JSON with JSON.parse so we write this.tweets = JSON.parse(localStorage.getItem('simple_tweet_tweets')).

Now everything works. After we refresh the page, the tweets are still there. Let's move on. In the next step, we will add a method to remove tweets from the list.

You can watch the video on YouTube here or at the end of this section to review what you've learned.

How to remove tweets

Inside the div that contains the tweet message, we can add another div to show a link and a trash icon. This lets the user click it and remove that tweet.

<div class="tweet_remove" @click="removeTweet(index)">
    <span class="remove">Delete this tweet <i class="fas fa-trash fa-xs fa-fw"></i></span>
</div>

Here we simply used a v-on short syntax directive on the div and invoked a method removeTweet(index), passing to the method the element index so that we know what to remove.

Let's build our removeTweet method now:

removeTweet(index){
    let removeIt = confirm("Are you sure you want to remove this tweet?")
    if(removeIt) {
        this.tweets.splice(index, 1);
        /* Remove the item also from the local storage */
        localStorage.simple_tweet_tweets = JSON.stringify(this.tweets)
    }
}

This bit of code is pretty straightforward. Our method accepts an index that represents the position of the tweet object in the array obtained from the v-for directive when the method is invoked.

We then create a variable to ask the user to confirm that they want to delete the tweet. We used the confirm function for that.

If the value of the removeIt variable is true, then we execute the code and use this.tweets.splice(index, 1) to remove the tweet from the array using its index.

Finally we update the localStorage value by assigning to is the new array using the localStorage.simple_tweet_tweets = JSON.stringify(this.tweets).

Final Code

Our code is now complete. You can find the final code below or inside the repository here: [https://bitbucket.org/fbhood/simple-tweet-app/src/master/].

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 2 Hello World</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css"
        integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
    <!-- Axios CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js"
        integrity="sha512-DZqqY3PiOvTP9HkjIWgjO6ouCbq+dxqWoJZ/Q+zPYNHmlnI2dQnbJ5bxAHpAMw+LXRm4D72EIRXzvcHQtE8/VQ=="
        crossorigin="anonymous"></script>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css"
        integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>

<body>
<div id="app">
    <div class="card">
        <i class="fab fa-twitter fa-lg fa-fw"></i>
        <!-- Register an account -->
        <div class="register" v-if="!registered">
            <button form="register" type="submit">Register</button>
            <h2>Create your account</h2>
            <form id="register" v-on:submit.prevent="registerAccount">
                <div class="form_group">
                    <label for="name">Name
                        <span> {{ name.length + '/' + max_length }}</span>
                    </label>
                    <input type="text" v-model="name" :maxlength="max_length" required>
                </div>
                <div class="form_group">
                    <label for="email">Email
                        <span> {{ email.length + '/' + max_length }}</span>
                    </label>
                    <input type="email" v-model="email" :maxlength="max_length" required>
                </div>
                <div class="form_group">
                    <label for="password">Password
                        <span> {{ password.length + '/' + max_pass_length }}</span>
                    </label>
                    <input type="password" v-model="password" :maxlength="max_pass_length" required>
                </div>
            </form>


            <div v-if="error.length > 0"> {{error}}</div>
        </div>
        <!-- Add tweet -->
        <div class="tweetBox" v-else>
            <h2>Welcome {{ userData.name }} write your first Tweet</h2>
            <form v-on:submit.prevent="sendTweet">
                <div class="form_group">
                    <label for="tweet">
                        Send your tweet
                        <span> {{ tweetMsg.length + '/' + max_tweet }}</span>
                    </label>
                    <textarea name="tweet" id="tweet" cols="30" rows="10" v-model="tweetMsg" maxlength="200"></textarea>
                </div>
                <button type="submit">Tweet</button>
            </form>

        </div>

    </div>
    <!-- Show all tweets -->
    <div class="card_tweets">
        <section class="tweets" v-if="tweets.length > 0">
            <h2>Tweets</h2>
            <div class="tweetMsg" v-for="(tweet, index) in tweets">
                <p>
                    {{tweet.text}}
                </p>

                <div class="tweetDate">
                    <i class="fas fa-calendar-alt fa-sm fa-fw"></i>{{tweet.date}}
                </div>
                <div class="tweet_remove" @click="removeTweet(index)">
                    <span class="remove">Delete this tweet <i class="fas fa-trash fa-xs fa-fw"></i></span>
                </div>

            </div>

        </section>
        <div v-else>No tweets to show</div>
    </div>
</div>
<script src="./main.js"></script>
</body>

</html>

JavaScript file

let app = new Vue({
    el: '#app',
    data: {
        userData: {},
        usersID: 0,
        name: "",
        email: "",
        password: "",
        max_length: 25,
        max_pass_length: 16,
        max_tweet: 200,
        error: "",
        registered: false,
        tweetMsg: "",
        tweets: []
    },

    methods: {
          registerAccount(){

              if (this.name.length > 0 && this.name.length <= this.max_length && this.email !== "" && this.password !== "" ) {

                    this.userData.id = ++this.usersID,
                    this.userData.name = this.name,
                    this.userData.email = this.email,
                    this.userData.password = this.password
                    this.registered=true;



              } else {
                  this.error = "Complete all the form fields"
              }

            /* Add registration data to the local storage */
            localStorage.setItem('simple_tweet_registered', true)
            /* Add the whole userData object as JSON string */
            localStorage.setItem('simple_tweet_registered_user', JSON.stringify(this.userData))

            /* Clear the registration inputs */
            this.name = "";
            this.email = "";
            this.password = "";
        }, 
        sendTweet(){
            this.tweets.unshift(
                {
                    text: this.tweetMsg,
                    date: new Date().toLocaleTimeString()
                }

            );
            this.tweetMsg = "";

            //console.log(this.tweets);
            stringTweets = JSON.stringify(this.tweets)
            //console.log(stringTweets);
            localStorage.setItem('simple_tweet_tweets', stringTweets)
        },
        removeTweet(index){
            let removeIt = confirm("Are you sure you want to remove this tweet?")
            if(removeIt) {
                this.tweets.splice(index, 1);
                /* Remove the item also from the local storage */
                localStorage.simple_tweet_tweets = JSON.stringify(this.tweets)
            }
        }
    },
    created(){
        /* Check if the user is registered and set the registered to true */
        if(localStorage.getItem("simple_tweet_registered") === 'true'){
            this.registered = true;
        }

        if(localStorage.getItem('simple_tweet_registered_user')) {
            this.userData = JSON.parse(localStorage.getItem('simple_tweet_registered_user'))
        }
        /* Parse all tweets from the local storage  */
        if(localStorage.getItem("simple_tweet_tweets")) {
            console.log("There is a list of tweets");
            this.tweets = JSON.parse(localStorage.getItem('simple_tweet_tweets'))

        }else {
            console.log("No tweets here");
        }
    }

});

We are ready to move forward with our Vue journey. Now it's time to learn about components.

Vue Component Basics

A component is a reusable block of code that represents a specific element on the page.

Every web page and web or mobile application can be divided into components. Starting from the main sections we can further divide these into smaller bits and make sub-components.

Every component is reusable and is made of dedicated HTML, CSS, and JavaScript code.

We can use components to organize our code and build complex layouts that are easily maintainable.

Looking at a simple web page, it is usually made of a header, the main content area, and a footer. But each of these three pieces can be sub-divided into smaller parts.

For instance, a header can have the main navigation menu, a secondary menu, and a hero image. The same is true for the main and footer areas.

You can watch the video on YouTube here or at the end of this section to review. You can also view the repository here.

To get started with components, we first need to learn how to register them, pass them data, and then we need to learn how to use them. Here are some great overviews of these topics to get you started:

• Register a component (https://vuejs.org/v2/guide/components-registration.html)
• How to use Props (https://vuejs.org/v2/guide/components-props.html)
• How to use Slots (https://vuejs.org/v2/guide/components-slots.html)
• How the Data object works inside a component
• Child Component Events (https://vuejs.org/v2/guide/components-custom-events.html)
• Dynamic Components ( https://vuejs.org/v2/guide/components-dynamic-async.html)

How to register a component in Vue

To register a component, we need to use the component method on the Vue() object. After calling this function we need to define a template property with some markup specific to the component.

Vue.component('component-name', {
    // component properies here
});

Every component needs to have a template property at least – without it a component doesn't make much sense.

So the next step is to define a template property and pass to it a string literal with some HTML tag:

Vue.component('test-component', {
    // component properies here
    template: `<p>I am a component</p>`

});

Now we can use our component multiple times inside our main HTML file by using its name as it was a standard HTML tag.

<div id="app">
  <test-component></test-component>
</div>

However, our component will always render the same content, I am a component. Let's make it more useful and, following our tweets example, build a tweet message component.

Vue.component('tweet-message', {

    template: `
       <div>
           <p> Tweet text goes here </p>
           <p> Date of the tweet goes here</p>
       </div>
    `
});

OK, now that we have the base for our component we need to actually pass data to it.

One thing to notice here is that every component requires a single root element inside the template property. So, since we have two paragraphs, we wrapped them inside a div that will be considered the root element of our component.

Inside it, we can put whatever we want to build our custom component.

Let's move on to the next step and pass some data to the component.

How to use props in Vue

Now, given what we've learned so far, we want to pass data to our component as we did previously to bind data between the Vue instance and the markup file via the moustache syntax.

However, with components things work a bit differently. We use props to create a binding between our component and its template.

The props property can be defined as an array or as an object. When used as an array, we can specify the properties as strings inside the array and these can later be used inside the component like we usually do.

When we use an object we can pass the prop as the key and its type as the value. That will help to make sure that the exact data type is passed to our component.

Let's see an example of that.

Example of props as an Array:

Vue.component('tweet-message', {
    props: ['text', 'date']
    template: `
       <div>
           <p> {{text}} </p>
           <p> {{date}}</p>
       </div>
    `
});

Use props as an object where the key is the property and the value is its type:

Vue.component('tweet-message', {
    props: {
        text: String,
        date: String
    }
    template: `
       <div>
           <p> {{text}} </p>
           <p> {{date}}</p>
       </div>
    `
});

Once we have defined our properties, we can use them as HTML attributes and pass them the data we want our component to render onto the page.

For instance, we can use the component above to show a bunch of tweets using our newly created component.

    <!-- Manually pass the data to the tweet message component -->
    <tweet-message text="This is a component" date="25/12/2020"></tweet-message>
    <tweet-message text="This another component" date="26/12/2020"></tweet-message>
    <tweet-message text="This another component" date="27/12/2020"></tweet-message>
    <!-- Pass a javascript expression to the date property of the tweet message component -->
    <tweet-message text="This another component" :date="new Date().toLocaleString()"></tweet-message>