Setup y stack que utilizaremos

así quedaría el archivo app.js con la actualización de react-router-dom

import { Route, Routes } from “react-router-dom”;
import Home from “./views/home”;

function App() {
return (

  <Routes>
  <Route path="/" exact element={<Home/>} />
  </Routes>
);
}

export default App;

i

Para los que esten usando las versiones mas nuevas quedaria asi:

import { Route, Routes } from 'react-router-dom';
import Home from './views/home/index.js';

function App() {
  return (
    <>
    <Routes>
      <Route path="/" element={<Home />}/>
    </Routes>
    </>
  );
}

export default App;

Ya que en la V6 de React Router se remplaza “component” por “element” y se le da eqtiquetas, dejo documentación: https://github.com/remix-run/react-router/blob/main/docs/upgrading/v5.md#advantages-of-route-element

Instalación del proyecto =>

-Creamos un nuevo directorio para la interface/frontend de nuestra DApp con react.
Si es la primera vez que usas React, el comando es este:

npx create-react-app platzi-punks-interface 

Ingresamos a la carpeta creada:

cd platzi-punks-interface

Dentro de la carpeta del proyecto instalamos React Router:

yarn add react-router-dom

Tambien instalamos web3-react/core con su dependencia par web3-react:

yarn add @web3-react/core web3-react

Ahora añadimos web3 solo, (este paso es por separado porque se puede utilizar otro recurso en su lugar si se quisiera):

yarn add web3

Luego, la librería de diseño chakra:

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion 

(Cuando instalamos esta librería es importante remover los tag de versión porque pueden arrojar errores de compatibilidad)

Y listas las librerías 🎉

Los siguientes pasos me sirvieron para configurar el proyecto, gracias a otros aportes encontrados aqui:

Usar create-react-app con npx

npx create-react-app platzi-punks-interface

Abrir el editor en la carpeta del proyecto

cd platzi-punks-interface
code .

Instalar la ultima versión (v6) de react-router-dom

yarn add react-router-dom

Instalar web3-react

yarn add @web3-react/core web3-react

Instalar chakra tal cual como indica la documentación

yarn add @chakra-ui/react @emotion/[email protected]^11 @emotion/[email protected]^11 [email protected]^4

Código del archivo App.js acorde con la versión 6 de react-router-dom

import { Routes, Route } from "react-router-dom";
import Home from "./views/home";

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={ <Home /> } />
      </Routes>
    </>
  );
}

Si les sale este error al importar ChakraProvider:

./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjsCan't import the named export 'Children' from non EcmaScript module (only default export is available) chakra-ui

Cuando hagan la instalacion por consola de chakra-ui, dejen las especificaciones de version tal cual aparecen en la documentacion de la pagina de chakra-ui.

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

Puede ser que las nuevas versiones de framer-motion traigan consigo algunos errores o distintas implementaciones, y para eso le hacemos un Downgrade a las versiones.

Les comparto la documentacion de la nueva version de react-router v6. En el curso aun se utiliza la v5, por si le quieren hechar un vistazo --> Documentacion

hola yo tengo el siguiente error al ejecutar npx create-react-app platzi-punks-interface
me dice Error: Cannot find module ‘cra-template/package.json’

para el problema de:

• "Failed to compile. Module not found: Can’t resolve ‘react-router-dom’ "
  mi solución fue:
  -npm install -S react-router-dom
  o
  -yarn add react-router-dom

Si les da este error:

https://stackoverflow.com/questions/71668256/deprecation-notice-reactdom-render-is-no-longer-supported-in-react-18

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { HashRouter } from "react-router-dom";
import { ChakraProvider } from "@chakra-ui/react";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <HashRouter>
      <ChakraProvider>
        <App />
      </ChakraProvider>
    </HashRouter>
  </React.StrictMode>
);

Si se obtiene este error:

framer_motion__WEBPACK_IMPORTED_MODULE_5__.motion.custom is not a function at Module…/node_modules/@chakra-ui/checkbox/dist/chakra-ui-checkbox.esm.js

Se puede resolver de la siguiento forma:

yarn add [email protected]