Intro to React

Rate this content
Bookmark

Essential topics covered:

- Setting up and developing a react project using create-react-app

- Basic JSX syntax

- The declarative philosophy, what props and state are

- Function components

138 min
10 Jun, 2021

Video Summary and Transcription

This four-hour workshop covers the basics of React, including JSX syntax, building components, using hooks like useState and useEffect, and working with forms. Participants are encouraged to ask questions and follow along with the provided code samples. The workshop also covers topics like custom hooks, testing, and TypeScript. Overall, it provides a comprehensive introduction to React development.

1. Introduction to React Basics

Short description:

This is a four-hour session divided into five parts with short demos and activities. About half of the participants are developers, and the rest are product managers. Some have used React before, but this session will cover the basics. Feel free to ask questions in the chat.

My name is Will Volker, and I'm Twitter, I'm edtech, and my website is Aldea.world. So this is obviously going to be a... oh, someone in Discord says you can't find the workshop. Don't worry about it, I will take care of it. Okay, so it's a four-hour session which we're going to have breaking up into five different bits. And there'll be a 10-minute tea break between each section. And in each bit there's going to be a short demo by me, and then there's going to be something for you to do. And then we'll go back over afterwards.

Okay. So I don't know before we start, I'm just looking to get an indication from you guys. Could you give me a thumbs up if you are a developer? Please. Okay, good. Okay, so about half people are developers. How about. So the rest of your product managers. Or could you type it in chat. He actually are. Chat, oh, yeah. Okay. Okay. And how many people have used React before? Could you do a thumbs up if you've used React? Or is it your very first time ever? Okay. You've used it. Okay. Good. Okay. So a few of you have used it. Okay. Cool. So what we're going to do is, we'll be a very quick tour of the sort of basics of React. The sort of basics of React. So basically, most of the stuff is covered in the basics section in the React docs. So if you go to talks at the conference, you'll sort of know what it's talking about. I don't expect you to be experts by the end of this, but we'll be familiar with the basics, okay? So let's go on. If you've got any questions, just put them in the chat, you know, either chat or whichever.

2. Getting Started with React

Short description:

The speaker introduces themselves as a developer and teacher with four years of experience in React. They explain that React is a library for making UIs and highlight its component-based and declarative nature. The speaker also mentions JSX and demonstrates the steps to create a new React project. Participants are encouraged to follow the steps and ask questions if needed. They are given time to work on the project before moving on.

Okay, so introductions. First of all, I am a developer and a teacher. And I've been working with React for four years. And I'm also currently interested in learning languages and teaching languages. What I would like you to do, please, is in your breakout rooms in a second, would you be able to introduce yourselves to the people you are with and say what you are hoping to get out of this afternoon? I'm going to give you about three or four minutes to do that. Let's go. Let's go on.

So, here is the first slide about React. Okay, so what is React? It's basically a library for making UIs. It's not a framework, which means it's a little bit less restrictive. So, the very core of React is literally just a library for reacting to changes in your app and changing the UI. There's a number of other libraries that work with it, so it can seem a bit like a framework with those involved, but it is itself just a library, okay? It's component-based, which makes it really easy to reuse, refactor, and test. And it's declarative, okay? Which means we say what it should look like given a certain state rather than telling it actually what to do, okay? If anyone's got any questions, feel free to put them in the chat, okay? Otherwise, we're gonna come back after we've finished our exercise in a minute, and we'll talk about it then.

We have this thing called JSX, which looks a bit like HTML. And it's a react syntax that they use for describing the UI of your app, okay? So it looks a bit like an HTML template, but it's not. It's actually shorthand for JavaScript to generate creates objects, okay? So it's like this one's an object with type main menu, and it's children in the tree. Menu item and another menu item, and inside that one, we have a strong. But it's actually when you transpile your JavaScript. So when you run Able or TypeScript, it will turn that into actual JavaScript code, it's not actually an HTML template.

Okay, so what we're gonna do is a quick start, okay, for getting a new React project up and running. Okay, so in a minute, you're gonna do this. We're gonna use a tool to create React app to make a new app with React. If you don't have NPM or enough rights to install it, let me know there's a web thing you can use to do it online. But the best if you could do it on your own machine. So what I'm gonna do now is demonstrate what you're gonna do. So if I change my screen sharing To share a terminal. Yeah. And all I'm gonna do is I'm going to make. So I'm gonna go to a directory. I have a directory called sandboxes, which is where I put my code. And if I want to start a react project in here, the first thing I have to do is to make sure I've got npm installed. And then I'm going to type MPX create reactor and then the name of the app, which we will call React Summit. And then we then it will wait and it will install all of the dependencies and set up a blank project. You have to wait for it to go. Once it's done all that. We'll have a project that we can just start working on. Okay. So it does take a little bit of time waiting for all this to install. But I just want to show you what it's like. Ok, once it's finished. Okay, so it's installing a few more things. And a few more things. And once it's finished we'll go in there and we'll type in npm run start. So here we are. Now if I look in here, there's the thing React Summit. If I go inside React Summit, we've got Node modules, which is dependencies and we've got the SRC source directory, which is where our code is. And if I type in npm run start, it will start up a development server and we'll be able to see the site running in the browser, any files in source that we edit will be reflected immediately in the browser. So, let's go back to sharing the slides.

Okay, so I won't do breakout rooms again because of what happened last time. So maybe just do it on your own. Could you follow these steps? First of all, make sure you've got npm installed and just do what it says here, to create a new React app and open it in the browser. I'm going to open the files up so you can see the files. There should be a file called app.js, which it tells you on the screen, you can edit to change the text in the project. If you could please try and do that. Okay. If you could try that for the next five odd minutes, so you can get a project up and running. If anybody hasn't got the ability to do it because you can't install npm or you haven't got npm or for any other reason, you have trouble, just let me know. Put the message in either chat and I'll direct you towards the code sandbox at web one. So, you have a go at that in about four or five minutes. Then we'll move on. You can also type the command for the terminal into the chat so people can just copy paste it. Yes, that's a good idea. Yep. Okay. So, you want to type in, I'll put it in the discord chat. So, you want to first of all go cd into whichever directory it is. Could be your own directory or wherever. And then type that in. And then once it is done doing all the installing... If you go into the directory cd React Summit, and then you can type in npm run start.

3. React Basics and JSX Syntax

Short description:

The speaker explains the steps to open the project in the browser and make changes. They apologize for any confusion and outline the topics to be covered in the workshop. The speaker also mentions the JSX syntax and its similarities and differences with HTML. They highlight the importance of having a root node in JSX and explain the concept of fragments. The session concludes with a discussion on components, props, and identifying custom components versus built-in ones.

And then you should see it open up in the browser. There should be a spinning React logo. And it should say, edit the file source slash app.js to change the project. And then you can see the changes you make that reflect in the page.

Okay, so... Okay... Ooh. So yeah, apologies to those people who've done it. So yeah, I'll just talk you through what we're going to do later on in this workshop. We're going to think about JSX in more detail. We're going to do building components, we'll do use effects and use states and uncontrolled and uncontrolled form components. And then I'm going to give you some tips for next steps. Is there anything anybody wants to do that I didn't just say? No. Okay, cool.

Alright. Could you do, if you need a bit more time, could you put a quick hand up? Otherwise I'll move on. Okay, lovely. Okay, let's go forwards then. Okay, let's not have a tea break, actually. Okay. Someone just did hands up. Oscar's done. Okay, fine. Okay, so we'll just... Okay, we're just going to wait a few more minutes. And in the meantime, just think about the things that you want to ask. I've only got one cup of tea. I wanted to find some more. But I thought there were more important things to be focusing on when I was planning these slides than having a variety of cups of tea. Okay. We're also way ahead of schedule, so you are planning to be here at 20 to 5, and it's 8.25 past 4. But I think some of the other slides will be longer. So I think I'll just go straight on. Okay. Okay... I'm going to carry on now. And then if anybody feels like they're getting too far behind in the next time, then maybe send me a message.

So JSX in detail. Okay, so I don't know how many of you have seen JSX at all, but it looks a little bit like HTML. Okay, so you've got these angle brackets, and then you've got the name of the component. In this case, it's the paragraph. And at the end, you've got the slash same as with HTML. These are called props, and they look a bit like HTML attributes. You've got the name, and you got an equals, then you've got speech marks, if it's a string, and you've got the value. If you aren't putting a string in, if you need to put a number or an expression, then instead a speech marks, you can put curly braces like here. Okay, so this... this div is height is whatever, height the window is minus 20. And also, we've got input, this one, this checks, this is the same as checked equals true. And the other thing to notice is that these are not the same necessarily as in HTML. So, this P class name equals highlighted. That is what you have in HTML, P class equals highlighted. These are always the JavaScript equivalents of the HTML properties, okay. Because it's actually short for JavaScript. Okay? And so, the other one to look out for is on labels. It's not label for, it's label HTML for. And if you pass in a style attribute, then notice you pass in an object and the keys are all like they are in JavaScript sort of handle case, rather than like they are in CSS, which is lowercase with hyphens. There must always be a root node or react will complain, which means you've got to have this here. Okay? You've got to have this here, these empty brackets, right, or a div or a paragraph or something. If you just have these two body texts on their own with nothing above them, then it would say error. There must always be a root node. And I don't know why it can't just infer the root node, but it will complain. And so you must always put it in manually, this is empty tags, which is called a fragment. Right, so, we're going to brave breakout rooms. Because the thing is, if I don't go into one, I think it won't crash. So we'll have one more go. So here we've got a little snippet of JSX. And what I want you to do is to tell me what components there are. And for each one, what props has it got, what values are passed in for the props, and what children's are. And is it a custom component that the React coder has written themselves. Or is it a built-in one that's the same as an HTML element? And how does React know which is which? Which was on the slide before.

4. Building Components and JSX Syntax

Short description:

In this section, the speaker discusses the carousel component and explains the difference between custom components and built-in ones. The speaker also clarifies the concept of children components and their relationship to the parent component. The next part focuses on building a component that displays data using JSX syntax. The speaker provides three versions of the component, gradually simplifying the syntax. Participants are encouraged to practice creating and using the component in their own projects.

Well, I didn't dwell on it, so you may have read that. You may not have done. Okay, so if I give you a minute, I'll try and put you into breakout rooms and I'll just resist going into one of them and hope it won't crash. Go.

Okay, welcome back. So, does anybody want to say anything about how you found it? First of all, could you put your hand up if you got, if you had any trouble with the breakout room. Could you do a hand up? No? Okay, good. If you got the answers please, could you put the Zoom hand up? One person? Two people got the answers. Okay. Okay, cool, thank you. Okay, so maybe, Barbara, would you be able to tell us what you got? Yeah. So we understand this is kind of a carousel component? Yes, very good. And the keys and values are... So, Rotate is probably a billion, and the Speed is a number, and then the Source for the image is a string, right? Yeah. And those are post as props. And yes, there's a Children which is the image. But then we got to discussing a bit about what is the custom component, but if the image is just an HTML tag? Or should we call it the Build-In Component? Okay, yeah, thank you. Well, really great, yeah, thank you very much. So, the... I didn't dwell on this on the last slide, but basically, these are all not HTML tags, these are all React components, but the ones that start with a capital letter, they're custom components that somebody has coded in. And the ones that start with a lowercase, like this image, they sort of built into React, okay? And they will basically just map to an HTML tag on the screen, although some of them have some extra features we'll talk about later. They sort of come with React, and the ones that start with a capital letter, so the slideshow, that's a custom one someone coded that the lowercase ones, is all inbuilt. And does anybody know, figure out which ones were the children of what? Could you do a hand up if you've got that answer? No. Oh, okay. So the children are all the images. So this slideshow is the parent of the images because you can see that, because they're sort of inside it. So this slideshow is sort of higher up in the tree and underneath it the images are all its children that are within the slideshow. So when you're building the slideshow, you'll get an extra prop called children which will contain all of these images, and if you use it then it will output all the images. Has anybody got a question? Oh, someone says, oh I missed it in the chat. If everything was lowercase, Barbara, no. You need to put yours in capital letters. The start of your custom ones have to be capitals otherwise, otherwise React won't recognize it as a component. I think it's just a normal function. Okay. Okay. Alright, let's go.

Okay. So the next thing we're going to do is build a component, okay? And the one that we're going to build is not going to do anything, it's just going to show data. Okay, so in our project what we need to do is make a new file to contain the component. And at the very start of the file, we have to make sure that React is imported so that React is in scope, otherwise JSX won't work. And what we're going to do is we're going to write a function, which is going to be our component. And the function's arguments are going to be its props, and its output is going to be JSX, okay? Which is a React element, okay? And we can use the prop called children to output the children. And what we can do then is import that function to other files and use it inside our JSX, okay? So if we go on, I've done three different slides, and they've got progressively simpler, shorter versions of this component, which uses more and more the up-to-date VSX syntax, okay? So this is a sort of the verbose version, okay? So you see here at the top, the first thing we've done is we imported react, well that's important, otherwise the JSX might not work. And we define a function called box and the arguments here are the props. And then inside the function body, we're going to define the props, the styles that we're going to pass into this div lower down, okay? So if we say, was there a background color prop? If so, we use that for the background color. Was there a padding prop? If so, we use that for the padding and that whole style for inner div object goes into the style prop of the div inside, okay? Some of you look a little confused, I'm sure it will make sense once you play it. Okay, and then so in the next slide, I've got a slightly shorter version. But this one is using ES6 destructuring syntax, okay? So all I've changed is on the first line of the function where we had props here from the previous slide. On the next slide, we've automatically taken those out and we pulled them into variables called background color, padding, and children. And the background color has got a default of AAA, AAA, AAA, and the padding is 10. Okay. And down here this is a shorthand for just assigning an object, background color equals background color and padding is padding. And then we can pass it in like we did before. Okay. So basically, what we've got here is a function, it takes props as an argument, and then it outputs some JSX, which is the output of it. And then you see here, we've got children, which is we had to put in to show all the children, all the child components in the JSX inside it, otherwise it will be empty. And, what have I done? Oh, I've shortened it further by not defining those inner div props into a variable. And this one, it's using an implicit return, which is a thing in ES6. If you don't use curly brackets, you use round brackets, you don't need to use a return statement, it just returns whatever's inside the function. But, don't worry too much about that, you'll just see that sometimes. You'll see these functions without returns, and it's because they used round brackets rather than curly brackets. And then that just means automatically return the first line of the function. Okay, and here you can see that box component being used. Okay, so they imported the box from the file called box, and then you just use it inside your JSX here, box, and then there's some text inside it. Okay, so your task now on your own is to go back to your app that you made before, and go into the directory. So you need to go in CD react summit, and then type npm run start to start it, okay? Now inside the source directory, you wanna make a file called box.js, and I just want you to sort of manually copy it in from this file here, I think it was that one, yeah. Just so you have a bit of practice in doing that, okay? And then, once you've done that, you wanna import it. In fact I'll put it in the chat so you can see both things at once, and then just check that it works. So you put the box into your app, you will then put the newsfeed, and you'll check on your screen that it's actually working, okay? And then once you've done that, changed it in some way, like give it a different background color or something and check that that's actually worked as well. And then I think after this we have a tea break.

5. Code Samples and Questions

Short description:

The speaker provides code samples in the chat for participants to see and work with. They recommend typing out the code to better understand it. Participants are encouraged to ask questions if needed.

Yes, okay, so let me, I'll just get the PDF up and I'll, actually I've got the code samples in code format and I'll put them in the chat so you can actually see them. And if you want to copy and paste, you can copy and paste. But I think it would be helpful if you'd actually type that out so you can actually see it. Now once it's working, then you can make whatever changes you want. So let me get the, let me get that up. Sorry. Okay, so I'll drag it in. Yes. Okay. So you can see bots.js. I've put in the chat in Discord and the new version of app.js with the bots. Okay, so if you wanna open those up, you can see the code. And you can either copy and paste it in or I recommend is actually typing it in so you can see every little bit and then try and get it to work and then make some change or other. Okay, and if you got any questions, feel free to ask me.

6. Understanding useState and useEffect Hooks

Short description:

You've got 10 minutes until five-to-five is an array. The first element in the array is the variable, the value of the state, and the second element is a function that you can use to change it. The other hook is called use effect, which is used for carrying out actions after the re-render has happened. It's usually for things that have nothing to do directly with your UI, like getting data from an API or calculating new data and putting it back in the state. We'll leave that for later and focus on use state for now.

Okay, and you've got 10 minutes until five-to-five is an array. First element in the array is the variable, the value of the state, and the second element is a function that you can use to change it, okay? We'll see that in the next slide. And the other hook is called use effect, which we're going to see a bit later on. Okay, and use effect is used for carrying out actions after the re-render has happened, okay? So when the props change or when the state changes, the first thing that happens is the component will re-render so it will redraw itself. After that's happened, anything you've defined with use effects will happen. And it's usually for either things that have nothing to do directly with your UI like getting data from an API or to calculate some new data, and then put it back in the state. Okay, so quite a common pattern with APIs is to render the first thing. First time it renders it will be saying loading. And after that, there'll be a use effect that will fetch data from the API. And then when that's come back, that we will re-render again with the showing the data, for example. But we're gonna leave that for later on and just go on and talk about use state for now.

7. Using the useState Hook in React

Short description:

To use the useState hook in React, import it alongside React. Create a state variable by calling useState and passing in the initial value. The state variable holds the current state, and the set function is used to update the state. It's recommended to use the function form of set when the new state depends on the old state to avoid race conditions. In the example, handleClick is called when a button is clicked, and it updates the state to be one greater than the previous state.

So here's an example of use state. So the first thing you have to do is import it alongside React. So you always do import react to forget the JSX to work, otherwise it won't interpret the JSX as making React elements, it'll be a syntax error. So you have to import react. And then alongside that inside the curly brackets, we have to import use state. And then to make a state variable, we call it, we pass in this zero is the initial value. So the state starts at zero and that goes in this value here on the left. And then to the right, you can see set value, which is the function that we call to change the state. And this function, it can accept, either can accept the new state or it can accept the function that generates the new state based on the old state. And if the new state depends on the old state, it's always better to do the function way because that will avoid the race conditions. Whereas if you just use the old state to generate the new state and pass it in, you can end up with a race condition if the state gets set in the wrong order because it does try to be clever and batch them together. So, that can result in bugs. So, if the new state has anything to do with the old state, you should use a function. Pass in a function that takes the old state as the argument and generates the new state. Or you can just pass in the new state. That's what I'm doing here on handleClick. When this button is clicked, it's a button onClick equals handleClick. So, when it's clicked, we run the function here which sets the new state to one greater than the old state. And then inside the button, we output the value.

8. Creating a Counter Component

Short description:

This is a component called counter that shows a button with a number starting at zero. Clicking the button increments the number. Put the code in a new component file called counter.js and import it into app.js. Make it count up in twos and add another state variable, such as the date and time of the last click.

Okay, so, this is a component called counter, and what it does, it's very simple. It just shows a button with a number in it which starts at zero, and every time you click the button, the number goes up by one. So, much like you did with box. What I want you to do is I'll put this in the chat. Do that now. Document. Counter. Did you see that? So, here's your counter. Could you put this into your app? Okay. You can either type, as I say, I'd recommend typing it all in. But if you don't want to, you can copy and paste. Put it into a new component. It should be in a file called counter.js. It should be in the same directory as app.js. And then make sure it works. So, like you did with the box. Import it into app.js, and use it by putting into your jsx somewhere near the box. And once that's working, you have two tasks. The first one is to make it count up in twos rather than ones. And then your second task is to add another state variable. So, here you've got you state. And you can call that function as many times as you like. It will, you mustn't, as long as none of them are behind if statements or in loops, in which case React will complain. But as long as they're all definitely called in the same order, you can call it as many times as you like. And you need to put, and so the other task is to make a second one. And you can represent any state you want suggested here. It could put in the date and time that the button was last clicked, okay. But you could do whatever you want. Okay, but the first task is to get that counter working in your component. And then after that, make a counting twos. Then after that, put the date on when you last clicked it. Okay, if you've got any questions, pop in in the chat and good luck. So yeah, you've got, again, you've got 10 minutes for all that.

9. Creating a Counter Component in React

Short description:

The speaker demonstrates how to code a counter component in React. They open the project in Sublime and create a new file called counter.js. The code from the sample is copied into the file. The speaker imports the counter component and adds it to the app.js file. They run the project and show that clicking the counter increments the value. The speaker then explains how to modify the code to make the counter count in twos and add a state variable to track the date and time of the last click.

Okay, so there's 25 plus. Nobody has raised their hands saying they're finished, which means, oh, Marja hasn't finished. Okay, good. For those who haven't finished, would you do me the favor? Oh, okay, two. Everyone else, would you be able to put in the chat what step you're on out of one, two, three, and four? Or should I just go through it and show you how to do it? Okay. Maybe I'll do that. I'll just go through... Oh, okay, actually people have finished it. Right, okay, I'll just go through the coding of it and show you how to do it.

So if I open up now that... Okay, I'll do it. Let's do this. Okay, so just open it, I'm just opening up Sublime. I somehow managed to move the zoom toolbar off the top of the screen, which is just extremely irritating. I'm really not getting on well with Zoom at the moment. There we go. Okay. So I'm just opening up the folder that's in and then I'm going to share it. Okay. There we go, right. So stop sharing that. Let's start sharing Sublime. Um. Untitled. Apologies. Yep. Okay. So you should now be able to see um, my Sublime window. Um, and I'll just make it a little bigger. Okay. So here we have app.js. And so what I'm going to do is I'm gonna make a new file called, sorry, it's really cramped on my screen. Right, where are we? Called counter, which is gonna go in the same directory as app here. So, file, new file. And this one I'm going to save as counter.js. And in this file, is going to go all of the codes from the code sample. Here, okay. So, I'm not going to waste your time by typing that in again. But you can see it's the same code as from the slide, okay? Although the indentation's a bit off. Okay, now what we need to do in this file is import it. So, I'm gonna import counter from counter like that and then all we need to put it in is say I wanna put it under the React logo or on top of the React logo. I put it there like that. Okay, so now we've got a counter there. So, if I now run it, yeah, I'm gonna run start, and when that opens up, I'll share that window instead. Mm-mm. Where are we? Okay. I think it must be this. You see they're spinning React thing. Now, if I click the counter it goes up in once, okay? Okay, so we go back to the code. Again. Okay? So the second task on the list was to get it to count in twos. Okay, so all we do is this handle click, which goes in on click on the button. We're going to change the function. So it changes the state. Take the old value. Instead of adding on one, we're going to add on two. Okay. So now that means when I click it, I'm not going to go back to the browser again because that's just awkward, but you'd see it would go up in twos. Okay. Now for the final task, add another state variable. For example, to show the date and time the button was last clicked. We need to call useState again. So I could go. So let's start with useState. And it's undefined, so we'll put nothing in. And we'll go dateLastClicked, setDateLastClicked. Okay. So we've called useState again and we've made another one. And this one will store the date it was last clicked. And this function here is for setting it.

10. Updating State and React Batching

Short description:

When a button is clicked, the current date is stored in a variable called dateLastClicked. The value of dateLastClicked is then displayed next to the number. React automatically batches state updates, allowing multiple updates to be done asynchronously and avoiding multiple re-renders. The function form of set state should be used when dividing the new state based on the old state. The next topic is effects.

And whenever we call this function, it will re-render the component. So what we want to do is when it's clicked, we want to set the date it was clicked. So in here, we'll do setDateLastClicked new date. Okay, so then when we click the button, it will store in this variable, the current date. And all that we have to do now is output here, dateLastClicked plus that, which all we could do... Two string, okay. But the problem with that is if that's undefined, that will error. So dateLastClicked? Otherwise, empty string. Okay. So there we have another state. We've got two places a state. We've got the value, which is the 1, 2, 3, 4, 5. And we've got the date it was last clicked. Okay. So if I go back then to the browser, Firefox. Where is it? Okay. I don't know where it is. But what you will see is next to the number, you get the date it was clicked. Okay. Right. Can you all see the slide? Yeah. Has anybody got a question about any of that? Or should I move on to effects? Yeah, no? Can I ask a question? You can, yes. Is it possible to update the state at the same time? Because previously with the set state, right, you could update two properties at the same time. But now I have no idea how to do that. Oh, like I'm doing here. Okay, so yes. So if we go back, the answer is React will batch them automatically. Oh. So if I call the two different, the set value and the set date last clicked on two lines next to each other, like I did, it does them asynchronously. It waits for a short time before running it so that it can do them both at once. Okay, there's no two re-renders. There's only one. There's only one re-render. Okay, that, incidentally, is why you have to, if you're dividing the new state based on the old state, you've got to do the function version because otherwise it can get confused and do them in the wrong order. Yep. Okay, let's go on to effect. Unless anybody else wants to ask a question?

11. Understanding useEffect Hook and Task

Short description:

The useEffect hook is used for running code after a render. It accepts a function and an array of dependencies. If the dependencies change, the effect will run. To run the effect only once, pass an empty array as the second argument. To avoid re-running the effect when passing objects, useRef can be used. The task is to update the counter component to have the fizzBuzz effect and change the alert to console.log. Additionally, add another useEffect to make the screen flash different colors based on the number. The useRef hook is used to reference DOM elements and can be used to pass objects into useEffect without triggering re-runs. The group will stop here, and the speaker will code the remaining steps on the screen.

Great. Okay, let's go on to effect. Unless anybody else wants to ask a question? Okay. Um, let's go forwards. Okay, so we can here, we've got that if you remember useEffect. This is for not state. This is for things that happen, anything that has to happen after a render. Okay. So this one in the example, I've changed it so that if the value was a three, it would alert fizz. I know if it was divisible by three, it would alert fizz. And if the value is divisible by five, it alerts buzz. Okay. Otherwise, it's the same component. Okay. And the way we use it is we call use effect, and we pass in a function which gets run after render. And the second parameter is an array of dependencies, what they call dependencies. And these are variables from outside like value, which you need to, which you're going to use inside. And you need to put those there. If you don't put any dependency array at all, it will run after every render, which can be a performance problem. And if you put a dependency array, which is missing some dependencies react will give you a warning and it's not right. Okay, and if you do it right, then you put in the dependencies in this array, there's value, then it will run the use effects when one of the dependencies changes, and not after any other renders. And not after any other renders. Okay, so to recap, if you want to use effective on every render, you need the second argument here often entirely. And if you want it to run, otherwise you pass in the dependencies in the array and it will run whenever they change. Okay. Yeah. This is can be a source of confusion if the if the variables are changing, but the values are not, which can happen if, for example, their props coming from the parent component. And to avoid that you should and to avoid that you should you passing, try only passing scalar values. And if you have to pass in an object, these are all scalars, then numbers or strings that would happen. And it will only when the values change it will rerun if you pass in objects, there is a risk that you'll be passing in a new object that's the same as the old object, and then it would rerun the effect. So you have to be careful with that. And I'll explain in a minute how you avoid the problem. Okay. Right. That's a lot of info. Have I confused you everybody a lot? Basically, use effect is for running stuff after render. And if accepts a function, and an array of dependencies or variables that are used inside the function, and it runs whenever the dependencies change. And if you only want it to run once, then you pass in an empty array, as the second argument, and then that will only run the effect after the very first render. Hmm. Where's that thing I did? No, it's somehow didn't, okay never mind. Um, to avoid it rerunning, if you pass in an object with the same value, but a different object, um, you can use a hook called useRef and store the value in that. But I don't want to get into that now. We'll do that later if we've got time. And otherwise, it's in the notes of next steps. So what I would like you to do now is take the counter component you put in before and update it so that it has the fizzBuzz effect from the previous slide book one. Then you need to make sure that works. Then you need to change it so that instead of alerting fizzBuzz, it does it to console. And then, if you get all that done, put in another useEffect. You can do anything you want. My suggestion is to get it to flash to screen blue if it's 3, green, if it's divisible by 5, and cyan, if it's an multiple of both 3 and 5. Okay, but you do what you want. I'll put the FizzBuzz example in the chat. It will just cover steps 1 and 2, 3 and 4, you have to do yourselves. Okay, put that in. Okay, so you have 15 minutes and as usual, if there are any questions, please let me know. So the people who finished, I'll just explain about refs. You use the use ref hook. It returns an object that stays the same for the entire lifetime of the instance of the component. And it has a property called current which you can put in the current version. And if you pass in that ref object as a dependency of a hook, it will never change. So it's a good way of putting things, getting things into the use effects without triggering a run of it. Useref is really for referencing dom elements. And we'll see that later as well. But you can use useref like that if you need to pass an object into use effect and you don't want it to trigger the running of the hook if it changes. Sometimes you find parent components will generate an object like a function and it will be the same as the old one but it won't be the same variable so that will cause that problem sometimes. Okay. Maybe we will stop there, because half of the group have now done it and I don't want to bore them too much. So what I will do is like before I will just code it on my screen so you can see if you haven't finished. So, here we are. So what the task, we need to add in fizzbuzz.

12. Adding FizzBuzz and Handling Events

Short description:

We add the FizzBuzz version to the code and modify it to log to the console instead of using an alert. We also add a second useEffect to flash the background color for multiples of 3 and 5. The solution is explained, and participants are encouraged to ask questions. The speaker then discusses events in React and explains that events are handled through props and functions. They provide an example of a component that calls a function every 10 seconds and explain the use of useEffect and cleanup functions. The speaker also mentions the use of useEffect for Firebase and clarifies that event props do not have to start with 'on'.

So what the task, we need to add in fizzbuzz. Let me just quickly cheat and get the FizzBuzz version. Okay. So here we have the version from the chat. So, if the value is 3, we alert fizz. If not, we'll alert buzz. Okay. So, the first task was to get it to log to console, rather than doing a popup alert. So, all we do here is, instead of alert, we do console dot log. Now, the bonus was to add a second use effect. It could do anything, okay? But what I wanted to do was to flash the background color, multiples of 3 and 5 come up. So, what we need to do is call useEffect again. So, and inside the first one is the function, and the second one is the array of dependencies. And we'll say, what I did is put it in a function bottom, so to avoid repeating myself, I made a function called a flashBackground, we'll add a color there, and we do const oldValue equals document.querySelector, pathHeader.style.backgroundColor, and we can do that equals color and then we can do setTimeout after half a second. And then we say here background blue divisible by 5, green divisible by both, then a sine. Alright, so that's the solution. I hope that's clear to everybody. If it's not, send a message, put it in the chat or whatever. Or if you got any other questions at all. Otherwise, we're going to have another leg stretch, 10 minute break and walk around the flat, whatever you want to do. And then see you back here at five past six. Good work. Okay. All right. Here we go again. Right, so I'm going to do events. Okay, like on click. Okay, so I don't know if any of you are used to using angular or the DOM. But in other in these things in the DOM, you have obviously the events that bubble up through the DOM. Right? So it's a separate sort of thing. You click on a link and then there's the on event that on a click event triggers on the link on the parent on the parents all the way up to the document. And then obviously in angular, last time I used angular it was the same you had events that you have to find to first in React. There is no such thing as an event like that. If you want to have an event, all you do is you have a prop. That you expect, which is a function when it is time to trigger the event. All you do is you run the function prop. And it doesn't bubble up like a DOM event, it just... You just have to...the component expects a function as a prop and then the parent has to deal with that when the function gets run. So here's an example. This is a component that calls, it runs a function called On 10 Second Interval every 10 seconds. And what the parent, what happens every 10 seconds is left entirely up to the parent component. Okay, so all it does is it work out, it works out when 10 seconds have passed. And it calls its prop that gets passed in which is a function On 10 Second Interval and then the parent component can do in that function, passing whatever function it likes to happen every 10 seconds. Okay. The implementation uses Set Interval. So you can see inside this first views effect and we generate an interval using Set Interval. And this runs every second, every thousand milliseconds and it updates the state with number of seconds is one more than it was before. And then lower down, we have another use effect. And then every time number of seconds changes, it runs. And if it's divisible by 10, we run this prop. See, what we'll do here is we de-structure it from props. So that's just a way of, we could have done const onTenSecondInterval equals props.onTenSecondInterval, and this is just a shorter way of writing that. So this onTenSecondInterval is the props.onTenSecondInterval and then we just run it if the number of seconds is divisible by 10 in the use effect here. There is this thing which is called a use effect cleanup function. And you see what I've done from the use effect function is returned a function. And what that does is after the component is removed from the app, say, its parent is removed, so it's no longer shown, then this gets run... No, sorry. This is run next time this use effect runs. So, after this is run, next time it runs, it runs this, or after this is removed, it runs this. And this is for clearing up anything we did during this use effect. So here, what we've done is we've made an interval, which is gonna be floating around in memory as we clean it up. So, we return a function that clears the interval so it stops it being in memory. Okay, so that's a sort of to tidy it up. Also useful for Firebase, we use Firebase to set up a listener. If you return the output of that news effect, it will automatically disconnect from Firebase. So it's useful for that kind of stuff as well. The event props like onText, onText will do not have to start with on. I sometimes do that. Because it's consistent with onClick, et cetera. But that's just very particular to me.

13. Using Refs in useEffect

Short description:

Here we have the onTenSecondInterval prop, which runs the second use effect whenever either of the dependencies change. If the parent component generates its onTenSecondInterval function while rendering, it would be run every time the parent component renders, potentially more than once in the same second. To fix this, we can use a ref to check if the current second is the same as the previous one and prevent it from running twice. Refs can be useful when you need to put something into a useEffect that won't change, as changing the current property won't cause a re-render.

And also, I thought it would be clearer in the context of this slide. They can start with whatever you want. The other thing, sort of similar to what I was talking about before, here we have onTenSecondInterval prop. This second use effect is run whenever either of this dependencies change. So we've got the noneSeconds dependency and the onTenSecondInterval dependency. And obviously the way useAffect works, obviously the way useAffect works, either of those changes, it will rerun. And if the parent component generates its onTenSecondInterval function while it's rendering, i.e., let's say in its JSX, you had onTenSecondInterval equals function, and then you generated the function that every time it rendered, it would be a different function. So this would get run every time the parent component rendered, rather than every second. So you could have it running more than once in the same second if the parent component ran more than once in the same second. And the way we fix that is to do, the way I do it is to use a ref. Like this. And this is the exact same thing, except we've called useRef. And we've made a variable called lastPing. And it starts off and the value is undefined, but what we can do here is put numSeconds into the current property of lastPing. And here we can check if it's the same as the current second or we won't do anything. So that way we can stop it running twice in the same second. This is sort of, not something you'll always come up against but it has bitten me this sort of thing. So, yeah these refs can be useful if you need to put something into a user effect which won't change, if you change the current property it won't actually cause it to re-render cause this object always stays the same at re-render. So you can use it to stop this kind of thing happening. So, yeah.

14. Creating Components and Class Components

Short description:

In this section, participants are assigned a task to copy a component into their project and ensure it works. They are then instructed to create a new component from scratch that draws an orange div on the page and logs a click to the console when clicked. The speaker provides guidance and code examples throughout the process. The section concludes with a brief overview of class components and their differences from functional components.

Okay, let's go on to the next job. Okay, so this is your job for this section. Maybe we'll do this in breakout rooms, I'm feeling braver. Okay, so you'll have to find, delegate one of you to be driver. You need to, I'll put it in the chat, I'll do that now, bear with me. Ten second handling. Okay, so you need to copy this component into your project. Put it into your JSX, make sure it works. And, then you have to pass in a prop called onTenSecondInterval. And what I wanted to do is simply log ping to the console. And you'll see that come up every 10 seconds in the console. Once you've done that, make an entirely new component from scratch. So sort of, maybe you could take your click target, sorry, your box or your counter, or your, this one, a pinger and save as click target. And then edit it or just write it entirely from scratch. And what it will have to do is to draw an orange div on the page. And when it's clicked, it would log to the, it accepts an onClickProp, and then you should pass in a thing that logs a click to the console. Okay, well, say quarter of an hour. We're still half an hour ahead of schedule, so if we need longer, we can have longer. Good luck, I'll put you into breakout rooms and cross my fingers. Okay, could you put a hand into the air and zoom if you did it all three sections? Okay, very good. How about if you did the first two? Okay. Right, okay fine, well done. I'm gonna go through and show you how to do it in case you didn't, so let me share a different window. This one. Okay, so we need to make a 10 second pinger, that'll make a new file and in here we'll put the 10 second pinger from before. And that is 10 second pinger.js. Okay, and so to add it to our JSX we go into the app and we want to import the 10 second pinger here. And then we just want to put it in, let's say under the counter. Now we need to put in the prop, okay, so on 10 second interval equals and then this should be a function that just looks like that every 10 seconds, okay? Okay, so this is, some of you look confused, this is a prop and inside here, expects a prop on 10 second interval and then it runs it every 10 seconds. They run, it runs this effect every second and if it's a 10th second and it will run that prop which it pulled out of props there and what we do here is we pass it in the prop and it's a function. So that's ES6 special one line function, you could also do it like that or you could do, and second interval, and second interval. Like this, okay. So we're passing in a function as the prop which gets run in here every 10 seconds. Okay. So, let's go on. Okay, so now we need to make a new component called click target, which draws an orange div on the page. Okay, so I'm going to go save as, and I will make it, hang on, that's not, yeah, click target. So then we'll just rename it. It's sort of quicker. And, so the first thing it has to do is draw a div. Delete all that. And, draws a div, and it has to be 100 by 100 in orange, so its style equals, now inside here we're putting an object, and width is 100, height is 100, and background color is orange. Okay, we want, we can sort of do something like this to make it a little bit neater, um whatever, and it also, and then it needs to accept an onClickProp. And when the orange div is clicked, it runs the prop. So all we do is we can put in here, onClick equals prop.onClick. props.onClick. So this is saying any property of props and click target, pull on click, we're just going to pass it through to the div and run it. Another thing we could've done, const handleClickOnDiv equals function, which just runs, props.onClick, and then we pass that through like that, and it's kind of the same thing. Okay. And then if we put that in here, click target, then again I don't wanna waste time opening Firefox, but that would draw the little orange square under the counter. Okay. Has anybody got a question they would like to ask? No, fantastic, okay let's go forwards then. Stop sharing my supply and start sharing the slides again. The slides again. Okay. And let's go. Right, so I said I'd talk to you quickly about class components. Okay, so this is the class component version of the pinger. Okay, now as you can see, this is not the click target, it's the pinger. As you can see it's more verbose, okay? But on the other hand it's a little bit neater in when we're working out this business with are we in the same second or not before we ping? It's a little bit nicer in the component did update. But what it has is instead of these hooks, instead of use effect and use states, we have functions. And componentDidMount runs after the first render. ComponentWillUnmount runs after the last one. And componentDidUpdate runs after every render apart from the first one. And this.state holds the state. And this.setState is what you call to change the state. Okay? And the reason it's not liked so much anymore, I think it's considered to be slightly less declarative. It contains more in a way of instructions, like in component update, if this.state.numSecond is divisible by 10, and previous state is divisible by 10, will do it. And that looks quite a lot like imperative code, not declarative. So that's one of the reasons.

15. Differences between Old and New React Components

Short description:

The speaker discusses the differences between the old way of writing React components and the new way using functional components. They mention that the old way is more verbose and includes more boilerplate code. The session will continue after a short break, and the next topic will be forms in React.

And also it's just more boilerplate, it's about twice as long. So I think that's why. And we have here extends React.Component. I mean in some ways this can be clearer, but in other ways it's a bit more verbose. So up to you. This is the old way, which is why I didn't base this session on this. We have another short break before we do forms. Maybe go stretch the legs, we'll have a shorter break. Five minutes back here at quarter to, and then we'll do forms, which are a bit involved in React. So give your brain a rest first.

16. React Forms: Controlled vs Uncontrolled

Short description:

We'll now move on to forms in React, which can be controlled or uncontrolled. Controlled form components require managing the value in the state and binding to the onChange event. The value is set manually and locked to the state. Uncontrolled form components handle their own value and are faster but less reactive. Let's see examples of both.

Okay, so we'll go on now. We're gonna move onto forms, which come in two different styles in React. You have to know about controlled form components and uncontrolled form components. So this is the only way which, you know, the React components that have got the lowercase, the ones that map directly to DOM elements, one of the few changes between them and that DOM elements are if you pass the value prop, that will actually fix the value of the form field. So... So, so if you, so if you say input, and then provides the value equals, I don't know, like username, and that will be stuck in there. It's not like with the DOM, when you provide it and that's the default at the start, and then the user can edit it. In React, if you give the value, it's set to that value. So, if you want, if you set it, you have to keep in the state, what the value of the form field should be, and keep passing that in to the value of the form field, to manually keep it set to what you want it to be. So what you do is you bind to the onChange event of the form field, and so whenever the person changes it, say the user types in the form field, you'll get an onChange event, which contains the new value of the field after they've typed, right? So if it's a text field, it will generally be the same as the old value with one more letter. So what you have to do is put that in the state, and then you pass the state, the value of the field should be the state from the state. So that way, the field does not, it's not directly editable by the user, but you keep what the value is in the state and pass in. So you sort of lock it to what's in the state. That's called a controlled form field. It's more reacting, so I always do that. Well, you can use the uncontrolled way, which is kind of less code and actually seems to be a bit faster whenever I try in terms of when you're typing in the form fields, the controlled way introduces actually quite a noticeable delay, whereas the uncontrolled way doesn't. But it's less react style, so I don't like using it. Let's have a look at these in practice.

17. Controlled vs Uncontrolled Form Fields

Short description:

In controlled form fields, the state is used to control the value of the input field. The field displays the value from the state and updates the state when the user types. In uncontrolled form fields, the field handles its own value, and a ref is used to fetch the value when the form is submitted. Controlled form fields provide more control and reactivity, while uncontrolled form fields can be faster but require exposing the DOM.

So here we've got a controlled form field, the form. You can see it's got an on submit event and we're passing our handle submit function, which does prevent default, which then prevents the page from reloading. And we call our on submit prop which got passed in. And what we give it as an object with email and then the value of that is the state, the email field value from the state. Okay, and meanwhile, in the form itself, we've got a text field down at the bottom, input value equals email field value. So that's fixing the text in the field to whatever's in the state. And then one change, when they type, they'll fire on change, our handle change function will run and reset the state to whatever was in the new value of the field, which is E.currentTarget.value. Okay, so that way, whenever they type, we update the state and then whatever's in the state goes into the field, but the field doesn't directly control it's own state. We do that, that's why it's called controlled. And then the uncontrolled one, is different. See, we don't pass in a value at all. We let the field just handle its own value. And instead, we have to give a ref, we call use ref again, which generates this object. And if we pass in input ref equals and then the ref, that will set input field ref dot current dot value to that actual DOM node. So then on submit in the form, we can fetch the value input field ref dot current dot value. Sorry, input field ref dot current is the DOM load and dot value is the value of the DOM node. So that way we can get that when we submit the form. Like I say, it's a bit faster, but it's a bit less reactive and it sort of means you have to expose the DOM inside here. So for those reasons, I don't like it, I always do controlled. But it's up to you.

18. Task: Controlled Form Fields

Short description:

We had a task on controlled form fields. Participants were instructed to add a form with an email address field, check its functionality, and then add a name field. The name and email values should be logged to the console on submit. The speaker provided code examples and guided the participants through the process. After completing the task, participants were asked to share their progress, and everyone had successfully completed it. The solution involved importing the necessary components, adding state variables for the email and name fields, handling changes to the fields, and logging the values on form submission. The speaker also mentioned testing the code by modifying the logging to include the name field as well. Overall, the task was clear and participants successfully completed it.

We'll go back now. We had a task on controlled form fields. Okay, so once again, considering that we didn't end up split up and I didn't get kicked out, I'll do it again. You can go into breakout rooms. I'll put the example in the chat. It's the form with the email address. You need to put it in, check it's working, and then add a name field and make sure that also works by on submit, logging the name and email to console. So I'm gonna put that code in the chat now. Give me one second. Email, open console components and sort you into breakout rooms and I'm meant to be giving you seven minutes. So let's do that. Okay. And welcome back. Right. How did it go? Could you put a hand up? Has anybody got anything to say about that? No. Okay. Could you put a hand up please because we've got all the way to the end. Nice. Everyone, very cool. Okay. Great. So it's one person from every group there. So well done. Maybe I'll just do it for benefit of anybody that was confused by anything. So let's stop sharing my presentation, stop sharing some blind texts. Right, so we want to make one called email form with control components. Not dot gs, dot js. I just missed out the syntax, oh well that's okay, right. So the task was to add it to the jsx first, and to do that we have to import it like this. Okay, and we can put that in like that. And then we check it works by log the email field to console on submit, so we can put in on submit equals data to console.log data. Okay, so it logs the email data to the console and then labels it with the email so we know what it is. Okay, now we have to add a name field. So the way we do that is we need another piece of state to hold that, name field value. And we need the fields. So we'll put another field in, and let's handle change email. And we want another one for handling change of name. So that's run here whenever this one changes. And finally, when we submit the form, we not only want to output the value of email field, it'll also output the value of the name field. That's how we do the control. Oh, and then we were supposed to test it by passing in, changing this so that it also logs the name. Okay, so that was the solution to that one. That was clear to everybody. Stop sharing that now, and we'll go back to our, oh, probably. Probably.

19. Working with Uncontrolled Components

Short description:

To work with uncontrolled components, you need to create a ref and extract the value when the form is submitted. The process is simple but gives you less control. However, it is more performant.

Okay, so, let's go on to, let's say uncontrolled components. You wanna make a ref, and pull out the value when you submit the form from the field, input ref equals, right? You've got the exact same task to do now with uncontrolled components. Let me put that in for you. That's in the chat. Have a go at that, and I'll bring T back here again in seven minutes.

Okay, so, we need that uncontrolled file. And make a new thing here. It's a thing called ordener. Okay, so we need to add this to the JSX. So we'll just swap it in. And okay, well, this back as it was. So it loves the value of the email field, if you wanna start and then they just need to add another name field. So we need a ref point to it. We need an email field ref, and a name field ref. And this one should be email field. I guess we could put them on the different lines. No, yeah. And then in this, we want a name. Field ref to parent dot parent. Okay, so there, we're done. I'm gonna need to test this here by also outputting me the name exactly as before. Okay, so yeah, it is surprisingly simple but I don't, it's like you guys said, you aren't in as much control and also, somehow there's, I don't know, I just don't like this pulling out of here. It feels less sort of, like the usual way, the usual style. But it is also, it is more performant. Yeah, and yeah, there's that. Okay, let's stop and go back to the other thing. Whatever it is.

20. Introduction to React Router

Short description:

React-router is a library for address bar-related functionality, such as showing or hiding elements based on the URL. It supports parameter extraction and linking. Using React's route link component instead of an A tag allows for faster page updates without browser navigation.

Okay. So right, we're actually half an hour ahead of schedule. So what, I'll go through this slide and then we'll think of something else to do. So this thing called react-router or react-router is meant for address bar-related functionality. For example, showing or hiding certain elements depending upon the URL of the page. So typically used for obviously slash dashboard, slash list web, the actual URLs. And it also supports extracting parameters from the URL and also linking. So if you use a React, route a link component instead of an A, when you click it, it will reload, change the address bar and update the page without actually navigating the browser, so that's faster. That's quite an important one.

21. Using Custom Hooks and Testing

Short description:

The use context hook is meant for sharing state between more than one component. Custom hooks allow for combining multiple hooks into one hook, encapsulating functionality for reuse. Jest and Enzyme are recommended for testing React apps. TypeScript can help define props and types, reducing errors. Next steps include trying custom hooks and considering testing and TypeScript. Any questions or suggestions for the next 45 minutes? Let's try custom hooks by extracting code into a custom hook called use numSeconds. It returns the number of seconds. I'll demonstrate it on my screen. Does anyone need more time or should I proceed?

The use context hook is meant for if you have states that needs to be shared between more than one component. I obviously don't do that gratuitously, but say for things like authentication, it can be handy. You can put it in the context. It's a bit complex to set up. Off the top of my head, I can't remember how to do it, but it's very clearly in the documentation. You need to first of all define the context in one component, and then wrap the part of the app that it needs to be used in with a provider element. And inside there, you can call useContext to get the value of the state from the provider. So useContext is for sharing state between more than one component.

Custom hooks. You can combine... If you have a piece of functionality that uses two hooks, like earlier, we have our state and our effect for doing counting in seconds and then pinging every 10. You can combine multiple hooks into one hook using a custom hook. And the way you do that is to make a function called starts with the word use and then it's literally just like a mixing. You can just use the other hooks in your function. And then if you use that function in your component, it's as if you've used those hooks in that particular place. And then whatever you return from your function that it's a custom hook is the return value of the hook when it's used. That makes sense. So it's good for encapsulating for reuse and for making it clearer. We can maybe try that if you wanted.

Testing, I recommend Jest and Enzyme is popular. You know Jest it's a testing framework that allows you to run code and make assertions about what ought to be true when, and Enzyme is sort of like a jQuery thing for navigating your react tree, clicking buttons and seeing what changes. So you can use it to make sure that the right elements are displayed at the right times, so it's for integration testing of your React app. TypeScript is useful. Obviously it's yet more syntax to learn, but if you do create React app and you typeScript as one of the options, it will set it up to use TypeScript. And what's useful about that is you can define what props you're expecting in your components or what types they should be, and which ones are optional, which ones are mandatory. And then when you fail to pass them in right, your text editor might pick them up and certainly when TypeScript does it'll pick it up, so you skip quite a lot of errors like that. Okay, so those are the next steps I sort of recommend thinking about. Does anybody got any questions? Or anything they want to do now in the next 45 minutes? I can start using stuff? I think custom hooks could be a good idea. Okay. Should we do custom hooks then? All right, so if we go back then to... Where were we... Yeah, there's something that uses... Here we are. No, let me use the one that wasn't there. Something that uses a useState and useEffect. Here. The one that does the 10 seconds thing. Here we are. So it starts at 0, and then every second, it increases the number of seconds. Okay. We could turn these two into a custom hook called use 10-second intervals, for example. And literally, all we need to do is make a function that includes this code and returns the value. Oh, hang on, sorry. It could be called use numSeconds, right? It returns numSeconds. And then in this component, instead of this, we could do numSeconds equals use numSeconds. And then we wouldn't need this numSeconds. We wouldn't need this useEffects because this would all be in the custom hood. Right? Would you like to have a go at that? Or should I? Yes, you better do it. Could you have a go at that? So could you take this component, 10 second pinger, and make a function, make a file called use numSeconds and just try and extract these few lines into that custom hook. You'll need to do this stuff. You'll need to import all of that at the top of it and just return numSeconds and then try and use it here. Okay. Yeah, so maybe try that on your own. And then we'll do it together in a few minutes' time. See if it works in your browser. Anybody finishes, then either put your actual hand up or do a Zoom hands up. Okay, do you need more time? Or should I just show you? I think you should show us, I'm a bit lost. Oh, okay. Fair enough. Okay, so what I'll do is I'll share my entire screen so you can see it working. I have this idea. So if I go to share, the whole desktop, then you should be able to see my React app up there and my code here. Can you all see both? Yes, yes. Yeah. I don't see anything. Okay, so there we go. And we'll take out the forms and the click target. So we've just got that. Now if I get the console, pop-up console, let me just down here. Yeah, graded the Linux Mint, and it came with Firefox rather than it's thingy, which, okay.

22. Refactoring into a Custom Hook

Short description:

So let's refactor the code and turn it into a custom hook called Use None Seconds. The custom hook is just a function that contains all the code from the previous section. We import all the necessary dependencies except for useRef and return NUMseconds. In the main component, we import the custom hook and use NUMseconds. The code still pings every 10 seconds, indicating that it's still working. Custom hooks are simply functions that start with the word use and contain the code from the original section.

Fine. So let's refactor. Close that, close that, close that. And we've got 10 seconds, and also, to stop those errors in the console, we'll get rid of that. We'll get rid of click target there, and that one. No, I'll do it. So these errors down here, they're quite useful, but also a bit annoying at present. That's fine. Anyhow, so Pinger. So we're taking this part that does none seconds, and we're turning it into a custom hook. So we need to make, first of all, the custom hook files, so we'll just put it in the same directory. And we'll call it Use None Seconds. OK, and we will define a function, maybe like that. OK, so a custom hook is just a function. And it just contains all of this. And I think we need to import all of that stuff at the top, except for useRef. And then we return NUMseconds. So now in this one, what we can do is here. We'll do import useNumSeconds from useNumSeconds. And then we can do const NUMseconds. We'll just use NUMseconds like that. And it says we don't need React in here. One mistake. We may be able to see that. Anyway, anyhow, apart from these stuff, which is defined, but never used, we can see it's still pinging down here every 10 seconds. Maybe I better make it just to be clearer. 10-second delay. I could also log that. Then we can see every 10 seconds, it should get ping, 10, ping. Retains the state somehow. So in about five seconds time, we should see the first ping, there you go. Let's say it's still working. So, we just took all that stuff out of the use of hooks and we literally just copy and paste it into a function that starts with the word use. And then we have a custom hook. Has anybody got a question about that?

23. Custom Hooks and useRef

Short description:

You can name the file with the custom hook code anything you want, but using 'use' in the name is recommended by React to enforce the rules of hooks. React enforces these rules to ensure that hooks are called in the same order every time and not within loops or if statements. The 'useRef' hook can be used to create a reference object that remains unchanged throughout the component's lifetime. This object can be used as a dependency in the 'useEffect' hook to prevent unnecessary re-renders. It is similar to a class property, but can only be used in functional components. If you need to access the entire object within a dependency, you can use a ref to store the object and pass the ref as a dependency. This allows you to compare specific properties within the object to determine when the effect should rerun.

My side does we need to call our file with the custom hook code with use, or we can name it? You can, it would work with any name. But if you don't use use, then React will show you a warning saying, please use use. And the reason is, there are certain rules of hooks. And React enforces the rules of hooks if the function is called a use. And so it tries to make you use that naming convention. The rules of hooks are basically, your hooks cannot be called in a loop or behind an if statement. They've got to be called in the exact same order every time. So here we've got to have use numSeconds first, then useEffect. And there can't be any situation in which those two aren't called in that exact order.

OK, let's stop sharing my screen. OK, so we've done custom hooks. We've done um, so did you, did that stuff about ref make sense? So we did a ref for uncontrolled components, which is what it's really for. But we also talked about using refs to avoid excessive calls to use effects because of the stuff being passed in that was the same new variable representing the same thing, same object or the same function. I bet that wasn't clear, because we did it very quickly and it's quite confusing. So maybe we'll go over that again. Can you see the slides? Yeah, okay. So here we are. So this use ref, it makes an object called last ping, and I think what that rep is meant for, that originally was meant for was putting into these dom nodes to get a reference to the underlying dom node, so that you can pull out the value of form fields and do stuff like that. Often, integrating with legacy libraries that need them. But it does have this useful side effect that this object last ping will never change throughout the whole lifetime of this, of the instance of this component. So you can pass it in as a use effect dependency, and it, whatever you put in it in the current property will not change it. So it won't cause these effects to run again. So that's why we're able to do use it here to check if we were to actually store the last num seconds in there. Whenever we tried to set it on this line here, two lines before the end of the use effect, last ping dot current. If it was just another variable, like a state variable, it would set state last ping. And we set it there then it would cause another re-render and it would all get horribly confused. But because we're using the ref, then it doesn't change and we can just set it there without causing any re-renders or any use effects to run. So it's quite handy for that sort of thing. And if we use the normal variable in the global scope, then that would be carried across between instances of this component. So that wouldn't work either. So that's why you have to use a ref. If that makes sense. So it's almost like a class property, like something that's... It does sound like a class property, exactly. But because it isn't a class, you can't use a class property. Yeah, exactly. Yeah. I can imagine that it could be useful if you use class. If you would. If you were using a class, you can also do that, yes. But also classes don't have this problem, right? Because if we go to the example of a class, here, the component did update. It actually gets the previous props and the previous state provided to it. So you can do all this logic using that, and you don't need to pass anything in in a ref. I mean, the other one is users and things, objects. If you're passing in, if you want to know, for example, if the user, if you've got a user object and you want to know if the user has changed, you can compare you have to compare the user ID, right? Because if you compare the whole user object, if anything about the user changes or the user object's regenerated but stays the same, the effect will run. So you have to only pass in the ID as the dependency. If you want the user effect to run when the user ID changes. And the question then is, how do you get access to the rest of the user? If you're only passing in the ID as the dependency, but you need something else from inside the user, how do you get access to it? And the same answer, you make a ref and you put the user in the ref.current before you run the user effect. And then you can use it, and then you pass the ref in as a dependency. And then you can use the user and the whole user in there. Even though you're only passing in the ID as a dependency, which tells you when it should rerun. Does that, is that extremely confusing? It's quite confusing. I will code it for you in the next 10 minutes. So I'll open up Sublime. Where are we? Here. Right so, let's say I want to compile. Let's get rid of 10 second Ping there as well. And I want to component which outputs user profile. And it changes when the user changes. Okay so we'll make it, we'll call it, not that one, oh yeah, yeah user profile.js. And, get rid of all of body. It's actually not a very good name. Because, it's not user profile, it's the thing that used the, current user profiles show up, okay. It's not a very good name. But there we are. Right, and it expects the prop, which would, we'll do the destructuring. The current user is in props dot current user. And we want to output div, say. And it can contain current user dot profile picture.

24. Using Refs, useCallback, and useMemo

Short description:

We can change the last login when the user ID changes without using a ref. If we want to access the current user inside here, we have to put it in a ref. We can avoid bugs caused by objects or functions representing the same things but being different variables. When passing functions, like onClick, we can use useCallback to prevent it from being regenerated every time the component renders. useMemo can be used for expensive calculations, caching the output and rerunning it only when the dependencies change.

And we want to output div, say. And it can contain current user dot profile picture. Current user dot profile picture, and last login. Which should be in the state. Okay, so we can say const last login, set last login equals useless. Okay, and actually we only wanna show this if they actually did log in. Okay, and what we want is to change the last login if the user ID. Okay, I'm being a bit dim, okay we can do this without a ref. Okay if we change the last login, when the user ID changes, we can do in here, we have to pull out the user ID. And in here we've got user ID, and we will say setLastLogin new day. Oh we need to pass that in as a dependency as well, but that won't change. Right so it says whenever either of these two, this thing won't change, so whenever this one changes we run it, setLastLogin and new date. And then we'll have here lastLogin is the last login. Right, so for this we don't actually need the rest of the user okay. But let's say we did, I'm not sure, I'm having trouble thinking of any reason you might want the user inside this. Let's say we wanted to ping a server okay, so to sort of log that they've logged in. We could say, how do you do it? Fetch mybi-p Ing-log-log-register-login. Okay and what would it be? Methods, posts. Still don't need the user ID. Ah right, but let's say we need something else in the user. Okay, user hash. User.fingerprint, okay, whatever. It's some other property of the user that we need. And behind us we need the whole user. Now we can't just parse in the current user. We can't just parse in the current user as a dependency because we don't know for sure that it's going to be the same object. This is coming from props. The parent component could have regenerated it and then we'd get a new object representing the user which would cause this to rerun and register their login twice. So we need to only parse in things that we know will only change when the user changes i.e their user ID. How do we get access to current user inside here? The answer is we have to put it in a ref. So we can do const currentUserRef equals userRef currentUserRef. Okay, so that defaults it to the current user. We then do currentUserRef.current. Suddenly regressing my naming. Okay, and then we parse that in as well. And then we can use it inside there. And that won't run, because this current ref will never, that object never ever changes, so this will only run when this one changes, so this set target won't change either. Okay, so that's quite useful, because you can get these weird bugs caused by objects representing the same things, or functions that do the same thing, but which are actually different variables. Okay. Another way to avoid them is to use, this is for the opposite situation, when you're passing stuff in, okay? So, when we're passing, let's say we made an onClick. Let's just do something really simple. OnClick equals, function. Right. So, let's say we actually, oh, we can do it like that. We actually don't want this, now, at the moment, this function will re-render, or re-generate. Every time this userPropositor renders, this will be a new function, which means anything inside this div, this, oh, I can find that one, which is checking if this is the same function, will think it's a new function. Now, this could be useEffect, for example. So, if you want it to be, to not change, you can use useCallback. So, you can do const clickHandler equals useCallback. And then we just put the function in there. And, oh, and then that needs a dependency array as well. So, this now is empty. This will never change. This function is always going to be the same function. And then, so this means anything in here that's expecting it to be the same function can do. And if you put in a dependencies in here, whatever, then when they changed, it would become a new function, but not apart from that. Okay, so that's quite a good one. Also for optimization as well, it's quicker if this function's regenerated a lot. We also have useMemo. I'm just sort of going crazy here with this extra stuff. UseMemo, okay. If you've got an expensive thing to do, we can do useMemo, okay? So, I don't know. We say we need for some reason to calculate the next Bitcoin. We do nextBitcoin, oh, no, something expensive, which we would realistically have to do, I don't know, okay? I don't know how to calculate the next, calculate primes, okay, but, you want all the primes between props.start and props.end, okay? I'm imagining there's a function called primes that does that. Okay, that could be a complicated function to run. It could take time, right? So, instead of doing it every single render, you can use useMemo, and like this, it will only run it, oh, and then you need to put the dependencies, like that. It will now only rerun it when the dependency's changed. In the meantime, it will cache the output, so it won't have to run it every render. So that's another good performance thing. memoEyes, it just means it's cached, basically.

QnA

React Q&A

Short description:

Has anyone got any questions? No? Okay, let's do a quick 10-minute React test. Is JSX a string? No, it's a JavaScript function that transpiles to react.createElement. What's the difference between a controlled form component and an uncontrolled form component? Controlled form components keep control over the field value and set it from the state, while uncontrolled form components use refs. What is useEffect for? It's for running code after a render, such as fetching APIs or making changes within the component. The second argument to useEffect is the dependency array, which contains the variables that trigger the effect when they change. Components need to have a capital letter at the beginning for React to recognize them. Including React at the top of a file is necessary because JSX gets transpiled to React.createElement and requires the React library.

I don't know, I kind of think that's enough for an introduction to React session. Has anybody got, So do we actually have no questions at all? Do I have to do a test? Yes. We haven't got any questions, okay. Yeah. Barbara, you ask questions. You look like you've asked questions. You keep putting your hand up and... No, no, no, I was, I was, I was thinking of just saying that it was very good that I really need to go as well. You need to go, okay. Yeah, yeah. I need to go. Thanks very much for coming. Yeah. Well, it was great. Okay, cool. Thank you. So, the rest of us, what can we remember about what we said? Quick impromptu 10 minute react. Test. Is JSX a string? Yes or no. Maybe put it in the chat, what you think. Or thumbs up for yes, thumbs down for no. No, good, so it's not. Okay, so JSX is not a string. Yeah, well done. Thank you, it is. Thanks, Kevin. It is a javascript function, if you recall. Okay, it's short for react.createElement. And it transpiles. So if you use babel, it's turned into that by the babel. If you use typescript, it's turned into that by typescript. Okay. What's the difference between a controlled form component and an uncontrolled form component? Yeah. Yeah. On control you use reps, and it's not very secure like controlled form. Good, yeah, okay. Thank you. So, yeah, so controlled basically is you keep control over the value of the field and set it from the state. What else did we do? Yeah. Hm. Yeah. What is use effect for? Just anything you want. Oh, you've gone on mute again. Sort of due to the component after renders, you could fetch APIs or even conversely just change stuff within the component. Exactly. Anything that happens after a render. Thank you. That's really good. And the second argument to use effect, the dependency array, what goes in there? Yeah. Any dependency that, well, it could be nothing. It doesn't have to exist at all, or it could be any dependency that you want to run the effect on if it changes. Very good. Okay, thank you. So if there's no second argument, the use effect hit runs every single render. If there's an empty second argument, it will only run it once. If there's an empty array, it will run once after the first ender and never again. Otherwise, whatever you put in should be the variables used inside, and whenever they change it will rerun the use effect. Incidentally, you put in an empty array and use stuff inside it, I think a very actual complaint. So if you wanted it to run on the first render only, you still have to put in the dependencies and make sure they don't change. So if the empty array trick only works if it doesn't have any dependencies, I need to confirm that. Very good. Okeydoke. So you said earlier, Alden, that components, they need to have a capital. I think they pretty sure they do have a capital F otherwise React won't recognize them as components. Why do you need to include React at the top of a file when you're using React? Because otherwise it's just JavaScript? Not only that, but yeah, it won't actually work. Because the JSX, it gets transpiled to React.createElement and then some arguments. So if you haven't included React, then it will say, well it would say React is not defined. But it doesn't actually say that. It says you have to include React because it spots it before then. But that's what it would say if it didn't have that to catch.

Custom Hooks and Class Components

Short description:

When using JSX, React must be in scope. To create a custom hook, name it starting with 'use' and include the multi-hook logic inside the function. Return the output of the hook. In class components, the lifecycle methods include componentDidMount, componentDidUpdate, and componentWillUnmount, along with the render method. Converting a class component to a function involves returning the JSX in the render method and using hooks like useState for state management. The props are passed as arguments to the function. Any questions before wrapping up? Thank you all for attending!

So if you're ever using JSX, you need to have React in scope. Okay, how do you make a custom hook? And we'll go back to the demo first. Anybody? You can just name use whatever, and then you just basically just put all of the multi-hook stuff inside that function. Yeah, and then called a function. Lovely, and then return from the function whatever the output of the hook would be. Very nice, okey-doke. Pretty sure that's everything.

Class components. Can you remember the names of the various functions we had in our sample class component? What are they? Kevin's nodding. Sorry, I'm on mute. Are you talking about the lifecycle methods? The lifecycle methods, yeah, and the other methods. There's one other one. We had to put in three lifecycle methods and one other method. I know the lifecycle method. Oh, you know them already. Oh, OK, fine. The other one was called render method, obviously. I forgot the render. Yeah. So we had in the example, we had component didMount, component didUpdate, and component willUnmount. And then we had render. OK. OK, great. Can you tell me how would you convert component from a class to a function? How would you go about it? What's the difference? It's a very difficult question, actually, for the last three minutes. Um, I would. Or, sorry, do you want me to go? Yeah, if you can, yeah. So you would generally return what you would like the JSX that you would want to return in the render method of a class component. And then, all of the state, the start state, is handled with different hooks. So use state. That's basically it. All of the lifecycle methods should be handled with use effect hooks and stuff like that too. Yeah, cool. And then the props would not be in this.props. They would be the arguments to the function. Otherwise, yeah, that's that. OK, great work, guys. OK, we've got three minutes. Has anybody got a burning question to ask? All right, then. Well, shall we wrap it up, then? Thanks very much for coming. And whatever time it is where you are, I hope you enjoy the rest of your morning, stroke, evening, or night, or whatever it is. OK, cheers. Thank you very much. Nice to meet you. Thank you. Thank you. Bye.

Watch more workshops on topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Advanced Conference 2021React Advanced Conference 2021
27 min
(Easier) Interactive Data Visualization in React
Top Content
If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick & easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data & use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time & effort!