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

React explained, explained

React explained, explained

Some people think React is easy to understand, and some people thing it's super difficult. How can both be true? I'll go over different approaches for explaining React, techniques for explaining more effectively, and some gotchas and pitfalls that people often experience (some of which might surprise you!)

Joshua Nelson

November 30, 2018

More Decks by Joshua Nelson

Other Decks in Programming


  1. @nelsonjoshpaul jpnelson tinyurl.com/ree-slides
    Joshua Nelson, Developer @Atlassian

    React explained, explained
    How to explain React
    * Developer at Atlassian

    * Working with React and React platforms for developers and users daily

    * Need to explain stuff all the time

    * Jira, bitbucket, Trello

    * Got a question about Jira? I might be able to help

    * Find me at @nelsonjoshpaul on twitter

    * Slides down the bottom

    * Learning React, Advanced React, get something

    View full-size slide

  2. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    The worst teacher you’ve had?

    View full-size slide

  3. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    The best teacher you’ve had?

    View full-size slide

  4. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    Do you know who this is?

    View full-size slide

  5. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    Dr. Paul Francis, ANU
    * Pretty unlikely

    * Dr Paul Francis, my first year physics lecturer

    * Really focused on engaging the class

    * Passionate about the topic

    * Always wore funky space clothing, big plus

    View full-size slide

  6. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    We remember our teachers
    * Teachers stick in our brain

    * Ask anyone

    * Why do they?

    View full-size slide

  7. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    Learning is a huge part of life
    * You did a bunch of learning throughout your life

    * So does everyone!

    * The first thing everyone does in life is start learning

    View full-size slide

  8. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    How much?
    * What percentage of my life do you think I’ve spent learning?

    View full-size slide

  9. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    (trick question)
    * Trick question

    * Huge percentage is education though – school, lectures, even this conference!


    View full-size slide

  10. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    What are we learning now?
    * What are we learning now?

    View full-size slide

  11. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    What are we learning now?
    * React!

    * So, why learn React stuff?

    View full-size slide

  12. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    Why bother

    Why it’s hard
    ✨ Learning learning

    $ Learning React
    Get excited

    View full-size slide

  13. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    React usage?
    * What % of front end developers do you think have used React? (fe tooling survey 2018)

    View full-size slide

  14. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    React usage?

    View full-size slide

  15. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    React usage?
    65% 7%
    * Up 10% in 2016

    * 53% in 2016, 58% in 2017

    View full-size slide

  16. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained

    Just read docs

    View full-size slide

  17. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    Multiply your effectiveness
    Force multiplier
    You learn
    Why teach?
    * Want to be a 2x / 10x / 100x developer? Teach people!

    * Making someone understand something correctly will help them achieve more, which is good for you! Good for everyone!

    * Someone in grade school today could be on your team by the end of your career.

    * Let’s care about teaching.


    View full-size slide

  18. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    It’s your responsibility
    Force multiplier
    You learn
    Why teach?
    * As engineers, we need to teach people

    * We need to be responsible engineers that can teach PM’s, designers, parents, anyone!

    * What do you do with that React thing? Well, …

    View full-size slide

  19. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    You learn when you teach
    Force multiplier
    You learn
    Why teach?
    * Richard Feynman was once asked by a Caltech faculty member to explain why spin 1/2 particles obey Fermi-Dirac statistics

    * He gauged his audience perfectly and said, “I’ll prepare a freshman lecture on it.”

    * But a few days later he returned and said, “You know, I couldn’t do it. I couldn’t reduce it to the freshman level. That means we really don’t understand it.

    View full-size slide

  20. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    Get on board!
    * Let’s get these new people on board effectively!

    View full-size slide

  21. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    Is React hard?
    * Show of hands, who thinks React was easy to learn?

    * Easy to forget

    * Different people experience find it different!

    View full-size slide

  22. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    I’m going to be honest: I’ve had a hell of a time
    getting my head around React. More than any
    other technology I’ve touched over the last 10
    years of my career, I just haven’t had it click for
    me. It’s very frustrating as I really want to learn
    it, and it’s clear the library has legs.

    –Brad Frost

    * From Brad Frost, developer evangelist

    * This is from a person who already knows stuff about front end!

    View full-size slide

  23. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    People learn differently!
    * People learn differently!

    * We need to understand how people learn to know what the problems might be

    View full-size slide

  24. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    Learning about learning! ✨
    1. Mental models

    2. Learning “bits”

    3. Active learning
    * So, let’s learn how people learn!

    View full-size slide

  25. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    1. People learn with “mental
    * There’s no definitive answer.

    * React will be easy to understand for some people, and harder to understand for a different set of people.

    * People come with a different backgrounds, and a different set of “mental models”, which means that the core concepts of React will be easier or harder for different

    * Give people a good set of mental models to work with

    * Use analogies

    * Examples soon

    View full-size slide

  26. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    2. Learn the “bits”
    * How did you learn language?

    * Learning a language has different techniques – word lists, sentences, “read it out loud”

    * When learning languages, interesting different approaches

    * R . Ea . D. Vs. “here’s a sentence, go”

    * Research shows that people learn better with phonics.

    * Applies to programming too – teach the small concepts

    View full-size slide

  27. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    3. Learning is active
    * Learning is active. People learn better when they’re engaged

    * Ask questions regularly.

    * Don’t ask “Does this make sense?” (often met with empty nods or “uh, yeah.”)

    * Ask “what” or “why” questions, like “What would happen in this situation?” and “Why is this piece of code important?”

    * Be prepared to change tacts. Different people have different experiences!

    View full-size slide

  28. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    How do we apply this to React? $
    * How do we apply these principles to React?

    View full-size slide

  29. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    How do we apply this to React? $
    1. Know the context

    2. Have a good model

    3. Learn the “bits”
    * How does this apply to React though?

    View full-size slide

  30. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    1. Context.
    Context is important

    But no, not that context.

    View full-size slide

  31. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    Everyone comes from different backgrounds

    Maybe angular?

    View full-size slide

  32. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    Maybe jQuery?

    View full-size slide

  33. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    Maybe they’re actually a theatre major and have never done front end before!

    View full-size slide

  34. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    Others won’t understand React
    the way you do!
    * Things change over time

    * “Front end stuff just moves so fast! I learnt javascript a year ago, and the next time I came back everything’s different!”.

    * Building up over time gives a different perspective than from all at once.

    View full-size slide

  35. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    2. Mental models

    View full-size slide

  36. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    The overall model
    * Introducing this as a mental model is a helpful step

    View full-size slide

  37. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    The overall model
    React is this bit

    View full-size slide

  38. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    “React is really just the view.

    I was like, that's it?”
    Direct quote from someone learning React

    View full-size slide

  39. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    * Great examples of mental models

    * Eg. “A live football app”

    View full-size slide

  40. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    3. “Bits”

    View full-size slide

  41. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    * As we learned, when learning to read, we want to learn individual pieces first. Sounding it out is a good approach

    View full-size slide

  42. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    * Now here’s some example code

    * This is some example code

    * There’s a lot going on here!

    * Read the comments to see which bits are ES2015, or React, or JSX

    View full-size slide

  43. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    * This is a problem I didn’t even realise people had!

    * People new to React will ask which bits are which, can be hard to understand

    * This tool parses code, and annotates it with the class of syntax each bit comes from (React, ES2015, JSX, etc.)

    View full-size slide

  44. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    * Could support typescript and more theoretically!

    * You can remix this on glitch

    View full-size slide

  45. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    * Who has used lodash or underscore?

    * Not everyone has

    * Avoid unnecessary bits if you can

    * It can be distracting

    * If you’re teaching or writing examples, avoid using helper libraries.

    * They may be good in practice, but wait until fundamentals are understood

    View full-size slide

  46. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    Focus on what’s important
    * There should be a focal point of what you’re trying to demonstrate

    * Either in explaining or writing an example, don’t conflate several ideas. Even if they’re all important / useful ideas

    View full-size slide

  47. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    Understand the bits
    Make sure that people truly understand individual “bits” first, and build up

    View full-size slide

  48. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    * We know how people learn, and how to apply that to React in some ways

    * How can we make people *want* to learn more themselves?

    * Motivation is a key part of learning!

    * Think about that best teacher, and that worst teacher. What’s the difference?

    * Surely, the good ones inspired you to learn more.

    * Let’s do that.

    View full-size slide

  49. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    What will you make?
    * Ask this question: what will you make?

    * Research shows that people

    * Research shows that people are more motivated when they’re in control of what they’re learning

    * My experience shows the same thing. People learn when they’re engaged


    View full-size slide

  50. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    People enjoy mastery
    * Even with just a few bits, it’s key to let people make stuff

    * People enjoy mastery over what it is they’re learning

    * I enjoy CSS!

    * They might not need to learn async fetching, typescript, or redux, to know what they want to make


    View full-size slide

  51. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    * In summary…

    View full-size slide

  52. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    Learning is important
    * Learning is really important. We need good teachers

    View full-size slide

  53. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    Learning is important
    People won’t understand React
    the way you do
    * No two people will understand React through the same process and in the same way

    * Think carefully about who you’re talking to

    View full-size slide

  54. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    Learning is important
    People won’t understand React
    the way you do
    Ask “What will you make”
    * The most important question of all – what will you make?

    * Got the tools, now what?

    View full-size slide

  55. @nelsonjoshpaul jpnelson tinyurl.com/ree-slides
    Joshua Nelson, Developer @Atlassian

    Illustrations designed by Freepik from flaticon.com


    View full-size slide

  56. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained
    • https://dev.to/jpnelson/react-explaining-explained-1lb8

    • https://tinyurl.com/ree-survey – survey on Front End Tooling

    • https://tinyurl.com/ree-yougotthis

    • https://react-or-es2015.glitch.me – the tool I built

    • https://www.youtube.com/watch?v=UJxXgugvXmE – great talk on teaching

    • Six Easy Pieces: Essentials of Physics Explained by Its Most Brilliant Teacher

    • (Bransford, 2000, pg.15–20)

    • J. Scott Armstrong (2012). “Natural Learning in Higher Education”. https://

    View full-size slide