Tutorial de React, Parte 5: Introducción a una aplicación TODO, estilo básico

Hoy, en la siguiente parte de la traducción del curso de capacitación React, comenzaremos a trabajar en el primer proyecto de capacitación y hablaremos sobre los conceptos básicos del estilo.



→ Parte 1: descripción general del curso, razones de la popularidad de React, ReactDOM y JSX
→ Parte 2: componentes funcionales
→ Parte 3: archivos de componentes, estructura del proyecto
→ Parte 4: componentes principales y secundarios
→ Parte 5: inicio del trabajo en una aplicación TODO, los fundamentos del estilo
→ Parte 6: sobre algunas características del curso, JSX y JavaScript
→ Parte 7: estilos en línea
→ Parte 8: trabajo continuo en la aplicación TODO, familiaridad con las propiedades de los componentes
→ Parte 9: propiedades del componente
→ Parte 10: Taller sobre trabajo con propiedades de componentes y estilo
→ Parte 11: generación de marcado dinámico y método de matrices de mapas
→ Parte 12: taller, tercera etapa de trabajo en una aplicación TODO
→ Parte 13: componentes basados ​​en clases
→ Parte 14: taller sobre componentes basados ​​en la clase, estado de los componentes.
→ Parte 15: talleres de componentes de salud
→ Parte 16: la cuarta etapa de trabajo en una aplicación TODO, manejo de eventos
→ Parte 17: quinta etapa de trabajo en una aplicación TODO, modificando el estado de los componentes
→ Parte 18: la sexta etapa de trabajo en una aplicación TODO
→ Parte 19: métodos del ciclo de vida de los componentes.
Parte 20: la primera lección de representación condicional
→ Parte 21: segunda lección y taller sobre representación condicional
→ Parte 22: la séptima etapa de trabajo en una aplicación TODO, descargando datos de fuentes externas
→ Parte 23: primera lección sobre trabajar con formularios
→ Parte 24: Segunda lección de formularios
→ Parte 25: Taller sobre trabajo con formularios
→ Parte 26: arquitectura de la aplicación, patrón de contenedor / componente
→ Parte 27: proyecto del curso

Lección 11. Taller. TODO aplicación. Etapa número 1

→ Original

En esta lección, comenzaremos a trabajar en nuestro primer proyecto de capacitación: la aplicación TODO. Clases similares se enmarcarán como talleres ordinarios. Primero, se le asignará una tarea, para cuya implementación será necesario navegar en el material previamente estudiado, después de lo cual se presentará una solución.

Trabajaremos en esta aplicación durante bastante tiempo, por lo tanto, si usa create-react-app , se recomienda crear un proyecto separado para ella.

▍Trabajo

• Crea una nueva aplicación React.
• Muestre el componente <App /> en la página utilizando el archivo index.js .
• El componente <App /> debería generar código para mostrar 3-4 banderas con algo de texto detrás de ellas. El texto puede formatearse usando etiquetas <p> o <span> . Lo que puede hacer debe parecerse a una lista de tareas en la que ya se han realizado algunas entradas.

▍Solución

El código para el archivo index.js :

 import React from 'react' import ReactDOM from 'react-dom' import App from './App' ReactDOM.render(   <App />,   document.getElementById('root') ) 

App.js archivo App.js :

 import React from "react" function App() {   return (       <div>           <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>                     <input type="checkbox" />           <p>Placeholder text here</p>       </div>   ) } export default App 

Así es como se ve el proyecto estándar create-react-app en VSCode en esta etapa del trabajo.


Proyecto en VSCode

Esto es lo que nuestra aplicación ahora muestra en la página.


Apariencia de la aplicación en el navegador

Hoy hemos dado el primer paso hacia una aplicación TODO. Pero lo que muestra esta aplicación en la pantalla no se ve tan agradable como lo que apareció en las páginas durante nuestros experimentos anteriores. Por lo tanto, en la próxima lección nos centraremos en diseñar los elementos.

Lección 12. Estilo en React usando clases de CSS

→ Original

Ahora trabajaremos en la aplicación que se creó como resultado del taller en la lección 10. Esto es lo que la aplicación mostró en la pantalla.


Página de aplicación en el navegador

Nos gustaría diseñar los elementos de la página. React tiene muchos enfoques de estilo. Ahora estamos utilizando el enfoque con los principios de los cuales probablemente ya esté familiarizado. Consiste en aplicar clases CSS y reglas CSS asignadas a estas clases. Echemos un vistazo a la estructura de este proyecto y pensemos qué elementos deben asignarse a las clases que se utilizarán para diseñarlos.


Proyecto en VSCode

El archivo index.js responsable de representar el componente de la App . El componente de App muestra un elemento <div> , que contiene otros tres componentes: Header , MainComponent y Footer . Y cada uno de estos componentes simplemente muestra un elemento JSX con texto. Es en estos componentes que participaremos en el diseño. Trabajemos en el componente Header . Recuerde que en esta etapa de su trabajo, su código se ve así:

 import React from "react" function Header() {   return (       <header>This is the header</header>   ) } export default Header 

Por lo general, cuando trabajan con código HTML y desean asignar una clase a un determinado elemento, esto se hace utilizando el atributo de class . Supongamos que vamos a asignar dicho atributo a un elemento <header> . Pero aquí no debemos olvidar que estamos trabajando no con código HTML, sino con JSX. Y aquí no podemos usar el atributo de class (de hecho, puede usar el atributo con este nombre, pero esto no es recomendable). En su lugar, className un atributo llamado className . Muchas publicaciones dicen que la razón de esto es porque la class es una palabra clave JavaScript reservada. Pero, de hecho, JSX usa la API JavaScript normal para trabajar con el DOM. Para acceder a elementos utilizando esta API, se utiliza un diseño familiar del siguiente formulario:

 document.getElementById("something") 

Para agregar una nueva clase a un elemento, proceda de la siguiente manera:

 document.getElementById("something").className += " new-class-name" 

En una situación similar, es más conveniente usar la propiedad de elementos classList , en particular, porque tiene métodos convenientes para agregar y eliminar clases, pero en este caso no importa. Y lo importante es que la propiedad className se usa className .

De hecho, para asignar clases a elementos JSX, es suficiente que sepamos que cuando la palabra clave de class se usa en HTML, la palabra clave className debe usarse en JSX.

Asigne la clase navbar al navbar <header> :

 import React from "react" function Header() {   return (       <header className="navbar">This is the header</header>   ) } export default Header 

Ahora, en la carpeta de components , cree el archivo Header.css . Pon el siguiente código en él:

 .navbar { background-color: purple; } 

Ahora conecte este archivo a Header.js con el comando de import "./Header.css" (con este comando, ampliando las capacidades del comando de import estándar, le decimos al paquete Webpack, que se usa en proyectos creados usando create-react-app , que queremos use Header.css en Header.js ).

Así es como se verá en VSCode.


Archivo de estilo y su conexión en VSCode

Todo esto conducirá al hecho de que cambia la apariencia de la línea superior que muestra la aplicación en la página.


Cambiar estilo de línea superior

Aquí usamos un estilo extremadamente simple. Header.css contenido del archivo Header.css lo siguiente:

 .navbar {   height: 100px;   background-color: #333;   color: whitesmoke;   margin-bottom: 15px;   text-align: center;   font-size: 30px;   display: flex;   justify-content: center;   align-items: center; } 

Además, abra el archivo index.css ya existe en el proyecto y index.css el siguiente estilo:

 body {   margin: 0; } 

index.js este archivo en index.js con el comando de import "./index.css" . Como resultado, la página de la aplicación tomará la forma que se muestra en la siguiente figura.


Cambiar estilo de página

Tenga en cuenta que los estilos especificados en index.css han afectado a todos los elementos de la página. Si utiliza, por ejemplo, algún tipo de editor en línea para experimentación, el trabajo con archivos de estilo se puede organizar de una manera especial. Por ejemplo, en un editor de este tipo puede haber un único archivo de estilo estándar que se conecta automáticamente a la página, las reglas CSS descritas se aplicarán a todos los elementos de la página. En nuestro ejemplo simple, sería completamente posible poner todos los estilos en index.css .

En realidad, suponiendo que ya esté familiarizado con CSS, podemos decir que aquí usamos exactamente el mismo código CSS que se utiliza para diseñar elementos HTML comunes. Lo principal a tener en cuenta al diseñar elementos con clases en React es que, en lugar del atributo del elemento de class utilizado en HTML, className utiliza className .

Además, debe tenerse en cuenta que las clases solo se pueden asignar a elementos React, como <header> , <p> o <h1> . Si intenta asignar un nombre de clase a una instancia de componente, como <Header /> o <MainContent /> , el sistema se comportará de manera bastante diferente de lo que podría esperar. Hablaremos de esto más tarde. Mientras tanto, solo recuerde que las clases en las aplicaciones React se asignan a elementos, no a componentes.

Aquí hay algo más que puede resultarle difícil comenzar con React. Estamos hablando de elementos de estilo que tienen diferentes niveles de jerarquía en la página. Digamos que esto sucede cuando se usan las tecnologías CSS Flexbox o CSS Grid para el estilo. En tales casos, por ejemplo, cuando se usa el diseño Flex, debe saber qué entidad es el contenedor flexible y qué entidades son elementos flexibles. A saber, puede ser difícil de entender: cómo diseñar exactamente los elementos, a qué elementos aplicar ciertos estilos. Supongamos, por ejemplo, que el elemento <div> de nuestro componente de App debe ser un contenedor flexible:

 import React from "react" import Header from "./components/Header" import MainContent from "./components/MainContent" import Footer from "./components/Footer" function App() {   return (       <div>           <Header />           <MainContent />           <Footer />       </div>   ) } export default App 

En este caso, los elementos flexibles se muestran mediante los componentes Header , MainContent y Footer . Eche un vistazo, por ejemplo, al código del componente Header :

 import React from "react" import "./Header.css" function Header() {   return (       <header className="navbar">           This is the header       </header>   ) } export default Header 

El elemento <header> debe ser un descendiente directo del elemento <div> componente de la App . Debe estilizarse como un elemento flexible.

Para comprender la estilización de tales estructuras, debe considerar cuál será el código HTML generado por la aplicación. Abriremos la pestaña Elements de las herramientas de desarrollador de Chrome para la página que aparece en el navegador cuando trabaje con un proyecto creado usando la aplicación create-react-app .


Código de página

El elemento <div> con la root del identificador es el elemento de la página index.html que nos referimos en el método ReactDOM.render() llamado en el archivo index.js . El marcado generado por el componente de la App se muestra en él, es decir, el siguiente elemento <div> , que contiene los elementos <header> , <main> y <footer> formados por los componentes correspondientes.

Es decir, al analizar el código de la aplicación React proporcionada anteriormente, podemos suponer que la construcción <Header /> en el componente de la App se reemplaza con la <header className="navbar">This is the header</header> construcción <header className="navbar">This is the header</header> . Comprender este hecho le permite utilizar esquemas complejos para diseñar elementos de página.

Con esto concluye nuestra primera introducción al estilo de las aplicaciones React. Se recomienda que experimente con lo que acaba de descubrir. Por ejemplo, intente <MainContent /> elementos <MainContent /> por los <MainContent /> y <Footer /> <MainContent /> .

Resumen

Hoy comenzamos a desarrollar nuestro primer proyecto de capacitación: aplicaciones TODO, y también nos familiarizamos con el estilo de las aplicaciones React usando clases de CSS. La próxima vez hablaremos sobre las características de estilo de código a las que se adhiere el autor de este curso, así como algunas cosas sobre JSX y JavaScript.

Estimados lectores! ¿Ya tienes una idea para una aplicación que te gustaría crear usando React?