finished react section7
This commit is contained in:
parent
0679a1656f
commit
d69ac9ff5d
5314
react/7/pics/package-lock.json
generated
5314
react/7/pics/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
@ -1,12 +1,18 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import SearchBar from './SearchBar'
|
import SearchBar from './SearchBar'
|
||||||
|
|
||||||
const App = () => {
|
class App extends React.Component {
|
||||||
return (
|
onSearchSubmit(term) {
|
||||||
<div className="ui container" style={{ marginTop: "10px" }}>
|
console.log(term)
|
||||||
<SearchBar />
|
}
|
||||||
</div>
|
|
||||||
)
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="ui container" style={{ marginTop: "10px" }}>
|
||||||
|
<SearchBar onSubmit={this.onSearchSubmit} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
|
@ -1,14 +1,28 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
|
||||||
class SearchBar extends React.Component {
|
class SearchBar extends React.Component {
|
||||||
|
state = { term: '' }
|
||||||
|
|
||||||
|
// using an arrow function instead of just defining the function is a way
|
||||||
|
// to prenvent undefined type of errors
|
||||||
|
// it is possible to do this in the html tag
|
||||||
|
// onSubmit={(event) => this.onFormSubmit(event)}
|
||||||
|
onFormSubmit = (event) => {
|
||||||
|
// Prevent the browser to refresh automatically
|
||||||
|
event.preventDefault()
|
||||||
|
this.props.onSubmit(this.state.term)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="ui segment">
|
<div className="ui segment">
|
||||||
|
<form className="ui form" onSubmit={this.onFormSubmit}>
|
||||||
<form className="ui form" action="">
|
|
||||||
<div className="field">
|
<div className="field">
|
||||||
<label htmlFor="">Image Search</label>
|
<label htmlFor="">Image Search</label>
|
||||||
<input type="text" />
|
<input value={this.state.term} type="text" onChange={(e) => this.setState({ term: e.target.value })} />
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>)
|
</div>)
|
||||||
|
|
|
@ -14,6 +14,13 @@ It is possible to use `defaultProps` to instantiate the default behaviour of a c
|
||||||
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
|
||||||
JSX pass some props and return it).
|
JSX pass some props and return it).
|
||||||
|
|
||||||
|
Alternative writing:
|
||||||
|
```js
|
||||||
|
const SearchBar = () => (
|
||||||
|
<div></div>
|
||||||
|
)
|
||||||
|
```
|
||||||
|
|
||||||
## Class components
|
## Class components
|
||||||
|
|
||||||
For complex content, respond to user input, network request. Can use the state
|
For complex content, respond to user input, network request. Can use the state
|
||||||
|
@ -35,10 +42,29 @@ When components are reloaded they are also reloading the child components.gt
|
||||||
* `State` can *only* be updated with the `setState` function
|
* `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.
|
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.
|
||||||
```
|
``` js
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
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
|
* 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
|
||||||
|
|
||||||
|
* `onInputChange`: In that case:
|
||||||
|
``` js
|
||||||
|
<input type="text" onChange={this.onInputChange}>
|
||||||
|
```
|
||||||
|
The function `onInputChange` is not called as a function (`onInputChange()`) but as a callback so the function is not run everytime the component is rendered but when the component is called.
|
||||||
|
Other functions: `onClick`, `onSubmit` and `onChange`
|
||||||
|
|
||||||
|
* replace handlers by arrow functions, insead of:
|
||||||
|
|
||||||
|
``` js
|
||||||
|
<input type="text" onChange={this.onInputChange}>
|
||||||
|
```
|
||||||
|
|
||||||
|
you get:
|
||||||
|
|
||||||
|
``` js
|
||||||
|
<input type="text" onChange={(e) => console.log(e.target.value)}>
|
||||||
|
```
|
Loading…
Reference in a new issue