Breaking

Post Top Ad

Your Ad Spot

jueves, 6 de agosto de 2020

Crear tutorial de la aplicación React

Crear tutorial de la aplicación React

La aplicación Create React es una gran herramienta para ponerlo en funcionamiento con React.js muy rápidamente. El desarrollo front-end es complicado con tantas herramientas de construcción que su cabeza girará. La aplicación Create React toma toda esa complejidad y la hace simple. Todo lo que necesita hacer es instalar el paquete usando npm y luego ejecutar algunos comandos simples para crear y ejecutar un nuevo proyecto. La aplicación Create React utiliza Webpack, Babel, ESLint y otros proyectos fantásticos para impulsar su nueva aplicación. Si alguna vez quiere jugar con la configuración detallada, puede "expulsar" de la aplicación Create React y editar sus archivos de configuración directamente. Echemos un vistazo a la configuración de la aplicación Create React y Visual Studio Code para divertirse en la codificación.


Configuración de Visual Studio Code para React Development

En primer lugar, dado que usaremos Visual Studio Code en esta ronda de tutoriales sobre React, instalemos y configuremos algunas extensiones para facilitar las cosas. La primera extensión para instalar es Prettier .
Formateador más bonito para Visual Studio Code

Prettier reformateará su código para que esté bien, Prettier. ¿Y quién no quiere un código bonito? Bonificación: esta extensión puede formatear el marcado JSX que usamos con React. A continuación, podemos instalar la extensión Simple React Snippets que nos brinda algunos atajos increíbles para configurar rápidamente componentes de clase o función en React.
Fragmentos de reacción simple

Aquí están los atajos y lo que hacen por nosotros.

RetazoRenders
imrImportar Reaccionar
imrcImportar React / Componente
imptImportar PropTypes
impcImportar reaccionar / componente puro
ccComponente de clase
cccComponente de clase con constructor
sfcComponente de función sin estado
cdmcomponentDidMount
cwmcomponentWillMount
cwrpcomponentWillReceiveProps
gdsgetDerivedStateFromProps
scushouldComponentUpdate
cwucomponentWillUpdate
cducomponentDidUpdate
cwucomponentWillUpdate
Centros para el Control y la Prevención de EnfermedadescomponentDidCatch
gsbugetSnapshotBeforeUpdate
sssetState
ssfSetState funcional
renhacer
rpropRender Prop
hocComponente de orden superior

Crear una aplicación React

En la introducción a React , utilizamos la herramienta Crear aplicación React para crear rápidamente una aplicación React. Vamos a usar esa herramienta nuevamente ahora mismo para crear una nueva aplicación nuevamente.

reaccionar $ create-react-app reactable
Crear una nueva aplicación React en C: \ node \ react \ reactable.

Instalación de paquetes. Esto puede tomar un par de minutos.
Instalación de react, react-dom y react-scripts ...

Si todo va bien, debería ver algo como esto una vez que se complete la instalación.
npm create-react-app

Ok, con eso fuera del camino, comencemos la aplicación.

reaccionar $ cd reactable
inicio de $ npm reactable

A medida que el servidor se inicia, iniciará automáticamente una ventana del navegador para usted y cargará http: // localhost: 3000 / que debería mostrar la página de bienvenida de bienvenida para la aplicación React.
React_App _-_ Google_Chrome

Ahora, podemos abrir la carpeta que contiene la aplicación reaccionar. En nuestro caso, lo llamamos reactable, por lo que abrimos esa carpeta.
reaccionar estructura de carpetas de aplicaciones

Hay varios archivos y carpetas en la raíz de la aplicación reaccionar. Algunos de ellos son los siguientes:

  • node_modules Contiene la biblioteca React y cualquier otra biblioteca de terceros necesaria.
  • public Contiene los activos públicos de la aplicación. Aquí es donde vive el archivo index.html , que es donde React montará la aplicación de forma predeterminada en el elemento <div id = ”root”> </div>.
  • src Contiene los archivos App.css, App.js, App.test.js, index.css, index.js, logo.svg y serviceWorker.js. El archivo App.js es responsable de mostrar la pantalla de bienvenida predeterminada en React.
  • package-lock.json Se genera automáticamente para cualquier operación en la que npm modifique el árbol node_modules o package.json.
  • package.json Contiene varios metadatos relevantes para el proyecto. Este archivo se utiliza para proporcionar información a npm que le permite identificar el proyecto y manejar las dependencias del proyecto.
  • README.md Deberá leerlo para averiguarlo.

Introducción a JSX

Ahora podemos abrir ese archivo App.js y echar un vistazo a los contenidos en su interior.

Entonces, hay algunas cosas que suceden en el código anterior. En primer lugar, podemos ver que se usa una clase ES6 para crear un componente. En esa clase hay un render()método. En ese método, devolvemos el marcado resaltado. Entonces esta parte se ve un poco cobarde. HTML dentro de JavaScript? Bueno, este marcado no es realmente JavaScript o HTML, sino un tipo especial de marcado conocido como JSX o JavaScript XML. Para que JSX haga lo suyo, debe pasar por un compilador conocido como Babel . Lo que hace Babel toma la sintaxis JSX y la convierte en código JavaScript simple que cualquier navegador entiende. Como ejemplo, tomamos manualmente el código resaltado arriba y lo ejecutamos a través de Babel, este es el código JavaScript resultante.

Entonces puede ver que la forma en que se crean los elementos en React es mediante esa función React.createElement () . La mayoría de las personas prefieren escribir el marcado JSX en lugar del código JavaScript correspondiente. Usar JSX para describir cómo debería verse la IU es definitivamente más fácil que tener que escribir manualmente todas esas llamadas a React.createElement () .

También tenemos el archivo App.css que se importa al archivo App.js como podemos ver.
app-css para crear reaccionar aplicación

App.css utiliza este código CSS para diseñar el componente principal de la aplicación.


App.test.js

Este archivo tiene algún código para comenzar a probar en React.


index.css

El archivo index.css se utiliza para el estilo global de CSS.


index.js

El archivo index.js es el punto de entrada para la aplicación React.


logo.svg

El archivo logo.svg tiene los gráficos SVG para el componente de la aplicación.


serviceWorker.js

Esto se utiliza para crear aplicaciones web progresivas .


Intentando reaccionar sin un paso de compilación

A pesar de que la aplicación Create React hace que comenzar a usar React sea bastante rápido y fácil, tal vez solo desee colocarlo en una página HTML y comenzar. Resulta que esto también es posible y puede simplemente descargar este archivo html , o copiar los contenidos enumerados a continuación y puede comenzar a reaccionar en un solo archivo html. Definitivamente vale la pena si solo quieres patear los neumáticos y aprender un poco sobre cómo funciona React.


Otras lecturas

  • Crear aplicación de reacción: configure una aplicación web moderna ejecutando un comando
  • Crear una nueva aplicación React - React
  • Crear tutorial de aplicación React para principiantes - AppDividend
  • Introducción a React: descripción general y tutorial
  • Introducción a React con la aplicación Create React
  • Crear y ejecutar proyectos de React con create-react-app

Resumen del tutorial Crear aplicación React

Con este tutorial, ahora estamos listos para comenzar a hackear algunas aplicaciones front-end usando react. Haremos exactamente eso en los próximos tutoriales.

No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas