Creación de proyecto React

Creación de proyecto React

Instalación de la aplicación Create React

Para que React se ejecute correctamente sin errores, necesita varias configuraciones. Se necesita configurar Babel y Webpack al mínimo para que React pueda ejecutarse cuando acceda al navegador. Sin embargo, las configuraciones no deberían ser un obstáculo, y es por eso que Facebook creó una herramienta de utilidad llamada Create React App. La cual evita tener que aprender sobre las configuraciones para iniciar un proyecto en React. El único requisito para usar esta herramienta es que tenga Node y NPM instalados, si tenemos instalado Node y NPM ya podemos crear nuestra primera aplicación utilizando el comando:

				
					npx create-react-app my-first-react-app
				
			

En caso de utilizer Yarn en vez de NPM puedes utilizar el comando:

				
					yarn create react-app my-first-react-app
				
			

Una vez que haya terminado, navegue hasta el directorio creado y ejecute la aplicación usando estos comandos:

				
					cd my-first-react-app
npm start
				
			

En caso de Yarn utilizar el comando:

				
					yarn start
				
			

Finalmente se abrirá una pestaña en el navegador donde se estará ejecutando nuestro proyecto de React.

create-react-app

Están sucediendo muchas cosas bajo de la ejecución de esta aplicación, pero lo más importante que debes saber es que el código completo de la aplicación React se puede encontrar en el directorio src/ y está vinculado al archivo public/index.html.

Para detener la ejecución del proyecto puedes presionar CTRL+C.

Instalación React Developer Tools

React tiene una herramienta de desarrollo que le permite inspeccionar su código en tiempo de ejecución desde el navegador. Esto es muy útil para ver cambios en su código React, sólo necesita descargar el paquete adecuado para su entorno:

Los usuarios de Opera pueden habilitar las extensiones de Chrome y luego instalar la extensión de Chrome. Te recomiendo que uses la extensión Chrome, Firefox o Microsoft Edge, ya que es más fácil trabajar con ellas en comparación con la versión independiente. Para abrir la herramienta de desarrollo, simplemente abra la herramienta de desarrollo de su navegador y aparecerán las pestañas “Components” y “Profiler” en los sitios que usan React.

react-developer-tool

De manera similar a cómo puede inspeccionar CSS en elementos HTML normales, puede inspeccionar el estado y los props de los componentes de React utilizando la herramienta de desarrollador.

Fuente

Facebook
Twitter
LinkedIn

Post relacionados

Post recientes

Search