Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intro to React Components - React Delhi NCR 01 Jul 2018 Meetup

Intro to React Components - React Delhi NCR 01 Jul 2018 Meetup

Introductory talk on React components, what they are and how to create them.

Arun Michael Dsouza

July 01, 2018
Tweet

More Decks by Arun Michael Dsouza

Other Decks in Programming

Transcript

  1. Intro to React Components
    Arun Michael Dsouza

    @amdsouza92 React Delhi/NCR

    View Slide

  2. Header
    Sidebar
    Slider
    News News

    View Slide

  3. Image source: www.hawaii.edu

    View Slide

  4. Props
    React
    element

    View Slide

  5. React element
    DOM element

    View Slide

  6. JSX
    bit.ly/2ttPzcV

    View Slide

  7. Functional components

    View Slide

  8. Class components

    View Slide

  9. Props are read-only!

    View Slide

  10. Props are read-only!

    View Slide

  11. All React components must act like
    pure functions with respect to their props.
    bit.ly/2ywNi6n

    View Slide

  12. Use state to update a component.

    View Slide

  13. View Slide

  14. Dumb/stateless components

    View Slide

  15. Smart/statefull components

    View Slide

  16. • Abstracting complexity
    • Maintainability
    • Reusability
    • Ease of testing

    View Slide

  17. • https://reactjs.org/docs/components-and-props.html
    • https://www.youtube.com/watch?v=0BHoz0ptv7k
    • https://reactjs.org/docs/thinking-in-react.html
    Quick links

    View Slide

  18. Thank you!
    React Delhi/NCR
    Arun Michael Dsouza

    @amdsouza92

    View Slide