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
Tweet

More Decks by Joshua Nelson

Other Decks in Programming

Transcript

  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 The worst teacher you’ve had?

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

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

  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
  6. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained We remember our teachers * Teachers stick

    in our brain * Ask anyone * Why do they?
  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
  8. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained How much? * What percentage of my

    life do you think I’ve spent learning?
  9. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained 100% (trick question) * Trick question *

    Huge percentage is education though – school, lectures, even this conference! *
  10. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained What are we learning now? * What

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

    * So, why learn React stuff?
  12. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained Outline Why bother Why it’s hard ✨

    Learning learning $ Learning React Get excited
  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)
  14. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained React usage? 65%

  15. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained React usage? 65% 7% https://tinyurl.com/ree-fesurvey * Up

    10% in 2016 * 53% in 2016, 58% in 2017
  16. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained Teaching? Just read docs

  17. @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. *
  18. @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, …
  19. @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.
  20. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained Get on board! * Let’s get these

    new people on board effectively!
  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!
  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!
  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
  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!
  25. @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
  26. @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
  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!
  28. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained How do we apply this to React?

    $ * How do we apply these principles to React?
  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?
  30. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained 1. Context. Context is important But no,

    not that context.
  31. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained Contexts Everyone comes from different backgrounds Maybe

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

  33. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained Contexts Maybe they’re actually a theatre major

    and have never done front end before!
  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.
  35. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained 2. Mental models

  36. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained The overall model * Introducing this as

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

  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
  39. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained https://tinyurl.com/ree-yougotthis * Great examples of mental models

    * Eg. “A live football app”
  40. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained 3. “Bits”

  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
  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
  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.)
  44. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained react-or-es2015.glitch.me * Could support typescript and more

    theoretically! * You can remix this on glitch
  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
  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
  47. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained Understand the bits Make sure that people

    truly understand individual “bits” first, and build up
  48. @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.
  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 *
  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 *
  51. @nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained Summary * In summary…

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

    important. We need good teachers
  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
  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?
  55. @nelsonjoshpaul jpnelson tinyurl.com/ree-slides Joshua Nelson, Developer @Atlassian Thanks Illustrations designed

    by Freepik from flaticon.com https://tinyurl.com/josh-feedback
  56. @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