Getting Country Data with REST Countries API

In this article, we will be exploring how to use the REST Countries API with React.js and Tailwind CSS. We will also be using Vite.js as our development server for a fast and efficient development process.

Setting Up the Project

First, let’s make sure we have Node.js installed on our system. We can then use npm to create a new React.js project using the Create React App tool. Open your terminal and run the following commands:

npx create-react-app rest-countries-app
cd rest-countries-app
npm install tailwindcss
npm install @headlessui/react
npm install @heroicons/react

Next, we can set up Tailwind CSS by creating a tailwind.config.js file and adding the following code:

// tailwind.config.js
module.exports = {
  mode: 'jit',
  purge: [
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  darkMode: false, // or 'media' or 'class',
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Fetching Data with REST Countries API

Now that our project is set up, let’s create a new component to fetch and display country data. We can use the built-in fetch API in React to make a GET request to the REST Countries API.

Below is an example of how we can fetch the data using the useEffect hook in React:

// CountryData.js
import React, { useState, useEffect } from 'react';

function CountryData() {
  const [countryData, setCountryData] = useState([]);

  useEffect(() => {
    fetch('https://restcountries.com/v3.1/all')
      .then(response => response.json())
      .then(data => setCountryData(data));
  }, []);

  return (
    // Display country data here
  );
}

export default CountryData;

Displaying Country Data with Tailwind CSS

With the country data now available in our component, we can use Tailwind CSS to style and display the information. We can use the map function in JavaScript to loop through the data and render each country’s details in a card layout.

// CountryData.js
import React, { useState, useEffect } from 'react';

function CountryData() {
  // ... (fetching data)

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      {countryData.map((country, index) => (
        <div key={index} className="bg-white shadow-md rounded-md p-4">
          <h2 className="text-xl font-semibold mb-2">{country.name.common}</h2>
          <p>Capital: {country.capital}</p>
          <p>Population: {country.population}</p>
          <p>Region: {country.region}</p>
          <p>Subregion: {country.subregion}</p>
          <p>Languages: {Object.values(country.languages).join(', ')}</p>
        </div>
      ))}
    </div>
  );
}

export default CountryData;

Running the Project with Vite.js

Lastly, we can use Vite.js as our development server to run the project. Vite.js provides a fast and efficient development experience with features such as hot module replacement and optimized build times.

To start the development server, simply run the following command in your terminal:

npx vite

With the development server running, you can now view the project in your web browser and see the country data being fetched and displayed using React.js and Tailwind CSS.

Conclusion

In this article, we have learned how to use the REST Countries API with React.js and Tailwind CSS to fetch and display country data. We have also utilized Vite.js as our development server for a smooth and efficient development process. By following these steps, you can easily create a web application that interacts with the REST Countries API and presents the data in a modern and stylish layout.