common/
  Avatar.js
  Avatar.css
  APIUtils.js
  APIUtils.test.js
feed/
  index.js
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  FeedAPI.js
profile/
  index.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css
  ProfileAPI.js

api/
  APIUtils.js
  APIUtils.test.js
  ProfileAPI.js
  UserAPI.js
components/
  Avatar.js
  Avatar.css
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css

common/
  Avatar.js
  Avatar.css
  APIUtils.js
  APIUtils.test.js
feed/
  index.js
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  FeedAPI.js
profile/
  index.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css
  ProfileAPI.js

api/
  APIUtils.js
  APIUtils.test.js
  ProfileAPI.js
  UserAPI.js
components/
  Avatar.js
  Avatar.css
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css

importar tarjetas desde "componentes/tarjetas" ;   

importar Tarjetas desde “/ src / components / cards . jsx ”   

importar { defineConfig } desde "vite" ; importar reaccionar desde "@vitejs/plugin-react" ;   

exportar defineConfig predeterminado ({   complementos : [ reaccionar ()], });  

importar { defineConfig } desde "vite" ; importar reaccionar desde "@vitejs/plugin-react" ;   

export default defineConfig ({ 
  resolve : { 
    alias : [ { 
        find : "common" , 

        replace : resolve ( __dirname , "src/common" ), }, ], },



  complementos : [ reaccionar ()], });    

//En lugar de esto 
REACT_APP_ API_KEY = 1234567890. . //Utilice este 
VITE_API_KEY = 1234567890. . 

npm i vite - plugin - env ​​- compatible

importar envCompatible desde 'vite-plugin-env-compatible' ; 

exportar defineConfig predeterminado ({ ... 

  envPrefix : 'REACT_APP_' , 



  complementos : [ 
    reaccionar (),
    envCompatible
  ], });

const element = <h1>Hello, world!</h1>;

const myElement = <Car brand="Ford" />;

function Car(props) {
  return <h2>I am a { props.brand }!</h2>;
}

./app.jsimport {useEffect} from 'react';

const App = () => {
  const [name, setName] = useState(null);

  useEffect(() => {
    fetch('https://pokeapi.co/api/v2/pokemon/ditto') // hacemos la petición get
    .then(res => res.json()) // cuando hayamos terminado (then) parseamos a json la respuesta de la petición
    .then(res => setName(res.name)); // cuando hayamos terminado (then) actualizamos el estado nombre
  }, []); //Debemos usar los [] para que la petición sólo se ejecute cuando el componente se monte. De lo contrario se ejecutaría en cada render. Si ponemos una variable de estado dentro de los [], la petición se ejecutárá cada vez que esa variable cambie.
  return <p>{name}</p>;
}

npm i axios

import { useState, useEffect } from "react";
import axios from "axios";

const App = (_) => {
  const [name, setName] = useState([]);

  useEffect(() => {
    axios
      .get(`https://pokeapi.co/api/v2/pokemon/ditto`)
      .then((res) => {
        setName(res.data.name);
      })
  }, []);

  return <div>{name}</div>;
};
export default App;

 axios.get(`https://example.com`, {params: {paramName:paramValue}})

import axios from 'axios';
const instance = axios.create({ baseURL: 'https://swapi.dev/api' });
export const getPeople = () => instance.get(`/people/`);

• getCategories()
• getJokeFromCategory()