Update for react course
This commit is contained in:
parent
f9b6dba4d2
commit
660b16ae1e
34
react/4/seasons/src/SeasonDisplay.css
Normal file
34
react/4/seasons/src/SeasonDisplay.css
Normal file
|
@ -0,0 +1,34 @@
|
|||
.icon-left {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.icon-right {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.season-display {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.season-display.winter i {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.season-display.summer i {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.winter {
|
||||
background-color: aliceblue;
|
||||
}
|
||||
|
||||
.summer {
|
||||
background-color: orange;
|
||||
}
|
|
@ -1,9 +1,33 @@
|
|||
import {
|
||||
React
|
||||
} from "react";
|
||||
import './SeasonDisplay.css'
|
||||
import React from 'react'
|
||||
|
||||
const SeasonDisplay = () => {
|
||||
return <div > Season display </div>
|
||||
const seasonConfig = {
|
||||
summer: {
|
||||
text: 'Let\'s hit the beach',
|
||||
iconName: 'sun'
|
||||
},
|
||||
winter: {
|
||||
text: 'Brr it is chilly',
|
||||
iconName: 'snowflake'
|
||||
}
|
||||
}
|
||||
|
||||
const getSeason = (lat, month) => {
|
||||
if (month > 2 && month < 9) {
|
||||
return lat > 0 ? 'summer' : 'winter'
|
||||
} else {
|
||||
return lat > 0 ? 'winter' : 'summer'
|
||||
}
|
||||
}
|
||||
|
||||
const SeasonDisplay = (props) => {
|
||||
const season = getSeason(props.lat, new Date().getMonth())
|
||||
const { text, iconName } = seasonConfig[season]
|
||||
return <div className={`season-display ${season}`}>
|
||||
<i className={`icon-left massive ${iconName} icon`} />
|
||||
<h1>{text}</h1>
|
||||
<i className={`icon-right massive ${iconName} icon`} />
|
||||
</div>
|
||||
}
|
||||
|
||||
export default SeasonDisplay
|
13
react/4/seasons/src/Spinner.js
Normal file
13
react/4/seasons/src/Spinner.js
Normal file
|
@ -0,0 +1,13 @@
|
|||
import React from 'react';
|
||||
|
||||
const Spinner = () => {
|
||||
return (
|
||||
<div className="ui active dimmer">
|
||||
<div className="ui big text loader">
|
||||
Loading...
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Spinner
|
|
@ -1,20 +1,22 @@
|
|||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import SeasonDisplay from './SeasonDisplay'
|
||||
import Spinner from './Spinner'
|
||||
|
||||
class App extends React.Component {
|
||||
|
||||
// specific to JS not to React
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = { lat: null, errorMessage: '' }
|
||||
// constructor(props) {
|
||||
// super(props)
|
||||
// this.state = { lat: null, errorMessage: '' }
|
||||
// }
|
||||
|
||||
state = { lat: null, errorMessage: '' }
|
||||
|
||||
componentDidMount() {
|
||||
window.navigator.geolocation.getCurrentPosition(
|
||||
postion => {
|
||||
this.setState({ lat: postion.coords.latitude })
|
||||
},
|
||||
err => {
|
||||
this.setState({ errorMessage: err.message })
|
||||
}
|
||||
postion => this.setState({ lat: postion.coords.latitude }),
|
||||
err => this.setState({ errorMessage: err.message })
|
||||
)
|
||||
}
|
||||
|
||||
|
@ -25,10 +27,10 @@ class App extends React.Component {
|
|||
}
|
||||
|
||||
if (!this.state.errorMessage && this.state.lat) {
|
||||
return <div>Latiture: {this.state.lat}</div>
|
||||
return <SeasonDisplay lat={this.state.lat} />
|
||||
}
|
||||
|
||||
return <div>Loading...</div>
|
||||
return <Spinner />
|
||||
}
|
||||
}
|
||||
ReactDOM.render(
|
||||
|
|
|
@ -19,6 +19,8 @@ input.
|
|||
|
||||
Class components are not classes in terms of Ruby or Python, they are a Javascript Class. They also must be extended to a subclass (react component). And they must define a `render` method that returns some amount of JSX.
|
||||
|
||||
When components are reloaded they are also reloading the child components.gt
|
||||
|
||||
## State
|
||||
|
||||
### Rules
|
||||
|
@ -29,3 +31,11 @@ Class components are not classes in terms of Ruby or Python, they are a Javascri
|
|||
* Updating `state` on a component causes the component to almost instantly rerender
|
||||
* `State` must be initialized when a component is created
|
||||
* `State` can *only* be updated with the `setState` function
|
||||
|
||||
Video 61: refactorisation on state and constructors, you can remove the whole constructor by passing a state to the class. => what is the state in a react application? Code is passed to Babel and understand the code that is compiled and extends + implements the constructor function.
|
||||
```
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = { lat: null, errorMessage: '' }
|
||||
}
|
||||
```
|
Loading…
Reference in a new issue