Que se necesita para poder usar React

React es una biblioteca JavaScript de código abierto diseñada para crear interfaces de usuario en las páginas web. Fue creado por el ingeniero de software de Facebook Jordan Walke. React fue lanzado como una biblioteca independiente de Facebook en marzo de 2013. React comenzó a usarse en producción en Facebook en julio de 2013 y se usa actualmente en muchos sitios web y aplicaciones móviles, incluidos Instagram, Airbnb, Reddit y WhatsApp.

React permite a los desarrolladores crear aplicaciones web de una sola página de forma más eficiente y fácil de mantener. En lugar de manipular el DOM directamente, React crea una representación virtual del DOM y luego la sincroniza con el DOM real. Esto permite a React tener un rendimiento más rápido y un código más limpio.

¿Qué necesito para utilizar React?

React es una biblioteca JavaScript, por lo que necesitarás tener un conocimiento básico de JavaScript para poder utilizarlo. No es necesario que seas un experto en JavaScript, pero es útil saber cómo funcionan las cosas como las variables, funciones, objetos, etc. Si no estás familiarizado con JavaScript, te recomendamos que que te formes en profundidad en este lenguaje antes de lanzarte a por React.

Formas de aprender JavaScript para usar React

Como en casi cualquier proceso de aprendizaje de programación, existen vías autodidactas y formaciones regladas. La diferencia entre ambas siempre es el coste de la formación que suele aumentar conforme disminuye el tiempo. Es decir, si tu intención es aprender a usar React rápido, la mejor opción será una formación de pago centrada en eso. Si por el contrario no tienes prisa puedes hacerlo por tu cuenta.

¿Existe un término intermedio?

La realidad es que sí. La formación híbrida de OXYGEN mezcla una formación completa con mentores que resuelven todas tus dudas a la hora de programar y pueden sacarte de bloqueos, con tu capacidad de «buscarte la vida» frente al ordenador picando código. Está pensada para adaptarse a un modelo tanto online como presencial y también a los distintos niveles, siendo el más básico el Bootcamp Full Stack Developer y para programadores con cierta base que quieran saltarse los niveles iniciales está el Training Full Stack.

Cómo utilizar React

React se utiliza principalmente para crear componentes de interface de usuario. Los componentes son pequeñas piezas de código que pueden reutilizarse en varias partes de tu aplicación. Cada componente tiene su propio estado y métodos, y puede ser utilizado independientemente de otros componentes. Esto hace que React sea escalable y fácil de mantener.

Para utilizar React, puedes incluir la biblioteca en tu página web utilizando uno de los métodos siguientes:

• CDN: puedes utilizar uno de los CDN (Content Delivery Network) siguientes:

https://unpkg.com/react/umd/react.production.min.js

https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js

• NPM: puedes instalar React utilizando NPM, el gestor de paquetes de Node.js. Para instalar React, ejecuta el siguiente comando en tu terminal:

npm install react

• Localmente: puedes descargar React de su página oficial de GitHub. Una vez descargado, puedes incluirlo en tu página web de la siguiente manera:

<script src="/path/to/react.js"></script>

Creando tu primer componente

Ahora que ya sabes cómo incluir React en tu página web, vamos a crear nuestro primer componente. Para ello, vamos a utilizar uno de los métodos siguientes:

• React.createClass(): este método te permite crear un componente utilizando una clase de JavaScript. El método createClass() acepta un objeto como parámetro, que contiene las propiedades y métodos del componente. Por ejemplo:

var Button = React.createClass({
  render: function() {
    return (
      <button>Click me!</button>
    );
  }
});

• React.Component(): este método te permite crear un componente utilizando una clase de JavaScript extendida de la clase React.Component. El método Component() acepta un objeto como parámetro, que contiene las propiedades y métodos del componente. Por ejemplo:

class Button extends React.Component {
  render() {
    return (
      <button>Click me!</button>
    );
  }
}

• React.createElement(): este método te permite crear un componente utilizando una función JavaScript. El método createElement() acepta tres parámetros:

1. El nombre de la etiqueta del elemento que se va a crear, por ejemplo, ‘div’ o ‘button’.
2. Un objeto con las propiedades del elemento, o null si no hay que asignar propiedades.
3. El contenido del elemento, que puede ser una cadena de texto, otro elemento React, o un array de elementos React.

Por ejemplo:

var Button = React.createElement('button', {}, 'Click me!');

Rendering de un componente

Para renderizar un componente en React, primero se debe importar el componente desde su archivo respectivo. Luego, se puede utilizar la función ReactDOM.render() para renderizar el componente en un elemento del DOM (Document Object Model, el modelo de objetos del documento HTML).

Por ejemplo, si tenemos un componente llamado MyComponent, podríamos renderizarlo en un elemento con el ID root de la siguiente manera:

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';

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

En este ejemplo, se importan las librerías necesarias de React y se importa el componente MyComponent. Luego, se utiliza la función ReactDOM.render() para renderizar el componente dentro del elemento con el ID root

También es posible pasar props (propiedades) al componente cuando se lo renderiza. Por ejemplo:

ReactDOM.render(, document.getElementById('root'));

En este caso, se está pasando un prop name con el valor John al componente MyComponent. Esto permite personalizar el comportamiento del componente en función de los props que se le pasen.