Guía para iniciar en React

Actualizado: 22 nov 2022

1. Ventajas:

• Mayor rendimiento de las aplicaciones
• Fácil de leer e interpretar
• Reutilización de código
• Aprende una vez, escribe donde sea.

2. Desventajas:

• La curva de aprendizaje puede ser pronunciada
• El desarrollo de una aplicación requieremás tiempo

3. Características Diferenciales de Reactjs:

• Posee un virtual DOM
• Flujo de Datos unidireccional

4. Herramientas de desarrollo

• Navegador web(Recomendación Chrome)
• Editor de texto(Visual studio code)
• React developer tools.
• Node y npm

5. Empresas que utilizan Reactjs

• Facebook, Instagram, Netflix,paypal

6. Configuración de ambiente de desarrollo Reactjs

• Create React App: es un ambiente cómodo para aprender React, y es la mejor manera de comenzar a construir una nueva aplicación de página única usando React.
• Comandos para configurar una app de Reactjs:

npx create-react-app my-app

cd my-app

npmstart

7. Estructura de un proyecto Reactjs:

• La estructura básica de un proyecto con React

Introducción a jsx:

Es una extensión de JavaScript creada por Facebook para el uso con su librería React. Sirve de preprocesador (como Sass o Stylus a CSS) y transforma el código a JavaScript

Componentes Reactjs:

Los componentes le permiten dividir la interfaz de usuario en piezas independientes y reutilizables.

Tipos de componentes:

• Componentes funcionales: Solo tienen propiedades
• Componentes de clase: Tienen propiedas,ciclo de vida y estado.

Ejemplo de componente funcional

function HelloWorld(props){

return <h1>Message: {props.message}</h1>

}

ReactDOM.render(

Ejemplo de componente de clase:

const MiBoton = props => {
const styles = { background: ‘blue’, color: ‘white’ }

return (
<button
{…props}
style={sty les}
/>
)
}

Conceptos claves de los componentes:

• Propiedades.
• Estados.
• Ciclo de vida

Ejemplos de componentes

Botón

REACT ROUTER

React router es una herramienta que nos permita la creación de rutas dinámicas asociadas a componentes.

Qué es enrutamiento estático?

Este es el enrutamiento más común, si alguna vez hemos trabajado con rutas en algún otro lenguaje de programación o con algún otro framework, seguramente lo habremos hecho usando enrutamiento estático.

En este, las rutas son definidas al momento en que nuestra aplicación es inicializada. Es decir, antes que nuestra aplicación se renderice.

¿Qué es enrutamiento dinámico?

Este es el tipo de enrutamiento usado por react-router. A diferencia de el enrutamiento estático, este toma lugar en el momento en que nuestra aplicación se está renderizando. Esto gracias a que react-router hace uso de componentes para definir sus rutas.

Los componentes que se encargan de mostrar las diferentes rutas siempre renderizan. Algunas veces renderizan un componente y otras veces null, todo dependiendo de la locación.

Componentes

Ahora que sabemos que React Router utiliza componentes, miremos algunos de ellos y que podemos hacer a través de algunos ejemplos:

BrowserRouter

Es una envoltura para nuestra aplicación. Esta envoltura nos da acceso al API de historia de HTML5 para mantener nuestra interfaz gráfica en sincronía con la locación actual o URL. Debemos tener en cuenta que esta envoltura solo puede tener un hijo. Por lo general es Switch.

Switch

Este componente, causa que solo se renderice el primer hijo Route o Redirect que coincida con la locación o URL actual.

En el caso que no usemos Switch todas las rutas que cumplan con la condición se renderizarán.

Route

Para definir las diferentes rutas de nuestra aplicación, podemos usar el componente Route. La función de este componente es elegir que renderizar según la locación actual. Este es el caso que vimos anteriormente, todos los componentes Route siempre renderizan, pero algunas veces renderizan un componente y otras veces retornan null

Enrutamiento básico

import React, { Component } from ‘react’;
import { BrowserRouter, Switch, Route } from ‘react-router-dom’;export default class App
extends Component {
render() {
return (
<BrowserRouter>
<Switch>
<Route path=’/’ exact />
<Route path=’/index’ exact />
<Route path=’/post/:id’ />
</Switch>
</BrowserRouter>
);
}
}

INTERACTUANDO CON API REST

Generalmente las aplicaciones web requieren una fuente de datos para su funcionamiento, en esta sesión vamos a interactuar con API REST para servir datos.

Que es una API REST??

La api de rest, a la que también se conoce como API REST, es una interfaz de programación de aplicaciones que se apoya en la arquitectura REST para el desarrollo de aplicaciones en red.

Es cualquier interfaz entre sistemas que use HTTP para obtener datos o generar operaciones sobre esos dato. POST (crear), GET (leer y consultar), PUT (editar) y DELETE (eliminar). En esta sesión vamos a interactuar con API Rest usando fetch y axios.

Axios: Es un cliente HTTP basado en Promesas para Javascript, el cual puede ser utilizado tanto en tu aplicación Front-end, como en el Back-end con Nodejs.

Diagrama de API REST

Ejemplo de axios

.then(res => {

const persons = res.data;

this.setState({ persons });

La API Fetch proporciona un canal para obtener recursos a través de la red. Basándose en un sistema de Peticiones (Request) y Respuestas (Response) permite a un documento o aplicación mantener un diálogo con el servidor de forma segura y semántica.

Flujo básico

La transacción se realiza siguiendo el proceso ya conocido para quienes trabajan con XMLHttpRequest:

• El método fetch() realiza una petición del recurso que necesita sobre el servidor que lo aloja.
• El propio objeto devuelve una promesa con el objeto Response de la petición, tanto si tiene éxito como si no.
• Una vez obtenida la respuesta, ésta proporciona una serie de métodos que permiten comprobar su contenido y manejarlo.

Sintaxis general

Visto el funcionamiento a grandes rasgos, pasemos a su sintaxis: