 Hi, everybody. I'm bruno. We got just a couple more minutes to let people roll in. Yeah, sit back and enjoy. Just a disclaimer, we're going to be Doing some live coding, so i encourage you to have your Laptops open. I'm going to be, i can actually Just point you to that for now. If you guys want to follow along With the live coding once we begin, i've set up a js Bitly link. It's boilerplate. It has react embedded into it. Kind of skip all that setup. So, yeah, you should see that when you visit the bitly. All right, everybody. Welcome to intro to react. My name is bruno kunya. I'm a self-taught front-end developer Currently working at early shares. You can find me online Pretty much anywhere at brun kun. Today we're going to be talking about what react is. Jsx, a react-specific syntax. How data flows through a React app, which is a spoiler alert through props and state. Then we're going to discuss a couple use cases. When is it prudent for you to use react in your Applications? When might you be better off without it? And next steps for your journey into the react Universe. So once again, if you're going to be Live coding today with me, i encourage you to. It's the best way to learn. Open up this bitly in your Browsers now and just have it ready. We're going to be building a small component as we carry Through the presentation. So please follow along. So what is react? Well, you just heard a pretty good Summary of it. That actually laid down a Decent amount of groundwork for me. It's definitely not a Framework. It's not an engine. It's simply a library by facebook for building modern Interfaces that have high fidelity and rapidly respond to User interaction. And it also allows you to Structure your application with components, which will Make your code more maintainable, easier to grok And reuse code throughout your application. You've heard a few different definitions of components. There's no one set in the oxford dictionary that's Relevant to programming. I like to think of components as Data and functions that are related by concern. So anything that kind of shares a responsibility goes Hand-in-hand inside of a component. That, again, the structure that react is going to force us Into is going to be modular in nature. And the concerns are all cohesive in that manner. You heard earlier mention of the shadow DOM. React actually abstracts the DOM for you. So some frameworks when performing DOM manipulation will Go straight to your DOM and can result in some slow Performance when updating lots of data or lots of code. What react actually does behind the scenes, and you don't Have to worry about this too much, is that it employs a Virtual DOM, which is actually a javascript Representation of your application's current state. And whenever data changes in your application, react will Perform a diff on the existing DOM and the new state and only Update that which is appropriate to the change. This data flow also occurs one way, as described earlier, Meaning your data cannot flow from a child component to a Parent component. It can only flow from parent to child. One of the things that makes react so popular and so Friendly to beginners is it's declarative nature. There's a lot of behind the scenes plumbing that's going to get Taking care of for you. Managing dynamic interfaces. Managing state. All these present really complex Challenging problems that you would have to solve in Building a dynamic interface. React only cares about what your Component is supposed to look like, given particular states. This ends up minimizing the amount of code that you have to Write, and it actually makes your project easy to reason about. And the reason i say this is because all react applications Are going to more or less share the same structure as you'll See shortly. So you can be on one project, Build it and react, be super happy about it, get called Out into other projects, maybe return to that code a month later, And actually feel quite comfortable quite at home because it's Going to look much like your other react projects. So i said earlier that react only really cares about what your Component is supposed to look like. Well, we're going to be Using jsx to tell it that. And jsx is an easy way to Remember what it basically is. It's just javascript and xml. React components are essentially functions that just take input Data and output render jsx. It's a highly expressive way to Take advantage of javascript in order to build your html. More often than not, templating systems come coupled with Their own display logic systems which require learning. Jsx is going to allow you to just simply use javascript. The last thing that's really neat about jsx is that it's Actually markup that you're going to be putting in your javascript Folder. So, sorry, file. So you have, for the first time, both your presentation Logic and your display logic, your presentation markup, sorry, And your display logic, all in one file. Coupled with the common structure that is associated with React, this makes projects really easy to maintain. So as a disclaimer, i didn't know i was going to be holding A mic, so live coding is going to be a little interesting. Okay. So with that said, let's see a Little bit of react and jsx. I'm probably just going to shout really loud because, yeah, i'm typing it. Perfect. If i need to go louder, just say the word. So we're going to declare our first component here inside Our javascript box. React gives us access to a global Object known as react. Its method create class is how You're going to declare your components. The most important function that belongs to a react component Is going to be your render function. This is where we're going to be Returning what our component ought to look like. So it's really as simple as typing html in your javascript. Like, what? But really, i can do this. And that component is just going to be a static p-tag That's going to say hello, word count. So we have a root component thanks to react present. It's known as react dom. It has a method on it called Dot render. And it takes two arguments. One, the component that you want to render. In this case, it's going to be first component. We just write it like we would in html tag. And then a second, which is where do we want to place this? We're going to use, yeah, that's plenty big. We're going to use document.getElementById to select our container. And everything going peachy. We hit run. And we see hello, word count on our output. So jsx is right here on line three. We're returning it. And it works like html. There's a couple little nuances that are Slightly different than html. Like you use class name as Opposed to class to declare styles. It's a little bit beyond the scope of this talk, but i Encourage you to probe and investigate jsx deeply. And so far, has anybody had any issues getting the, being able To reproduce this? yes. Is that good? how about now? Thumbs up? great. No problem. So we've talked a lot, you've heard a lot about data flow In react, and you're probably wondering what that actually Looks like. Well, it's actually quite intuitive. And you're probably already familiar with the interface. We're going to be using props to pass data down from parent Component to child component. And again, easy way to remember This is that they're just properties. These are going to behave and look the same way that you Would add attributes to an image tag or div or any other Html element for that matter. Once again, this is the way that Our components are going to be able to access data from the Outside world anywhere else in our application. Like i mentioned earlier, data flow is one way. So from parent to child. To give you an example of this, We're going to go right back to our application. And we're going to make it dynamically insert word camp. So like i said, this behaves a lot like a typical html element. So right here, i'm just going to declare a property called name. And i'm going to give it a value of word camp. And then inside of my component, i can access props that are Passed in by interpolating javascripts. This is in php the equivalent is when you would like echo Out a variable value using less than question mark and so forth. That's all we're doing here but in javascript. So curly braces indicate that and we can access our props Through the objects props property. So we type in curly braces this dot props dot name. We can run our fiddle again and you can see that. Sorry. Sorry about that. Oh, i'm sorry. You're good. Okay. I thought i heard it out. So as you can see, we still have the same output but now it's Being dynamically inserted. I could change this to any value. Run my program again and the interface will update. Did anybody have any issues reproducing that? Awesome. You guys already know react. I think i might be done. So again, one of the really cool Things about react that you hear about a lot is how Performance it is. And that all comes from the virtual Dom and what it's doing behind the scenes. You don't really have to worry about that too much. Just know that changes in your data will cause your Components to auto magically re-render. There's a lot of cool stuff going on here. You don't have to worry about any of this. If you've ever built a dynamic application with any one of these Other frameworks, you'll know that managing state and data flow And updating templates or partials or views can take a lot of Work and react just handles it for you. One thing to note about props is that they cannot be mutated Inside your component. This means that there is no way Inside of this component for me to manipulate this. It's only accessible and modifiable by outside components Elsewhere in the application. So what happens if you need Data inside your component that is modifiable? That's where state comes in. And state is important for Interactivity. That could be interaction with Servers that might be updating data in real time or users that Are using forms to manipulate their application. Like i said, state is mutable which allows the breath that Your component has and allows it to respond to change. Like props, any changes in your state also will cause your Components to auto-magically update and re-render accordingly. Because of the fact that state is actually private to the Component in the same almost like the inverse of props which Are not accessible or not modifiable within your component. State is private to your component. And as a general guideline, you should store as little data as possible in State because of this fact. Coupled with that, the higher up In the component tree of your application that you store your State, the easier your application is going to be to Maintain. If you take a look at your Favorite react apps online and you view their source, you Can see a lot of them feed jason straight into the application Parent component all the way at the top and then pass it down Into child components accordingly. So let's add some state to our component. So the easiest way for us to do it with this component would be To add a text box where our users could determine who they Go to and not just be limited to what's in our props. So for that, we're going to have to add a few more elements here. A key thing to note about jsx is that it has to ultimately be Wrapped in a single parent tag, right? So more often than not, you're just wrapping a big div in Case that your component has multiple elements inside of it. So first we're going to add a form and then we're going to add An input. We're going to make it type text. And we can re-update and not have it show. Oh, another jsx catch that it reacts does not like it if you Do not close all the tags, right? Any tag left open is going To cause your jsx to throw an error. I don't know if you can see that, but it's returning to me syntax Error, expected corresponding jsx closing tag for input. Thanks. So anytime we give a component State, we have to hook into the react life cycle that Zach mentioned earlier. This is a react specific method Called get initial state and it's going to be a function that Is responsible for returning an object that represents the Components initial state. So what that really means is that It sounds more complicated than it is. We just have to tell It what we want these values to be when the component first Loads. So here we're going to have a property Called name and we're just going to pass an empty string And don't forget your comma after your closing curly brace And basically this says upon load of the react component I want this.state.name to be an empty string. So we have that. Great. How can we interact with it in our input? Well, there's a couple things you have to be mindful of First you would have to attach an event handler That basically says whenever the user changes the value of our Input text box, we want to get that new value and store it in Our state. One other little catch is that React will not allow you to, react will not allow your Application to enter a state that is not equivalent to that in Virtual dom. So the value of this input Box has to be bound to the value in the state. So it's going to be a little bit easier to grok once you see what the code looks like. So another jsx convention is to add event handlers. You're going to use camel case. We're going to declare on change. We're going to use our curly braces here again to interpolate a callback function. We want our component to call this function anytime the input Detects change. So this dot on name change. Right? And i'll write that function up here inside our Component on name change. It's a function. We want to pass it in the parameters an event so that we can get the value out of our input box. And we're going to use another react specific method called SetState. You can use this to pass any amount of Data to your component and update your state. So it's as easy as passing name And then setting it to e.target.value. E is the event that is Emitted when the user changes input. Target is the input box. Value is its value. So don't forget our comma again. We'll run this and don't remember The value still has to be bound and we still have to use it. It's actually funny it shouldn't let me change that but What we also want to do is bind the value of the input To this dot state dot Name. Last we want to change Our hello statement to use our state and not our props. And everything going according to plan, you will now have your First component dynamically appending your user input into Your interface. This is the basics of react. I had to run through this so many times to get it in under 20 minutes. All right. So did anybody before i move on Did anybody have any issues producing that on their set ups? Yes. Okay. Let me see if i can hide. Okay. Can you see the whole sample? All right, great. I'll try to get a link to the j s Fiddle online later for those who want it. I'll leave this up while i continue talking. The question is going to be use cases. One of the biggest questions everybody has is which tool do i use? And quite frankly, i like the philosophy behind back bone. There is more than one way to solve a problem. Back bone was actually designed with the flexibility in mind to allow for that. And i'm a huge fan of that. That said, i'm also personally Opinionated and biased towards react. I think the react ecosystem is the most vibrant developing Community in tech right now. They're doing some incredible things With react native where you could write your code once and have a Native application in ios, android, web, tv, you know, watch, You name it. And there's a lot of crazy Stuff going on there. Zack mentioned flux and redux. These are application architectures that are absolutely incredible. They're game changers and making our applications richer, faster, More interactive than ever before. Can i change back to slides? So with that said, i encourage you to reflect deeply when you're Choosing these tools for your projects. Let's really get a feel for what fits your needs. If you have an application that has a buggy, slow or tough to Maintain interface, if you're experiencing callback hell, if You're having trouble managing state across all interactions in Your application, definitely consider react. But if you're already productive with one of the other front-end Technologies, like mentioned previously, be it angular back bone Or any of the other technologies right now in the javascript System, you might not need react. It's, again, simply one way to do Things. If you're a beginner and you want To write an interactive, stateful application such as a chat Room, anything that requires a lot of interaction, you Probably should consider react. However, if your application Honestly has limited interactivity, you probably Don't need react. That said, i recently had an Interaction with dan abramov, the creator of redux on twitter. He mentioned that he actually likes the fast-paced development Of the javascript world. There are a lot of people who don't. You've probably heard of javascript fatigue, yet another Framework. And those people would Encourage you to not feel pressured, to not feel burdened To keep up with technology as it moves so quickly in the javascript world. I would encourage not exactly the opposite, but i would Encourage you to embrace it. Dan abramov mentioned that he Feels like it's moving so quickly that it allowed him to Focus on technique rather than learning apis. So you're more concerned about how strong your javascript Game is rather than deeply mastering a particular framework. And when i asked him how does he go about learning technique, he Encouraged me to pay attention to what people are talking about. And look at the problems that their application, that their New tools are claiming to solve. And when you come across those Problems in your own projects, take those tools for a spin. Try them out. See how it works for you. You will be wholly surprised at the amazing things you can build With some of the stuff that's coming out. That said, to learn javascript deeply is to always be learning. I encourage you to check out these resources. Probably the best tutorial, in my opinion, for learning react Is going to be facebook's official tutorial. They'll walk you through building a simple comment system that has Like you would on a blog. It's super handy. It's way more in depth than what i was able to cover today. It will set up a server and allow you to fetch data and you Get a real hang for what react is going to actually look like in your projects. I also encourage you to take a look at es6. The future is now. You can use babble to transpile your Code so it works in modern browsers. But es6 has a lot of awesome features and you're missing out if you're not learning them. Last, i also encourage you to check out react router. It's a really cool project by ryan florence. He's a huge name in this community. And between react and react router, you can pretty much build a Single-page application in its entirety. And last but not least, the ever so popular redux. Again, these application architectures really are game changers. They're unfortunately beyond the scope of this conversation. But i definitely encourage you to check them out. That said, i'm done. How about you guys? Any questions? i did awesome. Thank you.