ReactJs [Guía Rápida]

Instalar npm

Ejecutar:

npm install --save react react-dom babelify babel-preset-react browserify

npm install --save-dev @babel/core @babel/preset-env

react-dom para trabajar con el árbol Dom.

babelify para que funcione en todos los browsers.

browserify permite instalar módulos de forma dinámica.

Para crear un nuevo proyecto:

npx create-react-app

Extensiones útiles para Visual Studio Code

Debugger for Chrome

React Extension Pack

Auto Close Tag

Auto Rename Tag

Prettier Code Formatter

Sintaxis JSX

Esta sintaxis es muy limpia y cómoda, realmente lo que sucede es que el demonio-traspilador de node convierte el JSX en código JavaScript con las librerías de React.

// React con JSX

class Cabecera extends Component {
    render(){
        return (
            <h4>Hola!!</h4>
        );
    }
}

Se convierte en:

// React sin JSX

class Cabecera extends Component {
    render(){
        return React.createElement("h4", {}, "Hola!!");
    }
}

Etiquetas útiles JSX de React

<Fragment> Cómo es obligatorio q cualquier render tengo un elemento padre, tendriamos q utilizar al menos un <div> padre en los componentes que utilizamos. Con la etiqueta <Fragment> nos permite tener una etiqueta padre que no genera código html, y así el resultado es más limpio.

{/* */} Comentarios en JSX

Ejemplo básico

Fichero App.js

import React from 'react';

import './styles/App.css';
import Header from './comp/Header';

function App() {
  return (
    <div className="App">
      <Header adjetivo="queridisimos" amigos={["Juan", "Pedro"]}/>
    </div>
  );
}

export default App;

Fichero Header.js

import React, { Component, Fragment } from "react";

class Header extends Component {
    sep = ":";
    render(){
        return (
            <Fragment>
                <div className="estilo1">
                    Hola {this.props.adjetivo} amigos{this.sep}
                </div>  
                <ul>
                    {this.props.amigos.map(amigo => (
                        <li>{amigo}</li>
                    ))}
                </ul>
            </Fragment>    
        );
    }
}

export default Header;

className Permite indicar un nombre de clase de estilo css.

Selección de librerías de estilo

Material UI

Bootstrap

PrimeReact

Office UI Fabric – Entorno Microsoft Office

Grommet

Elemental UI

Material UI

Instalación: (save, para guardarlo en el fichero de configuración)

npm install @material-ui/core -save

Definición de Props

Aunque no es obligatorio, es muy aconsejable definir las props que vas a permitir en tu componente, para ello tienes que instalar el prop-types.

MyComponent.propTypes = {
  optionalArray: PropTypes.array,  
  optionalBool: PropTypes.bool,  
  optionalFunc: PropTypes.func,  
  optionalNumber: PropTypes.number,  
  optionalObject: PropTypes.object,  
  optionalString: PropTypes.string 
}

y con esto sus valores por defecto para cuando no se indica en la llamada al componente

MyComponent.defaultProps = {   
  my_prop: "default value" 
};

ver más en https://www.npmjs.com/package/prop-types

Componentes dentro del componente

Con solo crear una función en mayúsculas y pasarle props ya estas creando un nuevo componente que puedes utilizar para renderizar algo de forma más organizada.

import React, { Component, Fragment } from "react";

class Comp extends Component {
   ListItem(props) {
       // Correct! There is no need to specify the key here:
       return {props.value};
   }
 
   NumberList(props) {
       const numbers = props.numbers;
       const listItems = numbers.map((number) =>
          <this.ListItem 
               key={number.toString()}           
               value={number} 
          />
       );
       return (<ul>{this.listItems}</ul>);
   }
  
   render(){
       const numbers = [1, 2, 3, 4, 5];
       return <this.NumberList numbers={numbers} />
   }
}

Paso de funciones por referencia

Mirar este interesante articulo

https://reactjs.org/docs/faq-functions.html

Errores típicos al empezar con React

https://jscomplete.com/learn/react-beyond-basics/react-cfp

<Route>

Es una librería muy útil para gestionar las url en react web.

https://reacttraining.com/react-router/web/guides/quick-start

Ejemplo llamada a una Api

// repositories/DataRepository.js

export async function retrieveData() {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos");
  const data = await response.json();
  return data;
}

// useQuery.js

export function useQuery(retrieveData) {
  const [data, setData] = React.useState([]);

  React.useEffect(() => {
    retrieveData().then(setData);
  }, [retrieveData]);

  return { data };
}

// App.js

import { useQuery } from "./useQuery";
import { retrieveData } from "./repositories/DataRepository";

function App() {
  const { data } = useQuery(retrieveData);

  return (
    <ul>
      {data.map(({ id, title }) => (
        <li key={id}>{title}</li>
      ))}
    </ul>
  );
}

react-query

Potente librería para consulta a api o cualquier cosa asíncrona.

recoiljs

De un equipo de facebook viene esta librería de lo mas sencillo y potente para la gestión de estado.

https://recoiljs.org/docs/introduction/getting-started