Kristoffer Brabrand
Senior developer @ Behalf
Kodecamp #1
đâš
Torsdag
08:30 - 10:30 Oppgavetid
10:30 - 11:30 State og props
11:30 - 12:30 Lunsj
12:30 - 14:30 Ă hente data
14:30 - 15:30 Oppgavetid
15:30 - 16:30 Begynner Ă„ lage ting đ
đș o' clock
(ca. 15:00?)
State n' props
Props
(attributter)
Kommer fra utsiden
Kan ikke endres fra innsiden
State
(intern tilstand)
"OppstÄr" pÄ innsiden
Kan ikke endres fra utsiden
Sende props
For Ä gi data til en komponent bruker vi props. Vi sier at vi «sender data nedover»
class Greeting extends Component {
render() {
const { name } = this.props;
return <div>{name}</div>;
}
}
export default class Hello extends Component {
render() {
return <Greeting name="BjĂžrn"/>;
}
}Sette state
Dersom en komponent trenger Ä spare pÄ noe data om sin egen tilstand «setter vi» state.
Â
Det kan for eksempel vĂŠre om en meny er Ă„pen eller lukket.
đĄđĄ
De fleste komponenter skal ikke ha state...
export default class Menu extends Component {
state = {
open: false
}
render() {
const { open } = this.state;
const { children } = this.props;
return (
<nav className="menu">
<button className="menu__toggle-button">
{open ? (
<div className="menu__content">
{children}
</div>
) : null}
</nav>
)
}
}
Prop types
Regler som beskriver hvilke data en komponent forventer Ä fÄ.
Â
- En prop kan spesifiseres som pÄkrevd
 - Flere predefinerte typer
 - Gir deg hjelpsomme feilmeldinger nÄr noe er galt
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class Greeting extends Component {
static propTypes = {
name: PropTypes.string.isRequired
}
render() {
const { name } = this.props;
return (
<h1>đ Hello, {name}!</h1>
);
}
}La oss se pÄ eksempel
pÄ hva som skjer nÄr man sender inn feil typer.
med og uten proptypes đ
Â
Lunsj đłđđ§
SĂ„... hva med data?
axios eller fetch
to ulike, men likevel ganske like biblioteker
for Ă„ gjĂžre (HTTP-)kall over internettet.
Â
Bygget rundt promises.
// make call
const response = await fetch(
'https://somewhere.web/api'
);
// get the JSON data from the response
const data = await response.json();
// do stuff with data...// make call
const response = await axios.get(
'https://somewhere.web/api'
);
// do stuff with data...bruk axios. Det funker "alltid"
Life cycle
metoder som kalles pÄ gitte tidspunkter. F.eks. nÄr komponenten blir satt inn i siden (rendret), og nÄr skal tas ut igjen.
Life cycle
class SuperComponent extends Component {
// called when component has mounted
componentDidMount() {}
// called before component unmounts
componentWillUnmount() {}
render() {
return <div>Yo</div>
}
}La oss live-kode litt..
Ruting
For Ä fÄ flere "views" i applikasjonen trenger vi URLer.
react-router
gir oss nettop det. Urler som viserÂ
bestemte komponenter
$ npm install --save react-router-domGĂ„ til prosjektet i terminalen og kjĂžr đ for Ă„ installere ruteren
To viktige komponenter:
<Route> og <Link>
Bestemmer om noe skal vises
En lenke til noe
import React, { Component } from 'react';
import {
BrowserRouter as Router
} from 'react-router-dom';
export default class App extends Component {
render() {
return (
<Router>
{/* Felles ting for appen - f.eks. navigasjon.. */}
<Header>
<nav>
<Link to="/">Forsiden</Link>
<Link to="/om-oss">Om oss</Link>
</nav>
</Header>
{/* Sidene i appen vÄr */}
<Route path="/" exact component={Index} />
<Route path="/om-oss" component={About} />
</Router>
)
}
}Kodecamp #1 - dag 2
By Kristoffer Brabrand
