React explained, explained

@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 stuﬀ 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 ﬁrst 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 ﬁrst 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 stuﬀ?

@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 eﬀectively!

@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 stuﬀ about front end!

@nelsonjoshpaul jpnelson tinyurl.com/react-explained-explained People learn differently! * People learn diﬀerently!
* 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 diﬀerent techniques – word lists, sentences, “read it out loud” * When learning languages, interesting diﬀerent 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. Diﬀerent people have diﬀerent 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 diﬀerent 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 ﬁrst. 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 conﬂate 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” ﬁrst, 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 diﬀerence? * 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 stuﬀ * 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

React explained, explained

React explained, explained

More Decks by Joshua Nelson

Other Decks in Programming

Featured

Transcript