finish 5, 6 classes
This commit is contained in:
parent
660b16ae1e
commit
85e86e28f8
|
@ -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
|
|
@ -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')
|
||||||
|
|
|
@ -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
|
Loading…
Reference in a new issue