React
Props n State
App.js
import React, {Component} from 'react'
class App extends Component {
render(){
return (
<div>
<h1>Hello, World!</h1>
</div>
)
}
}
export default App
import React, {Component} from 'react'
class App extends Component {
constructor(){
super()
this.state = {
location: 'World""
}
}
render(){
return (
<div>
<h1>Hello, ${this.state.location}!</h1>
</div>
)
}
}
export default App
import React, {Component} from 'react'
class App extends Component {
constructor(){
super()
this.state = {
location: 'World',
name: 'Bryan',
tattoos: {
has: true,
count: 5
},
friends: ['Landy', 'Lindsey', 'Cam']
}
}
render(){
return (
<div>
<h1>Hello, {this.state.location}!</h1>
<h3>My name is {this.state.name}</h3>
<h3>I have {this.state.tattoos.count} tattoos</h3>
</div>
)
}
}
export default App
State
App.js
import React, {Component} from 'react'
import Count from './Components/Count'
class App extends Component {
constructor(){
super()
this.state = {
numberOfClicks: 0
}
}
render(){
return (
<div>
<Count count={this.state.numberOfClicks} />
</div>
)
}
}
export default App
Props
Count.js
import React, {Component} from 'react'
class App extends Component {
constructor(){
super()
this.state = {
}
}
render(){
return (
<div>
</div>
)
}
}
export default App
import React, {Component} from 'react'
class Count extends Component {
render(){
return (
<div>
<h1>{this.props.count}</h1>
</div>
)
}
}
export default Count
0
Quick Note on this
WTF IS this??
this simply refers to the object where the method is being invoked...
WTF IS this??
this in JavaScript allows you to decide what the function will reference when being invoked
Pro Tip: Look where the function using this is being invoked to find the true meaning of this
Binding this
.call
.apply
.bind
Creates a new function with this bound
App.js
import React, {Component} from 'react'
import Count from './Components/Count'
class App extends Component {
constructor(){
super()
this.state = {
numberOfClicks: 0
}
}
handleIncreaseCount(){
this.setState({
numberOfClicks: this.state.numberOfClicks + 1
})
}
render(){
return (
<div>
<button onClick={this.handleIncreaseCount}></button>
<Count count={this.state.numberOfClicks} />
</div>
)
}
}
export default App
.bind
Count.js
import React, {Component} from 'react'
import Count from './Components/Count'
class App extends Component {
constructor(){
super()
this.state = {
numberOfClicks: 0
}
this.handleIncreaseCount = this.handleIncreaseCount.bind(this)
}
handleIncreaseCount(){
this.setState({
numberOfClicks: this.state.numberOfClicks + 1
})
}
render(){
return (
<div>
<button onClick={this.handleIncreaseCount}></button>
<Count count={this.state.numberOfClicks} />
</div>
)
}
}
export default App
State v Props
State
Props
- Data
- Local to Class
- Can be manipulated
- Data
- Passed from parent
- Can be manipulated
Props n State
By jonmcd
Props n State
- 129