Primeros pasos con Reaccionar

¿Qué es ReactJS?

ReactJS es una biblioteca front-end de código abierto basada en componentes responsable solo de la capa de vista de la aplicación. Es mantenido por Facebook.

ReactJS utiliza un mecanismo basado en DOM virtual para completar datos (vistas) en HTML DOM. El DOM virtual funciona rápido debido al hecho de que solo cambia elementos DOM individuales en lugar de recargar DOM completo cada vez

Una aplicación React se compone de múltiples componentes, cada uno de los cuales es responsable de generar una pequeña pieza de HTML reutilizable. Los componentes se pueden anidar dentro de otros componentes para permitir que se construyan aplicaciones complejas a partir de bloques de construcción simples. Un componente también puede mantener el estado interno; por ejemplo, un componente TabList puede almacenar una variable correspondiente a la pestaña abierta actualmente.

React nos permite escribir componentes usando un lenguaje específico de dominio llamado JSX. JSX nos permite escribir nuestros componentes usando HTML, mientras mezclamos eventos de JavaScript. React convertirá internamente esto en un DOM virtual y, en última instancia, generará nuestro HTML para nosotros.

Reaccione “reacts” para indicar los cambios en sus componentes de forma rápida y automática para volver a representar los componentes en el DOM HTML utilizando el DOM virtual. El DOM virtual es una representación en memoria de un DOM real. Al realizar la mayor parte del procesamiento dentro del DOM virtual en lugar de directamente en el DOM del navegador, React puede actuar rápidamente y solo agregar, actualizar y eliminar componentes que hayan cambiado desde que ocurrió el último ciclo de procesamiento.

Instalación o Configuración

ReactJS es una biblioteca de JavaScript contenida en un solo archivo react-<version>.js que se puede incluir en cualquier página HTML. La gente también suele instalar la biblioteca React DOM react-dom-<version>.js junto con el archivo React principal:

Inclusión Básica

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript" src="/path/to/react.js"></script>
    <script type="text/javascript" src="/path/to/react-dom.js"></script>
    <script type="text/javascript">
        // Use react JavaScript code here or in a separate file
    </script>
    </body>
</html>

Para obtener los archivos JavaScript, vaya a la página de instalación de la documentación oficial de React.

React también admite sintaxis JSX. JSX es una extensión creada por Facebook que agrega sintaxis XML a JavaScript. Para usar JSX, debe incluir la biblioteca Babel y cambiar <script type="text/javascript"> a <script type="text/babel"> para traducir JSX a código Javascript.

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript" src="/path/to/react.js"></script>
    <script type="text/javascript" src="/path/to/react-dom.js"></script>
    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
    <script type="text/babel">
        // Use react JSX code here or in a separate file
    </script>
    </body>
</html>

Instalación a través de npm

También puede instalar React usando npm haciendo lo siguiente:

npm install --save reaccionar reaccionar-dom

Para usar React en su proyecto de JavaScript, puede hacer lo siguiente:

var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(<App />, ...);

Instalación a través de Yarn

Facebook lanzó su propio administrador de paquetes llamado Yarn, que también se puede usar para instalar React. Después de instalar Yarn, solo necesita ejecutar este comando:

yarn add react react-dom

Luego puede usar React en su proyecto exactamente de la misma manera que si hubiera instalado React a través de npm.

Hello World con funciones sin estado

Los componentes sin estado obtienen su filosofía de la programación funcional. Lo que implica que: Una función devuelve todo el tiempo exactamente lo mismo en lo que se le da.

Por ejemplo:

const statelessSum = (a, b) => a + b;

let a = 0;
const statefulSum = () => a++;

Como puede ver en el ejemplo anterior, statelessSum siempre devolverá los mismos valores dados a y b. Sin embargo, la función statefulSum no devolverá los mismos valores incluso sin parámetros. El comportamiento de este tipo de función también se denomina efecto secundario. Ya que, el componente afecta algo más allá.

Por lo tanto, se recomienda usar componentes sin estado con más frecuencia, ya que son libres de efectos secundarios y siempre crearán el mismo comportamiento. Eso es lo que quiere buscar en sus aplicaciones porque el estado fluctuante es el peor de los casos para un programa mantenible.

El tipo más básico de componente de reacción es uno sin estado. Los componentes de React que son funciones puras de sus accesorios y no requieren ninguna gestión de estado interno se pueden escribir como funciones simples de JavaScript. Se dice que estos son ‘Componentes funcionales sin estado’ porque son una función solo de ‘accesorios’, sin tener ningún ’estado’ para realizar un seguimiento.

Aquí hay un ejemplo simple para ilustrar el concepto de un ‘Componente funcional sin estado’:

// In HTML
<div id="element"></div>

// In React
const MyComponent = props => {
    return <h1>Hello, {props.name}!</h1>;
};

ReactDOM.render(<MyComponent name="Arun" />, element);
// Will render <h1>Hello, Arun!</h1>

Tenga en cuenta que todo lo que hace este componente es representar un elemento h1 que contiene la propiedad name. Este componente no realiza un seguimiento de ningún estado. Aquí hay un ejemplo de ES6 también:

import React from 'react'

const HelloWorld = props => (
    <h1>Hello, {props.name}!</h1>
)

HelloWorld.propTypes = {
    name: React.PropTypes.string.isRequired
}

export default HelloWorld

Dado que estos componentes no requieren una instancia de respaldo para administrar el estado, React tiene más espacio para optimizaciones. La implementación es limpia, pero hasta el momento [no se han implementado tales optimizaciones para componentes sin estado] 1.

Fundamentos absolutos de la creación de componentes reutilizables

Componentes y accesorios

Como React se ocupa solo de la vista de una aplicación, la mayor parte del desarrollo en React será la creación de componentes. Un componente representa una parte de la vista de su aplicación. Los “accesorios” son simplemente los atributos utilizados en un nodo JSX (por ejemplo, <SomeComponent someProp="some prop's value" />), y son la forma principal en que nuestra aplicación interactúa con nuestros componentes. En el fragmento anterior, dentro de SomeComponent, tendríamos acceso a this.props, cuyo valor sería el objeto {someProp: "some prop's value"}.

Puede ser útil pensar en los componentes de React como funciones simples: toman la entrada en forma de “accesorios” y producen la salida como marcado. Muchos componentes simples llevan esto un paso más allá, convirtiéndose en “Funciones puras”, lo que significa que no emiten efectos secundarios y son idempotentes (dado un conjunto de entradas, el componente siempre producirá la misma salida). Este objetivo se puede hacer cumplir formalmente mediante la creación real de componentes como funciones, en lugar de “clases”. Hay tres formas de crear un componente React:

  • Componentes funcionales (“sin estado”)
const FirstComponent = props => (
    <div>{props.content}</div>
);
  • Reaccionar.createClass()
const SecondComponent = React.createClass({
    render: function () {
        return (
            <div>{this.props.content}</div>
        );
    }
});
  • Clases ES2015
class ThirdComponent extends React.Component {
    render() {
        return (
            <div>{this.props.content}</div>
        );
    }
}

Estos componentes se utilizan exactamente de la misma manera:

const ParentComponent = function (props) {
    const someText = "FooBar";
    return (
        <FirstComponent content={someText} />
        <SecondComponent content={someText} />
        <ThirdComponent content={someText} />
    );
}

Todos los ejemplos anteriores producirán un marcado idéntico.

Los componentes funcionales no pueden tener “estado” dentro de ellos. Entonces, si su componente necesita tener un estado, busque componentes basados ​​​​en clases. Consulte Creación de componentes para obtener más información.

Como nota final, los accesorios de reacción son inmutables una vez que se han pasado, lo que significa que no se pueden modificar desde dentro de un componente. Si el padre de un componente cambia el valor de un accesorio, React se encarga de reemplazar los accesorios antiguos con los nuevos, el componente se volverá a representar usando los nuevos valores.

Consulte [Thinking In React][2] y [Reusable Components][3] para profundizar en la relación entre los accesorios y los componentes.

1: https://www.wikiod.com/es/reactjs/componentes#Creación de componentes [2]: https://facebook.github.io/react/docs/thinking-in-react.html “Pensar en React” [3]: https://facebook.github.io/react/docs/reusable-components.html “Componentes reutilizables”

Crear aplicación React

create-react-app es un generador repetitivo de la aplicación React creado por Facebook. Proporciona un entorno de desarrollo configurado para facilitar su uso con una configuración mínima, que incluye:

  • Transpilación ES6 y JSX
  • Servidor de desarrollo con recarga de módulo en caliente
  • Linting de código
  • Prefijo automático CSS
  • Crear secuencias de comandos con JS, CSS y agrupación de imágenes, y mapas de origen
  • Marco de prueba de broma

Instalación

Primero, instale create-react-app globalmente con el administrador de paquetes de nodos (npm).

npm install -g create-react-app

Luego ejecute el generador en su directorio elegido.

create-react-app my-app

Navegue hasta el directorio recién creado y ejecute el script de inicio.

cd my-app/
npm start

Configuración

create-react-app es intencionalmente no configurable por defecto. Si se requiere un uso no predeterminado, por ejemplo, para usar un lenguaje CSS compilado como Sass, entonces se puede usar el comando de expulsión.

npm run eject

Esto permite la edición de todos los archivos de configuración. nótese bien este es un proceso irreversible.

Alternativas

Los modelos alternativos de React incluyen:

Crear aplicación React

Para construir su aplicación lista para producción, ejecute el siguiente comando

npm run build

Hola Mundo

Sin JSX

Aquí hay un ejemplo básico que usa la API principal de React para crear un elemento React y la API DOM de React para representar el elemento React en el navegador.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>

  </head>
  <body>
    <div id="example"></div>

    <script type="text/javascript">

      // create a React element rElement
      var rElement = React.createElement('h1', null, 'Hello, world!');

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>

Con JSX

En lugar de crear un elemento React a partir de cadenas, se puede usar JSX (una extensión de Javascript creada por Facebook para agregar sintaxis XML a JavaScript), que permite escribir

var rElement = React.createElement('h1', null, 'Hello, world!');

como equivalente (y más fácil de leer para alguien familiarizado con HTML)

var rElement = <h1>Hello, world!</h1>;

El código que contiene JSX debe incluirse en una etiqueta <script type="text/babel">. Todo lo que esté dentro de esta etiqueta se transformará a Javascript simple utilizando la biblioteca de Babel (que debe incluirse además de las bibliotecas de React).

Entonces, finalmente, el ejemplo anterior se convierte en:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- Include the React and ReactDOM libraries -->
    <script src="https://fb.me/react-15.2.1.js"></script>
    <script src="https://fb.me/react-dom-15.2.1.js"></script>
    <!-- Include the Babel library -->
    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>

  </head>
  <body>
   <div id="example"></div>

    <script type="text/babel">

      // create a React element rElement using JSX
      var rElement = <h1>Hello, world!</h1>;

      // dElement is a DOM container
      var dElement = document.getElementById('example');

      // render the React element in the DOM container
      ReactDOM.render(rElement, dElement);

    </script>

  </body>
</html>

Componente Hola mundo

Un componente React se puede definir como una clase ES6 que amplía la clase base React.Component. En su forma mínima, un componente debe definir un método render que especifique cómo se representa el componente en el DOM. El método render devuelve nodos React, que se pueden definir usando la sintaxis JSX como etiquetas similares a HTML. El siguiente ejemplo muestra cómo definir un componente mínimo:

import React from 'react'

class HelloWorld extends React.Component {
    render() {
        return <h1>Hello, World!</h1>
    }
}

export default HelloWorld

Un Componente también puede recibir accesorios. Estas son propiedades pasadas por su padre para especificar algunos valores que el componente no puede conocer por sí mismo; una propiedad también puede contener una función a la que el componente puede llamar después de que ocurran ciertos eventos; por ejemplo, un botón podría recibir una función para su propiedad onClick y llamarla cada vez que se haga clic en él. Al escribir un componente, se puede acceder a sus props a través del objeto props en el propio Componente:

import React from 'react'

class Hello extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>
    }
}

export default Hello

El ejemplo anterior muestra cómo el componente puede representar una cadena arbitraria pasada a la prop name por su padre. Tenga en cuenta que un componente no puede modificar los accesorios que recibe.

Un componente se puede renderizar dentro de cualquier otro componente, o directamente en el DOM si es el componente superior, usando ReactDOM.render y proporcionándole tanto el componente como el nodo DOM donde desea que se represente el árbol React:

import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './Hello'

ReactDOM.render(<Hello name="Billy James" />, document.getElementById('main'))

A estas alturas ya sabe cómo hacer un componente básico y aceptar props. Llevemos esto un paso más allá e introduzcamos estado.

Por el bien de la demostración, hagamos que nuestra aplicación Hello World muestre solo el primer nombre si se proporciona un nombre completo.

import React from 'react'

class Hello extends React.Component {

    constructor(props){

        //Since we are extending the default constructor,
        //handle default activities first.
        super(props);

        //Extract the first-name from the prop
        let firstName = this.props.name.split(" ")[0];
        
        //In the constructor, feel free to modify the
        //state property on the current context.
        this.state = {
            name: firstName
        }

    } //Look maa, no comma required in JSX based class defs!

    render() {
        return <h1>Hello, {this.state.name}!</h1>
    }
}

export default Hello

Nota: Cada componente puede tener su propio estado o aceptar el estado de su padre como accesorio.

Codepen Enlace al ejemplo.