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
  2. @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
  3. @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
  4. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained 100% (trick question) * Trick question *

    Huge percentage is education though – school, lectures, even this conference! *
  5. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained React usage? * What % of front

    end developers do you think have used React? (fe tooling survey 2018)
  6. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained Multiply your effectiveness Force multiplier Responsibility 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. *
  7. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained It’s your responsibility Force multiplier Responsibility 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, …
  8. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained You learn when you teach Force multiplier

    Responsibility 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.
  9. @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!
  10. @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!
  11. @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
  12. @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!
  13. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained 1. People learn with “mental models” *

    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 people! * Give people a good set of mental models to work with * Use analogies * Examples soon
  14. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained 2. Learn the “bits” https://tinyurl.com/ree-phonics * 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
  15. @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!
  16. @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?
  17. @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.
  18. @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
  19. @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
  20. @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
  21. @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.)
  22. @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
  23. @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
  24. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained Motivation * 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.
  25. @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 *
  26. @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 *
  27. @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
  28. @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?
  29. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained References • 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 programming • 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:// faculty.wharton.upenn.edu/wp-content/uploads/2014/09/Natural-Learning-in- Higher-Education_2.pdf