Andres Bernal

Andres Bernal

Developer.

© 2019

🏁 GUIA RAPIDA DE REACTJS

OOP

REACTJS Es una libreria de codigo abierto creada y soportada por facebook, El primer paso para entender reactjs es que usamos codigo javascript con una extension JSX que permite escribir HTML directamente sobre javascript al crear proyectos SPA’s (Single Page Application), nos permitira tener un codigo mas legible y facil de mantener

Sin embargo JSX no es un apropiado javascript. JSX debe se compilado dentro de javascript. sera BABEL la herramienta creada para este proceso Como pasa en algunas ocasiones esta herramienta alertara en caso de error

♠️ INSTALANDO REACTJS

Contamos con multiples maneras de hacerlo,La opcion mas rapida es la siguiente tener instalado :

npm ó yarn son gestores de paquetes muy utiles

  • Tener NodeJs >= 4.
  • Abrimos la terminal y usamos los siguientes comandos

Instalaremos el paquete global de Create React App:

npm install -g create-react-app

Ingresar a la carpeta en donde pondrás tus proyectos y ejecutar:

create-react-app nombreProyecto

Y por último, iniciar la aplicación:

npm start

Si todo funciona correra en el puerto 3000. Se abrira el navegador, de lo contrario , sólo usamos la siguiente direccion: http://localhost:3000 y de React estara listo!!!

♠️ Ejecutando las primeras lineas

Si todo ha salido bien REACT crea un componente llamado App representado por el archivo App.js, este componente es utilizado en el archivo index.js donde podemos empezar.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>Primera aplicacion ReactJS</h1>
        <h2> Create React App --Aqui comienza todo -- </h2>
      </div>
    );
  }
}
export default App;

♠️ Como añadir comentarios

const JSX = (
<div>
  <h1>Esto es un bloque JSX</h1>
  { /* Esto es un comentario */ }
  <p>mensaje creado de forma aleatoria</p>
</div>);

♠️ Renderizando el DOM

Para este SCRIPT tenemos un div con un id llamado ‘reactMensaje’ listo para ejecutarse

const JSX = (
<div>
  <h1>MENSAJE DESDE REACT</h1>
  <p>RENDERIZANDO EL DOM</p>
</div>
);
ReactDOM.render(JSX, document.getElementById('reactMensaje'));

El primer elemento de REACT es renderizado y el segundo es el DOM donde queremos renderizar el componente tambien ReactDOM.render() es llamado despues de las declaraciones de elemento de JSX, es conveniente declarar las variables antes de usarlas

♠️ Entendiendo jsx

Una de las diferencias de escribir en REACTJS con JSX es que no se pueden nombrar las clases como lo hacemos con HTML o creara un mensaje de error en consola, el motivo es que en JAVASCRIPT la palabra class esta reservada. La forma correcta es escribirlo es asi className

const JSX = (
<div className = 'myBloque'>
  <h1>añadiendo class en este bloque</h1>
</div>);

♠️ Cerrado de etiquetas

Otra diferencia que nos encontraremos es prestar atencion al cerrado de etiquetas lo normal es <div></div> sin embargo escribi esto <br></br> dara un error,lo apropiado es <br/>

Cualquier elemento JSX puede escribirse con una etiqueta de cierre automático, y cada elemento debe estar cerrado. La etiqueta de salto de línea, por ejemplo, siempre debe escribirse como
para que JSX sea válida y pueda ser transpilada. Un <div>, por otro lado, puede escribirse como <div /> o <div> </div>. La diferencia es que en la primera versión de sintaxis no hay forma de incluir nada en <div />.


const JSX = (
<div>
  {}
  <h2>HELLO  React!</h2> <br />
  <p>Revisar que las etiquetas esten cerradas</p>
  <hr />
  {}
</div>
);

♠️ Crear un stateless-functional-Component

Los componentes son el núcleo de React.

Todo en React es un componente

y Hay dos formas de crear un componente React.

La primera forma es usar una función de JavaScript,La definición de un componente de esta manera crea un componente funcional sin estado.

El concepto de estado lo escribire mas adelante. ahora, piense en un componente sin estado como uno que puede recibir datos y procesarlos, pero no administra ni rastrea cambios en esos datos.

Para crear un componente con una función, es simple escriba una función de JavaScript que devuelva JSX o nulo. Una cosa importante a tener en cuenta es que React requiere que el nombre de su función comience con una letra mayúscula. Aquí hay un ejemplo de un componente funcional sin estado que asigna una clase HTML en JSX:

const MiComponente = function() {
  
  return (
    <div>
      MENSAJE
    </div>
  );
  
}

♠️ Crear un React Component

En React.Component. El constructor es un método especial utilizado durante la inicialización de objetos que se crean con la palabra clave de clase. Es una buena práctica llamar al constructor de un componente con super, y pasarle props a ambos. Esto asegura que el componente se inicialice correctamente.



Class Gato extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <h1>saludos!!</h1>
    );
  }
}

♠️ Crear un Component con Composition

Ahora veremos cómo podemos componer varios componentes de React piensa que estás creando una aplicación y has creado tres componentes, una barra de navegación, un tablero de instrumentos y un pie de página. Para componer estos componentes juntos, puede crear un componente primario de la aplicación que represente cada uno de estos tres componentes como secundarios. Para representar un componente como un elemento secundario en un componente React, incluya el nombre del componente escrito como una etiqueta HTML personalizada en el JSX.

const componenteHijo = () => {
  return (
    <div>
      <p>Soy el hijo </p>
    </div>
  );
};

class ComponentePadre extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>soy el padre</h1>
        
        <componenteHijo />
        
      </div>
    );
  }
};

♠️ Usar React Render para anidar Components

Hay muchas formas diferentes de componer componentes con React. La composición de componentes es una de las características poderosas de React. Cuando trabaje con React, es importante comenzar a pensar en su interfaz de usuario en términos de componentes Usted divide su interfaz de usuario en sus bloques de construcción básicos, y esas piezas se convierten en componentes. Esto ayuda a separar el código responsable de la IU del código responsable de manejar la lógica de la aplicación. Puede simplificar enormemente el desarrollo y mantenimiento de proyectos complejos.

const TiposDeFrutas = () => {
  return (
    <div>
      <h2>Frutas:</h2>
      <ul>
        <li>Manzanas</li>
        <li>Moras</li>
        <li>Frambuesas</li>
        <li>Bananas</li>
      </ul>
    </div>
  );
};

const Frutas = () => {
  return (
    <div>
      
        <TiposDeFrutas />
      
    </div>
  );
};

class TiposDeComida extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h1>Tipos de comida:</h1>
        
        <Frutas />
        
      </div>
    );
  }
};

♠️ Componer React Componentes

La representación de los componentes de la clase de estilo ES6 dentro de otros componentes no es diferente de la representación de los componentes simples.Puede representar elementos JSX, componentes funcionales sin estado y componentes de clase ES6 dentro de otros componentes.

class Frutas extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h2>Frutas:</h2>
        
        <NonCitrus />
        <Citricos />
        
      </div>
    )
  }
}

class TiposDeComida extends React.Component {
  constructor(props) {
     super(props);
  }
    render() {
      return (
        <div>
        <h1>Tipos de Comida:</h1>
          
          <Frutas />
          
          <Vegetales/>
        </div>
      );
    }
};

♠️ Renderizar una Class Component Hacia el DOM

Puede recordar que usó la API ReactDOM anteriormente para representar elementos JSX al DOM. El proceso para renderizar componentes React se verá muy similar. Los anteriiores scripts se enfocaron en los componentes y la composición, por lo que el renderizado se realizó para usted entre bastidores. Sin embargo, ninguno de los códigos React que escriba se procesarán en el DOM sin hacer una llamada a la API ReactDOM. Aquí hay una actualización de la sintaxis: ReactDOM.render (componentToRender, targetNode).

El primer argumento es el componente React que desea procesar. El segundo argumento es el nodo DOM en el que desea procesar ese componente. Los componentes de React se pasan a ReactDOM.render () un poco diferente a los elementos de JSX. Para los elementos JSX, pasa el nombre del elemento que desea representar. Sin embargo, para los componentes React, debe usar la misma sintaxis como si estuviera representando un componente anidado, por ejemplo, ReactDOM.render (, targetNode). Utilice esta sintaxis para los componentes de clase ES6 y los componentes funcionales.

Class TiposDeComida extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>Tipos de comida:</h1>
        
          <Frutas />
           <Vegetales />
        
      </div>
    );
  }
};
ReactDOM.render(<TiposDeComida />, document.getElementById('nodo'));

♠️ Escribir un React Component desde 0

Ahora que ha aprendido los conceptos básicos de los componentes JSX y React, le propongo escribir un componente por su cuenta. Los componentes de React son los componentes básicos de las aplicaciones de React, por lo que es importante familiarizarse con su escritura. Recuerde, un componente típico de React es una clase ES6 que extiende React.Component. Tiene un método de procesamiento que devuelve HTML (desde JSX) o nulo. Esta es la forma básica de un componente React. Una vez que entienda esto bien, estará preparado para comenzar a construir proyectos React más complejos.


class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>He creado mi primer componente!</h1>
      </div>
    );
  }
};

ReactDOM.render(<MyComponent />, document.getElementById('nodo'));

♠️ Pasar Props a Stateless Functional Component

los scripts anteriores cubrieron la creación y composición de elementos JSX, componentes funcionales y componentes de clase de estilo ES6 en React. Con esta base, es hora de ver otra característica muy común en React: props. En React, puede pasar propiedades a componentes secundarios. Supongamos que tiene un componente de la aplicación que muestra un componente secundario llamado Bienvenido, que es un componente funcional sin estado. Puede pasar la propiedad de bienvenida de un usuario escribiendo:


<App>
  <Welcome user='Andresshare' />
</App>

Usted usa atributos HTML personalizados creados por usted y respaldados por React para pasarlos al componente. En este caso, el usuario de la propiedad creada se pasa al componente Bienvenido. Como Welcome es un componente funcional sin estado, tiene acceso a este valor así:

	const Welcome = (props) => <h1>Hello, {props.user}!</h1>

Es estándar llamar a este valor props y cuando se trata de componentes funcionales sin estado, básicamente lo considera como un argumento de una función que devuelve JSX. Puede acceder al valor del argumento en el cuerpo de la función. Con los componentes de clase.revisemos el siguiente script

const fechaActual = (props) => {
  return (
    <div>
      
      <p>fecha: {props.date}</p>
      
    </div>
  );
};

class Calendario extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Que dia es?</h3>
        
        <fechaActual date={Date()} />
        
      </div>
    );
  }
};

♠️ Pasar un Array como Props

En el script anterior se paso información de un componente principal a un componente secundario como propiedades o propiedades. ahora pasaremos las matrices como props. Para pasar una matriz a un elemento JSX, se debe tratar como JavaScript y se debe incluir entre llaves.


<ParentComponent>
  <ChildComponent colors={["verde", "rojo", "azul"]} />
</ParentComponent>

El componente hijo tiene acceso a los colores de la propiedad de la matriz. Se pueden usar métodos de matriz como join() al acceder a la propiedad. const ChildComponent = (props) => <p & gt {props.colors.join (',')} </ p & gt Esto unirá todos los elementos de la matriz de colores en una cadena separada por comas y producirá: <p> verde, azul, rojo </p> Más adelante, escribire sobre otros métodos comunes para procesar matrices de datos en React.

Revisemos el script siguiente de cosas por hacer

Al representar cada Lista desde el componente de Tareas pendientes, se pasa una propiedad de tareas asignadas a una serie de tareas a realizar, por ejemplo [“pasear perro”, “entrenamiento”]. Luego se accede a esta matriz de tareas en el componente Lista, mostrando su valor dentro del elemento p. Usando join (",") para mostrar props.tasksarray en el elemento p como una lista separada por comas. La lista tiene 2 tareas y la de mañana tiene 3 tareas.

const List= (props) => {
  return <p>{props.tasks.join(', ')}</p>
};

class ToDo extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>Listado de pendientes</h1>
        <h2>Hoy</h2>
        <List tasks={['estudiar', 'ejercicio']} />
        <h2>mañana</h2>
        <List tasks={['comprar manzanas', 'ordenar boletas', 'comprar agua ']} />
      </div>
    );
  }
};

♠️ Usar Props por defecto

React también tiene una opción para establecer props predeterminados. Puede asignar props predeterminados a un componente como una propiedad en el propio componente y React asigna el apoyo predeterminado si es necesario. Esto le permite especificar lo que debe ser un valor de propiedad si no se proporciona ningún valor explícitamente. Por ejemplo, si declara MyComponent.defaultProps = {location: 'Miami'}, ha definido un prop de ubicación que se establece en la cadena Miami, a menos que especifique lo contrario. React asigna propiedades predeterminadas si las propiedades no están definidas, pero si pasa nulo como el valor de una propiedad, permanecerá nulo.


const carroDecompra = (props) => {
  return (
    <div>
      <h1>Componente de carro de compra </h1>
    </div>
  )
};

carroDecompra.defaultProps = {
  items: 0
}

♠️ sobrescribir Default Props

La capacidad de establecer props predeterminados es una característica útil en React. La forma de sobreescribir los props predeterminados es establecer explícitamente los valores de prop para un componente

const Articulos = (props) => {
  return <h1>Cantidad de articulos: {props.cantidad}</h1>
}

Articulos.defaultProps = {
  quantity: 0
}

class CarroDeCompras extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    
    return <Articulos cantidad = {10} />
    
  }
};

♠️ Usar PropTypes para Definir las Props esperadas

React proporciona funciones útiles de verificación de tipos para verificar que los componentes reciban props del tipo correcto. Por ejemplo, su aplicación hace una llamada a la API para recuperar datos que espera estar en una matriz, que luego se pasa a un componente como prop. Puede establecer propTypes en su componente para requerir que los datos sean de tipo array. Esto arrojará una advertencia útil cuando los datos sean de cualquier otro tipo.

Se considera una buena práctica establecer los tipos de propiedades cuando conoce el tipo de propiedad con anticipación. Puede definir una propiedad propTypes para un componente de la misma manera que definió los Predeterminados predeterminados. Al hacer esto se verificará que los accesorios de una clave dada estén presentes con un tipo dado. Aquí hay un ejemplo para requerir la función de tipo para un prop llamado handleClick: MyComponent.propTypes = {handleClick: PropTypes.func.isRequired} En el script anterior, la parte PropTypes.func verifica que handleClick es una función. Agregar isRequired le dice a React que handleClick es una propiedad requerida para ese componente. Verá una advertencia si no se proporciona.

También note que func representa la función. Entre los siete tipos primitivos de JavaScript, la función y el booleano (escrito como bool) son los únicos dos que utilizan una ortografía inusual.

Además de los tipos primitivos, hay otros tipos disponibles.


const Articulos = (props) => {
  return <h1>Cantidad de articulos: {props.cantidad}</h1>
};

Articulos.propTypes = {
  cantidad: PropTypes.number.isRequired
};


Articulos.defaultProps = {
  cantidad: 0
};

class CarroDeCompras extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <Articulos />
  }
};

♠️ Acceder a Props usando this.props

En el script anterior pase las props a los componentes secundarios. Pero, ¿qué sucede si el componente secundario al que le está pasando un props es un componente de clase ES6, en lugar de un componente funcional sin estado? El componente de clase ES6 utiliza una convención ligeramente diferente para acceder a accesorios. Cada vez que refiera a un componente de clase dentro de sí mismo, use esta palabra clave.

Para acceder a los accesorios dentro de un componente de clase, debe comenzar con el código que usa para acceder a él. Por ejemplo, si un componente de clase ES6 tiene una propiedad llamada datos, escribe {this.props.data} en JSX.

class devuelveClaveTemporal extends React.Component {
  constructor(props) {
    super(props);

  }
  render() {
    return (
        <div>
            <p>su clave temporal es: <strong>{this.props.tempClave}</strong></p>
        </div>
    );
  }
};

class ReinicioClave extends React.Component {
  constructor(props) {
    super(props);

  }
  render() {
    return (
        <div>
          <h2>Reiniciar clave</h2>
          <h3>nuevo clave temporal para ud</h3>
          <h3>reinicie el password de su cuenta.</h3>
          <ReturnTempPassword tempPassword="BerACDFPbq34n55z1" />
          class ReturnTempPassword extends React.Component {
  constructor(props) {
    super(props);

  }
  render() {
    return (
        <div>
            <p>Su clave temporal es: <strong>{this.props.tempClave}</strong></p>
        </div>
    );
  }
};

class ResetPassword extends React.Component {
  constructor(props) {
    super(props);

  }
  render() {
    return (
        <div>
          <h2>Reiniciar Clave </h2>
          <h3>clave temporal</h3>
          <h3>configure el reser de su cuenta de usuario.</h3>
          
          <devuelveClaveTemporal tempClave="BerACDFPbq34n55z1" />
          
        </div>
    );
  }
};
        </div>
    );
  }
};


♠️ Usando Props con Stateless Functional Components

Un componente funcional sin estado es cualquier función que usted escribe que acepta props y devuelve JSX. Un componente sin estado, por otro lado, es una clase que extiende React.Component, pero no usa un estado interno. Finalmente, un componente con estado es un componente de clase que mantiene su propio estado interno. Es posible que vea los componentes con estado referidos simplemente como componentes o componentes React.

Un patrón común es tratar de minimizar la falta de estado y crear componentes funcionales sin estado siempre que sea posible. Esto ayuda a incluir la administración de su estado en un área específica de su aplicación. A su vez, esto mejora el desarrollo y el mantenimiento de su aplicación al hacer que sea más fácil seguir cómo los cambios de estado afectan su comportamiento.

React: Crear un Stateful Component

los componentes anteriores Aceptan props como entrada y devuelven la misma vista cada vez que se pasan los mismos props. Puede que se pregunte qué es el estado, Antes de eso, aquí hay una revisión de la terminología de los componentes. Un componente funcional sin estado es cualquier función que usted escribe que acepta props y devuelve JSX.

Un componente sin estado, por otro lado, es una clase que extiende React.Component, Finalmente, un componente con estado es un componente de clase que mantiene su propio estado interno. Es posible que vea los componentes con estado referidos simplemente como componentes o componentes React. Un patrón común es tratar de minimizar la falta de estado y crear componentes funcionales sin estado siempre que sea posible. Esto ayuda a incluir la administración de su estado en un área específica de su aplicación. A su vez, esto mejora el desarrollo y el mantenimiento de su aplicación al hacer que sea más fácil seguir cómo los cambios de estado afectan su comportamiento.


class SportSite extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <Athlete/>
      </div>
    );
  }
};


const Athlete = (props) => {
   return (
     <div>
       <p>{props.nombre}</p>
     </div>
   );
};

Athlete.propTypes = {
  nombre: PropTypes.string.isRequired
};

Athlete.defaultProps = {
  nombre: 'Usain Bolt'
};

♠️ Renderizar un Estado en la Interfaz de usuario

Hay otra forma de acceder al estado en un componente. En el método render(), antes de la declaración de retorno, puede escribir JavaScript directamente. Por ejemplo, podría declarar funciones, acceder a datos de estado o props, realizar cálculos en estos datos, etc. Luego, puede asignar cualquier dato a las variables, a las que tiene acceso en la declaración de retorno.


class MiComponente extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      nombre: 'Guia rapida Reactjs'
    }
  }
  render() {
    
    const nombre = this.state.nombre;
    
    return (
      <div>
        
        <h1>{nombre}</h1>
        
      </div>
    );
  }
};

♠️ crear un this.setState

Hay una manera de cambiar el estado del componente. React proporciona un método para actualizar el estado del componente llamado setState. Llama al método setState dentro de su clase de componente de esta forma: this.setState(), pasando un objeto con pares clave-valor. Las claves son las propiedades de su estado y los valores son los datos de estado actualizados. Por ejemplo, si estuviéramos almacenando un nombre de usuario en estado y quisiéramos actualizarlo, se vería así:

this.setState({
  usuario: 'Linux Torvalds'
});

♠️ De Bind ‘this’ a Class Method

Además de establecer y actualizar el estado, también puede definir métodos para su clase de componente. Normalmente, un método de clase necesita usar esta palabra clave this para poder acceder a las propiedades de la clase (como el estado y los props) dentro del alcance del método. Hay algunas maneras de permitir que sus métodos de clase accedan a esto.

Una forma común es vincular explícitamente esto en el constructor para que se convierta en un enlace a los métodos de clase cuando se inicializa el componente. Puede que hayas notado que el último desafío usó this.handleClick = this.handleClick.bind (this) para su método handleClick en el constructor. Luego, cuando llama a una función como this.setState() dentro de su método de clase this, esto se refiere a la clase y no quedará un undefined

♠️ Usar State to Toggle en un Elemento

MyComponent tiene una propiedad de visibilidad que se inicializa en falso. El método de renderización devuelve una vista si el valor de visibilidad es verdadero, y una vista diferente si es falso.

Actualmente, no hay forma de actualizar la propiedad de visibilidad en el estado del componente. El valor debe alternar entre verdadero y falso. Hay un controlador de clic en el botón que activa un método de clase llamado toggleVisibility (). Defina este método para que el estado de visibilidad cambie al valor opuesto cuando se llama al método. Si la visibilidad es falsa, el método lo establece en verdadero y viceversa.

Finalmente, haga clic en el botón para ver la representación condicional del componente en función de su estado.


class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visibility: false
    };
    this.toggleVisibility = this.toggleVisibility.bind(this);
   }
  toggleVisibility() {
    this.setState({
      visibility: !this.state.visibility
    });
  }
  render() {
    if (this.state.visibility) {
      return (
        <div>
          <button onClick = {this.toggleVisibility}>Presioname!</button>
          <h1>Ahora puedes verme</h1>
        </div>
      );
    } else {
      return (
        <div>
          <button onClick = {this.toggleVisibility}>Presioname</button>
        </div>
      );
    }
  }
};

♠️ Crear un INPUT

Los elementos de control de formulario para la entrada de texto, como input y textarea, mantienen su propio estado en el DOM según el tipo de usuario. Con React, puede mover este estado mutable al estado de un componente React. La entrada del usuario se convierte en parte del estado de la aplicación, por lo que React controla el valor de ese campo de entrada. Normalmente, si tiene componentes React con campos de entrada en los que el usuario puede escribir, será un formulario de entrada controlado.


class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  render() {
    return (
      <div>
        <input
          value={this.state.input}
          onChange={this.handleChange} />
        <h4> Messsage Input:</h4>

        <p>{this.state.input}</p>
      </div>
    );
  }
};

♠️ Crear un Form

El componente MyForm se configura con un formulario vacío con un controlador de envío. Se llamará al controlador de envío cuando se envíe el formulario.

añadi un botón que envía el formulario. Puede ver que tiene el tipo de conjunto para enviar que indica que es el botón que controla el formulario. Agregue el elemento de entrada en el formulario y establezca su valor y los atributos onChange()


class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      Enviar: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  handleSubmit(event) {
    event.preventDefault()
    this.setState({
      Enviar: this.state.input
    });
  }
  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <input
            value={this.state.input}
            onChange={this.handleChange} />
          <button type='Enviar'>Enviado!</button>
        </form>
        <h1>{this.state.Enviar}</h1>
      </div>
    );
  }
};

♠️ Pass State como Props a Child Components

Por ejemplo, tal vez tenga un componente de la aplicación que presente una barra de navegación, entre otros componentes. En su aplicación, tiene un estado que contiene mucha información de usuario, pero la barra de navegación solo necesita acceso al nombre de usuario del usuario para poder mostrarla. Pasas esa pieza de estado al componente Navbar como prop.


class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'guideReact'
    }
  }
  render() {
    return (
       <div>
         <Navbar name={this.state.name}/>
       </div>
    );
  }
};
class Navbar extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
    <div>
      <h1>Hello, my name is: {this.props.name}</h1>
    </div>
    );
  }
};



♠️ Pass un Callback como Props

Puede pasar el estado como props a componentes secundarios, pero no está limitado a pasar datos. También puede pasar funciones de controlador o cualquier método que esté definido en un componente React a un componente secundario. Así es como permite que los componentes secundarios interactúen con sus componentes principales. Le pasas métodos a un child como un apoyo regular. Se le asigna un nombre y usted tiene acceso a ese nombre de método en this.props en el componente secundario.

El componente MyApp es el principal que procesará los componentes secundarios GetInput y RenderInput. Agregue el componente GetInput al método de procesamiento en MyApp, luego pásele una entrada llamada prop asignada a inputValue del estado de MyApp. También cree un prop llamado handleChange y pásele el manejador de entrada handleChange.

A continuación, agregue RenderInput al método de procesamiento en MyApp, luego cree un prop llamado input y pase el inputValue del estado. Una vez que haya terminado, podrá escribir el campo de entrada en el componente GetInput, que luego invoca el método del controlador en su elemento principal a través de prop. Esto actualiza la entrada en el estado del padre, que se pasa como apoyo a ambos hijos. Observe cómo los datos fluyen entre los componentes y cómo la única fuente de verdad sigue siendo el estado del componente principal. Es cierto que este ejemplo es un poco artificial, pero debería servir para ilustrar cómo los datos y las devoluciones de llamada se pueden pasar entre los componentes de React.

class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    }
  this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({
      inputValue: event.target.value
    });
  }
  render() {
    return (
       <div>
         <GetInput
           input={this.state.inputValue}
           handleChange={this.handleChange}/>
         <RenderInput
           input={this.state.inputValue}/>
       </div>
    );
  }
};

class GetInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Get Input:</h3>
        <input
          value={this.props.input}
          onChange={this.props.handleChange}/>
      </div>
    );
  }
};

class RenderInput extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>Input Render:</h3>
        <p>{this.props.input}</p>
      </div>
    );
  }
};

♠️ Usar el Lifecycle Method componentWillMount

Los componentes de React tienen varios métodos especiales que brindan oportunidades para realizar acciones en puntos específicos del ciclo de vida de un componente. Estos se denominan métodos de ciclo de vida, o ganchos de ciclo de vida, y le permiten capturar componentes en ciertos puntos en el tiempo. Esto puede ser antes de que se procesen, antes de que se actualicen, antes de que reciban accesorios, antes de desmontar, y así sucesivamente. Aquí hay una lista de algunos de los principales métodos de ciclo de vida:

  • componentWillMount()

  • componentDidMount()

  • componentWillReceiveProps()

  • shouldComponentUpdate()

  • componentWillUpdate()

  • componentDidUpdate()

  • componentWillUnmount()

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  componentWillMount() {
    
    console.log('Component is mounting...');
    
  }
  render() {
    return <div />
  }
};

♠️ Metodo componentDidMount

la mayoría de los desarrolladores web, en algún momento, necesitan llamar a un punto final de API para recuperar datos. Si está trabajando con React, es importante saber dónde realizar esta acción.

La mejor práctica con React es colocar llamadas API o cualquier llamada a su servidor en el método de ciclo de vida componentDidMount(). Este método se llama después de que un componente se monta en el DOM. Cualquier llamada a setState() aquí activará una nueva representación de su componente. Cuando llama a una API con este método y establece su estado con los datos que la API` devuelve, se activará automáticamente una actualización una vez que reciba los datos.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeUsers: null
    };
  }
  componentDidMount() {
    setTimeout( () => {
      this.setState({
        activeUsers: 1273
      });
    }, 2500);
  }
  render() {
    return (
      <div>
        <h1>Active Users: {this.state.activeUsers}</h1>
      </div>
    );
  }
};

♠️ Add Event Listeners

El método componentDidMount() también es el mejor lugar para adjuntar cualquier detector de eventos que necesite agregar para una funcionalidad específica. React proporciona un sistema de eventos sintéticos que envuelve el sistema de eventos nativo presente en los navegadores. Esto significa que el sistema de eventos sintéticos se comporta exactamente igual sin importar el navegador del usuario, incluso si los eventos nativos pueden comportarse de manera diferente entre diferentes navegadores.

Ya ha estado utilizando algunos de estos controladores de synthetic event, como onClick(). El sistema de synthetic event de React es excelente para la mayoría de las interacciones que administrará en los elementos DOM. Sin embargo, si desea adjuntar un controlador de eventos al documento o los objetos de la ventana, debe hacerlo directamente.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: ''
    };
    this.handleKeyPress = this.handleKeyPress.bind(this);
    this.handleEnter = this.handleEnter.bind(this);  }
  componentDidMount() {
    
    document.addEventListener('keydown', this.handleKeyPress);
    
  }
  componentWillUnmount() {
    
    document.removeEventListener('keydown', this.handleKeyPress);
    
  }
  handleEnter() {
    this.setState({
      message: this.state.message + 'You pressed the enter key! '
    });
  }
  handleKeyPress(event) {
    if (event.keyCode === 13) {
      this.handleEnter();
    }
  }
  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
      </div>
    );
  }
};

♠️ Administrar Updates con Lifecycle Methods

Otro método de ciclo de vida es componentWillReceiveProps(), que se llama cuando un componente recibe nuevos props. Este método recibe las nuevas propuestas como un argumento, que generalmente se escribe como nextProps. Puede usar este argumento y comparar con this.props y realizar acciones antes de que se actualice el componente. Por ejemplo, puede llamar a setState() localmente antes de que se procese la actualización.

Otro método es componentDidUpdate(), y se llama inmediatamente después de que un componente se vuelve a procesar. Tenga en cuenta que la representación y el montaje se consideran cosas diferentes en el ciclo de vida del componente. Cuando se carga una página por primera vez, todos los componentes se montan y aquí es donde se llaman los métodos, por ejemplo, componentWillMount() y componentDidMount(). Después de esto, a medida que cambia el estado, los componentes se vuelven a representar.


class Dialog extends React.Component {
  constructor(props) {
    super(props);
  }
  componentWillUpdate() {
    console.log('Componente actualizado..');
  }
  
  componentWillReceiveProps(nextProps) {
    console.log(this.props, nextProps);
  }
  componentDidUpdate() {
    console.log('Componente renderizado');
  }
  
  render() {
    return <h1>{this.props.message}</h1>
  }
};

class Controller extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Primer mensaje'
    };
 this.changeMessage = this.changeMessage.bind(this);
  }
  changeMessage() {
    this.setState({
      message: 'Segundo Mensaje'
    });
  }
  render() {
    return (
      <div>
        <button onClick={this.changeMessage}>Actulizar</button>
        <Dialog message={this.state.message}/>
      </div>
    );
  }
};

♠️ Optimizar Re-Renders con shouldComponentUpdate

Hasta ahora, si algún componente recibe un nuevo estado o nuevos props, se vuelve a representar a sí mismo ya todos sus childs. Esto suele estar bien. Pero React proporciona un método de ciclo de vida al que puede llamar cuando los componentes secundarios reciben un nuevo estado o props, y declaran específicamente si los componentes deberían actualizarse o no. El método es shouldComponentUpdate(), y toma nextProps y nextState como parámetros. Este método es una forma útil de optimizar el rendimiento. Por ejemplo, el comportamiento predeterminado es que su componente se vuelve a procesar cuando recibe nuevos accesorios, incluso si los accesorios no han cambiado. Puedes usar shouldComponentUpdate() para evitar esto al comparar los props. El método debe devolver un valor booleano que indique a React si actualizar o no el componente. Puede comparar los props actuales (this.props) con los props siguientes (nextProps) para determinar si necesita actualizar o no, y devolver verdadero o falso en consecuencia.


class OnlyEvens extends React.Component {
  constructor(props) {
    super(props);
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('Deberia actualizar?');
    
    return nextProps.value % 2 === 0;
    
  }
  componentWillReceiveProps(nextProps) {
    console.log('recibiendo nuevas Props...');
  }
  componentDidUpdate() {
    console.log('componente Re-renderizado.');
  }
  render() {
    return <h1>{this.props.value}</h1>
  }
};

class Controller extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0
    };
  this.addValue = this.addValue.bind(this);
  }
  addValue() {
    this.setState({
      value: this.state.value + 1
    });
  }
  render() {
    return (
      <div>
        <button onClick={this.addValue}>añadir</button>
        <OnlyEvens value={this.state.value}/>
      </div>
    );
  }
};

♠️ Concepto Inline Styles

Hay otros conceptos complejos que agregan capacidades poderosas a su código React. Pero puede que se esté preguntando sobre el problema más simple de cómo diseñar los elementos JSX que crea en React. Probablemente sepa que no será exactamente lo mismo que trabajar con HTML debido a la forma en que aplica las clases a los elementos JSX.

Si importa estilos de una hoja de estilo, no es muy diferente en absoluto. Aplicas una clase a tu elemento JSX usando el atributo className y aplicas estilos a la clase en tu hoja de estilo. Otra opción es aplicar estilos en línea, que son muy comunes en el desarrollo de ReactJS.

Usted aplica estilos en línea a elementos JSX similares a cómo lo hace en HTML, pero con algunas diferencias JSX. Aquí hay un ejemplo de un estilo en línea en HTML:


<div style="color": "red"; "font-size": "20px">red redow</div>

Los elementos JSX usan el atributo de estilo, pero debido a la forma en que JSX se transpila, no puede establecer el valor en una cadena. En su lugar, lo establece igual a un objeto de JavaScript. Aquí hay un ejemplo:

<div style=color:>red redow</div>

Class Colorful extends React.Component {
  render() {
    return (
      <div style=color>Big Red</div>
    );
  }
};

♠️ JavaScript Avanzado con React Render Method

Otra forma en que puede utilizar el código JavaScript en sus componentes React. También puede escribir JavaScript directamente en sus métodos de procesamiento, antes de la declaración de retorno, sin insertarlo dentro de llaves. Esto se debe a que aún no está dentro del código JSX. Cuando desee utilizar una variable más adelante en el código JSX dentro de la declaración de retorno, coloque el nombre de la variable entre llaves.


const inputStyle = {
  width: 400,
  margin: 4
}

class Oraculo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userInput: '',
      randomIndex: ''
    }
    this.ask = this.ask.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  ask() {
    if (this.state.userInput) {
      this.setState({
        randomIndex: Math.floor(Math.random() * 20),
        userInput: ''
      });
    }
  }
  handleChange(event) {
    this.setState({
      userInput: event.target.value
    });
  }
  render() {
    const possibleAnswers = [
      "Adivina mi nombre" ,"manuel""Intentalo de nuevo","jorge","Intentalo de nuevo","Jordan"
		,"Intentalo de nuevo"
    ];
    const answer = possibleAnswers[this.state.randomIndex];
    return (
      <div>
        <input
          type="text"
          value={this.state.userInput}
          onChange={this.handleChange}
          style={inputStyle} /><br />
        <button onClick={this.ask}>Pregunta al Oraculo</button><br />
        <h3>respuesta:</h3>
        <p>
          {answer}
        </p>
      </div>
    );
  }
};

♠️ Renderizar con If/Else

Otra aplicación del uso de JavaScript para controlar su vista renderizada es vincular los elementos que se representan a una condición. Cuando la condición es verdadera, una vista se renderiza. Cuando es falso, es una vista diferente. Puede hacer esto con una instrucción if / else estándar en el método render () de un componente React.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      display: true
    }
 this.toggleDisplay = this.toggleDisplay.bind(this);
 }
  toggleDisplay() {
    this.setState({
      display: !this.state.display
    });
  }
  render() {
    
    if (this.state.display) {
      return (
         <div>
           <button onClick={this.toggleDisplay}>Toggle Display</button>
           <h1>Displayed!</h1>
         </div>
      );
    } else {
      return (
        <div>
           <button onClick={this.toggleDisplay}>Toggle Display</button>
         </div>
      );
    }
  }
};

♠️ Renderizar Conditionally desde Props

Configurar un componente secundario para tomar decisiones de representación.


 class Resultados extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h1>
      {
        this.props.fiftyFifty ?
        'Ganaste!' :
        'Perdiste!'
      }
      </h1>
    )
  };
};

class GameOfTruenos extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 1
    }
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({
      counter: this.state.counter + 1
    });
  }
  render() {
    const expression = Math.random() >= .5;
    return (
      <div>
        <button onClick={this.handleClick}>intentalo de nuevo</button>
        <Resultados fiftyFifty={expression} />
        <p>{'Turn: ' + this.state.counter}</p>
      </div>
    );
  }
};

♠️ Usar Array.map() Dinamicamente renderizando elementos

La representación condicional es útil, pero es posible que necesite que sus componentes representen un número desconocido de elementos. A menudo, en programación reactiva, un programador no tiene forma de saber cuál es el estado de una aplicación hasta el tiempo de ejecución, ya que mucho depende de la interacción de un usuario con ese programa. Los programadores deben escribir su código para manejar correctamente ese estado desconocido antes de tiempo. Usar Array.map() en React ilustra este concepto.

Por ejemplo, creas una aplicación simple de “Lista de tareas pendientes”. Como programador, no tiene forma de saber cuántos elementos puede tener un usuario en su lista. Debe configurar su componente para que muestre dinámicamente el número correcto de elementos de la lista mucho antes de que alguien que usa el programa decida que hoy es el día de la lavandería.


const textAreaStyles = {
  width: 400,
  margin: 6
};

class MiListaDeHacer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      toDoList: [],
      userInput: ''
    }
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  handleSubmit() {
    const itemsArray = this.state.userInput.split(',');
    this.setState({
      toDoList: itemsArray
    });
  }
  handleChange(e) {
    this.setState({
      userInput: e.target.value
    });
  }
  render() {
    const items = this.state.toDoList.map( (item, i) => {
      return <li key={i}>{item}</li>
    });
    return (
      <div>
        <textarea
          onChange={this.handleChange}
          value={this.state.userInput}
          style={textAreaStyles}
          placeholder="Separar elementos con comas" /><br />
        <button onClick={this.handleSubmit}>Crear una lista</button>
        <h1>My "Hacer" Lista:</h1>
        <ul>
          {items}
        </ul>
      </div>
    );
  }
};

♠️ Usar un Array.filter() dinamico en una matriz

El método de matriz de mapa es una herramienta poderosa que usará a menudo cuando trabaje con React. Otro método relacionado con el mapa es el filtro, que filtra el contenido de una matriz en función de una condición y luego devuelve una nueva matriz. Por ejemplo, si tiene una matriz de usuarios que tienen una propiedad en línea que puede configurarse como verdadera o falsa, puede filtrar solo aquellos usuarios que están en línea escribiendo:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [
        {
          username: 'andresshare',
          online: true
        },
        {
          username: 'lorena',
          online: false
        },
        {
          username: 'paola',
          online: true
        },
        {
          username: 'Homero',
          online: false
        },
        {
          username: 'lisa',
          online: true
        },
        {
          username: 'Helen',
          online: true
        }
      ]
    }
  }
  render() {
    const usersOnline = this.state.users.filter(user => {
      return user.online;
    });
    const renderOnlineUsers = usersOnline.map(user => {
      return (
        <li key={user.username}>{user.username}</li>
      );
    });
    return (
       <div>
         <h1>Usuarios en linea</h1>
         <ul>
          {renderOnlineUsers}
        </ul>
       </div>
    );
  }
};

Espero que les sea de utilidad, por mi parte fue escrito, para mi yo del futuro y tener presente los conceptos, hasta el proximo post!!