• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Geekebrains

Para programadores, maker y geeks en general

  • Inicio
  • Code Brains
  • Zona Makers!
  • Code & Beers
  • GeekeHistorias
  • GeekeBlocks
  • Qué es …?
You are here: Home / Code Brains / ReactJs [Guía Rápida]

26 mayo, 2019 Por admin8049

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

Filed Under: Code Brains Tagged With: javascript, JSX, Material UI, ReactJS, Visual Studio Code

Previous Post: « HTML5 [Guía rápida]
Next Post: JavaScript ES6 – ECMAScript 6 (2015) [Guia Rápida] »

Primary Sidebar

Categorías

  • Code & Beers
  • Code Brains
  • Cómo …?
  • Experimentos
  • GeekeBlocks
  • GeekeHistorias
  • Noticias Geek
  • Proyectos
  • Qué es …?
  • Quién es …?
  • Zona Junior!
  • Zona makers!

Etiquetas

Antipatrones de diseño de software Arduino Arquitectura de software base64 Bases de Datos cert Certificados Digitales Clean Code control de acceso DBeaver Diseño de Software docker docker-compose Domain Drive Design Edición de video https IDE Java javascript jest JSON lenguajes de programación Librerías de JavaScript MongoDb MySQL NodeJS NoSQL odoo openssl Oracle package.json Patrones de Diseño de Software pem plugins Postgres Prettier ReactJS seguridad Serverless shell SSL testing TypeScript utilidades de software Visual Studio Code

Entradas recientes

  • CAPTCHA y por qué es importante para la seguridad en línea
  • Cómo mokear una clase que se instancia dentro de otra que necesitas testear y no se pasa por injección?
  • tsconfig paths con Typescript en Serverless
  • Serverless, un framework para todos los proveedores
  • Serverless, otro enfoque de desarrollo
  • Que es currying en Javascript
  • Noticias Junio 2023. Vuelta a la oficina, Million.js, Linux Azure, Apple Vision, Java 21…
  • 23.3 WS:IA-JS Creando un Blog en React con chatGPT.
  • 23.2 IA. Cómo va a afectar a nuestros empleos?
  • 23.1 IA. En que punto estamos y como hemos llegado hasta aquí.
Jesús A. Carballo Santaclara

Empezé trasteando en los 80' con un ZX espectrum, después pasé al potente "PC 8086" (jeje...). He trabajado haciendo software para la administración pública, para Hospitales, el sector de la Automoción, el sector Bancario, en algún e-Commerce de alguna multinacional y he emprendido en robótica educativa y en buscadores web.
Trabajo de forma profesional en esto de los ordenadores desde hace mas de 25 años espero poder contarte alguna cosa interesante.

Footer

Copyright © 2025 · GeekeZonia · Aviso Legal · Política de Cookies · Política de Privacidad · Log in