Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed The Treehouse Show!
You have completed The Treehouse Show!
Preview
In this episode we talk with Treehouse developer, lifelong learner and #1 Rad Dad Dustin Brown.
The Technology
- React Basics Course on Treehouse
- Introducing JSX from Facebook
- Thinking in React
More About Dustin
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Hi, I'm Craig.
0:00
Welcome to the Treehouse Show.
0:01
The Treehouse Show is our weekly
conversation with the Treehouse community.
0:02
[SOUND] In this episode,
we talk with the Treehouse developer,
0:05
life long learner, and
number one rad dad, Dustin Brown.
0:10
[SOUND] Thank you so much for
being on the show Dustin.
0:15
>> Yeah, I'm glad to be here.
0:17
>> I've got a question.
0:19
How did you get started in technology?
0:20
>> Yeah, that's a good question.
0:23
I kind of had always been
interested in technology, right?
0:24
I grew up as the internet
was becoming a thing.
0:30
>> Okay.
0:32
>> And, but I didn't explore
it career wise or anything,
0:33
I was working for
non-profits for a while and
0:37
then I did some little html like
classes and stuff like that.
0:39
And then was looking to make
a career change and I decided well,
0:44
I think I like this stuff, the coding
stuff, so let's pursue this more.
0:49
So I got into one of those coding
boot camp things, did that,
0:56
loved it, loved it and
kind of haven't looked back since.
1:01
>> Awesome, and
you went from the boot camp to Treehouse?
1:07
>> Well yes, but
I stopped at the boot camp for
1:11
a little while to help be
like sort of a TA instructor.
1:15
>> Cool.
>> Yeah.
1:19
>> Nice, that's a cool
program they have to do that.
1:20
>> It was really cool.
1:23
Yeah, yeah, I really enjoyed it.
1:24
>> Awesome, so
now you're a developer here at Treehouse.
1:25
What is something that
the students will know
1:28
that they've seen that you've worked on?
1:32
What's your favorite feature
that you've worked on?
1:34
>> Yeah so probably the most student
facing one is that little activity
1:35
graph that shows up after you've
completed a quiz or a video or whatever.
1:40
>> You worked on that?
1:45
>> I did, yeah.
>> I love that.
1:46
That's so nice when you finish,
it's like [SOUND] I did it.
1:47
>> Yeah it's fun.
1:50
It's a fun one.
1:51
Most of my other work is
pretty behind the scenes,
1:54
but that's one that I think everyone
would recognize at this point.
1:57
>> Well thanks for doing that.
1:59
That's a ton of fun.
2:00
I'm wondering what you're working on now.
2:03
>> Yeah, so right now I'm working on this.
2:06
We're trying to do some improvements
to the way that our JavaScript works.
2:09
>> Okay.
2:13
>> So we've got a lot of
2:14
just bits of JavaScript sprinkled
all throughout the app.
2:18
It's a pretty interactive application,
but a lot of it's pretty old.
2:22
>> Okay, that's what happens, right?
2:27
>> Yeah, as happens.
2:30
And it's been added to over the years,
and so it gets pretty complex.
2:31
And so one thing that I'm trying to do
right now is to simplify the way that
2:39
our quizzes work.
2:42
>> Okay.
>> Yeah.
2:43
>> Cool, this here?
2:43
Can I touch it?
2:46
>> Sure, yeah.
2:47
>> Did you save it?
2:48
>> I don't see a blue dot,
so yeah I think I did.
2:49
>> Cool, that's pretty cool.
2:52
That's a question html tag there,
is that what that is?
2:55
>> [LAUGH] Yeah.
2:58
That's a good question.
2:59
That's actually a JavaScript
in some flavor.
2:59
>> Yeah, that's weird,
look it's doing this.
3:05
Okay so it's returning, well what is that?
3:07
>> So this is React.
3:11
>> Okay, awesome.
3:12
>> Specifically this is the GSX syntax.
3:14
I believe that's what it's called,
I want to say.
3:17
And so these are actually, what you
see here, these are function calls.
3:20
So this is a function that says
to essentially generate a div.
3:24
>> Okay.
3:29
>> And then inside this is
a function that says generate
3:30
a question component which is
a thing that I've defined.
3:33
>> Okay.
>> And I'm passing some stuff into it.
3:37
So that's what happening here.
3:39
You have three components that I'm
creating here, I have the question
3:40
component, the feedback component,
and the answers component.
3:44
>> Well that looks really nice,
the way that this is working here.
3:48
So where's the code for these things?
3:51
>> Yeah good question.
3:56
So if I scroll up here,
you'll a lot of logic here that
3:57
is being used to kind of manage a lot
of the interactivity for this part.
4:03
But as far as what does it mean
to be a question component,
4:10
that lives over here in the quiz
question component file.
4:14
And you could see kind of very similar
to what you saw on that other page,
4:19
like here is, it's a div.
4:23
Here's some stuff that can go in there,
and
4:25
this is what it means to be a question
on a quiz in the Treehouse app.
4:28
>> That's super neat.
4:33
So let me flip over back over here.
4:34
>> Yeah, please.
4:36
>> Let me touch the computer.
4:37
[LAUGH] So I like how it's really nice and
you can understand what's going on there.
4:39
You can just kinda look at it.
4:45
I feel like I could change this and
I don't necessarily know what this is.
4:47
That's really slick.
4:50
So this is React?
4:52
So have you been doing React forever?
4:54
>> No this is kind of my
first foray into React.
4:55
>> Wow, so you're redoing the quiz
things with a new technology.
5:00
>> Yeah.
5:06
>> How's that feel?
5:07
That's a production level
change in a new technology.
5:08
How does that feel?
5:11
>> Well, I'll tell you it feels good.
5:13
It feels good cuz it's an opportunity
to learn something new which
5:15
I'm thankful for.
5:20
It's also big [LAUGH] and different.
5:22
So I'm so used to doing this very manual
DOM manipulation kinda JavaScript that
5:25
it's a bit mind bending,
but it's been really great.
5:33
Actually, it kind of
goes back to an overall
5:38
frustration, not frustration but
a challenge that I've experienced just in
5:46
coding in general which is,
how hard it is to keep track of state.
5:50
>> Okay.
>> That is, it's so tricky and
5:54
even being a Rails developer,
I see a lot of this as we build out these
5:56
views that have complex partials that
6:01
get their data from maybe like a dozen
different places, a dozen different files.
6:07
And I've even felt like there,
6:12
I'd like to just have a component,
6:14
a partial whatever it is and very
explicitly like this is what you need,
6:20
here are the things,
now you just be what you're going to be.
6:25
[LAUGH]
>> Right, and
6:28
other people are gonna come in and
look at it.
6:28
>> Yes, exactly.
6:31
You've probably experienced this but
6:32
I feel like tracking down the, okay,
where does this variable get defined?
6:35
What is this here, yeah.
6:39
>> That must have felt
overwhelming as a developer.
6:43
Here's a whole new stack,
how did you deal with that?
6:47
>> So I was lucky enough to have
some folks on the team that had
6:50
some React experience.
6:53
So I had some people to
lean on a little bit,
6:54
like hey I don't quite understand
how this works, can you help me out?
6:57
There was a lot of
documentation reading and
7:01
rereading and pouring over, and
then just a lot of experimentation.
7:05
So what was nice I felt like I
had the freedom to really try
7:09
out like what was the thing, our quizzes
are already in the app those already work.
7:16
>> No one’s waiting on it.
7:21
>> Nobody's waiting on me to finish this,
yeah.
7:22
>> Yeah.
>> So that's really helped.
7:24
Just to take my time and
make mistakes, and go back and
7:28
retry a thing and this is actually
kind of the second iteration of this.
7:32
I had written a lot of this, and
7:38
then kind of still didn't like how it just
didn't feel like it quite made sense yet.
7:39
So there was a lot of going back and
okay, what am I really putting here?
7:45
What are the questions I'm really asking?
7:50
So for example, if I show you in the code,
this idea of quiz finished, and
7:52
I don't know if I love having this manual
turning this into a boolean manually.
7:58
But this is really what the feedback
component cared about was,
8:05
is the quiz finished?
8:10
And if it is, it's gonna behave or
gonna look differently than if it's not.
8:12
>> Okay.
>> But that was something that
8:18
I didn't initially define and
I was within there trying to
8:20
infer that from some of these other
things that I was passing in.
8:23
So there's been a lot
of that kind of stuff.
8:27
>> Cool, you know what?
8:29
I can tell you right now,
I know what that says.
8:30
It says If the quiz status is not equal
to unfinished, then the quiz is finished.
8:32
>> [LAUGH]
>> Yeah [LAUGH].
8:37
So I can read what that says,
that's awesome, cool.
8:39
So looking over at your experience
of introducing React and
8:42
working through this.
8:46
You've probably picked up some advice that
you would give yourself if you could time
8:47
travel, go back and give yourself as
you're just learning a new technology.
8:51
And I mean, I guess if you think about it,
if you're going into your first job doing
8:54
this, all the technology
very well may be new to you.
8:58
So what advice would you give walking into
new technology, to the new developer?
9:00
>> Yeah one big thing I would say is,
don't be scared to jump in.
9:05
When I was first looking
at React it was so
9:11
different from the JavaScript
that I had known.
9:15
That a big part of me was just like,
I don't know if I wanna jump into this.
9:18
But I'm really glad that I did and
so there's definitely a part
9:23
of me that wishes I would have not been
quite so timid, and just jumped in also.
9:29
>> Don't dip your toes, just dive in.
9:33
>> Yeah, and I understand
that's not easy for everybody.
9:36
Not everybody has a project, but
I think being scared of new technologies
9:38
is something that I find myself giving
in to more often than I would like to.
9:44
So I'm working on that for myself.
9:49
>> Okay, how are you doing that?
9:51
How are you reminding yourself?
9:53
>> Well I mean this by diving in, right?
9:56
Every time I feel like I dive in,
9:58
then I'm like okay this isn't as bad
as I thought it was going to be.
10:00
And so, that would probably
be my main piece of advice.
10:06
I would also say,
reading good examples, pouring,
10:11
I think there's some really good best
practice guides especially for React.
10:15
There's some really, really good
ones that I think can really kinda
10:21
jump start you towards, okay, doing it
this way makes this easier, so yeah.
10:27
>> Cool, awesome.
10:33
I have just caught eye of
this Number One Rad Dad.
10:35
Congratulations, by the way.
10:38
>> Thank you.
10:40
>> Is there a story behind this mug?
10:42
>> There is a story behind this mug.
10:44
So I'm a dad.
10:46
>> Okay.
>> Which it would be maybe a more
10:49
interesting story if I wasn't, but,
>> [LAUGH]
10:51
>> [LAUGH]
10:54
>> So I have five kids.
10:55
>> Five kids, wow, okay.
10:59
>> Yeah, four daughters and a son.
11:01
>> Wow.
11:03
>> So my daughters have
this little Lego mini fig.
11:06
>> Okay.
11:09
>> Who wears a hat, normally I wear a hat.
11:10
Not today, who wears a hat and
has a beard and carries a coffee cup.
11:11
He also sometimes holds a laser gun and
rides on skis.
11:17
>> Do you do that as well?
11:22
>> No, no but
they call this little mini fig rad dad.
11:24
And his thing is that he can do all
this amazing stuff with this skis and
11:30
stuff but he never spills his coffee.
11:35
>> Wow.
>> So it's like a whole thing, so for
11:37
Father's Day this year they got me
this mug that said number one rad dad.
11:41
>> That's so sweet.
11:45
>> Yeah it was very sweet,
I was very touched.
11:46
>> Nice.
11:51
>> Well thank you for
being on the show Dustin.
11:51
It has been so nice to have you and
11:53
I am looking forward to
these snappy components.
11:54
[SOUND] Thanks for
watching the Treehouse show.
11:56
To get in touch with the show,
reach out to me on Twitter or
12:03
hit us up in the Treehouse community.
12:05
See you next time.
12:06
If you're interested in learning more
about the tech that we chatted about in
12:07
this episode, be sure to check the
teacher's notes attached to this video.
12:10
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up