Skip to content

Latest commit

 

History

History
427 lines (347 loc) · 7.21 KB

s3.md

File metadata and controls

427 lines (347 loc) · 7.21 KB

REACT ADVANCED


## Burak Kırkıl __*Frontend Developer, VNGRS*__

Dumb Components

Smart Components

Code Sharing

  • mixins
  • high order components
  • render props
  • function as child
  • hooks

without code sharing

import React, { Component } from 'react'

class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      user: null,
      followers: null,
    }
  }

  componentDidMount() {
    fetch('https://api.github.com/users/burakkirkil')
      .then(res => res.json())
      .then(user => {
        this.setState({
          user,
        })
      })

    fetch(
      'https://api.github.com/users/burakkirkil/followers',
    )
      .then(res => res.json())
      .then(followers => {
        this.setState({
          followers,
        })
      })
  }

  render() {
    const { user, followers } = this.state

    return (
      <React.Fragment>
        <div>
          <h1>github.com/{user && user.login}</h1>
          {user && (
            <img src={user.avatar_url + '&s=50'} alt="" />
          )}
        </div>

        <div>
          <h2>Followers</h2>
          <ul>
            {followers &&
              followers.map(follower => (
                <li key={follower.id}>
                  <img
                    src={follower.avatar_url + '&s=50'}
                    alt=""
                  />
                </li>
              ))}
          </ul>
        </div>
      </React.Fragment>
    )
  }
}

export default App

mixins?

high order components

import React, { Component } from 'react'

// High Order Component
const withFetch = url => Wrapped => {
  return class Wrapper extends Component {
    constructor(props) {
      super(props)

      this.state = {
        data: null,
      }
    }

    componentDidMount() {
      fetch(url)
        .then(res => res.json())
        .then(data => {
          this.setState({
            data,
          })
        })
    }

    render() {
      return <Wrapped {...this.state} />
    }
  }
}

const User = props => {
  const { data: user } = props
  return (
    <div>
      <h1>github.com/{user && user.login}</h1>
      {user && (
        <img src={user.avatar_url + '&s=50'} alt="" />
      )}
    </div>
  )
}

const Followers = props => {
  const { data: followers } = props
  return (
    <div>
      <h2>Followers</h2>
      <ul>
        {followers &&
          followers.map(follower => (
            <li key={follower.id}>
              <img
                src={follower.avatar_url + '&s=50'}
                alt=""
              />
            </li>
          ))}
      </ul>
    </div>
  )
}

const WrappedUser = withFetch(
  'https://api.github.com/users/burakkirkil',
)(User)

const WrappedFollowers = withFetch(
  'https://api.github.com/users/burakkirkil/followers',
)(Followers)

const App = () => {
  return (
    <React.Fragment>
      <WrappedUser />
      <WrappedFollowers />
    </React.Fragment>
  )
}

export default App

render props

import React, { Component } from 'react'

class Fetcher extends Component {
  constructor(props) {
    super(props)

    this.state = {
      data: null,
    }
  }

  componentDidMount() {
    fetch(this.props.url)
      .then(res => res.json())
      .then(data => {
        this.setState({
          data,
        })
      })
  }

  render() {
    return this.props.render(this.state)
  }
}

const App = () => {
  const renderUser = ({ data: user }) => {
    return (
      <div>
        <h1>github.com/{user && user.login}</h1>
        {user && (
          <img src={user.avatar_url + '&s=50'} alt="" />
        )}
      </div>
    )
  }

  const renderFollowers = ({ data: followers }) => {
    return (
      <div>
        <h2>Followers</h2>
        <ul>
          {followers &&
            followers.map(follower => (
              <li key={follower.id}>
                <img
                  src={follower.avatar_url + '&s=50'}
                  alt=""
                />
              </li>
            ))}
        </ul>
      </div>
    )
  }

  return (
    <React.Fragment>
      <Fetcher
        url="https://api.github.com/users/burakkirkil"
        render={renderUser}
      />
      <Fetcher
        url="https://api.github.com/users/burakkirkil/followers"
        render={renderFollowers}
      />
    </React.Fragment>
  )
}

export default App

function as child

import React, { Component } from 'react'

class Fetcher extends Component {
  constructor(props) {
    super(props)

    this.state = {
      data: null,
    }
  }

  componentDidMount() {
    fetch(this.props.url)
      .then(res => res.json())
      .then(data => {
        this.setState({
          data,
        })
      })
  }

  render() {
    return this.props.children(this.state)
  }
}

const App = () => {
  return (
    <React.Fragment>
      <Fetcher url="https://api.github.com/users/burakkirkil">
        {({ data: user }) => {
          return (
            <div>
              <h1>github.com/{user && user.login}</h1>
              {user && (
                <img
                  src={user.avatar_url + '&s=50'}
                  alt=""
                />
              )}
            </div>
          )
        }}
      </Fetcher>

      <Fetcher url="https://api.github.com/users/burakkirkil/followers">
        {({ data: followers }) => {
          return (
            <div>
              <h2>Followers</h2>
              <ul>
                {followers &&
                  followers.map(follower => (
                    <li key={follower.id}>
                      <img
                        src={follower.avatar_url + '&s=50'}
                        alt=""
                      />
                    </li>
                  ))}
              </ul>
            </div>
          )
        }}
      </Fetcher>
    </React.Fragment>
  )
}

export default App

hooks

import React, { useState } from 'react'

const useFetcher = ({ url }) => {
  const [data, setData] = useState(null)

  fetch(url)
    .then(res => res.json())
    .then(data => {
      setData(data)
    })

  return data
}

const App = () => {
  const user = useFetcher({
    url: 'https://api.github.com/users/burakkirkil',
  })

  const followers = useFetcher({
    url:
      'https://api.github.com/users/burakkirkil/followers',
  })

  return (
    <React.Fragment>
      <div>
        <h1>github.com/{user && user.login}</h1>
        {user && (
          <img src={user.avatar_url + '&s=50'} alt="" />
        )}
      </div>

      <div>
        <h2>Followers</h2>
        <ul>
          {followers &&
            followers.map(follower => (
              <li key={follower.id}>
                <img
                  src={follower.avatar_url + '&s=50'}
                  alt=""
                />
              </li>
            ))}
        </ul>
      </div>
    </React.Fragment>
  )
}

export default App

react-router

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/withRouter.js

demo

Teşekkürler