Preparación de entorno de desarrollo

Clase 4 de 24 • Curso Fundamental de Material UI con React

Comentarios

Rodrigo Andrés Moreno Pertúz

student•

si lo quieren hacer con vite

$ npm create vite@latest myProject
cd myProject
npm install
npm install @mui/material @emotion/react @emotion/styled
npm run dev

60mb aprox

César Palma

student•

vite es todo un cambio, una herramienta moderna que hace mas fit a lo que se necesita en los proyectos de hoy. Para el linter usar standard cero conf. inicial.

Rodrigo Andrés Moreno Pertúz

student•

Exactly my friend @xsrpm, antes usaba una de mis herramientas llamada NodeMachine que me automatizaba un proyecto entero con webpack ya que me dejaba el peso final en 80mb antes de instalar las dependencias de terceros como @mui, pero ahora con vite no tiene sentido xD ya quedo en el olvido.

Usuario anónimo

user•

Si iba a estar copiando y pegando mejor hubiese utilizado vite o cra, pero bueno...

Arturo Mauricio Terceros Beltrán

student•

Si cuando ejecutan el comando npm run start les da el siguiente error: TypeError: cli.isMultipleCompiler is not a function at Command.

La mejor forma de solucionar es la siguiente:

npm uninstall webpack webpack-cli webpack-dev-server

Y luego

npm install webpack webpack-cli webpack-dev-server -D

A continuación npm run start debería funcionar.

Owen Sanchez

student•

Grande

Juan Camilo Lentino Villalba

student•

tuve el mismo problema, me sirvió tu comentario para detectar rápidamente el error, otra forma también es modificándolo directamente en el package.json antes de ejecutar npm install, quedando dependencies y devDependencies asi:

"dependencies": {
        "@emotion/react": "11.8.1",
        "@emotion/styled": "11.8.1",
        "@mui/icons-material": "5.4.4",
        "@mui/material": "5.4.4",
        "react": "17.0.2",
        "react-dom": "17.0.2"
    },
    "devDependencies": {
        "@babel/core": "7.17.5",
        "@babel/eslint-parser": "7.17.0",
        "@babel/plugin-transform-runtime": "7.17.0",
        "@babel/preset-env": "7.16.11",
        "@babel/preset-react": "7.16.7",
        "babel-eslint": "10.1.0",
        "babel-loader": "8.2.3",
        "eslint": "8.10.0",
        "eslint-config-airbnb": "19.0.4",
        "eslint-config-prettier": "8.5.0",
        "eslint-plugin-import": "2.25.4",
        "eslint-plugin-jsx-a11y": "6.5.1",
        "eslint-plugin-prettier": "4.0.0",
        "eslint-plugin-react": "7.29.3",
        "file-loader": "6.2.0",
        "html-loader": "3.1.0",
        "html-webpack-plugin": "5.5.0",
        "mini-css-extract-plugin": "2.6.0",
        "prettier": "2.5.1",
        "webpack": "^5.74.0",
        "webpack-cli": "^4.10.0",
        "webpack-dev-server": "^4.10.0"
    }

Arturo Mauricio Terceros Beltrán

student•

Las dependencias por si quieren copiar.

"dependencies": {
    "@emotion/react": "11.8.1",
    "@emotion/styled": "11.8.1",
    "@mui/icons-material": "5.4.4",
    "@mui/material": "5.4.4",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@babel/core": "7.17.5",
    "@babel/eslint-parser": "7.17.0",
    "@babel/plugin-transform-runtime": "7.17.0",
    "@babel/preset-env": "7.16.11",
    "@babel/preset-react": "7.16.7",
    "babel-eslint": "10.1.0",
    "babel-loader": "8.2.3",
    "eslint": "8.10.0",
    "eslint-config-airbnb": "19.0.4",
    "eslint-config-prettier": "8.5.0",
    "eslint-plugin-import": "2.25.4",
    "eslint-plugin-jsx-a11y": "6.5.1",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-plugin-react": "7.29.3",
    "file-loader": "6.2.0",
    "html-loader": "3.1.0",
    "html-webpack-plugin": "5.5.0",
    "mini-css-extract-plugin": "2.6.0",
    "prettier": "2.5.1",
    "webpack": "5.70.0",
    "webpack-cli": "4.9.2",
    "webpack-dev-server": "4.7.4"
  }

Alfredo Egremy Elias

student•

Yo tengo un template con vite, ESLint, y Prettier, este los ayudará a tener el identado y a marcarles los errores en su código, por si gustan utilizarlo sólo ingresen al link, le dan click a "Use this template", el git clone en su terminal, su respectivo npm i en donde esté package.json, y a disfrutar!! :)

https://github.com/Egremy-quark/cursoDesarrolloUtil

Edgar Contreras

student•

Por si te da error al usar App.jsx en lugar de App.js agrega esta regla en el archivo .eslintrc en la seccion de rules

"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]

Jahiker Rojas

student•

Si de casualidad al ejecutar npm start, les arroja el siguiente error:

[webpack-cli] TypeError: cli.isMultipleCompiler is not a function

lo que deben hacer es actualizar la version de webpack-cli a la 4.10.0 o superior

Gustavo Pú

student•

Me parece mala practica que el profe haya construido desde Cero toda la estructura del proyecto, para eso existe Vite o CRA!

Matias Barboza

student•

Usar webpack no es una mala práctica para nada !

Fidel Parabacuto

student•

Hay que entender cómo se arma un proyecto y es genial que lo arme de cero. De eso se trata programar... de entender cómo funcionan las cosas y luego automatizar

Sergio Valbuena

student•

tengo un nuevo eror de webpack ... que puedo hacer??

ERROR in ./src/index.js 7:2 Module parse failed: Unexpected token (7:2)

| | ReactDOM.render(

<App/>, | document.getElementById('app') | );

webpack 5.70.0 compiled with 1 error in 190 ms

Eunice Abigail Pineda Henríquez

student•

Agregaste el archivo: webpack.config.js? (Esta en los recursos de la clase)

María Antonia Lobato

student•

!!No consigo salir de aquí¡¡ Llevo dos días, me quedé atascada en eso y no logro de ninguna manera salir de ese error. He intentado actualizar, probé con los consejos de los comentarios y consultando en internet, pero no encuentro la forma de seguir... No estaría mal que también nos digan cómo poder solucionar este tipo de errores, con ejemplos reales.

[webpack-cli] TypeError: cli.isMultipleCompiler is not a function at Command.<anonymous> (C:\Users\lobato\Desktop\basico-material-ui\node_modules@webpack-cli\serve\lib\index.js:146:35) at async Promise.all (index 1) at async Command.<anonymous> (C:\Users\lobato\Desktop\basico-material-ui\node_modules\webpack-cli\lib\webpack-cli.js:1674:7)

Brandon Argel Verdeja Domínguez

student•

👋 ¡Hola, @tonyta! Este error puede ser por la versión de webpack cli, y se puede solucionar haciendo un upgrade de a una versión más reciente de esta dependencia, intenta con los siguientes comandos.

Verificamos que esté instalada esta dependencia: npm install --save-dev webpack-cli
Actualizamos la dependencia: npm upgrade --save-dev webpack-cli, o también puedes intentar actualizar la dependencia a la versión 4.10.0, (la más cercana a la que tiene el profesor, en la que ya no está este error), con: npm install webpack-cli@4.10.0

¡Ahora con esto ya debería funcionar el comando npm start sin errores!

Cuéntame si esto te funciona, o si tienes alguna otra duda o error, estaré atento. 😄 ¡Nunca pares de aprender! 💚🚀

Jhon Jairo Gomez Calderon

student•

Muchas gracias, tuve ese mismo error y se solucionó con los comandos que sugirió el compañero.

Kevin Zavala

student•

Para los que usan yarn:

yarn create vite
yarn install
git init
yarn add @mui/material @emotion/react @emotion/styled

Jose Jair Perez Trejo

student•

Buen día. yo tengo un problema me marca un 404 al realizar el npm install C:\Curso_Platzi\Curso-basico-material-ui>npm install npm WARN config global --global, --local are deprecated. Use --location=global instead. npm WARN deprecated babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates. npm ERR! code E404 npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types/eslint/-/eslint-8.4.4.tgz - Not found npm ERR! 404 npm ERR! 404 '@types/eslint@https://registry.npmjs.org/@types/eslint/-/eslint-8.4.4.tgz' is not in this registry. npm ERR! 404 npm ERR! 404 Note that you can also install from a npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Usuario\AppData\Local\npm-cache_logs\2022-06-30T21_09_07_805Z-debug-0.log

Bryan Andres Gallo Velasco

student•

Tengo el mismo error

Julio Barrios

student•

Acabo de encontrar la solución en GitHub

Hay un issue con types/eslint@8.4.4.
agrega al package.json "resolutions": { "@types/eslint": "8.4.3" }

si no funciona has esto:

Instala manualmente npm i -D @types/eslint@8.4.3 luego instala webpack npm i webpack

Juan Jose Mayorga

student•

me gustaría llevar el proyecto con Typescript: ¿alguien sabe si hay manera de añadir Typescript a este proyecto? ¿o algún tutorial?

Alan Martin Barocio Contreras

student•

Buen dia profesor, tengo un probleme, me marca un error al ejecutar el comando "npm run start".

ERROR in ./src/index.js 7:4 Module parse failed: Unexpected token (7:4) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | ReactDOM.render(

<App/>,

| document.getElementById('app') | );

webpack 5.70.0 compiled with 1 error in 450 ms

Existe alguna solucion?

Daniel Rodrigo Valdivieso Merino

teacher•

Hola Alan, compartenos tu repo para revisarlo y que todos podamor mirar que sucede :)

Lautaro Agustin Barrera

student•

Por mi parte lo voy a hacer con Create React App. Luego voy a tomar el curso de Webpack para entender cómo preparar el entorno de desarrollo sin Create React App.

Clever Serrano H

student•

Vi varios comentarios y mencionan Vite...obviamente me interesa no solo aprender sino aprender algo que se justifique asi mismo https://youtu.be/rmYUlzfT24E?t=304

Entonces...porqué creó que este inicio va mal ...pueden ver el video de YouTube,

Oscar Martinez

student•

Pesimo inicio del curso, todas las dependencias desactualizadas, toca arreglar todo a mano, no todos tenemos tiempo para eso, mejor hubieramos usado CRA, creo que aqui vinimos a aprender material UI no webpack

Humberto Asca

student•

Al crear el proyecto desde cero definiendo cada archivo de configuración: package.json, .babelrc, .eslintrc.js, webpack... etc, en el video indica que es escalable (06:13) y que no estamos atados comparándolo con el uso de:

npx create-react-app github-user-search

Mi pregunta es: Por qué no es escalable la app al usar el "npx create-react-app github-user-search" y/o por qué estamos con las manos atadas?

No me queda claro el por qué.

Favor, ¿Podría profesor del curso o algún encargado responder?

Gracias

Daniel Rodrigo Valdivieso Merino

teacher•

Hola Humberto 👋

En pocas palabras create-react-app tiene ventajas y desventajas.

Ventaja Es que te permite en minutos empezar a trabajar con un proyecto ya configurado. Te permite crear MVP's muuuuy rápido. (MVP -> Producto Mínimo Viable)

Desventajas No te deja personalizar las configuraciones del proyecto Puede traer configuraciones que no necesitas y hará a tu proyecto más pesado. Esto es muuuy importante cuando el proyecto va creciendo con el tiempo. Vas con las manos atadas con configuraciones predeterminadas.

👇 Aquí te dejo un artículo que puedes consultar. Artículo

Luján Toledo

student•

No hay alguna forma de agilizar todo esto e ir con la instalación de Material UI más rápido, no pude instalarla siguiendo los pasos de la pagina, me da error de dependencias

Daniel Rodrigo Valdivieso Merino

teacher•

Hola Luján, compartenos el error y tu código para revisarlo juntos :)

Nicolas Garcia

student•

Chicos una pregunta, puedo hacerlo como crear un archivo de react normal, con el npm create, y luego clonar el protyecto,y luego agregar los archivos que dice el profe? es que siento que me perdi como lo hizo, y cual creen que es la mejor forma?

Daniel Rodrigo Valdivieso Merino

teacher•

Hola Nico, cuentano donde te perdiste y los solucionamos todos 💚

Asi podemos aclarar las dudas de otros compañeros 😊

Nicolas Garcia

student•

Hola , Me había perdido en la parte del Npm init no lo había usado entonces era nuevo para mi , entonces la duda era si usaba el npm i create-react-app , pero voy a seguir el curso al pie de letra para aprender a la par, gracias Profe por el apoyo

"dependencies": {
        "@emotion/react": "11.8.1",
        "@emotion/styled": "11.8.1",
        "@mui/icons-material": "5.4.4",
        "@mui/material": "5.4.4",
        "react": "17.0.2",
        "react-dom": "17.0.2"
    },
    "devDependencies": {
        "@babel/core": "7.17.5",
        "@babel/eslint-parser": "7.17.0",
        "@babel/plugin-transform-runtime": "7.17.0",
        "@babel/preset-env": "7.16.11",
        "@babel/preset-react": "7.16.7",
        "babel-eslint": "10.1.0",
        "babel-loader": "8.2.3",
        "eslint": "8.10.0",
        "eslint-config-airbnb": "19.0.4",
        "eslint-config-prettier": "8.5.0",
        "eslint-plugin-import": "2.25.4",
        "eslint-plugin-jsx-a11y": "6.5.1",
        "eslint-plugin-prettier": "4.0.0",
        "eslint-plugin-react": "7.29.3",
        "file-loader": "6.2.0",
        "html-loader": "3.1.0",
        "html-webpack-plugin": "5.5.0",
        "mini-css-extract-plugin": "2.6.0",
        "prettier": "2.5.1",
        "webpack": "^5.74.0",
        "webpack-cli": "^4.10.0",
        "webpack-dev-server": "^4.10.0"
    }

"dependencies": {
    "@emotion/react": "11.8.1",
    "@emotion/styled": "11.8.1",
    "@mui/icons-material": "5.4.4",
    "@mui/material": "5.4.4",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@babel/core": "7.17.5",
    "@babel/eslint-parser": "7.17.0",
    "@babel/plugin-transform-runtime": "7.17.0",
    "@babel/preset-env": "7.16.11",
    "@babel/preset-react": "7.16.7",
    "babel-eslint": "10.1.0",
    "babel-loader": "8.2.3",
    "eslint": "8.10.0",
    "eslint-config-airbnb": "19.0.4",
    "eslint-config-prettier": "8.5.0",
    "eslint-plugin-import": "2.25.4",
    "eslint-plugin-jsx-a11y": "6.5.1",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-plugin-react": "7.29.3",
    "file-loader": "6.2.0",
    "html-loader": "3.1.0",
    "html-webpack-plugin": "5.5.0",
    "mini-css-extract-plugin": "2.6.0",
    "prettier": "2.5.1",
    "webpack": "5.70.0",
    "webpack-cli": "4.9.2",
    "webpack-dev-server": "4.7.4"
  }

Preparación de entorno de desarrollo

Introducción al curso

Bienvenida al curso

Presentación proyecto

¿Qué es Material UI?

Preparación de entorno de desarrollo

Herramientas dentro de Material UI

Componentes simples

Componentes compuestos

Contenedores responsive

Material icons

Bonus

Construcción del proyecto

Análisis detallado del proyecto

Creando el contenedor y el text field

Colocando los estilos del buscador

Construyendo la lógica del buscador

Conectando nuestro proyecto a la API de GitHub

Conectando el buscador con la API

Creando el contenedor y trayendo la imagen de perfil del usuario

Trayendo la información principal del usuario

Trayendo la descripción del usuario

Creando el componente con las estadísticas del usuario

Mostrando la localización del usuario

Ajuste de estilos con SX a los componentes de descripción e información principal

Ajuste de estilos con SX al componente de descripción, PaperInformation y LocationInformation

Evaluación del proyecto

Despedida

Resumen del curso