Learn how to use React with Vite JS, Rick and Morty API, Axios in this new 2024 tutorial with free GitHub code.

In this tutorial, we will explore how to create a React application using Vite JS, integrate the Rick and Morty API using Axios, and display data from the API in our application. This tutorial will also provide a GitHub repository with all the code we will be using, so make sure to check that out for a more detailed reference.

Vite JS is a build tool that focuses on speed and simplicity for frontend development. It is very similar to Create React App, but faster and more lightweight. Axios is a popular HTTP client for making API requests, and the Rick and Morty API is a free API that provides information about the popular TV show, Rick and Morty.

Let’s get started with the tutorial!

Step 1: Setting up the project

To create a new React project with Vite JS, you can use the following command in your terminal:

npm init @vitejs/app my-react-app --template react
cd my-react-app
npm install

Step 2: Installing Axios

Next, we need to install Axios to make HTTP requests to the Rick and Morty API. You can install Axios using the following command:

npm install axios

Step 3: Fetching data from the Rick and Morty API

Now, we can start fetching data from the Rick and Morty API using Axios. Create a new file called api.js in your src folder and add the following code:

import axios from 'axios';

const baseURL = 'https://rickandmortyapi.com/api';

export const getCharacters = async () => {
  try {
    const response = await axios.get(`${baseURL}/character`);
    return response.data.results;
  } catch (error) {
    console.error('Error fetching characters:', error);
    return [];
  }
};

This code sets up a function getCharacters that makes a GET request to the character endpoint of the Rick and Morty API and returns the array of characters.

Step 4: Displaying characters in the React app

Now, we can display the characters fetched from the API in our React app. Create a new component called CharacterList.jsx in your src folder and add the following code:

import React, { useEffect, useState } from 'react';
import { getCharacters } from './api';

const CharacterList = () => {
  const [characters, setCharacters] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const characters = await getCharacters();
      setCharacters(characters);
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>Characters</h1>
      <ul>
        {characters.map((character) => (
          <li key={character.id}>{character.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default CharacterList;

This code sets up a component CharacterList that fetches characters from the API when the component mounts and displays their names in a list.

Step 5: Integrating the CharacterList component in your app

To integrate the CharacterList component in your app, you can add it to your App.jsx file like this:

import React from 'react';
import CharacterList from './CharacterList';

const App = () => {
  return (
    <div>
      <h1>Rick and Morty Characters</h1>
      <CharacterList />
    </div>
  );
};

export default App;

Step 6: Running the app

You can now run your React app using the following command:

npm run dev

This will start a development server for your app, and you should see the list of characters from the Rick and Morty API displayed in your browser.

Step 7: GitHub repository

To access the full code for this tutorial, you can visit the GitHub repository at https://github.com/your-username/your-repo.

And that’s it! You have now successfully created a React app using Vite JS, integrated the Rick and Morty API using Axios, and displayed data from the API in your app. Feel free to explore more features of the API and customize your app further.

I hope you found this tutorial helpful and informative. Happy coding!