SAUL SOTELO SUASTEGUI-prueba

 Cómo usar el Hook useState Para que un componente funcional tenga estado propio podemos hacer uso del hook useState. Importar useState: import React, { useState } from 'react'; useState() es una función que crea internamente una variable donde podremos almacenar el estado de nuestro componente. Acepta un valor inicial para esa variable y devuelve un array con dos elementos, el valor de la variable y la función para modificarla . function FavoriteColor() {   const [ valordelavariable ,  funciónparamodificarla ] = useState( valor inicial ); } Es otra manera de definir la función:: const FavoriteColor  = () => {   const [ valordelavariable ,  funciónparamodificarla ] = useState( valor inicial ); } Como el valor devuelto por la función es un array, podemos descomponerlo para acceder a sus elementos de manera individual. const [count, setCount] = useState(0); const FavoriteColor  = () => {   const [ count , setCount ] = useState( 0 ); } Aq...

  Cómo funciona JSX JSX es una extensión de JavaScript, que busca traer la sintaxis de los lenguajes tipo HTML/XML para definir el árbol de elementos de nuestros componentes de React. La sintaxis de JSX por sí misma no puede ser leída o ejecutada por un navegador, para hacerlo, es necesario convertir la sintaxis de JSX en instrucciones válidas del lenguaje. Para que este proceso pase se requiere de un pragma. En programación “pragma” hace referencia a una directiva para el compilador, en otras palabras, un pragma le da instrucciones al compilador para el proceso de compilación. Usamos un pragma en JSX para indicarle al compilador, cómo debe traducir las instrucciones de JSX a JavaScript válido. El pragma es necesario ya que aunque JSX es muy popular en el uso de React, no es el único lugar donde podemos usar JSX. En un proyecto de React preconfigurado como el que obtenemos de usar create-react-app, el pragma de JSX es React.createElement, esta es la función que u...

Qué son los componentes de clase Un componente de clase es aquél que está definido con una clase de JavaScript. Esta clase debe tener dos particularidades: Primero, debe ser una clase de ES6 de JavaScript que herede de React.Component Debe poder implementar un método render() que retorne los elementos de React para la interfaz de dicho componente. Históricamente, un componente de clase se diferencía de un componente funcional en dos principales cosas: La capacidad de administrar un estado propio del componente y la exposición de métodos que pueden ejecutar funcionalidad personalizada en distintas etapas del ciclo de vida de un componente. Sin embargo, con la introducción de hooks en React 16, los componentes funcionales homologaron la funcionalidad de los componentes de clase en que ahora también pueden guardar un estado y ejecutar métodos del ciclo de vida de un componente. En ese sentido, gran parte de la comunidad de desarrolladores que usan React, recomiendan usar c...

  Cómo funciona JSX JSX es una extensión de JavaScript, que busca traer la sintaxis de los lenguajes tipo HTML/XML para definir el árbol de elementos de nuestros componentes de React. La sintaxis de JSX por sí misma no puede ser leída o ejecutada por un navegador, para hacerlo, es necesario convertir la sintaxis de JSX en instrucciones válidas del lenguaje. Para que este proceso pase se requiere de un pragma. En programación “pragma” hace referencia a una directiva para el compilador, en otras palabras, un pragma le da instrucciones al compilador para el proceso de compilación. Usamos un pragma en JSX para indicarle al compilador, cómo debe traducir las instrucciones de JSX a JavaScript válido. El pragma es necesario ya que aunque JSX es muy popular en el uso de React, no es el único lugar donde podemos usar JSX. En un proyecto de React preconfigurado como el que obtenemos de usar create-react-app, el pragma de JSX es React.createElement, esta es la función que u...

Efectos secundarios En programación, llamamos efectos secundarios a las modificaciones que alteran el estado de nuestro programa. Vamos a verlo en términos prácticos comparando dos funciones: ( x , y ) => x + y nombre = “” ; ( value ) => nombre = value ; Decimos que la primera función no produce efectos secundarios, porque la ejecución de la misma no altera nada fuera del alcance de esta función, podemos ejecutar esta función cuantas veces queramos, y nada cambiará. Por otro lado, la segunda función cambia una variable fuera de la ejecución de la función, alterando el estado de la app. Este es un efecto secundario. Cuando hablamos de React, si el componente ejecuta una operación que altera el estado global de la app, estaríamos produciendo un efecto secundario, en general, un componente debe hacer operaciones que alteren al componente mismo, y no más. Por supuesto que hay muchas excepciones, sin embargo, hay que tener en cuenta que el código que no pro...

  Introducción a las props Como menciona la documentación de React: Conceptualmente, los componentes son como las funciones de JavaScript. Aceptan datos de entrada (llamados props) y returnan elementos de React que describen lo que debería aparecer en la pantalla. Las props son la colección de datos que un componente recibe del contenedor padre, y que pueden usarse para definir los elementos de React que retornará el componente. En términos prácticos, si un componente necesita recibir información para funcionar, la recibe vía props. En términos técnicos, las props tienen ciertas características: Son inmutables, que es el adjetivo para lo que no se puede modificar o cambiar. Una prop no se modifica. Pueden tener un valor por defecto Pueden marcarse como obligatorias, cuando un componenente no puede funcionar sin recibir una prop. En JSX, las props se ven como los atributos de los elementos HTML: < Btn value = ”Enviar” / > Estas props pueden recibir un string o ...

  Introducción a los componentes En una aplicación de React, organizamos nuestro código y la funcionalidad en componentes. Conceptualmente, puedes pensar en los componentes como piezas de lego, que juntas forman piezas más complejas, los componentes son las piezas de construcción de una aplicación basada en React. De acuerdo a la documentación de React, un componente es como una función de JavaScript que recibe información y entrega una respuesta, esta respuesta son los elementos de React que deberán aparecer en la interfaz. Una interfaz de React se compone de elementos de React que representan los elementos del DOM, como <div> , o <button> , además de elementos de React que vienen de un componente personalizado como <MiBoton> . Estos componentes encapsulan toda la funcionalidad de un elemento de la interfaz, en un mismo lugar. Es en el componente donde se define qué se va a mostrar, qué datos recibimos, qué datos modificamos y cómo esos datos camb...

Primeros pasos en JSX Como discutimos antes, React no incluye un lenguaje de plantillas como HTML, en cambio, las plantillas y los elementos que conforman una vista se escriben usando código de JavaScript. React expone un método createElement que puedes usar para crear elementos de React a usar en una vista. El código que se muestra a continuación, crea un botón con el texto Enviar: React . createElement ( ‘button’ , { } , ’Enviar’ ) ; Puedes usar el segundo argumento para enviar información hacia el elemento button que se crea: const Btn = ( ) => { return React . createElement ( "button" , { onClick : ( ) => alert ( "Hola" ) } , "Enviar" ) ; } Puedes continuar usando createElement para representar tus vistas, sin embargo, encontrarás pronto que usar esta función hará que el código de tus vistas se vuelva extremadamente largo y verboso, además de difícil de leer y reutilizar. Para solucionar esto, se introduce JSX....

  Cómo usar React en una página React no asume nada acerca de las tecnologías con las que funciona tu proyecto, más allá de que usarás React para las interfaces gráficas, no importa qué lenguaje de backend uses, o si no estás usando ninguno, si usas herramientas de automatización en el frontend o no. Es por esto que existen distintas alternativas para comenzar a usar React en tu aplicación, desde las más simples que te permiten usar React para ciertas partes de tu página, hasta herramientas de automatización para proyectos hechos 100% con React. La forma más simple y rápida de integrar React en tu sitio web, es agregar un par de tags de script para importar la librería, como se describe en la guía para Agregar React en 1 minuto, simplemente agrega estos scripts: https://reactjs.org/docs/add-react-to-a-website.html#step-2-add-the-script-tags Crea un componente y muéstralo en un contedor. Listo, tienes React en tu página web. Alternativamente, puedes usar React como ...