Tutorial React Parte 1: Descripción general del curso, React, ReactDOM y JSX Razones de popularidad

Te presentamos las primeras 5 lecciones del curso de formación para principiantes React . El curso de inglés original, que consta de 48 lecciones, se publica en la plataforma Scrimba.com. Las capacidades de esta plataforma permiten, mientras escucha al presentador, a veces pausar la reproducción e, independientemente, en la misma ventana en la que se realiza la demostración, experimentar con el código. El curso nos pareció interesante, decidimos traducirlo al ruso y convertirlo al formato de publicaciones tradicionales.



Creemos que este curso será útil para todos los que, como dicen, "no saben cómo reaccionar", pero quieren aprender. Al mismo tiempo, se necesita un esfuerzo considerable y tiempo para convertir este curso en publicaciones regulares, por lo tanto, antes de tomar una decisión final sobre el lanzamiento de este proyecto, invitamos a todos a evaluar el curso y participar en una encuesta sobre la viabilidad de traducirlo.

Lección 1. Descripción general del curso y recomendaciones para su desarrollo.

→ Original

Bienvenido al curso React Fundamentals. Mi nombre es Bob Ziroll, les contaré cómo crear proyectos front-end utilizando uno de los marcos web más populares del mundo. He trabajado en el campo de la educación informática durante muchos años, en particular, ahora estoy a cargo de la organización del proceso educativo en V School .

▍Acerca del proceso de desarrollo del curso

A lo largo de los años de desarrollo de cursos de capacitación destinados a ayudar a todos los que desean dominar rápidamente cosas complejas, he desarrollado mi propio enfoque de aprendizaje, del cual creo que será útil hablar.

Para empezar, quiero señalar que la forma más fácil y efectiva de aprender algo es no escatimar esfuerzo y tiempo para practicar. Si desea aprender a programar, cuanto antes comience a hacer algo usted mismo y con mayor frecuencia lo haga, mayores serán sus posibilidades de éxito.

Por lo general, cuando presento a los estudiantes de V School, les doy el siguiente ejemplo de mi propia vida. Recientemente me atrajo trabajar con madera. Leí libros, vi innumerables videos en YouTube, me dio herramientas. Pero no podía hacer nada digno hasta que recogiera las herramientas en mis manos. Solo muchas horas dedicadas a trabajar con una sierra y papel de lija, pegar y atornillar partes me permitieron acercarme a la meta. De hecho, el desarrollo de todo se organiza según el mismo principio. ¿Quieres aprender React? Escribe el código.

La mayoría de las clases en este curso contienen ejercicios. Se espera que intente hacerlo usted mismo. Si usted, habiéndose familiarizado con la tarea del trabajo independiente, procede inmediatamente a la descripción de su solución, entonces, de hecho, elegirá la forma más difícil de aprender Reaccionar. Además, no espere hasta que le ofrezcan practicar: tome la iniciativa y pruebe todo lo que aprende. Intenta trabajar con el código lo más que puedas. En particular, cuando haya dominado Reaccionar un poco: cree algo que le interese, experimente todo lo que tiene curiosidad por experimentar. Esto te permitirá evitar problemas como el " infierno tutorial ".

Otro punto importante de mi enfoque es el entrenamiento a intervalos y la repetición del material cubierto. Estas son las cosas más importantes que le permiten recordar realmente lo que está aprendiendo. No se recomienda apresurarse en el estudio del curso. Este es el camino a ese "infierno tutorial". Con este enfoque, tiene la sensación de que realmente aprendió algo, pero en realidad simplemente no puede recordar lo que "aprendió".

Por lo tanto, moviéndose a través de los materiales, tome descansos frecuentes. No se trata de descansos periódicos de 5-10 minutos, sino de algo más ambicioso. Aprenda un par de principios, practique su uso y luego tome un descanso por un día. Cuando regrese al curso, será muy útil repetir los materiales ya estudiados. Por supuesto, con este enfoque, tomará más tiempo dominar el curso, pero esto tendrá un efecto extremadamente beneficioso en su aprendizaje.
Ahora analicemos brevemente lo que aprende al dominar este curso.

▍ Estructura y requisitos previos

Aquí hay una lista de los temas principales del curso:

• Los componentes Hablando de React, no se puede evitar una discusión sobre el concepto de componentes. Los componentes en React son el bloque de construcción principal para crear fragmentos de HTML adecuados para su reutilización. Y casi todo lo demás de lo que hablaremos está relacionado con cómo usar estos componentes para crear aplicaciones web.
• JSX Esta es una extensión de sintaxis de JavaScript que le permite crear componentes utilizando las capacidades de HTML y JavaScript.
• Estilización de componentes. El estilo le da a los componentes una apariencia atractiva.
• Propiedades e intercambio de datos en la aplicación. Las propiedades se utilizan para transferir datos entre componentes.
• Condición Los mecanismos de estado de los componentes se utilizan para almacenar y administrar datos en una aplicación.
• Manejo de eventos. Los eventos le permiten establecer relaciones interactivas con los usuarios de la aplicación.
• Componentes del ciclo de vida. Estos métodos permiten que el programador influya en varios eventos que ocurren con los componentes.
• Descargue datos de API externas utilizando el protocolo HTTP.
• Trabajar con formularios.

Para ser productivo en este curso, necesita saber HTML, CSS y JavaScript (ES6).

Lección 2. Proyectos formativos

→ Original

En el proceso de completar este curso, desarrollará proyectos educativos. Echa un vistazo a algunos de ellos.

Nuestro primer desarrollo será una aplicación TODO estándar.


Aplicación Todo

Puede parecer un poco aburrido, pero en el curso de su desarrollo se verán involucradas muchas oportunidades, de las que hablaremos en el curso. Puede hacer clic en los elementos de la lista de tareas pendientes, marcarlos como completados y ver cómo cambia su apariencia.


Casos marcados en la aplicación TODO

Y aquí está nuestro proyecto de curso: un generador de memes.


Generador de memes

Al trabajar con esta aplicación, los textos se ingresan en los campos Top Text e Top Text Bottom Text , que, respectivamente, caerán en las partes superior e inferior de la imagen. Al hacer clic en el botón Gen , el programa selecciona aleatoriamente una imagen de meme de la API correspondiente y le agrega texto. Aquí hay un ejemplo de cómo funciona esta aplicación:


Meme listo

Lección 3. ¿Por qué reaccionar y por qué vale la pena aprender?

→ Original

¿Por qué usar React si puedes desarrollar un proyecto web en JavaScript puro? Si está interesado en el desarrollo web, es posible que haya escuchado que React le permite crear aplicaciones muy rápidas cuyo rendimiento excede lo que se puede lograr usando solo JavaScript. Esto se logra mediante el uso de tecnología en React llamada Virtual DOM. No vamos a entrar en detalles sobre Virtual DOM, si desea conocer mejor esta tecnología, puede ver este video.

Por ahora, es suficiente para nosotros saber que Virtual DOM ayuda a que las aplicaciones web se ejecuten mucho más rápido que si estuvieran utilizando JS normales. Otro gran beneficio que React nos brinda es la capacidad de crear componentes web adecuados para su reutilización. Considera un ejemplo.

Tenemos un elemento de navbar estándar de la biblioteca Bootstrap.


Barra de navegación

Si no ha usado Bootstrap antes, sepa que esta es solo una biblioteca CSS que brinda a los desarrolladores web elementos bellamente diseñados. Hay alrededor de cuatro docenas de líneas de código, todo parece bastante engorroso, navegar en dicho código no es fácil. Si incluye todo esto en una página HTML, que ya tiene muchas cosas, el código de dicha página simplemente se sobrecargará con varios diseños.

Los componentes web React le permiten tomar fragmentos de código HTML, organizarlos como componentes separados y, en lugar de agregar estos fragmentos a la página, incluir algo como etiquetas HTML especiales en la estructura de la página. En nuestro caso, en lugar de agregar cuarenta líneas de marcado HTML a la página, es suficiente incluir un componente que contenga este marcado en su composición. Lo tenemos llamado MySweetNavbar .


Enfoque de componentes para Web Forming

Puede nombrar un componente como desee. Como puede ver, el diseño de página basado en componentes es mucho más fácil de leer. El desarrollador ve de inmediato la estructura general de dicha página. En este caso, como puede ver en el contenido de la <body> , hay una barra de navegación ( MySweetNavbar ) en la parte superior de la página, contenido principal ( MainContent ) en el medio y un pie de página ( MySweetFooter ) en la parte inferior de la página.

Además, los componentes no solo mejoran la estructura del código de las páginas HTML. También son adecuados para su reutilización. ¿Qué pasa si varias páginas necesitan la misma barra de navegación? ¿Qué pasa si dichos paneles en diferentes páginas son ligeramente diferentes entre sí? ¿Qué hacer si se usa el mismo panel en muchas páginas y necesita hacer algún cambio? Sin utilizar un enfoque de componentes, es difícil dar respuestas decentes a estas y muchas otras preguntas.

Otra razón para la popularidad de React puede considerarse el hecho de que Facebook está desarrollando y apoyando esta biblioteca. Esto, al menos, significa que React está siendo constantemente manejado por programadores calificados. La popularidad de React y el hecho de que el proyecto es de código abierto, publicado en GitHub, también significa que muchos desarrolladores externos contribuyen al proyecto. Todo esto nos permite decir que React, en el futuro previsible, vivirá y se desarrollará.

Hablando de React y, en particular, por qué vale la pena explorar esta biblioteca, uno no puede evitar recordar el enorme mercado laboral asociado con esta biblioteca. Hoy, los especialistas de React tienen una demanda constante. Si estudias React con el objetivo de encontrar un trabajo en el desarrollo front-end, significa que estás en el camino correcto.

Lección 4: Entorno de desarrollo, ReactDOM y JSX

→ Original

Aquí hablaremos sobre cómo crear una aplicación React simple usando ReactDOM y tocaremos algunos puntos clave sobre JSX. Pero, antes de comenzar a trabajar con el código, hablemos sobre dónde ejecutar este código.

▍ Entorno de desarrollo

Para experimentar con React-code, quizás sería mejor implementar un entorno de desarrollo local completo. Para hacer esto, puede consultar el material recientemente publicado de React.js: una guía intuitiva para principiantes , en particular, a su sección React Application Development Practices. Es decir, para comenzar los experimentos, debe crear una nueva aplicación usando create-react-app , luego iniciar el servidor de desarrollo local y comenzar a editar el código. Si hablamos de los ejemplos más simples, entonces su código se puede ingresar directamente en el archivo index.js estándar, eliminando el código o comentando.

El contenido del archivo index.html en el proyecto creado por create-react-app corresponde a su contenido en los ejemplos que se proporcionarán en este curso. En particular, estamos hablando de la presencia en la página del elemento <div> con la root identificador.

Otra opción que suele ser adecuada para algunos experimentos muy simples es utilizar plataformas en línea como codepen.io. Por ejemplo, aquí hay un proyecto de demostración de la aplicación React de Dan Abramov. La esencia de preparar un proyecto Codepen para experimentos con React es conectar las bibliotecas react y react-dom (esto se puede hacer haciendo clic en el botón Settings en la parte superior de la página, yendo a la sección de JavaScript en la ventana que aparece y conectándose al proyecto, después de encontrarlos con utilizando el sistema de búsqueda incorporado, las bibliotecas necesarias).

Es posible que, para la experimentación, sea conveniente utilizar las capacidades de Scrimba. Para hacer esto, simplemente puede abrir la página para la lección correspondiente. Los enlaces a estas páginas se pueden encontrar debajo de los encabezados con números y nombres de ocupación.

▍Primer programa

Cabe señalar que en nuestros ejemplos utilizaremos las capacidades de ES6 (ES2015), por lo que es muy recomendable que navegue por ellas. En particular, para importar la biblioteca de react al proyecto, se utiliza la siguiente construcción:

 import React from "react" 

Y para que pueda importar la biblioteca react-dom :

 import ReactDOM from "react-dom" 

Ahora usaremos el render() ReactDOM para mostrar algo en la pantalla:

 ReactDOM.render() 

Si decide utilizar un proyecto creado por create-react-app para experimentos, ahora su archivo index.js (abierto en VSCode) se verá como el que se muestra en la siguiente figura.


Introducir código en index.js

Si tiene un servidor de desarrollo ejecutándose y el navegador tiene el http://localhost:3000/ page abierto, guardará los mensajes de error si guarda dicho index.js . Esto, en esta etapa del trabajo, es completamente normal, ya que aún no hemos informado al sistema sobre qué y dónde queremos mostrar el comando render() .

De hecho, ahora es el momento de lidiar con el código que acabamos de escribir. Es decir, aquí importamos React en el proyecto, luego - ReactDOM - para que las capacidades de esta biblioteca pudieran usarse para mostrar algo en la pantalla.

El método render() toma dos argumentos. El primero será lo que queremos sacar, y el segundo será el lugar donde queremos sacar algo. Si esto está escrito en forma de pseudocódigo, entonces resultará lo siguiente:

 ReactDOM.render( ,  ) 

Lo que queremos generar debe estar de alguna manera adjunto a alguna página HTML. El código que escribiremos se convertirá en elementos HTML que aparecerán en la página.

Así es como podría verse esta página.

 <html>   <head>       <link rel="stylesheet" href="style.css">   </head>   <body>       <div id="root"></div>       <script src="index.js"></script>   </body> </html> 

Existen todos los elementos básicos de una página HTML, incluidas la etiqueta <link> y la etiqueta <script> .

Si usa create-react-app , la página index.html se verá un poco diferente. En particular, en su código no hay un index.js importación index.js . El hecho es que al construir un proyecto, la conexión entre index.html e index.js realiza automáticamente .

Tenga en cuenta el elemento <div> con el identificador root . Entre las etiquetas de apertura y cierre de este elemento, React colocará todo lo que creamos. Este elemento puede considerarse un contenedor para toda nuestra aplicación.

Si ahora volvemos al archivo index.js y al ReactDOM render() ReactDOM , su segundo argumento, el lugar donde deben enviarse los datos, será una referencia al elemento <div> con la root identificador. Aquí usaremos JavaScript ordinario, después de lo cual el segundo argumento del método Render se verá así:

 ReactDOM.render( , document.getElementById("root")) 

Con este enfoque, el método render() toma el primer argumento y muestra lo que describe en la ubicación especificada. Ahora pasemos a este primer argumento. Comencemos con el simple elemento <h1> . Y, como suele ser el caso al escribir el primer programa, ¡agregue el texto Hello world! :

 ReactDOM.render(<h1>Hello world!</h1>, document.getElementById("root")) 

Si ahora actualiza la página del navegador, se mostrará, como título del primer nivel, el texto especificado.


El resultado del primer programa.

Aquí puede tener una pregunta sobre por qué colocamos la descripción del elemento HTML en el lugar donde se espera el argumento del método JavaScript. Después de todo, JavaScript, enfrentado a algo como <h1>Hello world!</h1> , probablemente decidirá que el primer carácter de esta expresión es un operador "menos", luego, obviamente, el nombre de la variable viene después, luego el operador de comparación "más" ". JavaScript no reconoce un elemento HTML en esta secuencia de caracteres, y no debería.

Los desarrolladores de React han creado no solo una biblioteca, sino también un lenguaje especial llamado JSX. JSX es muy similar a una variación de HTML. Además, verá que casi todo el código JSX coincide casi por completo con el marcado HTML formado con su ayuda. Existen, por supuesto, diferencias entre JSX y HTML, y las discutiremos gradualmente.

Introdujimos una instrucción bastante simple y breve, pero en las entrañas de React, cuando se ejecuta, suceden muchas cosas interesantes. Entonces, esta instrucción se convierte a su versión de JavaScript, se está generando código HTML, aunque no entraremos en detalles sobre este proceso. Es por eso que necesitamos importar no solo react-dom , sino también react al proyecto, ya que la biblioteca React es exactamente lo que nos permite usar JSX y hacer que las construcciones JSX funcionen como se espera. Si eliminamos la import React from "react" de nuestro ejemplo, guarde el archivo de script y actualice la página, se mostrará un mensaje de error. En particular, create-react-app nos dirá que no puede usar JSX sin acceso a React ( 'React' must be in scope when using JSX react/react-in-jsx-scope ).

El hecho es que aunque React no se usa directamente en nuestro ejemplo, la biblioteca se usa para trabajar con JSX.

Otra cosa sobre trabajar con JSX a la que quiero llamar su atención es que no puede renderizar elementos JSX que siguen uno tras otro. Suponga que después del elemento <h1> necesita generar el elemento <p> . Intentemos usar este diseño:

 ReactDOM.render(<h1>Hello world!</h1><p>This is a paragraph</p>, document.getElementById("root")) // 

Si después de eso, actualiza la página, se mostrará un mensaje de error (en create-react-app parece Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag ). La esencia de este error es que dichos elementos deben estar envueltos en algún otro elemento. Lo que resultará al final debería verse como un elemento con dos elementos anidados en él.

Para que nuestro ejemplo funcione, envolvemos el <h1>Hello world!</h1><p>This is a paragraph</p> código de <h1>Hello world!</h1><p>This is a paragraph</p> en el elemento <div> :

 ReactDOM.render(<div><h1>Hello world!</h1><p>This is a paragraph</p></div>, document.getElementById("root")) 

Si ahora actualiza la página, todo se verá como se esperaba.


Dos elementos HTML por página.

Tomará algún tiempo acostumbrarse a JSX, pero después de eso, su uso será mucho más fácil y conveniente que trabajar con elementos HTML utilizando herramientas estándar de JavaScript. Por ejemplo, para describir el elemento <p> y configurar su contenido utilizando herramientas estándar, necesitará algo como lo siguiente:

 var myNewP = document.createElement("p") myNewP.innerHTML = "This is a paragraph." 

Luego debe conectarlo al elemento que ya está en la página. Este es un ejemplo de programación imperativa, y lo mismo, gracias a JSX, se puede hacer en un estilo declarativo.

Lección 5. Taller. ReactDOM y JSX

→ Original

En la última lección, se reunió con ReactDOM y JSX, y ahora es el momento de poner en práctica este conocimiento.

Completaremos todas las tareas prácticas de la siguiente manera. Primero, en la sección con el encabezado Tarea, se dará la tarea misma y, posiblemente, en la sección Consejos, se darán breves recomendaciones sobre su implementación. Luego seguirá la sección Solución. Se recomienda que haga todo lo posible para completar la tarea usted mismo, y luego lidiar con la solución dada.

Si siente que no está haciendo frente, regrese a la lección anterior, repita el material apropiado e intente nuevamente.

▍Trabajo

Escriba una aplicación React que muestre una lista con viñetas ( <ul> ) en la página. Esta lista debe contener tres elementos ( <li> ) con cualquier texto.

▍Consejos

Primero, debe importar las bibliotecas necesarias al proyecto, y luego usar una de ellas para mostrar los elementos generados usando algún código JSX en la página.

Resumen

Ahora, después de familiarizarse con las primeras lecciones del curso React, le pedimos que participe en la encuesta.

Gracias por su atencion!



→ 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