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 bryansmith33

Made with Slides.com

Props n State

  • 382

More from bryansmith33