Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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