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
- Coger input (el evento
onChange
recibe la propiedadevent
):
const Header = ({ onFilter, onClear, filter }) => (
<>
<ComicInput onChange={event => onFilter(event.target.value)} value={filter} />
<Button marginLeft="base" onClick={onClear}>
Limpiar búsqueda
</Button>
</>
)
- Inicializar variables:
export const ComicsList = () => {
const [filter, setFilter] = React.useState('')
- 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>
)
}