Curso de capacitación de React, Parte 28: Reaccionar características modernas, ideas de proyectos, conclusión

Hoy, en la parte final de la traducción del curso React, hablaremos sobre las capacidades modernas de React y discutiremos las ideas de las aplicaciones React, creando lo que puede repetir lo que aprendió mientras toma este curso y aprender mucho.



→ 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
→ Parte 28: características actuales de React, ideas de proyectos, conclusión
→ ¡ El final!

Lección 46. Desarrollo de aplicaciones modernas de reacción

→ Original

Muchos programadores en Facebook están trabajando en la biblioteca React, y los miembros de la gran comunidad alrededor de React están contribuyendo al proyecto. Todo esto lleva al hecho de que React se está desarrollando muy rápidamente. Por ejemplo, si estudió React a principios de 2019 y examinó los materiales de esta biblioteca, por ejemplo, hace dos años, no pudo evitar notar los cambios que se han producido en React desde la publicación de esos materiales. Por ejemplo, en React 16.3, aparecieron algunos métodos nuevos del ciclo de vida de los componentes y algunos métodos quedaron en desuso. Y, digamos, en React 16.6 hay aún más características nuevas. Se espera una gran cantidad de innovaciones en React 17.0 y en futuras versiones de esta biblioteca.

Ahora hablaremos sobre algunas características modernas de React.

Muchas de estas características dependen de qué versión de la especificación ECMAScript es compatible con las herramientas utilizadas para desarrollar el proyecto React. Digamos que si usa el transportador Babel, esto significa que tiene las últimas funciones de JavaScript. Debe tenerse en cuenta que cuando se utilizan funciones de JavaScript en proyectos que aún no están incluidos en el estándar, puede encontrar el hecho de que, si se incluyen en el estándar, pueden cambiar.

Una de las características modernas de JavaScript que puede usar al desarrollar aplicaciones React es la capacidad de declarar métodos de clase utilizando la sintaxis de la función de flecha.

Aquí está el código para el componente de la App que muestra el campo de texto:

 import React, {Component} from "react" class App extends Component {   //        constructor() {       super()       this.state = {           firstName: ""       }       this.handleChange = this.handleChange.bind(this)   }     //        handleChange(event) {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App 

Así es como se ve la página de esta aplicación en un navegador.


Aplicación en navegador

Reescribimos el método handleChange() como una función de flecha, llevando el código del componente a la siguiente forma:

 import React, {Component} from "react" class App extends Component {   //        constructor() {       super()       this.state = {           firstName: ""       }   }     //        handleChange = (event) => {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App 

Durante esta conversión, se hicieron pequeños cambios en el código, pero estos cambios tienen un impacto serio en cómo funcionará el método. La this en funciones de flecha indica el alcance léxico en el que se encuentran. Estas funciones no admiten this enlace. Esta característica de las funciones de flecha lleva al hecho de que los métodos declarados utilizándolos no necesitan estar vinculados a this en el constructor de la clase.

Otra posibilidad que consideraremos aquí es usar propiedades de clase. Ahora, al inicializar el estado en el constructor, usamos la this.state . Entonces creamos una propiedad de instancia de la clase. Ahora, las propiedades se pueden crear fuera del constructor. Como resultado, puede convertir el código de la siguiente manera:

 import React, {Component} from "react" class App extends Component {   //        state = { firstName: "" }     //        handleChange = (event) => {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App 

Tenga en cuenta que aquí nos deshicimos del constructor inicializando el estado al declarar la propiedad correspondiente. Todo indica que esta función JS se incluirá en el estándar en el futuro previsible.

Aquí hay una lista de características de React.

• API de contexto Se puede usar en lugar de Redux, aunque esto no significa que la biblioteca de Redux haya perdido su relevancia.
• Límites de errores .
• Render plantilla de accesorios .
• Componentes de orden superior .
• Reaccionar enrutador .
• Reaccionar ganchos .
• Nuevas características de React 16.6 .

En general, se puede observar que, dado que React se está desarrollando muy rápidamente, se recomienda que todos los involucrados en el desarrollo de React supervisen constantemente las innovaciones de esta biblioteca .

Lección 47. Reaccionar ideas de proyectos

→ Original

Durante el desarrollo de React, usted y yo creamos un par de proyectos: una aplicación Todo y un generador de memes. Es posible que ya sepa lo que desea crear con React. Quizás ya estás desarrollando tu propia aplicación. Si aún no lo ha decidido, y dado que la práctica es la mejor manera de aprender tecnología informática, aquí está : materiales donde encontrará un montón de ideas para aplicaciones web que se pueden crear con React.

Lección 48. Conclusión

→ Original

Felicidades Acaba de completar un curso en la biblioteca React. Se ha familiarizado con los componentes básicos de las aplicaciones React, que ya puede usar para crear sus propios proyectos. Es cierto, si quieres crear algo usando React, prepárate para el hecho de que todavía tienes mucho que aprender.

Repasemos los conceptos básicos que aprendió durante el desarrollo de este curso.

• JSX JSX le permite describir las interfaces de usuario utilizando una sintaxis muy similar al código HTML normal.
• Dos enfoques para el desarrollo de componentes. Componentes basados ​​en clase y funcionales.
• Diferentes formas de diseñar aplicaciones React.
• Pasar propiedades de componentes principales a componentes secundarios.
• Usar el estado de los componentes para almacenar y trabajar con datos.
• Representación condicional.
• Trabajar con formularios en React.

Gracias por su atencion!

Estimados lectores! Le pedimos que comparta sus impresiones de este curso y nos cuente sobre lo que desea desarrollar (o ya está desarrollando) utilizando React.