Google Chrome para desarrollo frontend

Clase 8 de 17 • Curso de Prework: Buenas Prácticas y Entorno de Desarrollo en macOS 2019

Bryan Silva

student•

Si les da error al ejecutar npm start, esta es la solución: $ sudo npm cache clean --force $ sudo rm -rf node_modules $ sudo npm install -g $ npm start

Jorge Arturo Salgado Ordoñez

student•

Buen aporte. Muchas gracias.

JOEL HERNANDEZ

student•

Muchas gracias!! Era exactamente lo que requería!

Ariel Pedro Benitez

student•

Gente no se hagan mas problemas, empiecen a tomar notas, pasen al examen y listo. seguramente habra mas cursos donde nos guien correctamente, este profesor no sabe explicar o evidentemente ni se interesa por los alumnos, todos estamos teniendo el mismo problema, error y nos rompe la cabeza no poder avanzar, estresante

Dennis Cesti

student•

Y no olviden ponerlo en comentarios y en la calificación del curso cuando completen el examen. Creo que todos aqui estamos teniendo problemas para instalar los paquetes en Windows.

Alejandro Dh

student•

Creí que era solo yo, le he invertido todo el día a este curso y no entiendo mucho!

Jhon Edward Bedoya

student•

Esta clase de 6 minutos me tomó 5 horas 🤦🏼‍♂🧘🏼‍♂ Ahora esto se volvió personal! 🤺🧗🏼‍♂

Juan Camilo Osorio Bedoya

student•

jajaja no sos el único

Jhon Edward Bedoya

student•

Aunque la meta se ve lejos, es justo en el camino donde nos gozamos el paisaje. Vamos con toda viejo @juancamiloosoriobedoya5 💪🏼 Te comparto mi blog, donde estoy describiendo en detalle mi experiencia: 🧑🏼‍💻 https://medium.com/@edbedoya10/kick-off-f8ffbfff584c

Un abrazo de gol!

Andres Burbano

student•

si no te compila $ npm start

Lo primero es eliminar package-lock.json

$ rm -rf package-lock.json

Despues instala npm

$ npm install

aqui se generan dos carpetas

node_modules
package-lock.json (nueva)

Por ultimo vuelves a ejecutar

npm start

y a mi me funciono. espero que les sea de utilidad.

Antonio Rafael González Ferrer

student•

Gracias! Funcionó en mi caso!

Jair Neri

student•

A mi tambien me salvaste

Andyno Cortez

student•

Hasta el momento no pude seguir un solo paso sin que me salgan 200 errores jajaajj :c

Michelle Leonor Caicedo Espinel

student•

Jajajajajaja me da un poco de alivio no ser la única :'(

Diego Rubio

student•

laverga estamos igual

Joel Canul Alonzo

student•

Estas dos ultimas clases han sido más problemas que nada. Gracias a todos los que ponen sus aportes en los comentarios

Linette Lopez Benitez

student•

Al seguir los pasos de la clase obtenía un error al correr npm start probe varias formas pero continuaba la solución fue: Eliminar el package-lock.json y node_modules. Seguí la documentación oficial de react, dentro de la carpeta github-examples ejecute este comando: <npx create-react-app my-app>
esperar a que termine exitosamente y después ejecutar: <cd my-app> <npm start> Y aquí ya no tuve problemas con el comando de npm start

Juan Camilo Valencia Jaramillo

student•

Tambien he tenido estos errores en la instalacion de los plugins. Gracias por la ayuda :D

Matias Muñoz

student•

Muchas gracias por la ayuda amigo, el profesor debería tomarse el tiempo de explicar los posibles errores.

Luis Rojas

student•

Para que te pueda funcionar como al profesor debes correr el comando en mac npx create-react-app "nombre-del-proyecto". Si tienes windows lo usas en en la terminal de comando: create-react-app "nombre-del-proyecto". Previamente debes instalar node js desde https://nodejs.org/es/ Espero pueda ayudarles.

Esteban Alberto Cañete Xochimitl

student•

lo hice y me funciono, gracias buen aporte solo que deben copiar y pegar npx create-react-app my-app cd my-app npm start en la consola de visual estudio code, tarda como para irte a hechar un cigarrito pero si sale.

Dexter Cosgroove

student•

En los dos meses que llevo en platzi, este curso ha sido la peor experiencia de usuario. Si no fuera por el sistema de participación colectiva, donde compañeros como tu, hacen lo que el tutor no, me sentiría estafado.

Muchas gracias Luis!!!

Henry Gutierrez Mora

student•

Para la pestaña de React, supongo que por otras versiones.. ya no aparece,, salen las pestañas de ++Components++ y ++Profile++r Esta es la descripción:

You will get two new tabs in your Chrome DevTools: "⚛️ Components" and "⚛️ Profiler".

The Components tab shows you the root React components that were rendered on the page, as well as the subcomponents that they ended up rendering.

By selecting one of the components in the tree, you can inspect and edit its current props and state in the panel on the right. In the breadcrumbs you can inspect the selected component, the component that created it, the component that created that one, and so on.

Daniel N. Pozo

student•

Exacto, yo también estuve investigando pero me salen Components y Profiler. Debería estar bien.

Fernando Xavier Beizaga Reyes

student•

Por si desean inicializar un nuevo proyecto en reactjs sigan estos pasos.

Pueden revisar la documentación aquí:

https://create-react-app.dev/

María José Ledesma

student•

¡Muchas gracias por el aporte!

Aderson Rangel Parada

student•

Excelente. Una pregunta como hace esa imagen de tú respuesta.?

Richard Gaona

student•

La verdad es muy frustrante no poder avanzar por falta de detalles en el proceso de todas estas instalaciones y pruebas.

Busque en todos sus comentarios pero seguía teniendo error al ejecutar npm start, luego de dos días buscando en foros encontré esta link que me sirvió , ojalá ayude también a uno de ustedes:

https://stackoverflow.com/questions/60124662/create-react-app-eslint-error-while-deployment-on-local-machine

Agustin Nicolas Diaz

student•

Gracias, me salvaste :3

Víctor H. Torres

student•

Si bien esa solución funciona, pero básicamente elimina la dependencia de eslint en el proyecto y a la final no serviría el plugin instalado en VS Code, o ¿Si?

Sebastián Acevedo Flórez

student•

Es demasiado frustrante cuando en realidad el profesor no explica nada, solo explica que todo sale bien ¿pero qué tal si explicaran cuando todo sale mal o que se debe de instalar?

➜ github-examples-master npm start

react-example@0.1.0 start /mnt/c/Users/POR0074/Documents/Platzi/github-examples-master react-scripts start

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

"eslint": "^6.6.0"

Don't try to install it manually: your package manager does it automatically. However, a different version of eslint was detected higher up in the tree:

/mnt/c/Users/POR0074/Documents/Platzi/github-examples-master/node_modules/eslint (version: 5.16.0)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project. That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem. If this has not helped, there are a few other things you can try: 5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead. This may help because npm has known issues with package hoisting which may get resolved in future versions.

Check if /mnt/c/Users/POR0074/Documents/Platzi/github-examples-master/node_modules/eslint is outside your project directory. For example, you might have accidentally installed something in your home folder.
Try running npm ls eslint in your project folder. This will tell you which other package (apart from the expected react-scripts) installed eslint.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project. That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

Espero que sea de su ayuda

Sergio Alberto Portela Rodriguez

student•

La pregunta correcta es, donde esta el apoyo del Profesor cuando se le requiere?

Arturo Mauricio Terceros Beltrán

student•

Sufrí muchas horas intentando solucionar todos los problemas y errores que aparecían con todas las respuestas del foro pero ninguna me funciono. Hasta que fui a la documentación oficial. Y solucionarlo fue muy simple. les dejo el link.

https://create-react-app.dev/docs/getting-started/

Andrés Felipe Camacho Villegas

student•

Graciaaaaaaas

Sergio Maximiliano Salvatierra

student•

Luis Adad Mora Solis

student•

++Para proximos estudiantes que tengan el error de npm ERR! Solución++.

$ sudo npm cache clean --force $ sudo rm -rf node_modules $ sudo npm install -g $ npm start

Gabriel De Andrade

student•

Ningúno de estos comandos deberian estar siendo corridos con sudo, no es una buena práctica correr todo con sudo, y el comando npm install no debería llevar la bandera -g. y si vas a borrar la carpeta node_modules y tienes este error también aprovecharía de borrar el archivo package-lock.json Quedaría así: $ npm cache clean --force $ rm -rf node_modules package-lock.json $ npm install $ npm start

Nicolas Cardenas

student•

Para alguien que esta empezando todo esto es una completa basura.... no es claro en nada de lo que dice.

John Cardenas

student•

Hola Nicolas. La escuela de JavaScript es algo difícil de entender y seguirle el ritmo si no se tienen conocimientos previos en muchas áreas, mi recomendación sería que tomes primero los cursos básicos de platzi, como el de Programación básica y el de Aprender efectivamente en línea. No te desanimes y empieza por lo básico, verás como poco a poco todo empieza a tener más sentido. Por último, si tienes algo más que decir o unas sugerencias, recuerda que puedes escribir a team@platzi.com y con gusto te responderán.

Israel Yance

student•

Hola Nicolas.

No te frustres, quizás todavía te falta un poco de temas base para que puedas entender.

Te recomiendo, como escribió John, llevar el curso de Programación Básica. https://platzi.com/clases/programacion-basica/ Quizás por algunas partes pueda parecer difícil y te equivoques y no encuentres el error. Pero acá estamos para resolver tus dudas. Trata de completarlo, así demores y lo revises varias veces, una vez que lo pases vas a ver que de ahí todo será más fácil.

Otro curso que te recomiendo es: https://platzi.com/clases/pensamiento-logico/ En esto de la programación se necesita mucha lógica. Lo demás lo aprendes poco a poco.

David Barreto

student•

Les recuerdo esta solución comentada anteriormente por un estudiante: Si les da error al ejecutar npm start, esta es la solución:

$ sudo npm cache clean --force
$ sudo rm -rf node_modules
$ sudo npm install -g
$ npm start

Sergio Armando Medina Chaparro

student•

Gracias. Lo hice y no me funciono.

Sin embargo mate o kill la terminal. Abrí una nueva terminal puse "npm start" y me funcionó.

Juan Carlos Hurtado Dominguez

student•

Funcionó

Sergio Armando Medina Chaparro

student•

No se sorprendan si no encuentran la pestaña de React pues ahora con el React Tool aparecen dos nuevas pestañas:

Components and profiler

Posdata: El sistema no me deja cargar fotos como en otros cursos :(

Alejandro Silván Lagóstena

student•

para solución de problemas con npm start ejecutad estos comandos por orden, desde la carpeta donde habéis instalado node:

rm -rf package-lock.json rm -rf yarn.lock rm -rf node_modules npm install npm start

Ricardo Andres Rojas Alonso

student•

A mi no me aparece en el inspect la sección de "React" en su lugar me aparece "Components", eso sería un problema más adelante? o es normal y no me afecta en nada?

Stiven Jiménez

student•

📌El plugin de React developer tools fue actualizado. No te supondra ningun problema en cursos futuros.✔ En el curso de fundamentos de javascript te explicaran todo mejor 🤟💚

Brayan Leandro Torres Gaona

student•

A mi tampoco me aparece

Google Chrome para desarrollo frontend

Introducción a la línea de comandos

Introducción

Introducción a la terminal

Manejo archivos y directorios

Herramientas básicas (Comandos CAT, MORE, TAIL y OPEN)

Crea llaves SSH

Configuración entorno de desarrollo

Configuración de la terminal MacOS

Instalación y configuración de VSCode

Google Chrome para desarrollo frontend

Cómo instalar NodeJS

Herramientas de desarrollo Backend: JSON Viewer y Postman

Git y GitHub

¿Qué es Git, para qué se usa y qué resuelve?

Instalación de Git

Cómo crear un repositorio, primer commit, reset y logs

Ramas, rebase y merge

Github: configuración, repositorio remoto, push y pull

Cómo crear un buen README.md y sintaxis de markdown

Conclusiones