Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll

Learn React Panel

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Learn React Panel: January 18, 2017

45:08 with James Churchill, Joseph Fraley, Beau Palmquist, and Jared Schaab

Join James Churchill as he moderates a discussion on how React professionals Joe Fraley, Jared Schaab, and Beau Palmquist learned React, and the ways they are using this technology in their personal and professional projects.

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [MUSIC] 0:00
    Hi, my name is James, and this is the Treehouse React Panel. 0:04
    Thanks for joining us live on Facebook. 0:09
    We're gonna have our discussion. 0:12
    And then at the end of the panel discussion, 0:13
    we're going to answer your questions. 0:15
    So be sure to post them in the comment section on the Facebook Livestream. 0:17
    And we'll be taking a look at those and answering them later. 0:22
    Starting with introductions, at the end of the table, we have Jared Schaab. 0:26
    Welcome, Jared. 0:31
    Jared is a software developer with ten years of experience. 0:32
    He's worked at the Home Depot QuoteCenter for the past two years. 0:36
    And over the last several years, has focused more and 0:39
    more on front end development. 0:41
    And he really enjoys the seemingly limitless things, or 0:43
    the cool things that you can do with web apps. 0:46
    So welcome Jared, glad to have you here. 0:48
    >> Thanks. 0:51
    >> To his immediate left, in the middle of the table here, is Beau Palmquist. 0:52
    >> Hi. 0:56
    >> Beau is a software developer with eight years of experience. 0:57
    He started his front end development career with none other than 1:00
    Microsoft Silverlight. 1:04
    >> Yep. 1:05
    >> It's pretty cool. 1:06
    >> [LAUGH] >> We're not gonna be talking about 1:06
    Silverlight, today, but it's kind of a fun little fact. 1:09
    But he now enjoys working with React, amongst other JavaScript libraries. 1:11
    You're in the process of opensourcing a .NET microservice framework 1:15
    written in .NET Core. 1:20
    So that sounds like a very cool thing. 1:22
    >> Yeah. >> And you're transitioning into a dev ops 1:25
    platform stability role. 1:27
    With a focus on developer productivity and application delivery. 1:29
    So welcome, both, glad to have you here. 1:33
    >> Thank you, nice to be here. 1:34
    >> And then, to my immediate right is Joe Fraley, welcome, Joe. 1:35
    >> Hey. 1:39
    >> He's a software engineer at HPE, 1:40
    otherwise known as Hewlett Packard Enterprise. 1:42
    He's attended Portland Code School over a year ago. 1:45
    And is an active open source contributor and 1:48
    community member in Portland's JavaScript scene. 1:50
    We bump into each other occasionally at meetups and whatnot. 1:53
    >> Yeah, all the time. 1:56
    >> And volunteers with groups like XRAY.fm and the Animal Charity Evaluators. 1:57
    So welcome, Joe, glad to have you here today with us. 2:03
    >> Thank you. 2:05
    >> So we're going to do a little bit of the leveling of the playing field, so 2:06
    to speak. 2:10
    And start off by asking kind of a basic question, but what is React? 2:10
    So Beau, in your own words, what is React? 2:14
    >> Well, React is a JavaScript library that really helps 2:17
    facilitate building presentational components. 2:22
    So it focuses mostly on the view aspect of your application. 2:24
    And makes it very quick and easy to get started and start developing components 2:28
    for [CROSSTALK] >> [CROSSTALK] So very component-focused. 2:33
    >> Yep. 2:35
    >> And because of that, it's more concerned about the view. 2:37
    And it's less like a full-blown framework that does everything under the sun, 2:40
    so to speak. 2:45
    >> Yep. >> Okay, cool, so given that it's like 2:45
    more focused on the view and based around developing components. 2:48
    There's other pieces that come into play? 2:53
    Like is there an ecosystem around this then, 2:55
    when you want to develop applications? 2:57
    >> Yeah, I mean, it kind of depends, you can augment. 3:00
    If you wanna full-frame it, 3:03
    you're gonna have to augment it with some other frameworks. 3:04
    So things like Redux, and some of those things, and React Router. 3:07
    But specifically for the ecosystem, things like Babel or something like that. 3:13
    But yeah, you definitely will have a suite of tools and 3:18
    frameworks you'll need if you wanna build a full-fledged application. 3:21
    >> So Joe, for everyone's edification, what is Babel? 3:26
    >> [LAUGH] What is Babel? 3:29
    >> [LAUGH] >> Yeah, Babel's, I guess, 3:31
    what they call a transpolation tool. 3:34
    >> Okay. 3:35
    >> So it's this thing that you plug into your, 3:36
    it's a piece of software that you install from npm or something. 3:39
    And then you can run a script that 3:42
    tells it to read all of the JavaScript files you've written. 3:45
    >> Yep. >> And 3:50
    it will print out some translated files somewhere else. 3:50
    >> So if I want to use arrow functions, for instance, 3:54
    or some other ES2015 or newer feature, then I can do that. 4:00
    And then it's gonna transpile that down to ES5 or something else. 4:06
    >> Yeah. 4:09
    >> That's widely support across a wide variety of browsers. 4:10
    >> Right, so newer JavaScript features are the primary reason, I think, 4:12
    that people often use Babel tool, today. 4:17
    But you could theoretical use it for anything. 4:20
    >> So Babel's not absolutely required when you're doing React, but 4:22
    it's commonplace, it sounds like. 4:25
    >> Yeah, yeah. 4:26
    >> Okay, what else? 4:27
    What about bundling in modules and that sort of thing? 4:29
    >> You'd probably wanna be using webpack. 4:32
    >> Okay. 4:34
    >> It's kinda my tool of choice. 4:34
    I think you can also use things like Grunt or Gulp. 4:36
    >> Okay. >> Grunt 4:41
    is a little less popular these days, but- >> Okay, so 4:42
    the combination of React, Babel, and webpack is pretty common. 4:44
    You'll see that a lot probably, I think, in training and in online examples. 4:49
    >> Right. 4:52
    >> Okay. >> Yeah. 4:53
    >> And then you mentioned Redux, so what is Redux? 4:53
    >> Well, Redux helps you with managing the state side of things in your in your web 4:58
    application. 5:02
    So React doesn't really come with a concept of a store. 5:03
    It's just, you feed components property or prompts. 5:06
    And then they just take those and display that data. 5:11
    >> So let's take a step back. 5:13
    >> Sure. 5:14
    >> So give me an example of state in a component. 5:14
    >> So I guess a component has a local state that it will manage. 5:18
    But Redux manages more along the application-wide 5:21
    store- >> So 5:24
    like a local state might be like if you have like a start/stop button 5:25
    flipping back and forth. 5:28
    >> Yeah. >> Then that component is gonna know what 5:29
    button to display. 5:32
    >> Exactly, it'll manage its own state, so typically, 5:33
    more visual things will happen there. 5:35
    Or like, I typically use, for like forms, 5:37
    I'll keep a lot of stuff in a local state in the component. 5:40
    And then that's pretty much what that's good for. 5:43
    >> So state outside of local components then, give me an example of that. 5:46
    >> Sure, if you've got a lot of components and 5:51
    they're gonna need to share some piece of data. 5:54
    And you wanna keep that kind of centralized and 5:56
    organized, Redux makes that easy. 5:59
    And it does it in a way that will maintain it in an immutable fashion as long as 6:01
    you're doing things correctly. 6:05
    >> Right. 6:07
    >> So imagine you've got a couple of components that have dependency on 6:07
    a user's profile or something like. 6:12
    This one might display an image, this one might be their name. 6:14
    But you have one piece of data stored in ones in the store. 6:16
    >> One source of [CROSSTALK] >> Yeah, 6:19
    then you can basically feed it to both of those components and keep it in sync. 6:21
    >> Okay, I'm sure we'll circle back on Redux a little bit more later on. 6:25
    Is there any other pieces to the React ecosystem? 6:28
    Anything else that's worth mentioning early on here in this conversation 6:31
    that comes to mind? 6:36
    Maybe that covers it. 6:36
    >> Well, I mean, it's maybe not just React, specific. 6:38
    But definitely linting plays a pretty big role. 6:40
    To make sure that you can run some linting rules against your JSX, 6:42
    which I know you'll get to. 6:48
    You can actually evaluate your components at compile time. 6:48
    >> So give me an example, so Jared, give me an example of linting. 6:52
    Like if I've never done linting before, how would you explain that to me? 6:57
    >> Linting is basically just a way for 7:00
    you to apply a common style across your entire code base. 7:02
    >> Okay, so if I'm using single-quotes, but 7:08
    our standard is we use double-quotes to note strings. 7:10
    >> Right, and also when you run your linting task or process, 7:12
    depending on how you have that all wired up. 7:15
    It'll give you an exception or a warning in your console, and 7:18
    say, hey, this is not right. 7:21
    You're not following your linting rules. 7:22
    >> Got it, okay, cool. 7:25
    >> I think as long as we're talking about the ecosystem, though. 7:26
    It's worth pointing out something that can be confusing for people using other tools. 7:28
    And it's already been said that React is a library as opposed to a framework. 7:35
    And I think it's kind of confusing what that means. 7:40
    >> Mm, sure. 7:44
    >> Like that's what this ecosystem talk is really about, I think, is like, okay. 7:45
    Well, if React isn't a framework, then what else do I need? 7:48
    And I think whatever the answer to that question is, 7:52
    is like the difference in a library and a framework. 7:55
    >> Right, cuz it leaves some of those decisions unanswered, basically. 7:58
    There might be recommendations in some cases, I would guess? 8:02
    >> Right, so like a great example of this is if you have a web application that 8:05
    needs to render different views, depending on what's in the URL. 8:09
    So we sometimes call that routing in web apps. 8:14
    Angular or Ember, if you're using those tools, 8:16
    they have built-in resources for that. 8:19
    There's just a way to do that when you're using the framework. 8:22
    Whereas React doesn't have any opinion about how that works. 8:25
    If you install React, there's nothing there that will help you do that, 8:29
    aside from like the paradigm, itself. 8:33
    So you might need other tools like React Router. 8:35
    So a totally different tool in the ecosystem you install and 8:37
    learn to use, in addition to React. 8:41
    >> So that's interesting. 8:43
    So it's less opinionated about the the all-up picture and 8:44
    all the different pieces. 8:48
    So that gives you more choices and more flexibility. 8:49
    But I would imagine, 8:52
    when you're new to React, that might also create some challenges. 8:53
    >> [LAUGH] >> Right? 8:56
    >> Yeah. >> Yeah, 8:57
    I think that's probably one of the scariest things 8:58
    about picking up React is it feels like you can't just pick up React. 9:02
    I guess I have to learn to use Immutable, whatever that is, 9:07
    and Redux, Flux, or something. 9:10
    >> Right, okay, so let's circle back a little bit. 9:13
    Let's talk a little bit more about how you've used React. 9:16
    Cuz I definitely want to dive into the learning aspect of it. 9:19
    And some of those dependencies and where do you start. 9:21
    But for now, I'd like to kind of steer the conversation back towards you guys's 9:24
    personal experience with using React. 9:28
    So Jared, you're using React professionally? 9:31
    >> Mm-hm >> That's correct? 9:33
    >> That's correct. >> Can you talk a little bit about 9:35
    like how you're using it today? 9:36
    >> Well, right now, we are using it to create our web application 9:38
    that will talk to a microservices back end. 9:43
    And our primary use case for that is kind of a dev ops dashboard. 9:46
    And we basically are bringing all these different views and 9:52
    components together that give us kind of just a, we call it pulse. 9:55
    But just kind of a little bit of a heartbeat on 9:59
    All of our market services now they're doing it. 10:03
    >> Now, have you used other kinds of front end development frameworks in libraries 10:05
    before using react? 10:09
    >> I have used knockout and sorry, I haven't used that with react. 10:10
    >> Okay, no I meant, in terms of like how does using react feel different to you, 10:17
    than other other options right. 10:23
    >> Yeah, I so I have used knock out that, 10:26
    I could it been just lack of knowledge on my behalf. 10:29
    But it definitely feels like it lead you down. 10:32
    More of a spaghetti code type code base. 10:36
    >> So reacts kind of helps you keep your code more well organized. 10:39
    >> Yeah, yeah, because it lends itself to writing your views into components, 10:43
    reusable components. 10:49
    And with the one way data flow, you don't really have to worry about okay, 10:50
    well this thing over here is setting my state, 10:54
    and this thing over here is setting this state. 10:57
    And which levers are pulled at this specific point in time. 11:00
    >> Yeah, so one of the things that I have heard, and I think I experienced 11:04
    this myself when I was starting to learn React is, your initial reaction to JSX. 11:10
    >> Well. >> Well, maybe we should explain what JSX 11:17
    is first before we talk about, like >> So what is JSX? 11:20
    >> So, JSX is- >> Good luck. 11:24
    >> Yeah, It's difficult to kind of sum up in words, but it's basically a formatter 11:26
    of markup of sorts that looks very much like HTML, but 11:32
    it's actually all in JavaScript and there- >> So, 11:36
    that's sorta that new jerk reaction thing? 11:38
    >> Yeah. >> So, you just said that 11:41
    You're writing markup. 11:43
    >> It looks like it but it. 11:44
    >> Okay. >> So, 11:45
    you look if you were to open up a JSX file you'd see what looks like HTML, 11:46
    but if you look very closely you'd start to notice some very minor differences, 11:50
    so things like you don't use class, you use class name. 11:55
    So then, you start to realize it's actually an HTML, 11:58
    it gets pumped through something that generates HTML. 12:01
    So, It's kind of, it's an intermediate step to getting to HTML. 12:04
    >> Right, so, you might have an initial reaction to like, 12:10
    this doesn't make any sense. 12:15
    Isn't this like polluting my JavaScript or something, 12:16
    but It turns out that it's not it doesn't turn out that way, right? 12:19
    >> No, I actually really liked after a while I loved that it was JavaScript, 12:22
    because then I could refrain back to linking thing, 12:26
    I could apply rules into JSX it could start evaluating those things. 12:28
    >> And find some stuff that you wouldn't necessarily find if you're familiar with 12:34
    Angular with like, templates, now you can. 12:36
    They'll like, that you usually had to wait until run time, and 12:38
    then you'd start to see bindings not working, or something not happening. 12:42
    Whereas with JSX you could kinda pump it through all kinds of analyzers and 12:44
    linting, and see if things are gonna kinda where you wanna behave the way you want 12:48
    even higher, you can run it. 12:52
    >> I imagine there's probably some some 12:53
    added benefits to not have the context switch, between like a file and 12:55
    like is that a template file then back and forth, right? 13:00
    >> So, JSX is another is the other reason that most 13:05
    people are using double I think today. 13:08
    >> okay, >> It's just point 13:11
    >> So JSX isn't Itself JavaScript like, 13:12
    it's got like, it's got characters that are not valid JavaScript. 13:14
    >> Yup. >> Angle brackets, specifically. 13:19
    >> Yeah. 13:22
    >> Okay. >> That's the part of it but 13:22
    it does transpired to valid JavaScript. 13:25
    And what a chance piles to is like if you go on you like right just like 13:28
    file on your computer at home, and 13:32
    then you like run up your babble and you look at what came out the other side. 13:34
    What comes out the other side, 13:40
    are just some might react functions that create paragraphs. 13:41
    >> So you could just, if you knew that API, 13:45
    you could just write that code yourself and forego using, it's not a requirement. 13:47
    In other words, to use JSX. 13:52
    >> That is true, yes. 13:54
    >> Okay, that's cool. 13:55
    >> So sorry, you didn't like JSX when you first saw it. 13:58
    >> Well, are you asking, Jared? 14:01
    >> No. >> Sorry. 14:03
    >> Are you asking me or him? 14:04
    >> I don't know. 14:05
    It's sounded like someone didn't like it at first. 14:05
    >> No, it was me pushing on that because I've read, 14:07
    and then I think I had that reaction a little bit, that it feels like you're 14:09
    commingling something that maybe ought not to be brought together. 14:14
    Though I read something recently that talked about how the inverse is true. 14:18
    Today, even though we don't really recognize it, 14:23
    we've been putting JavaScript in our HTML. 14:25
    >> With data attributes and stuff? 14:28
    >> Yep, yep, yeah. 14:30
    >> So, it's actually better to go the other way, for 14:31
    all the reasons that Beau was pointing out. 14:34
    So- >> Yeah, I personally did like it, 14:37
    I was just kind of playing the advocate there, 14:38
    so- >> [LAUGH] 14:41
    >> Yeah, absolutely. 14:42
    >> We've touched upon some of the benefits of React, 14:43
    what are some other things that come to mind? 14:47
    Like I've heard about this thing called a virtual DOM. 14:49
    Talk about that a little bit, who he wants to take that one? 14:52
    >> Good talk. >> Joe? 14:56
    >> [LAUGH] >> You started to laugh, 14:56
    that means it's you. 14:57
    >> Yeah. 14:59
    >> The virtual DOM. 15:00
    So at its core, 15:01
    the virtual DOM is Well maybe it's easier to start with the dom itself. 15:02
    So, the DOM is just this like, the document object model. 15:08
    So, a representation of what your program looks like in the browser. 15:12
    So, when you're scrolling through a webpage it's [CROSSTALK]. 15:16
    >> It has a paragraph, and 15:17
    inside the paragraph might be a spam or >> All right. 15:19
    >> Yup. >> So, the virtual DOM is like, 15:22
    version of that that's held in memory, like a program is running. 15:26
    And the advantage of that is that you can make comparisons against it, 15:29
    and do all kinds of logic in between them. 15:34
    So, the DOM gets put out on your screen in front of you and 15:37
    the virtual DOM is like something in between. 15:40
    >> So, why go to the trouble? 15:44
    I mean is the DOM slow or something? 15:45
    Is that is that the motivation there? 15:48
    Yeah, maybe- >> Sure, I mean paint operations in 15:50
    the DOM are just, if you start to analyze it they take up tons of cycles. 15:54
    So React identified, well if we can just pick portions that need to update 15:57
    using the virtual DOM, then it will improve performance. 16:02
    >> Well and a lot of Web applications before were pretty much using jQuery 16:05
    was kinda the go to and I mean depending on how you did your selectors and 16:10
    stuff you could be selecting and changing huge portions. 16:15
    It's almost kinda like with SQL any framework or any of those ERMs. 16:19
    Like if you write your query wrong you're gonna doing some nasty non performance 16:23
    stuff. 16:28
    And it's the same thing with your jQuery selectors. 16:29
    >> Right. 16:31
    >> So that's cool. 16:32
    So, when you're using JSX or this API, if you're writing pure JavaScript. 16:32
    You're actually manipulating the virtual DOM, right? 16:38
    And you can kinda like probably not concern yourself as much, 16:41
    with what the underlying operations are doing. 16:45
    Is that for the most part true? 16:48
    >> Yes, and yes. 16:50
    >> So, there might be times when there may be problems that arise, right? 16:53
    >> You can still run in the case where you're updating a lot more of your DOM, 16:58
    then you want to and not to dive too deep into it at the sure. 17:03
    You can't tap into some of your Component Life Cycle events, which will allow you to 17:07
    kinda dictate whether a component needs to update or not. 17:11
    >> Okay,so if you had a case where something is not optimal then you can 17:15
    basically hint or help React out and say, 17:20
    look I know this doesn't need to be rendered in this point. 17:22
    Right. 17:25
    >> Well that's cool. 17:26
    So, when I'm first starting to learn React, 17:28
    I'm probably gonna do a personal project on my own time. 17:31
    Is there differences between like how I may wanna get started learning React 17:34
    versus the kind of work that Beau, you, and Jared are doing professionally? 17:39
    You guys maybe wanna talk about that a little bit, 17:45
    like >> Yeah. 17:48
    >> So, if you were starting a personal project, 17:51
    let me phrase that question differently, 17:53
    if you were starting a personal project, how would you start that? 17:55
    Like, would you immediately bring in Webpack, 17:58
    would you immediately bring in Babel? 18:00
    Or is there a way to do this incrementally that makes it easier to get going? 18:03
    >> I know when I first started, 18:08
    like all that stuff seemed very daunting it was scary. 18:10
    >> [LAUGH] >> Yeah. 18:14
    >> I was a little scared because you bring in this whole webpack thing, right, and it 18:15
    just feels like you kinda start going down all these different little rabbit holes. 18:18
    It's like okay web packing and you start learning about web packing. 18:22
    And then okay, I need babble and you start going down this this rabbit hole and 18:25
    then also and you realize you can't learn these things but I have no idea but React. 18:29
    >> Right. >> This is trying to bite off yeah. 18:32
    >> I mean but the cool thing now that React has been kinda gaining a lot 18:34
    more popularity among the development community is stuff like open. 18:40
    And that kinda stuff that actually support out of the box so 18:45
    you can actually just go in and start Into co-pending create a new, 18:49
    I don't know what it's called actually a pen? 18:53
    A new pen? 18:55
    >> [LAUGH] >> And 18:56
    so you can create a pen and- >> Yeah. 18:56
    >> Say, I want to do React, and you can just start writing JSX. 18:59
    >> Absolutely. 19:02
    >> And creating components? 19:03
    >> Yeah, which is we need >> That is cool. 19:04
    >> I think on that note, and to the point of the virtual DOM, 19:07
    as when you start learning React. 19:11
    One of the hardest things about it is that if you're coming 19:13
    from a different world, where the way that you do things on a web page is you say, 19:19
    hey jQuery, append this button to the page now. 19:24
    >> Right, or hey jQuery, add this class to the button now, 19:28
    cuz the users logged in or >> If you're using other frameworks like 19:31
    the backbone, was if you have had a library for 19:34
    this, but ultimately you would just like plug in some jQuery at different points. 19:39
    So, in that in that world the way that you'd make changes and 19:43
    see how stuff works, is you tell your program do this thing now. 19:46
    >> Imperative. 19:51
    >> And then you go and look at it, and so you did it. 19:51
    >> So, that you're touching upon the whole imperative vs declarative Right, 19:53
    a little bit? 19:57
    >> Yeah, exactly. 19:58
    So to me at least, one of the core different philosophies of React, 19:59
    one of the reasons that it's gotten so much attention and adoption, 20:04
    is that it encourages you to stop thinking that way about writing your programs. 20:07
    So what it wants you to do is say okay, when the state of my 20:13
    application is such, when a user is logged in, when a mouse is hovering over this 20:19
    part of the page whatever the state of your application means. 20:24
    If it's 4 a.m. 20:29
    Whatever. 20:31
    Then the page should look like so 20:32
    and you give a description of how the page under those conditions. 20:34
    >> Okay. >> And then 20:38
    >> Reacts just like does some stuff with 20:39
    the virtual DOM to make sure that happens, >> Right, 20:41
    >> And you don't that 20:43
    yourself manually, usually. 20:45
    So when you start learning React I think hardship 20:47
    is wanting to see things happen right away and 20:50
    if you have this intuition of I wanna see things change I gonna make them change, 20:53
    then that can be that can be an obstacle, it can be confusing about where to began. 20:56
    Interesting. 21:02
    >> Well. 21:03
    Real quick you had mentioned the so 21:04
    the state and the visual state in the way I think about that is that react is made 21:07
    is the state of your UI basically deterministic based on something so 21:11
    you can actually go in and feed it specific state information and 21:15
    it'll look and behave the same way, which is a very powerful feature. 21:19
    So. 21:23
    >> So, we mentioned components earlier in the conversation. 21:24
    So, when you're building a react app, you're thinking in terms of components? 21:28
    Is that correct? 21:33
    >> Yeah, for the most part I think the many you start bringing in some Redux and 21:36
    other things some new terms will start to turn off like pure component and 21:40
    container and stuff like that, but yes still trying to compantice the UI into 21:43
    small little pieces and then you can mix and match. 21:49
    >> Are there like, even without Redux for instance and 21:51
    so we're leaving the conversation of containers out for the minute. 21:55
    Are there different types of components? 21:58
    >> Yeah. >> I think there are two main ones 22:00
    are stateful components and non-stateful components. 22:03
    >> Okay, so a component that needs to keep track of some sort of local state would be 22:06
    a stateful component, but some components just okay, so 22:10
    what would be an example of a nonstateful? 22:14
    >> So stateless components are ones that are basically implemented 22:16
    as a pure function they're not going to have any side effects. 22:19
    You just feed in some props and they're going to, 22:21
    you know, they're not going to make an API call. 22:24
    They're not going to do any kind of weird stuff inside of that component. 22:26
    It's it's going to be highly, 22:29
    it's very likely you'll know what's going to happen when you give it data so 22:33
    everything's encapsulated very tightly into that function. 22:36
    >> So define pure function for me. 22:39
    [LAUGH] >> Pure function as one that takes some 22:42
    input and have some output and given the same input you always get the same output. 22:46
    >> So 22:52
    that have to do with referential integrity >> Transparency, excuse me. 22:52
    >> I don't know, does it? 22:57
    [LAUGH] >> You guys ever hear of that? 22:58
    >> No, I've not heard that term. 23:00
    >> So I believe that, with a pure function, instead of calling the function 23:02
    you can just replace it with whatever the expected result would be. 23:07
    And the rest of your application, >> It's essentially yes. 23:09
    Yeah, it is interpreted yeah, right. 23:14
    So, it's predictable results right that there isn't any other external state that 23:15
    that's changing how whatever that functions doing. 23:20
    It's not going to be influenced by something other than what I pass to 23:24
    it in terms of arguments. 23:27
    >> So yes an example for, so 23:28
    an example of our thing you might want component tossed in your web app is like. 23:30
    You might have buttons on your page. 23:35
    You might have buttons all over the place. 23:36
    >> Right. >> And they might do different things and 23:39
    look different ways, but they might in the end have some things in common. 23:41
    Like their shape may be, and the fact that they take text, and 23:45
    the fact that when you click them something happens. 23:49
    And so, you can capture all of that into a single function and 23:52
    react you can say here is a button thing, and 23:54
    here's what it does and then you can import that and use it all over your app. 23:57
    Pass it different props, different parameters basically. 24:00
    Will change how that button looks in different places. 24:04
    >> So what is that component, for anyone who hasn't done React, 24:06
    when you define a component and then I'm using it in another component. 24:10
    What does that look like from a code perspective? 24:13
    >> So well basically we're going to be doing is importing it or 24:17
    requiring it into your whatever component you're going to bring it into and 24:20
    then that's when you're going to be using your J.S. X. 24:24
    Syntax and you'll basically be writing -- let's say my components to and so 24:27
    are you writing a and bracket through so that it looks just like a custom element. 24:32
    Just like HTML stepped inside a very considered day of it's food in this case. 24:38
    >> Nice. Well that makes it easy to read and 24:44
    write so if you have all these components you can buy into gathered in the name 24:46
    of the laws provided in the script to, 24:50
    that's cool. 24:54
    So components, we talk about stateless components, Staple components. 24:58
    Let's just stick on that a little bit more so. 25:03
    << I was just going say, you know we talked a lot about state in about data for 25:06
    your components, but I think it's important to also note that 25:11
    one of the differences between a staple and a stateless component is being 25:14
    a little bit tap into those lifecycle events that we kind of alluded to. 25:18
    >> So, was an example of one of those events? 25:22
    So, like should your component update. 25:25
    If you're any stateless component, you don't have access to any of these 25:27
    lifecycle events to tap into this tell react don't re-render me or 25:31
    do re-render me. 25:35
    Where as with a stateful component you can customize that behavior. 25:36
    >> Okay. >> So like what's an example in like 25:41
    an app you've worked on where you're like I need some state here. 25:44
    Like when is the hallmark where it is? 25:48
    [LAUGH] >> Like an input form or 25:50
    something like that or, we have a notification component that we're 25:53
    listening >> When it mounts, 25:57
    we wanna actually create a WebSocket connection or something like that so 25:59
    we can establish that and be notified when messages are coming in and 26:03
    then display them directly in that component. 26:07
    So that's one scenario, but there's kind of varies but 26:08
    when you think << I did a little personal project, but it was making up an API call. 26:13
    So I can tell component did mount, 26:19
    that's where you going to want to typically make your API call. 26:22
    So you don't necessarily have a state as part of that component, 26:25
    you're kind of being handed the state be a this API call. 26:30
    >> So, when you're making an API call, 26:33
    you in this is kind of what we alluded to earlier you can do that? 26:35
    However you want to do that then, right? 26:39
    This react have an opinion about how you make an API call? 26:41
    >> Well, they have an opinion where you're making the API call but not so 26:44
    much how you're making the API. 26:48
    >> Okay. 26:49
    Got it. 26:50
    Whereas like if I was using something like Angular, for instance. 26:51
    I probably would use their built-in service to do that, 26:54
    I guess is what I was angling at. 26:57
    >> [LAUGH] >> Yeah, so like. 27:00
    There are different ways to structure your apps, right. 27:03
    And one way is you might say, like if you need to go and 27:06
    get some user information, or like movie times. 27:09
    You make a request, you say hey, movie times API, I want these. 27:12
    And when you get the results, then I want you to make the page look like so. 27:17
    You'd render a react component. 27:22
    >> Right. 27:23
    But another way of doing that is to say, here's my React component, 27:23
    the movie times table, that you can write. 27:27
    And if it's a stateful component, you could say, okay, 27:30
    like when you're about to, when some part of your rendering magic is happening, 27:34
    I want you to go to fetch the movie times. 27:39
    And that's what you're going to use in what follows. 27:43
    So reactive zero way as an A.P.I. 27:46
    that allows you to look at components like that's cool. 27:48
    >> And so we've mentioned redux a couple times so as your application has grown. 27:52
    And maybe you have now dozens of components and 27:57
    there might be stay over the place where. 28:00
    How does Redux, I mean that helps me manage that true? 28:03
    >> [LAUGH] Is that is that true. 28:07
    >> Yeah. [LAUGH] 28:10
    >> Well I'll do my best to try to sell 28:11
    this but yeah, it's going to help you organize it at least 28:12
    from a if I were to look at the state of your Redux store I should have if I could 28:15
    just glance at it in kind of ninety what type of application you're probably gonna 28:20
    write which is already a big help to just be able to see that but then. 28:23
    So if you are looking at a new reactor out those using redux you might just go look 28:27
    at the store to get an understanding of what data a state was in there. 28:31
    Yeah. So like when and that's typically where 28:34
    I've actually seen API calls move to is like actions verses. 28:37
    So even though one component did now we might do something We still will probably 28:43
    go through like a redux action which will trigger an API, which if it's an request, 28:48
    we'll go get that, fetch it, sent some state inside of the redux store and then 28:52
    kind of propagate that down to anybody that's cares about that state change. 28:57
    >> So redux is probably maybe a little more difficult to learn than react. 29:01
    Itself, is that fair to say? 29:05
    >> Yeah, I think it requires a little bit of [CROSSTALK]. 29:07
    >> Now you wrote a course here at Treehouse that teaches Redux. 29:11
    >> Yeah, I authored a course about React and 29:16
    Redux, and >> It definitely goes into a lot more 29:18
    detail than we're gonna have time for right now. 29:21
    >> But that would be one of, one great resource. 29:24
    >> Absolutely. >> You can use offline to. 29:27
    >> Yeah. 29:29
    >> Or online as it were. 29:30
    [LAUGH] To learn more about redux. 29:32
    >> Yeah. 29:34
    >> Now Jared you also did a workshop for treehouse, what was that about? 29:35
    >> I've wrote a workshop on how to unit test your 29:40
    react components utilizing MOCA and a library called inside. 29:43
    >> So would you describe you know I mean as you know testing react 29:48
    nontrivial thing or is it actually better than that it might be otherwise. 29:51
    Or is for some other technology. 29:55
    >> Compared to how it used to be when we'd have a script. 29:57
    [LAUGH] >> I think it is, 29:59
    you could call it non-trivial. 30:01
    [LAUGH] >> It does take a little bit of set up and 30:04
    there's a little bit of knowledge. 30:06
    But the one thing I really liked about Enzyme is it kind of. 30:08
    It kind of wraps up some of the rendering stuff that needs to happen. 30:13
    So you can just focus on testing your react components and the behaviors. 30:16
    I mean because you've heard us talk a lot about state, 30:21
    and your component should look like this at 4 AM. 30:23
    Given Joe's example and you can actually go ahead and validate, 30:27
    that your component is going to render that stuff correctly. 30:31
    >> Which is tremendously valuable. 30:34
    >> Which is huge, because unit tests can also serve as like documentation and 30:36
    behaviors for what your application or component should do. 30:42
    And you know that really makes it clearer for 30:46
    a newer developer to come in and say okay, run the test here's the behaviors. 30:49
    But I need to make this change. 30:55
    This behavior is not here. 30:57
    I've broken a previous behavior with my changes, and 30:59
    you just get that validation now and a little bit more safety. 31:02
    Instead of shooting from the hip, so to speak. 31:07
    >> So Enzyme is a library, who created that? 31:09
    >> Airbnb. 31:12
    >> Airbnb, very cool. 31:13
    What is this create react that thing, that I've heard about. 31:16
    >> Should probably use if you're just starting to wonder. 31:20
    >> Yeah. [LAUGH] >> Yeah it's probably a good idea. 31:22
    It's a tool that the community has created, 31:25
    because many people have had this experience of wanting to use react. 31:28
    [LAUGH] >> But 31:31
    you have to set up a web Pac Bell and then I babble config and 31:32
    make all sorts of other decisions about other things. 31:36
    So create react is a command line tool, you can install and then you can run it. 31:40
    You can say, new create react app, given a name. 31:45
    And then it just creates a directory structure with everything installed and 31:49
    built out. 31:53
    >> So that you all agree that if you were going to go home tonight, and 31:54
    start a quick personal project, you would go for that tool and. 31:57
    >> Yeah absolutely. 31:59
    >> I said Yeah. 32:01
    >> I mean bundles of that ecosystem software moves 32:02
    the variability of trying to figure all out all that stuff. 32:04
    >> Yeah and then you think about too on what you can. 32:07
    Once you need or feel like, you've got enough experience with what packing 32:09
    that kind of stuff you knew some customizations. 32:13
    You can actually remove the hidden layer of config files, 32:15
    that they've pushed to the side for you. 32:20
    And then gets access to them. 32:24
    >> Excellent. 32:26
    Well, let me let me check to see if we have any questions from our audience here. 32:27
    >> Cool. 32:32
    And of course, I can't read [LAUGH] what's on the tablet here, 32:34
    let me get my glasses on. 32:37
    So Andrew asks, what is Fiber, and do I need to learn it to learn react? 32:38
    So what is Fiber? 32:45
    I've never heard of that. 32:46
    >> I have not heard of it either. 32:47
    Joe you look like you know. 32:48
    >> [LAUGH] >> Yeah, I wish I didn't. 32:49
    >> [LAUGH] >> So 32:52
    Fiber is just an optimal, a rebuild basically of react's core. 32:55
    It's a bunch of optimizations, 33:00
    that the React development team thinks are important. 33:02
    But there's no obvious way to fit them in, to the way that reactors currently built. 33:09
    >> So is that like a future look at what react might become? 33:14
    Is that the way to think of that? 33:18
    >> Yeah that's exactly it. 33:19
    >> Okay, so you wouldn't start there probably then, right? 33:20
    >> I guess it depends. 33:23
    I guess it depends on what you want. 33:25
    When I was learning React, 33:27
    a big part of my motivation to play with it all and this was, 33:28
    you more than a year ago so things were even more confusing than they are now. 33:34
    >> [LAUGH] >> If you think they're confusing today, 33:39
    you should time travel back a year. 33:41
    >> [LAUGH] >> A big part of my drive was well, 33:43
    I know that other people are struggling with this. 33:46
    And so if I can master it, I will be attractive to prospective employers. 33:49
    So if you think, if that's on your table, if you're thinking, 33:54
    I really want to get a job and stand out, then you might just start with, 33:59
    I don't know, whatever the hard new thing that no one's using yet. 34:04
    >> [LAUGH] >> But 34:06
    that'll definitely be a challenging way to learn this world. 34:07
    >> Excellent. 34:12
    So that was the only question we've had so far. 34:13
    [LAUGH] >> But 34:15
    for anyone who's watching us online, send your questions in. 34:16
    And if there's something that we haven't specifically addressed yet. 34:20
    So I'm going to move in to what I'm calling the speed round. 34:23
    So I'm going to ask each of you. 34:28
    So I'll ask a question and we'll start with Joe and we'll go this direction. 34:30
    And just try to keep your answers brief and we'll go through this quickly. 34:34
    So first off, favorite editor. 34:38
    >> VS Code. 34:40
    >> Beau. 34:42
    >> Atom. 34:44
    >> WebStorm. 34:45
    >> Wow, three different answers. 34:46
    So I'm a VS Code fan. 34:49
    Didn't used to be for a long time. 34:51
    I used Atom a lot but. 34:52
    >> Yeah, I really love VS code. 34:53
    >> It's so fast. 34:55
    It's so much faster and there's so many cool things. 34:56
    Being able to command click a function name and appear. 34:58
    [LAUGH] >> As a file where it's defined is insane. 35:01
    >> Excellent. 35:03
    Favorite part of React? 35:06
    >> Stateless functions. 35:09
    Beau. 35:12
    I was going to go if you're going to say all JSX onset, 35:12
    just like the way that works. 35:15
    >> One way data flow. 35:17
    >> Excellent. 35:18
    >> We didn't even talk about that. 35:19
    >> We did a little bit but. 35:21
    >> Let's make it worth saying something about it but if we don't write. 35:25
    [CROSSTALK] >> [INAUDIBLE] speed round first and 35:27
    you know this stuff. 35:30
    >> So Jared maybe you want to define what one way data flow? 35:31
    >> Basically, I mean if you've ever played with knockout or whatever you can. 35:37
    There's two ways you can update your mode,l is you can update it on 35:42
    the model or you can have information kind of pushed into it. 35:47
    And with React you kind of get it, 35:52
    you have a one way data flow where stuff just trickles down from the top. 35:54
    And you don't get stuff trickling back up. 35:59
    [CROSSTALK] [LAUGH] >> So the idea of, like, in Knockout, 36:02
    you would have a two way data binding. 36:04
    >> You can have two-way data, and that was kind of, 36:05
    earlier I mentioned kind of spaghetti code hell, in my opinion to a data binding 36:09
    kind of lead you down that path of having like stay over here and sit over here. 36:14
    And which levers are pulled that which specific time but, 36:19
    because the one way data flow it's much easier to debug and. 36:22
    >> So having that limitation which really is, 36:26
    it's kind of a limitation actually makes it easier to develop your applications and 36:28
    understand what's actually happening. 36:33
    >> Absolutely. 36:35
    >> That's very cool. 36:36
    Least favorite part of React? 36:37
    >> React is very context dependent sometimes, there are refs and mixins. 36:39
    >> That's not a short answer. 36:44
    [LAUGH] >> There you go. 36:46
    >> That's a slop. >> Half of that. 36:48
    >> [LAUGH] >> There's some traps I think with 36:49
    this in React. 36:53
    >> Beau? 36:55
    >> For me it was probably just learning the, when do you use some of the life 36:56
    cycle of [INAUDIBLE], is taking the time to figure out when best uses. 37:00
    That was probably the thing I liked least, 37:04
    because I just wasn't immediately apparent. 37:06
    In the pipeline for React. 37:09
    [CROSSTALK] >> That was a bit of a spike 37:10
    in complexity. 37:12
    >> Yeah. 37:12
    >> Jared. >> A styling support. 37:13
    It feels kind of like a second class citizen. 37:16
    Or at least that's, because I struggle with it so 37:18
    much, that's kind of what it felt like to me. 37:21
    >> So last one. 37:24
    If you could send a message back in time to yourself, when you were learning React. 37:25
    What would you tell yourself? 37:31
    Joe. 37:32
    >> Man. [LAUGH] 37:33
    >> Nobody knows how to do any of this 37:34
    the right way. 37:37
    It seems like everyone out there has got this magically. 37:39
    >> Except you three, though. 37:43
    >> Except for us. 37:43
    Yeah, that would have comforted me a lot, 37:46
    feeling like, everyone's super confused about this. 37:49
    You just have to do anything with it to have an understanding. 37:52
    >> And it's okay to have questions. 37:55
    >> Yeah. 37:56
    >> Yeah, totally. 37:56
    >> Well, that's always true regardless but, that's good to know that it's young. 37:57
    Yeah it is really is really. 38:03
    Beau. 38:04
    >> For me it probably would have been, 38:06
    investing some more time in figuring out when to use stateless functions. 38:07
    I didn't, I started out not using them hardly at all. 38:11
    I didn't see the benefit. 38:14
    >> You were using stateful components. 38:15
    >> Yeah, I was adding a lot of overhead and stuff, so 38:16
    it kind of boilerplate and just made it a lot more complex. 38:19
    So I'd probably give myself that piece of advice, use them. 38:22
    Here' s how they work and use them. 38:25
    >> Jared. 38:27
    >> I think for me it'd be a commitment, and what I mean by that 38:27
    is almost committing to a point in time in React's kind of life. 38:32
    I don't know if I want to call it a life cycle, but 38:38
    life because things have been changing so fast over the last couple years. 38:41
    And it's so hard to keep up with everything, and 38:44
    you almost get a little bit of thrash. 38:47
    Because you finally feel like you've got a piece mastered down. 38:49
    And then all the sudden. 38:53
    [LAUGH] >> They've turned that on its head and 38:53
    all of a sudden you're like no what am I doing so. 38:56
    I think if you got the fundamentals down, come in and 38:59
    get those fundamentals down, and then going forward and. 39:01
    >> Excellent. Do we have time to do some more questions? 39:05
    Excellent, we got some more questions. 39:08
    So Andrew asks, 39:10
    are there any interesting trends you see happening in the React Redux world? 39:11
    Any idea what's on the horizon. 39:16
    So, what is the future of React and Redux look like it looks like? 39:18
    >> It was going so well what is it. 39:23
    >> It's just another programming language that's purely functional. 39:26
    A lot of the ideas in React and Redux are borrowed from that architecture. 39:30
    And people are starting to use it a lot more. 39:33
    >> Interesting. 39:35
    >> Beau, Jared, any insights into the feature? 39:36
    >> I mean the fact the Redux documentation immediately said we're following Elm. 39:39
    [LAUGH] >> I was actually thinking something 39:42
    fairly similar to that so. 39:45
    >> Interesting. 39:46
    So, who knows. 39:46
    >> It looks cool, I think. 39:49
    I think there are a lot of cool things happening. 39:50
    I don't know if you've seen Redux saga. 39:52
    >> I have no idea. 39:55
    >> There's a completely different ideas about how to write JavaScript. 39:55
    And I seem to be happening in the Redux world. 40:00
    Interesting. 40:04
    Okay. Nick asked, as a Reactive helper, 40:04
    do you have any interest in React if you are? 40:08
    >> Something else I know nothing about >> [LAUGH] 40:11
    >> All right. 40:14
    Nick is Nick. 40:15
    >> Can anyone define what React Is? 40:16
    >> Yeah, so React, 40:19
    what we've been talking about is a version of React that targets the web. 40:20
    >> Okay, that's a good, yep, yep. 40:27
    >> But in fact, React can be abstracted away from that, and 40:29
    you can target other things like >> Iphone, 40:33
    >> React native. 40:36
    >> React native is iPhones and Androids or VR, 40:37
    you can target virtual reality run times all kinds of other stuff. 40:42
    LED boards. 40:47
    >> So yes we're all very interested in VR we haven't delved into it yet 40:50
    it sounds like, right? 40:54
    >> No. 40:55
    Okay cool. 40:56
    Andrew asked, do you see there being a move away from JSX to pure JS? 40:58
    So we touched on that earlier. 41:04
    You know not even bothering to write that. 41:06
    But just program it against the API directly. 41:07
    >> Personally, I don't think so I you know if you've ever looked at what just writing 41:11
    pure Java Script using the React API looks like, it's a nightmare. 41:16
    If you think JSF. looks bad, look at this. 41:20
    >> [LAUGH] >> [LAUGH] 41:21
    >> Look at this and 41:22
    then you'll change your mind but I didn't [CROSSTALK] 41:22
    >> Is it more verbose, is that it? 41:24
    >> It is very verbose and there's just like there's a lot more nesting involved. 41:26
    That you used as kind of hidden from you. 41:32
    With just these nice simple little angel brackets that you get to use that much in 41:34
    this probably having that extra layer of abstraction the JSX gives you probably 41:39
    help shield you from changes they might make to the API in the future,is that 41:42
    a possibility? 41:47
    >> I don't know. 41:51
    >> Well yeah I was going to say the thing about geodesics I like is that it's highly 41:51
    readable versus the A.P.I. If you don't know much about it. 41:55
    You kind of have to learn and understand what it's doing when it makes sense. 41:58
    >> Liam asked, do you think React native or 42:02
    another language will replace classic app development languages? 42:04
    >> I don't do any native mobile development. 42:11
    I do play with reckoning. 42:14
    >> So yes it has replaced. 42:16
    >> [LAUGH]. 42:18
    >> Where I work we have native developers. 42:19
    I don't see that changing in the market here. 42:23
    >> Okay. >> Right. 42:26
    >> But it does seem like things are changing a lot and JavaScript gets bigger. 42:27
    >> Marcella ask, what is the optimal size app for react? 42:33
    >> I mean we have a huge application that we use kind of to to monitor systems and 42:39
    it's hundreds of components and so I don't know if there's [CROSSTALK] 42:44
    >> So it can scale up? 42:49
    >> It can scale up big and it can, we can use it for Hello world, 42:50
    I don't know if there is an ideal size of it. 42:53
    >> Okay, excuse me if I say your name wrong. 42:56
    Powell asked what you guys think about mob X? 43:00
    >> It's a light replacement for Redux. 43:05
    I think that's actually a pretty good, if you're not gonna be building a large 43:08
    application, MobX is actually one of my favorites. 43:12
    So it's essentially an alternative to Redux. 43:16
    This it's simpler to use. 43:19
    >> Yeah I think it's easier to use but it also doesn't have as many as or 43:21
    it doesn't have as many of the features that I like in Redux. 43:24
    So it's not gonna do everything that Redux does but it's definitely a nice for 43:26
    like medium sized applications I think it's a good alternative. 43:31
    >> Cool, excellent. 43:35
    All right, last question. 43:36
    John asked what features are you looking forward to in future versions of React?. 43:37
    >> It would be really nice to have better JSX I think- 43:47
    >> [LAUGH] 43:50
    >> To be able to use F statements. 43:51
    And other I don't know. 43:54
    Normal JavaScript things. 43:57
    >> Anything else to add? 44:00
    >> Not a thumb. No. 44:02
    >> Okay. 44:03
    >> << Just make it go faster. 44:03
    >> Faster. 44:06
    >> For years we are trying to do that. 44:06
    >> The docs are so much better than they used to be. 44:08
    React and redox both have done just an amazing job and I documentation, and 44:11
    that just seems to keep getting better. 44:16
    >> Yeah, that is a huge plus you have a place to go to 44:18
    figure out what you're doing wrong or dancer questions. 44:22
    >> Yeah. 44:25
    >> All right, well that concludes our panel. 44:25
    So, I wanna thank you guys very much for joining us today. 44:29
    It was great having you. 44:31
    And thank you to the viewers for watching. 44:34
    I think we all had a good time and 44:36
    hopefully you learned something in the process. 44:39
    Be sure to give us your feedback. 44:41
    We'd love to hear you know what you like and 44:43
    what you didn't like and we hope to do this again in the future. 44:45
    And be sure to check out the various react content that we have on Treehouse. 44:48
    We have a great react basics course. 44:52
    That assumes nothing is a great place to start learning React. 44:55
    And if you're not already a Treehouse student, 44:58
    check out the seven day free trial and go learn about React by taking React Basic. 45:00
    So, thanks for tuning in and we'll see you again. 45:05

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up