si lo quieren hacer con vite
$ npm create [email protected] myProject
cd myProject
npm install
npm install @mui/material @emotion/react @emotion/styled
npm run dev
60mb aprox
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
Contenedores responsive
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
Preparación de entorno de desarrollo
4/25Recursos
Aportes 10
Preguntas 3
Ordenar por:
Si iba a estar copiando y pegando mejor hubiese utilizado vite o cra, pero bueno…
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"
}
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.
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
Me parece mala practica que el profe haya construido desde Cero toda la estructura del proyecto, para eso existe Vite o CRA!
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"] }]
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!! 😃
Para los que usan yarn:
yarn create vite
yarn install
git init
yarn add @mui/material @emotion/react @emotion/styled
Hay un issue con types/[email protected]. Por eso este error al instalar webpack
Les dejo la solución temporal mas abajo. Link del issue
Hay un issue con types/[email protected].
agrega al package.json "resolutions": { "@types/eslint": "8.4.3" }
si no funciona has esto:
Instala manualmente npm i -D @types/[email protected] luego instala webpack npm i webpack
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.