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

View Slide

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

View Slide

The best teacher you’ve had?

View Slide

Do you know who this is?

View Slide

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

View Slide

We remember our teachers
* Teachers stick in our brain

* Ask anyone

* Why do they?

View Slide

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

View Slide

How much?
* What percentage of my life do you think I’ve spent learning?

View Slide

100%
(trick question)
* Trick question

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

*

View Slide

What are we learning now?
* What are we learning now?

View Slide

What are we learning now?
* React!

* So, why learn React stuﬀ?

View Slide

Outline
Why bother

Why it’s hard
✨ Learning learning

$ Learning React
Get excited

View Slide

React usage?
* What % of front end developers do you think have used React? (fe tooling survey 2018)

View Slide

React usage?
65%

View Slide

React usage?
65% 7%
https://tinyurl.com/ree-fesurvey
* Up 10% in 2016

* 53% in 2016, 58% in 2017

View Slide

Teaching?

Just read docs

View Slide

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.

*

View Slide

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

View Slide

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.

View Slide

Get on board!
* Let’s get these new people on board eﬀectively!

View Slide

Is React hard?
* Show of hands, who thinks React was easy to learn?

* Easy to forget

* Different people experience find it different!

View Slide

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!

View Slide

People learn differently!
* People learn diﬀerently!

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

View Slide

Learning about learning! ✨
1. Mental models

2. Learning “bits”

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

View Slide

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

View Slide

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

View Slide

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!

View Slide

How do we apply this to React? $
* How do we apply these principles to React?

View Slide

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 Slide

1. Context.
Context is important

But no, not that context.

View Slide

Contexts
Everyone comes from diﬀerent backgrounds

Maybe angular?

View Slide

Contexts
Maybe jQuery?

View Slide

Contexts
Maybe they’re actually a theatre major and have never done front end before!

View Slide

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 Slide

2. Mental models

View Slide

The overall model
* Introducing this as a mental model is a helpful step

View Slide

The overall model
React is this bit

View Slide

“React is really just the view.

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

View Slide

https://tinyurl.com/ree-yougotthis
* Great examples of mental models

* Eg. “A live football app”

View Slide

3. “Bits”

View Slide

* As we learned, when learning to read, we want to learn individual pieces ﬁrst. Sounding it out is a good approach

View Slide

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

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

react-or-es2015.glitch.me
* Could support typescript and more theoretically!

* You can remix this on glitch

View Slide

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

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

View Slide

Understand the bits
Make sure that people truly understand individual “bits” ﬁrst, and build up

View Slide

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.

View Slide

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 Slide

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

*

View Slide

Summary
* In summary…

View Slide

Learning is important
* Learning is really important. We need good teachers

View Slide

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 Slide

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 Slide

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

Thanks
Illustrations designed by Freepik from flaticon.com

https://tinyurl.com/josh-feedback

View Slide

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

View Slide

React explained, explained

React explained, explained

Joshua Nelson

More Decks by Joshua Nelson

Other Decks in Programming

Featured

Transcript