finish 5, 6 classes

This commit is contained in:
christalib 2019-09-12 20:05:48 +02:00
parent 660b16ae1e
commit 85e86e28f8
3 changed files with 12 additions and 4 deletions

View file

@ -1,13 +1,17 @@
import React from 'react'; import React from 'react';
const Spinner = () => { const Spinner = (props) => {
return ( return (
<div className="ui active dimmer"> <div className="ui active dimmer">
<div className="ui big text loader"> <div className="ui big text loader">
Loading... {props.message}
</div> </div>
</div> </div>
) )
} }
Spinner.defaultProps = {
message: 'Loading...'
}
export default Spinner export default Spinner

View file

@ -30,9 +30,10 @@ class App extends React.Component {
return <SeasonDisplay lat={this.state.lat} /> return <SeasonDisplay lat={this.state.lat} />
} }
return <Spinner /> return <Spinner message="Please accept location request..." />
} }
} }
ReactDOM.render( ReactDOM.render(
<App />, <App />,
document.querySelector('#root') document.querySelector('#root')

View file

@ -7,6 +7,8 @@ A system for passing data from a parent component to a child component. The goal
Props are objects so the fields have to be called as methods: `props.author` for instance. Props are objects so the fields have to be called as methods: `props.author` for instance.
It is possible to use `defaultProps` to instantiate the default behaviour of a component.
## Functional components ## Functional components
Used anytime to show simple content to the user. (the card for example -- create Used anytime to show simple content to the user. (the card for example -- create
@ -38,4 +40,5 @@ Video 61: refactorisation on state and constructors, you can remove the whole co
super(props) super(props)
this.state = { lat: null, errorMessage: '' } this.state = { lat: null, errorMessage: '' }
} }
``` ```
* always try to have one statement in the render method, in case it isn't possible try to use a helper function with the complex cases and returning to the render method. see video 70