ReactJS

  • Librería, no framework
  • Componentes en vez de plantillas. Simplifica el trabajo con el DOM.
  • Moderno: ES6, Babel (transpila JS moderno a compatible con todos los navegadores), Webpack (bundelizador, es decir, junta scripts de javascript).

Flujo de datos

  • Se inicia un cambio de estado
  • Se propaga al padre
  • Y se extiende

Las funciones han dejado obsoletas a las clases

import React, {useState} from 'react';
import ReactDom from 'react-dom';

function Counter() { return ...; }

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

Antes se hacía:

class Welcome extends React.Component {
	render() { return ...; }
}

Hook 1: useState

  1. Coger input (el evento onChange recibe la propiedad event):
const Header = ({ onFilter, onClear, filter }) => (
  <>
    <ComicInput onChange={event => onFilter(event.target.value)} value={filter} />
    <Button marginLeft="base" onClick={onClear}>
      Limpiar búsqueda
    </Button>
  </>
)
  1. Inicializar variables:
export const ComicsList = () => {
  const [filter, setFilter] = React.useState('')
  1. Filtrar en lista:
  const filteredComics = comics.filter(comic => comic.title.toLowerCase().includes(filter.toLowerCase()))
  return (
    <Layout>
	   ...
	  <Header onFilter={setFilter} onClear={() => setFilter('')} filter={filter} />
      <List comics={filteredComics} />
	   ...
    </Layout>
  )
}