@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 

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

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

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

@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 

@nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained We remember our teachers * Teachers stick in our brain * Ask anyone * Why do they? 

@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 

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

@nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained 100% (trick question) * Trick question * Huge percentage is education though – school, lectures, even this conference! * 

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

@nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained What are we learning now? * React! * So, why learn React stuff? 

@nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained Outline Why bother Why it’s hard ✨ Learning learning $ Learning React Get excited 

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

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

@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 

@nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained Teaching? Just read docs 

@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. * 

@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, … 

@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. 

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

@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! 

@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! 

@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 

@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! 

@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 

@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 

@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! 

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

@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? 

@nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained 1. Context. Context is important But no, not that context. 

@nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained Contexts Everyone comes from different backgrounds Maybe angular? 

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

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

@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. 

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

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

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

@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 

@nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained https://tinyurl.com/ree-yougotthis * Great examples of mental models * Eg. “A live football app” 

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

@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 

@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 

@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.) 

@nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained react-or-es2015.glitch.me * Could support typescript and more theoretically! * You can remix this on glitch 

@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 

@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 

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

@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. 

@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 * 

@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 * 

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

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

@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 

@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? 

@nelsonjoshpaul jpnelson tinyurl.com/ree-slides Joshua Nelson, Developer @Atlassian Thanks Illustrations designed by Freepik from flaticon.com https://tinyurl.com/josh-feedback 

@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