Cómo integrar la API de Platzi Store

How to set up an API in a project with React and Axios?

Integrating an API into a React project can significantly increase its functionality and dynamism. By applying optimization techniques using tools like Webpack and Axios, the process becomes more efficient. Here, I'll show you how to properly configure an API using the Axios library to facilitate HTTP requests and manage information in an organized way.

What is the first step when working with APIs and React?

First, you need to have an API ready that you can use. This API will provide you with the necessary data to integrate into your application. Once you have the URL, proceed to configure it in your React project, closing unnecessary elements to work efficiently.

How to implement a hook in React to handle API requests?

1. Create a custom hook: Inside the src folder, generate a subfolder called hooks and inside it, a useInitialState.js file.

2. Import useEffect and useState: These React hooks are key to manage side effects and local state.

import { useEffect, useState } from 'react';

3. Install Axios: In your terminal, add Axios as a dependency to handle HTTP requests.

   npm install axios

4. Configure the API: Define the API in your code with the provided URL.

   const API = 'URL_of_your_API';

5. Create the hook function: Implement a function with the use convention, integrating state logic and effects.

   const useInitialState = () => { const [products, setProducts] = useState([]);    
    useEffect((() => { const fetchData = async () => { const response = await axios(API); setProducts(response.data); }; fetchData(); }, []);
    return products;};
   export default useInitialState;

How is the hook integrated into the main component of the application?

• Import the hook into the main component: In the file where react-router is handled, import useInitialState.

  import useInitialState from './hooks/useInitialState';

• Implements the hook and validates data: Assigns the data returned by the hook to a constant and performs validations to ensure that there are no errors in the display.

  const App = () => { const initialState = useInitialState();
   const isEmpty = Object.keys(initialState).length === 0;
   return ( <> {!isEmpty ? ( <RenderComponent  products={initialState.products}/> ) : ( <h1>Loading...</h1> )} </> );};

What additional configurations are required for Axios and async/await?

To ensure that Axios and async/await functionality behave properly in your React project, you must configure Babel with the appropriate plugins.

• Configure Babel for async/await: Install a specific plugin that facilitates the use of async/await.

  npm install @babel/plugin-transform-runtime --save-dev

• Add the plugin in Babel: In the .babelrc file, include the plugin under the plugins section.

  { " plugins": ["@babel/plugin-transform-runtime"]}

With these configurations ready, run your application with npm run start. Watch how the project handles API requests, displaying load messages while waiting for data and validating the correct reception of the data. Working with Axios and react-hooks like useEffect and useState optimizes the development of your React projects. Keep honing your skills in each class to expand your mastery of the subject!