From 94d28262b3e4df33c55f733c4b8da642b5bddaae Mon Sep 17 00:00:00 2001 From: Jonathan Dahan Date: Sun, 27 Jan 2019 12:44:54 -0500 Subject: [PATCH 1/3] Update captions for episodes 1-7 --- ...Introduction, Tooling and Editor Setup.vtt | 1805 +++++++++++------ ...ing and Understanding React Components.vtt | 790 ++++---- RFB/03 - Creating our First Components.vtt | 1602 ++++++++++----- RFB/04 - Writing HTML with JSX.vtt | 1140 +++++++---- ...Loading CSS into our React Application.vtt | 397 ++-- ...our application layout with components.vtt | 1301 +++++++++--- RFB/07 - Passing Dynamic data with props.vtt | 1154 +++++++---- 7 files changed, 5559 insertions(+), 2630 deletions(-) diff --git a/RFB/01 - Introduction, Tooling and Editor Setup.vtt b/RFB/01 - Introduction, Tooling and Editor Setup.vtt index 77090c0..0251a85 100755 --- a/RFB/01 - Introduction, Tooling and Editor Setup.vtt +++ b/RFB/01 - Introduction, Tooling and Editor Setup.vtt @@ -1,623 +1,1182 @@ -WEBVTT - -00:00:00.000 --> 00:00:03.000 line:100% position:50% align:middle -♪ [music] ♪ - -00:00:07.000 --> 00:00:09.302 line:100% position:50% align:middle -- [Wes] Before we dive into any code, I -want to make sure that we're all - -00:00:09.302 --> 00:00:12.546 line:100% position:50% align:middle -comfortable with the tools and the files -that we're going to be using. All too - -00:00:12.546 --> 00:00:15.873 line:100% position:50% align:middle -often, you pick up a project and they just -sort of dump a GitHub repo full of files - -00:00:15.873 --> 00:00:20.353 line:100% position:50% align:middle -in your lap and you really aren't sure -where to start, so let's run through all - -00:00:20.353 --> 00:00:24.940 line:100% position:50% align:middle -the things that you need to be up and -running. First of all, we need Node.js, - -00:00:24.940 --> 00:00:28.980 line:100% position:50% align:middle -and while we're not doing any server-side -programming, all the tooling that you use - -00:00:28.980 --> 00:00:31.050 line:100% position:50% align:middle -to work with React is done in Node - -00:00:31.050 --> 00:00:36.060 line:100% position:50% align:middle -so head on over to nodejs.org and -download the latest, current version. - -00:00:36.060 --> 00:00:40.363 line:100% position:50% align:middle -If you don't know if you have Node -installed or not, go to your terminal and - -00:00:40.363 --> 00:00:45.540 line:100% position:50% align:middle -just type "node -v" and that will tell you -what version of Node you have installed. - -00:00:45.540 --> 00:00:49.850 line:100% position:50% align:middle -So if it's anything less than 6, I would -probably just head on over to Node.js and - -00:00:49.850 --> 00:00:54.944 line:100% position:50% align:middle -re-download this, go through the installer -and you'll be up and running. We also - -00:00:54.944 --> 00:00:59.852 line:100% position:50% align:middle -need React DevTools and this is available -both for Chrome as well as Firefox. And - -00:00:59.852 --> 00:01:03.240 line:100% position:50% align:middle -what React DevTools are going to allow us -to do is we're going to be able to look at - -00:01:03.240 --> 00:01:07.340 line:100% position:50% align:middle -the components and the state and the props -and all of the good stuff that's related - -00:01:07.340 --> 00:01:11.910 line:100% position:50% align:middle -to React, and it just adds another -tab to our regular DevTool. So - -00:01:11.910 --> 00:01:17.540 line:100% position:50% align:middle -that is for sure required on either Chrome -or Firefox, whatever one you're using. - -00:01:17.540 --> 00:01:20.528 line:100% position:50% align:middle -Next up, we're going to be writing -something called JSX, as well as we're - -00:01:20.528 --> 00:01:24.009 line:100% position:50% align:middle -going to be writing a lot of -JavaScript as an ES6, which is - -00:01:24.009 --> 00:01:26.485 line:100% position:50% align:middle -the latest version of JavaScript. - -00:01:26.485 --> 00:01:31.540 line:100% position:50% align:middle -So in order to have, like, the best syntax -highlighting both for ES6 as well as for - -00:01:31.540 --> 00:01:35.160 line:100% position:50% align:middle -JSX, which is sort of like writing -HTML inside your JavaScript, - -00:01:35.160 --> 00:01:39.810 line:100% position:50% align:middle -we're going to learn all about that in -this course, we need a highlighter for - -00:01:39.810 --> 00:01:44.900 line:100% position:50% align:middle -your actual editor. So on Sublime Text, -which is what I'm going to be using in - -00:01:44.900 --> 00:01:48.830 line:100% position:50% align:middle -this tutorial here, there's one called -Babel, and what that will do is when you - -00:01:48.830 --> 00:01:53.503 line:100% position:50% align:middle -open up one of your JavaScript files, in -the bottom right-hand corner, - -00:01:53.503 --> 00:01:58.965 line:100% position:50% align:middle -it should say JavaScript (Babel). So if -it just says JavaScript after you have - -00:01:58.965 --> 00:02:06.220 line:100% position:50% align:middle -gone to the package control, and type -"install package", and type "install Babel". - -00:02:06.220 --> 00:02:10.104 line:100% position:50% align:middle -I'll let you figure that out, there's -tutorials on how to install a - -00:02:10.104 --> 00:02:13.430 line:100% position:50% align:middle -package in Sublime online. - -00:02:13.430 --> 00:02:18.290 line:100% position:50% align:middle -Go to JavaScript, in the bottom right-hand -corner make sure you're in a .js file, - -00:02:18.290 --> 00:02:22.460 line:100% position:50% align:middle -any file will do. Open all with current -extension, and then just hunt through this - -00:02:22.460 --> 00:02:27.820 line:100% position:50% align:middle -list for actual Babel, and then you will -be able to see JavaScript (Babel). - -00:02:27.820 --> 00:02:31.000 line:100% position:50% align:middle -It's just off my screen here, but -you can grab it from there and - -00:02:31.000 --> 00:02:35.157 line:100% position:50% align:middle -that will just give us all of the syntax -highlighting we need for ES6 as well as - -00:02:35.157 --> 00:02:40.140 line:100% position:50% align:middle -JSX. If you're using Atom, just go and -grab the React package for you there. - -00:02:40.140 --> 00:02:45.860 line:100% position:50% align:middle -If you're using Vim, go and grab vim-jsx, -and pretty much all of the other editors - -00:02:45.860 --> 00:02:50.597 line:100% position:50% align:middle -out there have some sort of -support for ES6 as well as JSX. - -00:02:50.597 --> 00:02:56.170 line:100% position:50% align:middle -Next thing we need is a console or a -terminal window. We're not going to be - -00:02:56.170 --> 00:03:00.380 line:100% position:50% align:middle -doing a whole lot in the terminal window, -but in order for us to start and stop all - -00:03:00.380 --> 00:03:06.730 line:100% position:50% align:middle -of our actual Webpack processes and deploy -this thing, we're going to be running some - -00:03:06.730 --> 00:03:08.320 line:100% position:50% align:middle -commands in our terminal. - -00:03:08.320 --> 00:03:14.110 line:100% position:50% align:middle -So on OS X there is a terminal built in. I -use something called iTerm 2, - -00:03:14.110 --> 00:03:17.680 line:100% position:50% align:middle -as well as there's another one called -HyperTerm, which is gaining a lot of - -00:03:17.680 --> 00:03:22.800 line:100% position:50% align:middle -popularity, you can grab that one. If -you're on Windows, I definitely recommend - -00:03:22.800 --> 00:03:28.164 line:100% position:50% align:middle -that you go grab this one called cmder, -C-M-D-E-R, and what that will do is it - -00:03:28.164 --> 00:03:31.534 line:100% position:50% align:middle -just give you, like, some nice -highlighting here, and it's already set up - -00:03:31.534 --> 00:03:34.030 line:100% position:50% align:middle -for a lot of the stuff that -we're going to be doing. - -00:03:34.030 --> 00:03:37.690 line:100% position:50% align:middle -You can use the default windows terminal -if you know what you're doing there, - -00:03:37.690 --> 00:03:41.160 line:100% position:50% align:middle -but if you want some nicer highlighting, -go and grab cmder, so - -00:03:41.160 --> 00:03:45.830 line:100% position:50% align:middle -those are all the tools that we need to -have everything up and running. - -00:03:45.830 --> 00:03:48.120 line:100% position:50% align:middle -Let's jump into learning some code. - -00:03:48.120 --> 00:03:51.750 line:100% position:50% align:middle -If you log into your account on -reactforbeginners.com/account, - -00:03:51.750 --> 00:03:56.210 line:100% position:50% align:middle -you're going to see access to your actual -course here. What I want you to do is hop - -00:03:56.210 --> 00:03:59.240 line:100% position:50% align:middle -on over to the starter files -button that we see here - -00:03:59.240 --> 00:04:01.332 line:100% position:50% align:middle -and download these starter files. - -00:04:01.332 --> 00:04:04.450 line:100% position:50% align:middle -Now, when you open that up, you're going -to see two folders. There's one called - -00:04:04.450 --> 00:04:08.550 line:100% position:50% align:middle -catch-of-the-day, and that's where we're -going to be working out of for the entire - -00:04:08.550 --> 00:04:11.380 line:100% position:50% align:middle -course. And then there's another -folder called stepped-solutions, - -00:04:11.380 --> 00:04:15.522 line:100% position:50% align:middle -that's going to contain all of the -stepped code that we write throughout the - -00:04:15.522 --> 00:04:19.850 line:100% position:50% align:middle -videos. Not every video is going to have -code that is significant enough that we're - -00:04:19.850 --> 00:04:23.928 line:100% position:50% align:middle -going to put it in there, but sometimes if -you get, maybe on video six or something, - -00:04:23.928 --> 00:04:27.230 line:100% position:50% align:middle -you get a little sidetracked and -you're not sure what went on. - -00:04:27.230 --> 00:04:30.470 line:100% position:50% align:middle -You want to get back up to speed with -where the videos are, you can go into - -00:04:30.470 --> 00:04:33.671 line:100% position:50% align:middle -stepped-solution, grab that code, and -bring it back into your catch-of-the-day - -00:04:33.671 --> 00:04:36.487 line:100% position:50% align:middle -folder. So again, we're -only ever going to - -00:04:36.487 --> 00:04:39.219 line:100% position:50% align:middle -be working out of -the catch-of-the-day folder. - -00:04:39.219 --> 00:04:44.119 line:100% position:50% align:middle -What we need to do is go to this folder in -our terminal. Now if you aren't really - -00:04:44.119 --> 00:04:48.074 line:100% position:50% align:middle -that comfortable moving around in the -terminal, one little trick you can do is - -00:04:48.074 --> 00:04:52.768 line:100% position:50% align:middle -you type "cd ", and just drag -and drop the folder into your terminal. - -00:04:52.768 --> 00:04:57.500 line:100% position:50% align:middle -And what that's going to do is it's -going to complete the actual path for that - -00:04:57.500 --> 00:05:02.370 line:100% position:50% align:middle -folder, and then you should be in the -catch-of-the-day folder here. - -00:05:02.370 --> 00:05:07.050 line:100% position:50% align:middle -Now in order to actually use React, -because we're going to be using React, - -00:05:07.050 --> 00:05:09.960 line:100% position:50% align:middle -we're going to be using a couple other -modules in here, we're going to be - -00:05:09.960 --> 00:05:14.057 line:100% position:50% align:middle -bundling all of our code, we need -something that's called a module bundler. - -00:05:14.057 --> 00:05:19.605 line:100% position:50% align:middle -And what that will do is, rather -than us go into our HTML file... - -00:05:19.605 --> 00:05:23.025 line:100% position:50% align:middle -- [Wes] Folks, quick interruption! In this -video tutorial, you'll mostly see me - -00:05:23.025 --> 00:05:26.820 line:100% position:50% align:middle -referencing index.html right -inside of the catch-of-the-day. - -00:05:26.820 --> 00:05:31.514 line:100% position:50% align:middle -However, Create React App and React -Scripts, they have moved that to a public - -00:05:31.514 --> 00:05:35.980 line:100% position:50% align:middle -folder, which you could also put images -and any other CSS that you'd like to have - -00:05:35.980 --> 00:05:40.717 line:100% position:50% align:middle -public so it doesn't matter, because -we're not editing index.html at all, - -00:05:40.717 --> 00:05:44.173 line:100% position:50% align:middle -however, if you're just wondering, like, -"where's index.html? It's in the sidebar - -00:05:44.173 --> 00:05:47.758 line:100% position:50% align:middle -for him, but not for me!" It's -because it's in your public folder. - -00:05:47.758 --> 00:05:49.470 line:100% position:50% align:middle -That's it, continue on. - -00:05:49.470 --> 00:05:58.346 line:100% position:50% align:middle -- ...and go into our script tag here, and -say script, source equals react.js, - -00:05:58.346 --> 00:06:00.906 line:100% position:50% align:middle -and then like react-dom.js. - -00:06:00.906 --> 00:06:04.310 line:100% position:50% align:middle -And you know how you would do this with -jQuery and all of your plugins? - -00:06:04.310 --> 00:06:08.360 line:100% position:50% align:middle -Rather than popping in a new script tag -every time that we need a dependency, - -00:06:08.360 --> 00:06:13.080 line:100% position:50% align:middle -what we're going to be doing is we're -writing all of our code in this index.js - -00:06:13.080 --> 00:06:16.433 line:100% position:50% align:middle -as well as in all the components that were -going to be created. And we're going to - -00:06:16.433 --> 00:06:20.829 line:100% position:50% align:middle -import all of the libraries as we will -need it, so we'll import React, - -00:06:20.829 --> 00:06:24.138 line:100% position:50% align:middle -we're going to import -react-dom and any of the - -00:06:24.138 --> 00:06:26.187 line:100% position:50% align:middle -other modules that we actually need. - -00:06:26.187 --> 00:06:30.497 line:100% position:50% align:middle -Now, in order to actually work with this, -we need something called a module bundler, - -00:06:30.497 --> 00:06:33.655 line:100% position:50% align:middle -and that's going to take all of our -JavaScript files and deal with the imports - -00:06:33.655 --> 00:06:38.630 line:100% position:50% align:middle -and the exports, and just pack it into -this one, nice and tidy JavaScript file. - -00:06:38.630 --> 00:06:42.556 line:100% position:50% align:middle -And in order to do that, we need a -bundler, and the most popular one with - -00:06:42.556 --> 00:06:47.410 line:100% position:50% align:middle -working with React is called Webpack. Now -there are other ES module bundlers out - -00:06:47.410 --> 00:06:51.300 line:100% position:50% align:middle -there, there's Browserify, and SystemJS, -and Rollup, and you're welcome to use - -00:06:51.300 --> 00:06:55.130 line:100% position:50% align:middle -other ones if that's what you prefer, but -it seems to be that the React community - -00:06:55.130 --> 00:06:59.142 line:100% position:50% align:middle -has sort of settled on using Webpack to -bundle all of their JavaScript. - -00:06:59.142 --> 00:07:03.651 line:100% position:50% align:middle -And behind the scenes, we are going to be -using something called Create React App, - -00:07:03.651 --> 00:07:08.640 line:100% position:50% align:middle -so Facebook actually released this just a -couple months ago and it really simplifies - -00:07:08.640 --> 00:07:12.290 line:100% position:50% align:middle -all of the tooling that you need to get up -and running. If you've ever tried to - -00:07:12.290 --> 00:07:16.030 line:100% position:50% align:middle -create your own Webpack file, you -know that it's just not possible. - -00:07:16.030 --> 00:07:20.330 line:100% position:50% align:middle -It's a really tough thing to deal with -and it just gets in the way. - -00:07:20.330 --> 00:07:23.430 line:100% position:50% align:middle -Like, we just want to learn React here, we -don't want to have to deal with, - -00:07:23.430 --> 00:07:28.210 line:100% position:50% align:middle -like, files and files of configuration, -and setup, and Babel and all of that good - -00:07:28.210 --> 00:07:32.179 line:100% position:50% align:middle -stuff. So what we use behind the -scenes is called Create React App, - -00:07:32.179 --> 00:07:36.793 line:100% position:50% align:middle -and that uses Webpack behind -the scenes for us. In a later video, - -00:07:36.793 --> 00:07:39.850 line:100% position:50% align:middle -I'm going to show you how you -can eject from Create React App, - -00:07:39.850 --> 00:07:44.886 line:100% position:50% align:middle -and then you can get access to all the -nitty-gritty details of your Webpack - -00:07:44.886 --> 00:07:49.212 line:100% position:50% align:middle -setup. So, in order to get up -and running with that, we've got a - -00:07:49.212 --> 00:07:53.760 line:100% position:50% align:middle -package.json here, and this just contains -all of the stuff that we need to actually - -00:07:53.760 --> 00:07:57.814 line:100% position:50% align:middle -build our application right here. We've -got `history,` and `react-router,` - -00:07:57.814 --> 00:07:59.879 line:100% position:50% align:middle -and `react-dom` and all that good stuff - -00:07:59.879 --> 00:08:04.030 line:100% position:50% align:middle -and then we've also got a couple dev -dependencies here, one of them being - -00:08:04.030 --> 00:08:07.860 line:100% position:50% align:middle -`react-scripts,` which is what -Create React App uses for us. So - -00:08:07.860 --> 00:08:12.474 line:100% position:50% align:middle -we want to go to our iTerm here, and we -are in the catch-of-the-day folder, and - -00:08:12.474 --> 00:08:18.410 line:100% position:50% align:middle -we simply type "npm install". And this is -going to read all of the dependencies that - -00:08:18.410 --> 00:08:22.680 line:100% position:50% align:middle -we need from `devDependencies` and our -`dependencies` here. It's going to go off, - -00:08:22.680 --> 00:08:25.497 line:100% position:50% align:middle -fetch them and install them to -us, so I'm just going to pause it - -00:08:25.497 --> 00:08:27.502 line:100% position:50% align:middle -here a sec while we -do that so after, - -00:08:27.502 --> 00:08:30.020 line:100% position:50% align:middle -I don't know, a minute or so -it installed all that stuff. - -00:08:30.020 --> 00:08:34.460 line:100% position:50% align:middle -A whole bunch of stuff streamed across the -screen. One thing that people ask me all - -00:08:34.460 --> 00:08:37.400 line:100% position:50% align:middle -the time, is they open up their -`node_modules`, and they go "Holy shit, - -00:08:37.400 --> 00:08:41.540 line:100% position:50% align:middle -Wes, what's going on?" These are all the -dependencies that you need, - -00:08:41.540 --> 00:08:44.280 line:100% position:50% align:middle -as well as your dependencies need, and -their dependencies and their - -00:08:44.280 --> 00:08:48.846 line:100% position:50% align:middle -dependencies. Don't worry about -it, it's not anything not normal. - -00:08:48.846 --> 00:08:53.170 line:100% position:50% align:middle -I know it seems like a lot of stuff going -on here, but that's just how the front-end - -00:08:53.170 --> 00:08:56.499 line:100% position:50% align:middle -ecosystem works right now so if -you see a lot of stuff in here, - -00:08:56.499 --> 00:08:58.632 line:100% position:50% align:middle -don't worry about it. Just close -up your `node_modules`. - -00:08:58.632 --> 00:09:01.534 line:100% position:50% align:middle -You're never going to have to edit -anything actually inside of - -00:09:01.534 --> 00:09:03.071 line:100% position:50% align:middle -that `node_modules` folder. - -00:09:03.071 --> 00:09:08.180 line:100% position:50% align:middle -Now that we've installed it, we can go -ahead and actually start our Create React - -00:09:08.180 --> 00:09:11.970 line:100% position:50% align:middle -App. And what that's going to do is that's -going to bundle our JavaScript for us, - -00:09:11.970 --> 00:09:17.920 line:100% position:50% align:middle -as well as fire up a little server for us, -where any time we make a change to our - -00:09:17.920 --> 00:09:22.170 line:100% position:50% align:middle -JavaScript or any time we make a change -to our CSS, it's going to automatically - -00:09:22.170 --> 00:09:26.523 line:100% position:50% align:middle -reload that for us. So the way that we -run that, and if you look at your - -00:09:26.523 --> 00:09:29.809 line:100% position:50% align:middle -package.json, we've got -a couple scripts here. And - -00:09:29.809 --> 00:09:34.580 line:100% position:50% align:middle -the one that we're really just going -to be working with is `npm start` - -00:09:34.580 --> 00:09:38.380 line:100% position:50% align:middle -and that's going to run this start -command for us as well. However, - -00:09:38.380 --> 00:09:42.680 line:100% position:50% align:middle -I've got some other ones called `watch`, -which is going to run our start command as - -00:09:42.680 --> 00:09:46.570 line:100% position:50% align:middle -well as watch our styles. When we -get into the animation video, - -00:09:46.570 --> 00:09:49.300 line:100% position:50% align:middle -we're going to learn about how -do we actually watch our styles, - -00:09:49.300 --> 00:09:54.293 line:100% position:50% align:middle -as well as watch our JavaScript from -re-running. And then there's `build` and - -00:09:54.293 --> 00:09:58.270 line:100% position:50% align:middle -`eject`, which are going to -go in later videos as well - -00:09:58.270 --> 00:10:02.026 line:100% position:50% align:middle -so, how do we run that? We -simply just run npm start, - -00:10:02.026 --> 00:10:07.420 line:100% position:50% align:middle -and that's going to kick off, and look, it -just opens up a brand new blank window for - -00:10:07.420 --> 00:10:11.880 line:100% position:50% align:middle -me, but you're not going to see -anything on this actual page here, - -00:10:11.880 --> 00:10:16.430 line:100% position:50% align:middle -and that's because we haven't written any -React yet. But we know that this - -00:10:16.430 --> 00:10:20.870 line:100% position:50% align:middle -localhost:3000, that is where it is -actually running, and anytime we make a - -00:10:20.870 --> 00:10:25.991 line:100% position:50% align:middle -save to this file... If I go to my -index.js, and I just say alert - -00:10:25.991 --> 00:10:29.533 line:100% position:50% align:middle -(yeah!) let's get going, give it -a save. You'll see that - -00:10:29.533 --> 00:10:32.009 line:100% position:50% align:middle -localhost:3000... I didn't even refresh. - -00:10:32.009 --> 00:10:37.215 line:100% position:50% align:middle -It just automatically refreshed it for me, -and that JavaSript was up and running - -00:10:37.215 --> 00:10:40.842 line:100% position:50% align:middle -so let's go on to the next video, -where we actually learn how - -00:10:40.842 --> 00:10:42.600 line:100% position:50% align:middle -to start writing some React. +WEBVTT + +1 +00:00:00.146 --> 00:00:02.729 +(upbeat music) + +2 +00:00:07.000 --> 00:00:08.939 +Hello everybody, Wes Bos here thanks so much for + +3 +00:00:08.939 --> 00:00:11.420 +checking out react for beginners, hopefully you're + +4 +00:00:11.420 --> 00:00:14.210 +pretty excited to start learning react. + +5 +00:00:14.210 --> 00:00:16.280 +There's a couple things we need to do in order to get + +6 +00:00:16.280 --> 00:00:19.250 +setup with all the tooling and editor highlighting + +7 +00:00:19.250 --> 00:00:22.010 +and whatnot so this is a pretty important video to + +8 +00:00:22.010 --> 00:00:24.220 +make sure that we don't hit any bumps down the road. + +9 +00:00:24.220 --> 00:00:26.950 +So first let's talk about tooling, what tools do we need? + +10 +00:00:26.950 --> 00:00:29.920 +First you need to do is make sure that you have Node JS + +11 +00:00:29.920 --> 00:00:31.430 +installed on your computer. + +12 +00:00:31.430 --> 00:00:34.870 +Well we're not actually using Node as a back end service + +13 +00:00:34.870 --> 00:00:37.910 +or server or anything like that, we are using Node JS + +14 +00:00:37.910 --> 00:00:40.442 +to run all of the tooling that is required for + +15 +00:00:40.442 --> 00:00:43.170 +developing locally on our computer. + +16 +00:00:43.170 --> 00:00:45.680 +So if you do not have Node JS installed or if you're + +17 +00:00:45.680 --> 00:00:48.690 +on a older version of Node JS, and the way you can + +18 +00:00:48.690 --> 00:00:51.620 +test that is you go to your terminal and just type in + +19 +00:00:51.620 --> 00:00:54.622 +Node space - V, and that will tell you what + +20 +00:00:54.622 --> 00:00:56.110 +version of Node you're on. + +21 +00:00:56.110 --> 00:00:59.010 +And so if you get an error like Node is not a command + +22 +00:00:59.010 --> 00:01:01.583 +or you see a version that is maybe a couple versions + +23 +00:01:01.583 --> 00:01:06.334 +behind what is the most recent current version on nodejs.org + +24 +00:01:06.334 --> 00:01:08.165 +then go ahead and just download this. + +25 +00:01:08.165 --> 00:01:10.270 +You click next, next, next and it will + +26 +00:01:10.270 --> 00:01:11.960 +install it to your computer. + +27 +00:01:13.760 --> 00:01:16.650 +Next what we need is the react dev tools for either + +28 +00:01:16.650 --> 00:01:20.180 +Chrome or Firefox, and all you need to do is just + +29 +00:01:20.180 --> 00:01:23.631 +search react dev tools+chrome or +firefox and go ahead + +30 +00:01:23.631 --> 00:01:25.450 +and add those to Chrome. + +31 +00:01:25.450 --> 00:01:27.280 +They way you can tell if they are working is that + +32 +00:01:27.280 --> 00:01:30.060 +you need to go to a website that has react on it. + +33 +00:01:30.060 --> 00:01:33.730 +So often I get emails from people where we have this + +34 +00:01:33.730 --> 00:01:36.370 +index.js, and we'll just call it the log hey + +35 +00:01:36.370 --> 00:01:37.890 +and make sure that it's working. + +36 +00:01:37.890 --> 00:01:40.710 +Well it's not going to show up on this at this point + +37 +00:01:40.710 --> 00:01:43.970 +because we don't have react installed on this app yet, + +38 +00:01:43.970 --> 00:01:45.030 +so it won't show up. + +39 +00:01:45.030 --> 00:01:47.056 +So what I like to tell people to do is go over to + +40 +00:01:47.056 --> 00:01:52.056 +Instagram.com or Netflix or Facebook or any application + +41 +00:01:52.960 --> 00:01:55.670 +that is built on react and just open up your dev tools + +42 +00:01:55.670 --> 00:01:59.230 +and you should see a new tab, it's usually at the end here, + +43 +00:01:59.230 --> 00:02:02.270 +you can drag and drop if you wanna go higher in the + +44 +00:02:02.270 --> 00:02:05.760 +order here, and you should see the new react tab + +45 +00:02:05.760 --> 00:02:08.570 +and that will show you your actual application + +46 +00:02:08.570 --> 00:02:12.410 +as react sees it not as the rendered dom output. + +47 +00:02:12.410 --> 00:02:15.560 +And that's gonna be really helpful for us as we + +48 +00:02:15.560 --> 00:02:17.540 +move along through our application. + +49 +00:02:19.120 --> 00:02:22.630 +What we also need is a terminal and if you are on + +50 +00:02:22.630 --> 00:02:26.560 +Windows I recommend you go ahead and grab commander CDMDER + +51 +00:02:26.560 --> 00:02:29.370 +and that will just give you some nicer syntax highlighting. + +52 +00:02:29.370 --> 00:02:33.710 +I am on a Mac for this series so I use one called Hyper + +53 +00:02:33.710 --> 00:02:36.940 +however there is a terminal built into OS X. + +54 +00:02:36.940 --> 00:02:41.228 +It will be under your utilities folder and + +55 +00:02:41.228 --> 00:02:44.060 +jump, jump, jump, you see it's right there, + +56 +00:02:44.060 --> 00:02:46.145 +I'm trying to scroll it into view. + +57 +00:02:46.145 --> 00:02:48.580 +You get the point it's that little one right there. + +58 +00:02:48.580 --> 00:02:52.010 +Or just open up your, what is it, your command space + +59 +00:02:52.010 --> 00:02:54.580 +and type on terminal and you'll see a terminal + +60 +00:02:54.580 --> 00:02:55.540 +window pop open. + +61 +00:02:55.540 --> 00:02:57.737 +We're not going to be doing a whole lot with that but + +62 +00:02:57.737 --> 00:03:01.590 +we do need that to start all of our different tooling. + +63 +00:03:01.590 --> 00:03:05.560 +If you're curious as to what these color schemes are + +64 +00:03:05.560 --> 00:03:09.130 +or how I got the git in my thing right here + +65 +00:03:09.130 --> 00:03:12.050 +or any of the colors or the font or anything that I use, + +66 +00:03:12.050 --> 00:03:14.971 +what kind of toilet paper I use, you can go to + +67 +00:03:14.971 --> 00:03:19.971 +wesbos.com/uses and this is just detailing all of the + +68 +00:03:20.002 --> 00:03:22.360 +different little things that I use. + +69 +00:03:22.360 --> 00:03:25.038 +From what font I use to the different emoji pickers that + +70 +00:03:25.038 --> 00:03:27.410 +everyone seems to ask about. + +71 +00:03:27.410 --> 00:03:30.820 +If it's not on there feel free to tweet me I'm @wesbos + +72 +00:03:30.820 --> 00:03:32.535 +and that should help you out. + +73 +00:03:32.535 --> 00:03:34.640 +That is it. + +74 +00:03:34.640 --> 00:03:37.360 +For your text editor, you can use any text editor that + +75 +00:03:37.360 --> 00:03:38.450 +you're comfortable with. + +76 +00:03:38.450 --> 00:03:42.330 +I am using Visual Studio code in this one but you can use + +77 +00:03:42.330 --> 00:03:46.550 +Atom or Sublime or WebStorm, whatever editor that + +78 +00:03:46.550 --> 00:03:47.700 +you're most comfortable in. + +79 +00:03:47.700 --> 00:03:50.000 +The thing that you need to know about this is + +80 +00:03:50.000 --> 00:03:53.510 +if you're using Sublime text, and I just popped it open here + +81 +00:03:53.510 --> 00:03:55.790 +you need to make sure that you have the java script babel + +82 +00:03:55.790 --> 00:03:58.590 +highlighter or java script babble highlighter and + +83 +00:03:58.590 --> 00:04:01.480 +not the default java script highlighter because there is + +84 +00:04:01.480 --> 00:04:05.640 +some extended syntax highlighting in something called + +85 +00:04:05.640 --> 00:04:09.240 +jsx that we're going to need, and it just won't + +86 +00:04:09.240 --> 00:04:12.820 +look very nice, it just will kind of get in your way + +87 +00:04:12.820 --> 00:04:13.653 +if you don't have it. + +88 +00:04:13.653 --> 00:04:16.050 +So the way you can do that is you can just open this up, + +89 +00:04:16.050 --> 00:04:20.570 +type install and you'll see package control, install package + +90 +00:04:20.570 --> 00:04:25.060 +and then from that you'll be able to find one called, + +91 +00:04:25.060 --> 00:04:27.390 +I think it's just called babel, let me just find it. + +92 +00:04:27.390 --> 00:04:31.640 +List, packages, babel, yeah it looks like this. + +93 +00:04:31.640 --> 00:04:34.220 +Syntax definitions for esx javascript with + +94 +00:04:34.220 --> 00:04:37.740 +react jsx extensions and then once you're in there + +95 +00:04:37.740 --> 00:04:41.230 +you click on this one in the corner, and you click + +96 +00:04:41.230 --> 00:04:44.010 +open all with current extension, triple check + +97 +00:04:44.010 --> 00:04:48.290 +you're in a .js file, open all with current extension as, + +98 +00:04:48.290 --> 00:04:50.830 +find the one that says babel and then click on the one, + +99 +00:04:50.830 --> 00:04:52.640 +I know you can't see this right now but it says + +100 +00:04:52.640 --> 00:04:56.377 +javascript, brackets babel and that will make sure that + +101 +00:04:56.377 --> 00:04:58.880 +your syntax highlighting no matter what file you're + +102 +00:04:58.880 --> 00:05:01.540 +opening is up to snuff. + +103 +00:05:01.540 --> 00:05:02.600 +So what do we got here? + +104 +00:05:02.600 --> 00:05:05.300 +We got the text editor, we did the terminal. + +105 +00:05:05.300 --> 00:05:07.170 +Let's talk about the step solutions. + +106 +00:05:07.170 --> 00:05:10.030 +So log into your course dashboard and you're gonna see that + +107 +00:05:10.030 --> 00:05:13.740 +your course is listed here, and then you're going to see + +108 +00:05:13.740 --> 00:05:16.580 +a link that says starter files. + +109 +00:05:16.580 --> 00:05:18.590 +Click on that and that's going to link you off to my + +110 +00:05:18.590 --> 00:05:20.810 +github where I host all of the starter files + +111 +00:05:20.810 --> 00:05:23.250 +and the step solutions to this course. + +112 +00:05:23.250 --> 00:05:24.630 +So there's gonna be two folders. + +113 +00:05:24.630 --> 00:05:26.840 +There's gonna be one called catch of the day, + +114 +00:05:26.840 --> 00:05:31.340 +and that's going to include, that's our starter file + +115 +00:05:31.340 --> 00:05:33.580 +for working, there's not much in there when we start + +116 +00:05:33.580 --> 00:05:35.270 +because we're going to be building it all together + +117 +00:05:35.270 --> 00:05:37.150 +but that's where we're gonna be working out of + +118 +00:05:37.150 --> 00:05:38.600 +for the entire course. + +119 +00:05:38.600 --> 00:05:40.950 +So that's your sort of home folder. + +120 +00:05:40.950 --> 00:05:43.100 +If you're gonna bookmark a folder on your computer + +121 +00:05:43.100 --> 00:05:44.360 +that's going to be it. + +122 +00:05:44.360 --> 00:05:46.800 +However there is another one called step solutions + +123 +00:05:46.800 --> 00:05:50.140 +and inside of step solutions there's gonna be a folder + +124 +00:05:50.140 --> 00:05:53.590 +that corresponds with the start of every video. + +125 +00:05:53.590 --> 00:05:57.420 +And I'll say that again, these folders here, like 16, + +126 +00:05:57.420 --> 00:06:00.720 +that corresponds with the start of folder 16, + +127 +00:06:00.720 --> 00:06:02.120 +or video 16. + +128 +00:06:02.120 --> 00:06:05.590 +So if you are having trouble in say, video 15, + +129 +00:06:05.590 --> 00:06:08.590 +and you want to make sure that you're exactly where I am + +130 +00:06:08.590 --> 00:06:12.170 +in video 16 and you want to go forward with the + +131 +00:06:12.170 --> 00:06:14.420 +exact same code that I'm working with than you can go + +132 +00:06:14.420 --> 00:06:18.280 +ahead and grab out the changes from video 16. + +133 +00:06:18.280 --> 00:06:21.620 +So you just copy paste those out of whatever corresponding + +134 +00:06:21.620 --> 00:06:23.718 +one, overwrite any files that you have + +135 +00:06:23.718 --> 00:06:27.280 +and then you'll be in catch of the day, + +136 +00:06:27.280 --> 00:06:30.180 +you'll be up and running with what I have. + +137 +00:06:31.060 --> 00:06:34.630 +Now in the catch of the day folder we do need to + +138 +00:06:34.630 --> 00:06:36.270 +install some of our dependencies. + +139 +00:06:36.270 --> 00:06:39.160 +So what I recommend to people is open up the catch of + +140 +00:06:39.160 --> 00:06:42.330 +the day folder in your editor and then also open it up + +141 +00:06:42.330 --> 00:06:43.650 +in your terminal. + +142 +00:06:43.650 --> 00:06:46.910 +Now if you're having trouble finding where that is, + +143 +00:06:46.910 --> 00:06:49.180 +what I recommended to people is that you just type + +144 +00:06:49.180 --> 00:06:52.390 +cd space, and then open up either your windows + +145 +00:06:52.390 --> 00:06:55.610 +explorer or your finder in OS X, + +146 +00:06:55.610 --> 00:06:58.470 +find the folder that you have, and the just go ahead + +147 +00:06:58.470 --> 00:07:01.280 +and just drag and drop that in there and that's gonna + +148 +00:07:01.280 --> 00:07:04.830 +complete the long path of wherever it is in the + +149 +00:07:04.830 --> 00:07:06.280 +bowels of your computer. + +150 +00:07:06.280 --> 00:07:08.870 +And then hit enter and that will bring you to the + +151 +00:07:08.870 --> 00:07:12.310 +actual catch of the day folder that we're trying to look at. + +152 +00:07:12.310 --> 00:07:15.970 +One thing I will say is that make sure you don't have any + +153 +00:07:15.970 --> 00:07:20.970 +weird characters anywhere along the path to your folder. + +154 +00:07:21.600 --> 00:07:26.400 +So sometimes people put dashes or parentheses or emojis + +155 +00:07:26.400 --> 00:07:29.680 +or stars, I don't know all kinds of weird characters, + +156 +00:07:29.680 --> 00:07:33.030 +and that will for sure screw up the file watching + +157 +00:07:33.030 --> 00:07:35.710 +where when we make a change it's gonna automatically + +158 +00:07:35.710 --> 00:07:37.180 +reload the change. + +159 +00:07:37.180 --> 00:07:39.759 +If that's not working it's likely because you have a weird + +160 +00:07:39.759 --> 00:07:43.760 +character in one of your folders along the way. + +161 +00:07:43.760 --> 00:07:46.110 +And that also goes for renaming folders. + +162 +00:07:46.110 --> 00:07:48.640 +If you rename it halfway through that will likely goof + +163 +00:07:48.640 --> 00:07:52.120 +it up so keep things exactly the same as we have here. + +164 +00:07:52.120 --> 00:07:54.850 +Now in your catch of the day folder open up your + +165 +00:07:54.850 --> 00:07:57.450 +package .json, and the package .json, if you've never + +166 +00:07:57.450 --> 00:08:01.270 +seen one what I'm gonna do here is an nmp install + +167 +00:08:01.270 --> 00:08:03.950 +so if you know what that is you can skip this whole section + +168 +00:08:03.950 --> 00:08:08.050 +but for those who don't know, dev dependencies are things + +169 +00:08:08.050 --> 00:08:12.620 +that are needed in order to locally run our application + +170 +00:08:12.620 --> 00:08:15.080 +and two things here are, the first one is called + +171 +00:08:15.080 --> 00:08:17.980 +react scripts and what react scripts is, + +172 +00:08:17.980 --> 00:08:22.640 +is a tool put out but Facebook and it does underneath + +173 +00:08:22.640 --> 00:08:26.210 +the hood, it does all of the compiling and transpiling + +174 +00:08:26.210 --> 00:08:28.850 +of our javascript code in order for it + +175 +00:08:28.850 --> 00:08:30.090 +to run in the browser. + +176 +00:08:30.090 --> 00:08:34.450 +So you may have previously heard of web pack or some + +177 +00:08:34.450 --> 00:08:37.050 +stuff called babel which will convert all of our + +178 +00:08:37.050 --> 00:08:40.830 +jsx to actual react code, there's a whole bunch of stuff + +179 +00:08:40.830 --> 00:08:43.155 +and we're gonna go through what those things are. + +180 +00:08:43.155 --> 00:08:47.000 +But this sort of takes all the complexity of setting + +181 +00:08:47.000 --> 00:08:49.357 +up your own development environment and sort of, + +182 +00:08:49.357 --> 00:08:53.090 +temporarily lets us sweep that stuff under the rug + +183 +00:08:53.090 --> 00:08:56.150 +and just get into building our react application. + +184 +00:08:56.150 --> 00:08:57.950 +So it does the web pack and the babel + +185 +00:08:57.950 --> 00:08:59.300 +under the hood for us. + +186 +00:08:59.300 --> 00:09:01.350 +Now if we want to have a little bit of access to + +187 +00:09:01.350 --> 00:09:04.570 +our web pack and our babel config, then I'm gonna + +188 +00:09:04.570 --> 00:09:07.440 +show you how to do something called eject, near the + +189 +00:09:07.440 --> 00:09:09.200 +end of this course, which will give us + +190 +00:09:09.200 --> 00:09:12.260 +full control over and we can see the actual web + +191 +00:09:12.260 --> 00:09:13.900 +pack config that happens under the hood. + +192 +00:09:13.900 --> 00:09:16.280 +And that's kind of the best of both worlds because + +193 +00:09:16.280 --> 00:09:19.300 +it doesn't like, give you the burden of setting up + +194 +00:09:19.300 --> 00:09:23.060 +your own web pack, which is extremely complicated + +195 +00:09:23.060 --> 00:09:25.590 +up front, although if you do want access to it you + +196 +00:09:25.590 --> 00:09:27.810 +can sort of say pretty please and get access to it. + +197 +00:09:27.810 --> 00:09:29.600 +So those are our dev dependencies. + +198 +00:09:29.600 --> 00:09:31.450 +And then we have a couple dependencies and these are + +199 +00:09:31.450 --> 00:09:33.890 +things that are actually needed in our application + +200 +00:09:33.890 --> 00:09:35.250 +to make it run. + +201 +00:09:35.250 --> 00:09:37.110 +So we'll talk about these ones. + +202 +00:09:37.110 --> 00:09:38.474 +These two are for styling. + +203 +00:09:38.474 --> 00:09:41.580 +This one is going to be for connecting to our database, + +204 +00:09:41.580 --> 00:09:43.191 +which is called fire base. + +205 +00:09:43.191 --> 00:09:47.110 +Prop types is something that's going to allow us to + +206 +00:09:47.110 --> 00:09:49.370 +specify what data gets passed in and + +207 +00:09:49.370 --> 00:09:51.170 +what the data looks like. + +208 +00:09:51.170 --> 00:09:53.870 +And that used to be part of react itself, if you're watching + +209 +00:09:53.870 --> 00:09:56.150 +this tutorial for the second, this used to be part of + +210 +00:09:56.150 --> 00:09:57.982 +react now it's in it's own package. + +211 +00:09:57.982 --> 00:10:01.060 +We'll talk about what those are in it's own video. + +212 +00:10:01.060 --> 00:10:04.220 +Rebase is going to allow us to actually connect to fire base + +213 +00:10:04.220 --> 00:10:06.600 +and sync our changes in real time. + +214 +00:10:06.600 --> 00:10:08.990 +React and react dom are the entire reason why + +215 +00:10:08.990 --> 00:10:10.590 +you're taking this course. + +216 +00:10:10.590 --> 00:10:13.344 +React router is going to allow us to watch for changes + +217 +00:10:13.344 --> 00:10:15.370 +and have special url's. + +218 +00:10:15.370 --> 00:10:18.040 +And then finally this transition group is going + +219 +00:10:18.040 --> 00:10:21.460 +to allow us to have nice little animations swoop + +220 +00:10:21.460 --> 00:10:23.815 +things in and swoop things off the screen and whatnot. + +221 +00:10:23.815 --> 00:10:26.240 +We'll go through what all of those are throughout + +222 +00:10:26.240 --> 00:10:28.020 +the entire course. + +223 +00:10:28.020 --> 00:10:29.890 +But those are the only dependencies that you want. + +224 +00:10:29.890 --> 00:10:32.920 +I will recommend that you stick with these versions + +225 +00:10:32.920 --> 00:10:34.900 +that you have here. + +226 +00:10:34.900 --> 00:10:38.070 +I will be updating the course as react gets updated and + +227 +00:10:38.070 --> 00:10:40.740 +as there are new fundamental changes. + +228 +00:10:40.740 --> 00:10:43.200 +But often what will happen, especially in the case + +229 +00:10:43.200 --> 00:10:47.230 +of like prop types, react might like move part of their + +230 +00:10:47.230 --> 00:10:50.167 +dependency to a secondary package and in that case + +231 +00:10:50.167 --> 00:10:53.100 +it will start spitting warnings into your console. + +232 +00:10:53.100 --> 00:10:55.970 +So just know that these versions will be updated + +233 +00:10:55.970 --> 00:10:59.880 +as I need to and for your best experience in learning + +234 +00:10:59.880 --> 00:11:02.480 +react, keep these versions as they are in here. + +235 +00:11:02.480 --> 00:11:04.640 +And then they might even be different because I'll be + +236 +00:11:04.640 --> 00:11:06.680 +updating the github as we go through them. + +237 +00:11:06.680 --> 00:11:07.970 +Finally we got some scripts here. + +238 +00:11:07.970 --> 00:11:10.330 +I'll go through what all these different ones are but + +239 +00:11:10.330 --> 00:11:13.650 +we're mostly just worried about the start command + +240 +00:11:13.650 --> 00:11:15.940 +right now and that's going to run the babel and the + +241 +00:11:15.940 --> 00:11:19.800 +web pack through this thing called create react app. + +242 +00:11:19.800 --> 00:11:24.800 +So let's open up our terminal here and I am in the + +243 +00:11:25.120 --> 00:11:27.880 +catch of the day folder and we just need to go ahead + +244 +00:11:27.880 --> 00:11:31.390 +and type npm install and that's going to fetch + +245 +00:11:31.390 --> 00:11:34.040 +all of those dependencies that are from our package + +246 +00:11:34.040 --> 00:11:37.070 +.json and it's going to go and download a copy of + +247 +00:11:37.070 --> 00:11:39.560 +each of those so that we can run everything locally + +248 +00:11:39.560 --> 00:11:40.960 +and run our compile. + +249 +00:11:40.960 --> 00:11:43.620 +So depending on the speed of your network and your + +250 +00:11:43.620 --> 00:11:45.710 +computer this might take a minute or two. + +251 +00:11:45.710 --> 00:11:47.800 +Once it's finished it actually doesn't tell you + +252 +00:11:47.800 --> 00:11:52.720 +that it worked, I guess it says added 1,444 packages + +253 +00:11:52.720 --> 00:11:55.840 +in 28 seconds, but it will dump a whole bunch of stuff + +254 +00:11:55.840 --> 00:11:57.820 +on the screen as long as you don't see any actual + +255 +00:11:57.820 --> 00:12:00.370 +errors you might see notices and warnings, but + +256 +00:12:00.370 --> 00:12:02.360 +as long as you don't see any errors you're in good shape. + +257 +00:12:02.360 --> 00:12:05.760 +If you're ever having trouble with your install, I do this + +258 +00:12:05.760 --> 00:12:08.360 +all the time, if something maybe has gone wrong + +259 +00:12:08.360 --> 00:12:11.410 +during the install or it's not starting up like + +260 +00:12:11.410 --> 00:12:15.210 +you think it should be, just go into your folder and find + +261 +00:12:15.210 --> 00:12:18.110 +the noda modules folder there and delete it. + +262 +00:12:18.110 --> 00:12:20.300 +You can also try deleting the package lock file. + +263 +00:12:20.300 --> 00:12:22.730 +I would not delete that the first time though. + +264 +00:12:22.730 --> 00:12:25.370 +Just go ahead and delete it and then run npm install again + +265 +00:12:25.370 --> 00:12:28.230 +and that's going to reinstall all of your dependencies. + +266 +00:12:28.230 --> 00:12:30.570 +Now what we need to do to test if it worked, + +267 +00:12:30.570 --> 00:12:31.820 +I'll clear this all out, you just type + +268 +00:12:31.820 --> 00:12:34.390 +npm start and that's going to start up the + +269 +00:12:34.390 --> 00:12:38.580 +create react app server for us and it's going to load + +270 +00:12:38.580 --> 00:12:40.300 +up our local host. + +271 +00:12:40.300 --> 00:12:42.950 +Generally it's going to be local host 3000. + +272 +00:12:42.950 --> 00:12:45.180 +If you have something else running on the port 3000 + +273 +00:12:45.180 --> 00:12:47.180 +its gonna ask you for another port. + +274 +00:12:47.180 --> 00:12:49.330 +It's also gonna tell you what your local network ip + +275 +00:12:49.330 --> 00:12:52.320 +address is, so if you'd like to maybe test out the + +276 +00:12:52.320 --> 00:12:54.910 +application on your phone or another computer, + +277 +00:12:54.910 --> 00:12:57.447 +you can always open it up on that local ip address, + +278 +00:12:57.447 --> 00:13:00.350 +as long as your connected to the same wifi network. + +279 +00:13:01.380 --> 00:13:02.770 +Let's get it running then. + +280 +00:13:02.770 --> 00:13:06.760 +There's not much in here, just this little fold button, + +281 +00:13:06.760 --> 00:13:09.680 +and we're gonna be building the entire app out ourselves. + +282 +00:13:09.680 --> 00:13:13.840 +But then go into your editor and in the source folder + +283 +00:13:13.840 --> 00:13:16.420 +you're going to see an index .js file and that will + +284 +00:13:16.420 --> 00:13:17.686 +have nothing in there. + +285 +00:13:17.686 --> 00:13:19.940 +And just to test that everything is working fine, + +286 +00:13:19.940 --> 00:13:22.920 +just type alert hey inside of there and give it a save. + +287 +00:13:22.920 --> 00:13:25.480 +And when we save it, it should automatically detect + +288 +00:13:25.480 --> 00:13:28.070 +that we made a change to one of our javascript files + +289 +00:13:28.070 --> 00:13:29.900 +and the browser should reload itself. + +290 +00:13:29.900 --> 00:13:33.348 +Give it a save and bam, we get the hey there going + +291 +00:13:33.348 --> 00:13:36.560 +and click okay, and everything is in good shape. + +292 +00:13:36.560 --> 00:13:39.340 +So if we've done all that properly, you see the hey + +293 +00:13:39.340 --> 00:13:41.120 +popping up, then we're ready to actually + +294 +00:13:41.120 --> 00:13:42.560 +start writing some react code. + +295 +00:13:42.560 --> 00:13:43.860 +See you in the next video. + diff --git a/RFB/02 - Thinking and Understanding React Components.vtt b/RFB/02 - Thinking and Understanding React Components.vtt index ac77a9c..34697d3 100755 --- a/RFB/02 - Thinking and Understanding React Components.vtt +++ b/RFB/02 - Thinking and Understanding React Components.vtt @@ -1,395 +1,395 @@ -WEBVTT - -00:00:00.793 --> 00:00:02.861 line:100% position:50% align:middle -♪ [music] ♪ - -00:00:07.280 --> 00:00:10.240 line:100% position:50% align:middle -All right, let's talk a little bit about -what components are. Now, - -00:00:10.240 --> 00:00:14.260 line:100% position:50% align:middle -if you're coming from any other framework -and you're trying to understand, - -00:00:14.260 --> 00:00:19.800 line:100% position:50% align:middle -"Where's the models, or the modules, or -the views or the directives?" or any of - -00:00:19.800 --> 00:00:23.510 line:100% position:50% align:middle -that good stuff, I need you to just put -that aside. Because React is a little bit - -00:00:23.510 --> 00:00:28.720 line:100% position:50% align:middle -different, in that everything in React is -what's called a component. - -00:00:28.720 --> 00:00:32.660 line:100% position:50% align:middle -So, I'm going to show you just a couple of -examples of what a component would be and - -00:00:32.660 --> 00:00:35.720 line:100% position:50% align:middle -then we'll get into actually building some -of our own. - -00:00:35.720 --> 00:00:40.220 line:100% position:50% align:middle -Now, what is a component? A component is a -reusable piece of your website. - -00:00:40.220 --> 00:00:45.882 line:100% position:50% align:middle -So if you think of your HTML pages as -built up of a whole bunch of tags, h1 and - -00:00:45.882 --> 00:00:51.918 line:100% position:50% align:middle -div and article tag, React sort of takes -that a step further and allows you to - -00:00:51.918 --> 00:00:57.770 line:100% position:50% align:middle -build your own tags or components as they -are. And you can supply those tags a whole - -00:00:57.770 --> 00:01:01.200 line:100% position:50% align:middle -bunch of information. So if we take a look -at this application right here, - -00:01:01.200 --> 00:01:05.530 line:100% position:50% align:middle -we've got this, where we have the fish -picture, we have an add to order button, - -00:01:05.530 --> 00:01:08.510 line:100% position:50% align:middle -when you click that button it will add it -to the actual order. - -00:01:08.510 --> 00:01:13.390 line:100% position:50% align:middle -We've got the title, we've got the price, -it's formatted nicely and we've got a - -00:01:13.390 --> 00:01:18.260 line:100% position:50% align:middle -description of it. Now, any time I would -like to render this on out, - -00:01:18.260 --> 00:01:21.390 line:100% position:50% align:middle -I don't need to copy and paste that code. -And let's say I wanted it somewhere else - -00:01:21.390 --> 00:01:25.530 line:100% position:50% align:middle -in my application, I don't need to copy -and paste that code, I simply just render - -00:01:25.530 --> 00:01:30.610 line:100% position:50% align:middle -out what's called a Fish component. Now, -we can look at that by going to our React - -00:01:30.610 --> 00:01:34.840 line:100% position:50% align:middle -DevTools. If you don't see React DevTools, -make sure you have it installed first. - -00:01:34.840 --> 00:01:38.650 line:100% position:50% align:middle -And second of all, make sure you're -actually on a page that has React loaded. - -00:01:38.650 --> 00:01:44.300 line:100% position:50% align:middle -Facebook, Instagram are good examples for -that, as well as the demo application for - -00:01:44.300 --> 00:01:48.400 line:100% position:50% align:middle -Catch of the Day. So what I like to do to -actually get to the component that is - -00:01:48.400 --> 00:01:52.550 line:100% position:50% align:middle -here, is I like to use Inspect Element. -Right click inspect or use your shortcut. - -00:01:52.550 --> 00:01:58.270 line:100% position:50% align:middle -So just get somewhere in this HTML. And -this is the HTML that React kicks out for - -00:01:58.270 --> 00:02:02.820 line:100% position:50% align:middle -you, this is the HTML that it renders for -you. But if you hop on over to your React - -00:02:02.820 --> 00:02:08.520 line:100% position:50% align:middle -DevTools here, you'll see that it actually -brings you out into how React sees it, - -00:02:08.520 --> 00:02:12.050 line:100% position:50% align:middle -and you can see all of these things, they -look like custom tags but those are just - -00:02:12.050 --> 00:02:17.100 line:100% position:50% align:middle -components inside of React. And you can -see that I've got all of these different - -00:02:17.100 --> 00:02:22.320 line:100% position:50% align:middle -Fish components. Now, any time that I want -to render out this display here, - -00:02:22.320 --> 00:02:26.570 line:100% position:50% align:middle -as well as bring along any of the -functionality that it has, I simply just - -00:02:26.570 --> 00:02:30.090 line:100% position:50% align:middle -need to render out a Fish tag and pass it -any information that it needs. - -00:02:30.090 --> 00:02:33.700 line:100% position:50% align:middle -And in this case it needs a whole bunch of -information about, like, - -00:02:33.700 --> 00:02:38.670 line:100% position:50% align:middle -"What's the image? What's the description? -Etc., etc." So that is a Fish component, - -00:02:38.670 --> 00:02:42.560 line:100% position:50% align:middle -and it's a nice, tidy little component. -And one of the benefits to that, - -00:02:42.560 --> 00:02:46.800 line:100% position:50% align:middle -among other things, is that if you have -somebody on your team and you want them to - -00:02:46.800 --> 00:02:50.940 line:100% position:50% align:middle -work on just a specific component, you can -just give them access to that component - -00:02:50.940 --> 00:02:55.050 line:100% position:50% align:middle -file where they don't necessarily need to -be working on the entire app. - -00:02:55.050 --> 00:02:58.650 line:100% position:50% align:middle -That's especially helpful when you're -working with designers who need to mock up - -00:02:58.650 --> 00:03:02.630 line:100% position:50% align:middle -the HTML and the CSS and they don't -necessarily need to write a ton of - -00:03:02.630 --> 00:03:07.540 line:100% position:50% align:middle -JavaScript. So I've got my Fish component -here, I've got this Header component right - -00:03:07.540 --> 00:03:10.950 line:100% position:50% align:middle -here. You see that I pass in something -with that's called "Props." - -00:03:10.950 --> 00:03:15.650 line:100% position:50% align:middle -We're going to learn all about props, -state and context. We also have an Order - -00:03:15.650 --> 00:03:19.610 line:100% position:50% align:middle -component here. We've got an Inventory -component here. If you open those up, - -00:03:19.610 --> 00:03:23.550 line:100% position:50% align:middle -you're going to see some further -components inside of there. We're going to - -00:03:23.550 --> 00:03:29.150 line:100% position:50% align:middle -use animation components to animate the -values on in. So, any time you have a - -00:03:29.150 --> 00:03:33.760 line:100% position:50% align:middle -piece of your application, it's generally -good that we build it into it's own little - -00:03:33.760 --> 00:03:37.990 line:100% position:50% align:middle -component. And that's going to allow us to -have reusable code, - -00:03:37.990 --> 00:03:43.220 line:100% position:50% align:middle -as well as use React DevTools to see where -everything is in. Now, - -00:03:43.220 --> 00:03:47.570 line:100% position:50% align:middle -if I click on our App component, that's -sort of like the parent component here, - -00:03:47.570 --> 00:03:50.980 line:100% position:50% align:middle -and there's a whole bunch of other stuff -for routing, you're going to see that we - -00:03:50.980 --> 00:03:55.720 line:100% position:50% align:middle -have this thing called "state." And if you -open that up, these are all of the fish - -00:03:55.720 --> 00:04:00.040 line:100% position:50% align:middle -that we have listed in our document here. -And you can see that this fish data, - -00:04:00.040 --> 00:04:05.990 line:100% position:50% align:middle -if we open fish1, we have Pacific -Halibut. And that is then referenced right - -00:04:05.990 --> 00:04:10.360 line:100% position:50% align:middle -here, it's referenced in the order, as -well as it's referenced in the inventory. - -00:04:10.360 --> 00:04:14.550 line:100% position:50% align:middle -And if you were then to change this state, -and we're going to learn all about how to - -00:04:14.550 --> 00:04:21.310 line:100% position:50% align:middle -do that to something like, "Yummy Fish," -and I hit Enter, you'll see that anywhere - -00:04:21.310 --> 00:04:26.820 line:100% position:50% align:middle -that state, anywhere that data was -referenced (Yummy Fish), has changed. - -00:04:26.820 --> 00:04:31.850 line:100% position:50% align:middle -It's updated here, here and here. And -that's sort of the huge power behind - -00:04:31.850 --> 00:04:36.030 line:100% position:50% align:middle -React, is that we're going to build these -components, like a Fish component and an - -00:04:36.030 --> 00:04:41.350 line:100% position:50% align:middle -Order component and an Inventory -component, and they all pull on some data - -00:04:41.350 --> 00:04:45.990 line:100% position:50% align:middle -that we have and we pass in. And anytime -that data changes, that's no problem - -00:04:45.990 --> 00:04:49.430 line:100% position:50% align:middle -because React is going to figure out where -it should then update itself. - -00:04:49.430 --> 00:04:53.410 line:100% position:50% align:middle -So I really like to just go into people's -websites that have React and see how - -00:04:53.410 --> 00:04:59.050 line:100% position:50% align:middle -they've set it up themselves. The player -for this video series here is actually - -00:04:59.050 --> 00:05:03.310 line:100% position:50% align:middle -built in React as well. So if were to just -inspect one of these video links down - -00:05:03.310 --> 00:05:06.720 line:100% position:50% align:middle -here... and these title might look a -little bit different for you because I'm - -00:05:06.720 --> 00:05:10.870 line:100% position:50% align:middle -re-recording them right now. And flip on -over to the React DevTools, - -00:05:10.870 --> 00:05:16.060 line:100% position:50% align:middle -you'll see that I have created a whole -bunch of components. These are the Video - -00:05:16.060 --> 00:05:21.160 line:100% position:50% align:middle -components that I've made, and each Video -component is going to render out the - -00:05:21.160 --> 00:05:25.830 line:100% position:50% align:middle -number, the video, the title, the -timestamp here in a nice, little displayed - -00:05:25.830 --> 00:05:29.620 line:100% position:50% align:middle -span, as well as it carries all of the -JavaScript that it needs to make it play. - -00:05:29.620 --> 00:05:33.120 line:100% position:50% align:middle -So if I click one and it's going to update -the player, it's going to update the URL - -00:05:33.120 --> 00:05:36.460 line:100% position:50% align:middle -bar and the routing is going to kick in. -So if I click on one of them, - -00:05:36.460 --> 00:05:40.120 line:100% position:50% align:middle -you'll see that there's some `Props`, -there's some `Context`, we're going to see - -00:05:40.120 --> 00:05:45.150 line:100% position:50% align:middle -`state` in some other ones. And if I were -then to go to the viewer one, - -00:05:45.150 --> 00:05:51.470 line:100% position:50% align:middle -look at my state, you see that I have this -videos array which is all 17 videos, - -00:05:51.470 --> 00:05:56.790 line:100% position:50% align:middle -or however many videos your current -package has. You can see that I can change - -00:05:56.790 --> 00:06:02.690 line:100% position:50% align:middle -that to "Wes is cool." And, again, -anywhere that data has then been - -00:06:02.690 --> 00:06:07.960 line:100% position:50% align:middle -referenced, like right here as well as -right here, React is just going to update - -00:06:07.960 --> 00:06:13.540 line:100% position:50% align:middle -itself anywhere on the page. We don't need -to select the DOM element and update it - -00:06:13.540 --> 00:06:18.260 line:100% position:50% align:middle -for ourself, because we've went ahead and -created these Video components beforehand - -00:06:18.260 --> 00:06:22.050 line:100% position:50% align:middle -and we're going to see how we can infuse -that data right into the component. - -00:06:22.050 --> 00:06:25.620 line:100% position:50% align:middle -So it's kind of fun to go into different -websites. Like Instagram and Facebook are - -00:06:25.620 --> 00:06:29.940 line:100% position:50% align:middle -two major users of React. They're the ones -that initially built React, - -00:06:29.940 --> 00:06:35.010 line:100% position:50% align:middle -and you can kind of see what they've done -here. They're a little bit more - -00:06:35.010 --> 00:06:40.620 line:100% position:50% align:middle -complicated on Facebook and Instagram, -just because they don't use very well-named - -00:06:40.620 --> 00:06:44.760 line:100% position:50% align:middle -components here. They have, like, -"i" and "r" but you can see "r" is - -00:06:44.760 --> 00:06:49.350 line:100% position:50% align:middle -something like the source of the actual -image, how many likes are associated with - -00:06:49.350 --> 00:06:54.040 line:100% position:50% align:middle -it, the caption. And maybe "i" here is -probably all the comments. - -00:06:54.040 --> 00:06:57.790 line:100% position:50% align:middle -Let's see here. Yes, they've got an array -of all the comments here, - -00:06:57.790 --> 00:07:02.560 line:100% position:50% align:middle -so I could go ahead and change that to -"cool" and it's going to update the actual - -00:07:02.560 --> 00:07:06.640 line:100% position:50% align:middle -comment there. So it's kind of fun to just -poke around at all the different - -00:07:06.640 --> 00:07:10.940 line:100% position:50% align:middle -components here. Components are reusable -pieces of code that we're going to use in - -00:07:10.940 --> 00:07:15.620 line:100% position:50% align:middle -our application over and over again, as -well as attach data in an event, - -00:07:15.620 --> 00:07:19.240 line:100% position:50% align:middle -listeners, like clicking, and hovering, -and scrolling and all that good stuff. - -00:07:19.240 --> 00:07:22.670 line:100% position:50% align:middle -So let's actually get to scaffolding out -some of our own components that we could - -00:07:22.670 --> 00:07:25.000 line:100% position:50% align:middle -build in our Catch of the Day app. +WEBVTT + +00:00:00.793 --> 00:00:02.861 line:100% position:50% align:middle +♪ [music] ♪ + +00:00:07.280 --> 00:00:10.240 line:100% position:50% align:middle +All right, let's talk a little bit about +what components are. Now, + +00:00:10.240 --> 00:00:14.260 line:100% position:50% align:middle +if you're coming from any other framework +and you're trying to understand, + +00:00:14.260 --> 00:00:19.800 line:100% position:50% align:middle +"Where's the models, or the modules, or +the views or the directives?" or any of + +00:00:19.800 --> 00:00:23.510 line:100% position:50% align:middle +that good stuff, I need you to just put +that aside. Because React is a little bit + +00:00:23.510 --> 00:00:28.720 line:100% position:50% align:middle +different, in that everything in React is +what's called a component. + +00:00:28.720 --> 00:00:32.660 line:100% position:50% align:middle +So, I'm going to show you just a couple of +examples of what a component would be and + +00:00:32.660 --> 00:00:35.720 line:100% position:50% align:middle +then we'll get into actually building some +of our own. + +00:00:35.720 --> 00:00:40.220 line:100% position:50% align:middle +Now, what is a component? A component is a +reusable piece of your website. + +00:00:40.220 --> 00:00:45.882 line:100% position:50% align:middle +So if you think of your HTML pages as +built up of a whole bunch of tags, h1 and + +00:00:45.882 --> 00:00:51.918 line:100% position:50% align:middle +div and article tag, React sort of takes +that a step further and allows you to + +00:00:51.918 --> 00:00:57.770 line:100% position:50% align:middle +build your own tags or components as they +are. And you can supply those tags a whole + +00:00:57.770 --> 00:01:01.200 line:100% position:50% align:middle +bunch of information. So if we take a look +at this application right here, + +00:01:01.200 --> 00:01:05.530 line:100% position:50% align:middle +we've got this, where we have the fish +picture, we have an add to order button, + +00:01:05.530 --> 00:01:08.510 line:100% position:50% align:middle +when you click that button it will add it +to the actual order. + +00:01:08.510 --> 00:01:13.390 line:100% position:50% align:middle +We've got the title, we've got the price, +it's formatted nicely and we've got a + +00:01:13.390 --> 00:01:18.260 line:100% position:50% align:middle +description of it. Now, any time I would +like to render this on out, + +00:01:18.260 --> 00:01:21.390 line:100% position:50% align:middle +I don't need to copy and paste that code. +And let's say I wanted it somewhere else + +00:01:21.390 --> 00:01:25.530 line:100% position:50% align:middle +in my application, I don't need to copy +and paste that code, I simply just render + +00:01:25.530 --> 00:01:30.610 line:100% position:50% align:middle +out what's called a Fish component. Now, +we can look at that by going to our React + +00:01:30.610 --> 00:01:34.840 line:100% position:50% align:middle +DevTools. If you don't see React DevTools, +make sure you have it installed first. + +00:01:34.840 --> 00:01:38.650 line:100% position:50% align:middle +And second of all, make sure you're +actually on a page that has React loaded. + +00:01:38.650 --> 00:01:44.300 line:100% position:50% align:middle +Facebook, Instagram are good examples for +that, as well as the demo application for + +00:01:44.300 --> 00:01:48.400 line:100% position:50% align:middle +Catch of the Day. So what I like to do to +actually get to the component that is + +00:01:48.400 --> 00:01:52.550 line:100% position:50% align:middle +here, is I like to use Inspect Element. +Right click inspect or use your shortcut. + +00:01:52.550 --> 00:01:58.270 line:100% position:50% align:middle +So just get somewhere in this HTML. And +this is the HTML that React kicks out for + +00:01:58.270 --> 00:02:02.820 line:100% position:50% align:middle +you, this is the HTML that it renders for +you. But if you hop on over to your React + +00:02:02.820 --> 00:02:08.520 line:100% position:50% align:middle +DevTools here, you'll see that it actually +brings you out into how React sees it, + +00:02:08.520 --> 00:02:12.050 line:100% position:50% align:middle +and you can see all of these things, they +look like custom tags but those are just + +00:02:12.050 --> 00:02:17.100 line:100% position:50% align:middle +components inside of React. And you can +see that I've got all of these different + +00:02:17.100 --> 00:02:22.320 line:100% position:50% align:middle +Fish components. Now, any time that I want +to render out this display here, + +00:02:22.320 --> 00:02:26.570 line:100% position:50% align:middle +as well as bring along any of the +functionality that it has, I simply just + +00:02:26.570 --> 00:02:30.090 line:100% position:50% align:middle +need to render out a Fish tag and pass it +any information that it needs. + +00:02:30.090 --> 00:02:33.700 line:100% position:50% align:middle +And in this case it needs a whole bunch of +information about, like, + +00:02:33.700 --> 00:02:38.670 line:100% position:50% align:middle +"What's the image? What's the description? +Etc., etc." So that is a Fish component, + +00:02:38.670 --> 00:02:42.560 line:100% position:50% align:middle +and it's a nice, tidy little component. +And one of the benefits to that, + +00:02:42.560 --> 00:02:46.800 line:100% position:50% align:middle +among other things, is that if you have +somebody on your team and you want them to + +00:02:46.800 --> 00:02:50.940 line:100% position:50% align:middle +work on just a specific component, you can +just give them access to that component + +00:02:50.940 --> 00:02:55.050 line:100% position:50% align:middle +file where they don't necessarily need to +be working on the entire app. + +00:02:55.050 --> 00:02:58.650 line:100% position:50% align:middle +That's especially helpful when you're +working with designers who need to mock up + +00:02:58.650 --> 00:03:02.630 line:100% position:50% align:middle +the HTML and the CSS and they don't +necessarily need to write a ton of + +00:03:02.630 --> 00:03:07.540 line:100% position:50% align:middle +JavaScript. So I've got my Fish component +here, I've got this Header component right + +00:03:07.540 --> 00:03:10.950 line:100% position:50% align:middle +here. You see that I pass in something +with that's called "Props." + +00:03:10.950 --> 00:03:15.650 line:100% position:50% align:middle +We're going to learn all about props, +state and context. We also have an Order + +00:03:15.650 --> 00:03:19.610 line:100% position:50% align:middle +component here. We've got an Inventory +component here. If you open those up, + +00:03:19.610 --> 00:03:23.550 line:100% position:50% align:middle +you're going to see some further +components inside of there. We're going to + +00:03:23.550 --> 00:03:29.150 line:100% position:50% align:middle +use animation components to animate the +values on in. So, any time you have a + +00:03:29.150 --> 00:03:33.760 line:100% position:50% align:middle +piece of your application, it's generally +good that we build it into it's own little + +00:03:33.760 --> 00:03:37.990 line:100% position:50% align:middle +component. And that's going to allow us to +have reusable code, + +00:03:37.990 --> 00:03:43.220 line:100% position:50% align:middle +as well as use React DevTools to see where +everything is in. Now, + +00:03:43.220 --> 00:03:47.570 line:100% position:50% align:middle +if I click on our App component, that's +sort of like the parent component here, + +00:03:47.570 --> 00:03:50.980 line:100% position:50% align:middle +and there's a whole bunch of other stuff +for routing, you're going to see that we + +00:03:50.980 --> 00:03:55.720 line:100% position:50% align:middle +have this thing called "state." And if you +open that up, these are all of the fish + +00:03:55.720 --> 00:04:00.040 line:100% position:50% align:middle +that we have listed in our document here. +And you can see that this fish data, + +00:04:00.040 --> 00:04:05.990 line:100% position:50% align:middle +if we open fish1, we have Pacific +Halibut. And that is then referenced right + +00:04:05.990 --> 00:04:10.360 line:100% position:50% align:middle +here, it's referenced in the order, as +well as it's referenced in the inventory. + +00:04:10.360 --> 00:04:14.550 line:100% position:50% align:middle +And if you were then to change this state, +and we're going to learn all about how to + +00:04:14.550 --> 00:04:21.310 line:100% position:50% align:middle +do that to something like, "Yummy Fish," +and I hit Enter, you'll see that anywhere + +00:04:21.310 --> 00:04:26.820 line:100% position:50% align:middle +that state, anywhere that data was +referenced (Yummy Fish), has changed. + +00:04:26.820 --> 00:04:31.850 line:100% position:50% align:middle +It's updated here, here and here. And +that's sort of the huge power behind + +00:04:31.850 --> 00:04:36.030 line:100% position:50% align:middle +React, is that we're going to build these +components, like a Fish component and an + +00:04:36.030 --> 00:04:41.350 line:100% position:50% align:middle +Order component and an Inventory +component, and they all pull on some data + +00:04:41.350 --> 00:04:45.990 line:100% position:50% align:middle +that we have and we pass in. And anytime +that data changes, that's no problem + +00:04:45.990 --> 00:04:49.430 line:100% position:50% align:middle +because React is going to figure out where +it should then update itself. + +00:04:49.430 --> 00:04:53.410 line:100% position:50% align:middle +So I really like to just go into people's +websites that have React and see how + +00:04:53.410 --> 00:04:59.050 line:100% position:50% align:middle +they've set it up themselves. The player +for this video series here is actually + +00:04:59.050 --> 00:05:03.310 line:100% position:50% align:middle +built in React as well. So if were to just +inspect one of these video links down + +00:05:03.310 --> 00:05:06.720 line:100% position:50% align:middle +here... and these title might look a +little bit different for you because I'm + +00:05:06.720 --> 00:05:10.870 line:100% position:50% align:middle +re-recording them right now. And flip on +over to the React DevTools, + +00:05:10.870 --> 00:05:16.060 line:100% position:50% align:middle +you'll see that I have created a whole +bunch of components. These are the Video + +00:05:16.060 --> 00:05:21.160 line:100% position:50% align:middle +components that I've made, and each Video +component is going to render out the + +00:05:21.160 --> 00:05:25.830 line:100% position:50% align:middle +number, the video, the title, the +timestamp here in a nice, little displayed + +00:05:25.830 --> 00:05:29.620 line:100% position:50% align:middle +span, as well as it carries all of the +JavaScript that it needs to make it play. + +00:05:29.620 --> 00:05:33.120 line:100% position:50% align:middle +So if I click one and it's going to update +the player, it's going to update the URL + +00:05:33.120 --> 00:05:36.460 line:100% position:50% align:middle +bar and the routing is going to kick in. +So if I click on one of them, + +00:05:36.460 --> 00:05:40.120 line:100% position:50% align:middle +you'll see that there's some `Props`, +there's some `Context`, we're going to see + +00:05:40.120 --> 00:05:45.150 line:100% position:50% align:middle +`state` in some other ones. And if I were +then to go to the viewer one, + +00:05:45.150 --> 00:05:51.470 line:100% position:50% align:middle +look at my state, you see that I have this +videos array which is all 17 videos, + +00:05:51.470 --> 00:05:56.790 line:100% position:50% align:middle +or however many videos your current +package has. You can see that I can change + +00:05:56.790 --> 00:06:02.690 line:100% position:50% align:middle +that to "Wes is cool." And, again, +anywhere that data has then been + +00:06:02.690 --> 00:06:07.960 line:100% position:50% align:middle +referenced, like right here as well as +right here, React is just going to update + +00:06:07.960 --> 00:06:13.540 line:100% position:50% align:middle +itself anywhere on the page. We don't need +to select the DOM element and update it + +00:06:13.540 --> 00:06:18.260 line:100% position:50% align:middle +for ourself, because we've went ahead and +created these Video components beforehand + +00:06:18.260 --> 00:06:22.050 line:100% position:50% align:middle +and we're going to see how we can infuse +that data right into the component. + +00:06:22.050 --> 00:06:25.620 line:100% position:50% align:middle +So it's kind of fun to go into different +websites. Like Instagram and Facebook are + +00:06:25.620 --> 00:06:29.940 line:100% position:50% align:middle +two major users of React. They're the ones +that initially built React, + +00:06:29.940 --> 00:06:35.010 line:100% position:50% align:middle +and you can kind of see what they've done +here. They're a little bit more + +00:06:35.010 --> 00:06:40.620 line:100% position:50% align:middle +complicated on Facebook and Instagram, +just because they don't use very well-named + +00:06:40.620 --> 00:06:44.760 line:100% position:50% align:middle +components here. They have, like, +"i" and "r" but you can see "r" is + +00:06:44.760 --> 00:06:49.350 line:100% position:50% align:middle +something like the source of the actual +image, how many likes are associated with + +00:06:49.350 --> 00:06:54.040 line:100% position:50% align:middle +it, the caption. And maybe "i" here is +probably all the comments. + +00:06:54.040 --> 00:06:57.790 line:100% position:50% align:middle +Let's see here. Yes, they've got an array +of all the comments here, + +00:06:57.790 --> 00:07:02.560 line:100% position:50% align:middle +so I could go ahead and change that to +"cool" and it's going to update the actual + +00:07:02.560 --> 00:07:06.640 line:100% position:50% align:middle +comment there. So it's kind of fun to just +poke around at all the different + +00:07:06.640 --> 00:07:10.940 line:100% position:50% align:middle +components here. Components are reusable +pieces of code that we're going to use in + +00:07:10.940 --> 00:07:15.620 line:100% position:50% align:middle +our application over and over again, as +well as attach data in an event, + +00:07:15.620 --> 00:07:19.240 line:100% position:50% align:middle +listeners, like clicking, and hovering, +and scrolling and all that good stuff. + +00:07:19.240 --> 00:07:22.670 line:100% position:50% align:middle +So let's actually get to scaffolding out +some of our own components that we could + +00:07:22.670 --> 00:07:25.000 line:100% position:50% align:middle +build in our Catch of the Day app. diff --git a/RFB/03 - Creating our First Components.vtt b/RFB/03 - Creating our First Components.vtt index 2b10292..4c11ba1 100755 --- a/RFB/03 - Creating our First Components.vtt +++ b/RFB/03 - Creating our First Components.vtt @@ -1,528 +1,1074 @@ -WEBVTT - -00:00:01.378 --> 00:00:03.140 line:100% position:50% align:middle -♪ [music] ♪ - -00:00:06.070 --> 00:00:10.910 line:100% position:50% align:middle -All right our first component, which is -going to be this StorePicker component. - -00:00:10.910 --> 00:00:14.212 line:100% position:50% align:middle -Where you type in the name of the -store or it auto fills with a - -00:00:14.212 --> 00:00:17.036 line:100% position:50% align:middle -hilarious one. And then we have -a button that when you click it, - -00:00:17.036 --> 00:00:19.807 line:100% position:50% align:middle -it's going to push you to that actual -store. So if you look - -00:00:19.807 --> 00:00:22.510 line:100% position:50% align:middle -at our React DevTools here, -you'll see that there is a - -00:00:22.510 --> 00:00:26.348 line:100% position:50% align:middle -StorePicker component. We're going -to build that first ,and then we're - -00:00:26.348 --> 00:00:30.561 line:100% position:50% align:middle -going to hook up the visit store, which -is going to push the actual URL for it. - -00:00:30.561 --> 00:00:34.900 line:100% position:50% align:middle -So where do we write that code? Well let's -first write it in index.js and then we'll - -00:00:34.900 --> 00:00:39.073 line:100% position:50% align:middle -move it over to the separate components -folder here. Now before we write any - -00:00:39.073 --> 00:00:42.674 line:100% position:50% align:middle -React, what do we need? We need to load -in React just like before you write - -00:00:42.674 --> 00:00:46.133 line:100% position:50% align:middle -jQuery, you need to load in jQuery. -And you might be thinking, "Okay I'll - -00:00:46.133 --> 00:00:52.355 line:100% position:50% align:middle -go into my index.html, and I'll give -myself a script source, and I will - -00:00:52.355 --> 00:00:55.380 line:100% position:50% align:middle -say react.js, and then it's on the page, -and I'm good to go." - -00:00:55.380 --> 00:00:57.918 line:100% position:50% align:middle -However modern JavaScript is done -a little bit differently, - -00:00:57.918 --> 00:01:01.772 line:100% position:50% align:middle -and we're going to be using -what's called ES6 modules where we can - -00:01:01.772 --> 00:01:06.190 line:100% position:50% align:middle -import it. So rather than using a script -tag to load in every single library that - -00:01:06.190 --> 00:01:10.950 line:100% position:50% align:middle -you want, you go into the code that you're -writing, in this case index.js, and we're - -00:01:10.950 --> 00:01:17.080 line:100% position:50% align:middle -going to import React, capital R, -from and then a string of `react`. - -00:01:17.080 --> 00:01:21.880 line:100% position:50% align:middle -And what that does is it's going to load -everything that is in the React library - -00:01:21.880 --> 00:01:26.680 line:100% position:50% align:middle -into this variable called React. Now where -is this coming from? - -00:01:26.680 --> 00:01:30.094 line:100% position:50% align:middle -Well in the first video, if you open -up our package.json, you'll know - -00:01:30.094 --> 00:01:35.306 line:100% position:50% align:middle -that I have already gone ahead and listed -all of the things that we need for this - -00:01:35.306 --> 00:01:40.498 line:100% position:50% align:middle -tutorial to work. And one of them being -`react` and `react-dom` and `react-router` - -00:01:40.498 --> 00:01:45.419 line:100% position:50% align:middle -and 'react-addons-css...` all of these -different things. So if I didn't do that, - -00:01:45.419 --> 00:01:49.600 line:100% position:50% align:middle -what you would have had to do is go -to your terminal here, but quit this first - -00:01:49.600 --> 00:01:54.844 line:100% position:50% align:middle -"npm install react --save", and that will -go and fetch the React library - -00:01:54.844 --> 00:01:58.256 line:100% position:50% align:middle -as well as save that dependency -to your package.json. - -00:01:58.256 --> 00:02:01.960 line:100% position:50% align:middle -So really -important, this entire tutorial I do not - -00:02:01.960 --> 00:02:06.820 line:100% position:50% align:middle -need you to `npm install` anything. Why? -Because this tutorial has already come - -00:02:06.820 --> 00:02:09.821 line:100% position:50% align:middle -with a list of things that you need, -as well as the versions that are going - -00:02:09.821 --> 00:02:14.397 line:100% position:50% align:middle -to work the best. These are the latest -versions as of time of recording, and I - -00:02:14.397 --> 00:02:18.271 line:100% position:50% align:middle -just want to make sure that everybody's -on the exact same version for the duration - -00:02:18.271 --> 00:02:23.440 line:100% position:50% align:middle -of this course until things get updated -and then it's time to re-record them. - -00:02:23.440 --> 00:02:27.460 line:100% position:50% align:middle -So you do not need to `npm install` -anything, you simply just need to type "npm - -00:02:27.460 --> 00:02:30.994 line:100% position:50% align:middle -install" on our first video, which we did -already. And then you type "npm start", - -00:02:30.994 --> 00:02:36.140 line:100% position:50% align:middle -to kickstart our Webpack and server -that will open itself on up. - -00:02:36.140 --> 00:02:40.605 line:100% position:50% align:middle -Let's go over to our index.js here. -And we've imported React from `react`. - -00:02:40.605 --> 00:02:45.475 line:100% position:50% align:middle -Now I'm going to open up this localhost -in the browser here. First of all, a - -00:02:45.475 --> 00:02:48.999 line:100% position:50% align:middle -couple things, you're going to sometimes -see these warnings here, and that's - -00:02:48.999 --> 00:02:54.398 line:100% position:50% align:middle -something called ESLint. ESLint is a -linter which sort of will smack your hand - -00:02:54.398 --> 00:02:59.607 line:100% position:50% align:middle -when you do things that aren't in the -best interest of writing good React code, - -00:02:59.607 --> 00:03:03.225 line:100% position:50% align:middle -and it's okay if you sometimes see these. -We're going to run into them, - -00:03:03.225 --> 00:03:07.577 line:100% position:50% align:middle -and we'll show you how to fix them. -The Create React App comes - -00:03:07.577 --> 00:03:12.096 line:100% position:50% align:middle -with a very minimal set of ESLint -rules, and then we'll show you how - -00:03:12.096 --> 00:03:15.593 line:100% position:50% align:middle -you can break out, or eject out of it, -if you'd like to use your own - -00:03:15.593 --> 00:03:19.036 line:100% position:50% align:middle -ESLint rules, if you're comfortable -with that. However, what I want to show - -00:03:19.036 --> 00:03:23.070 line:100% position:50% align:middle -you is that if we go to our elements -panel, you'll see that the script tag - -00:03:23.070 --> 00:03:28.380 line:100% position:50% align:middle -has been added. That gets added by the -dev server. And it gives us the static - -00:03:28.380 --> 00:03:33.633 line:100% position:50% align:middle -bundle js. If I were to go to that URL -here, you'll see that...Look at this. - -00:03:33.633 --> 00:03:40.067 line:100% position:50% align:middle -All this code here, this is React, -right? only because I imported React - -00:03:40.067 --> 00:03:44.776 line:100% position:50% align:middle -from `react`. If I take it out and refresh -this URL you're going to see that React - -00:03:44.776 --> 00:03:47.857 line:100% position:50% align:middle -is no longer in there. There's a whole -bunch of stuff. This is all Webpack dev-server - -00:03:47.857 --> 00:03:51.608 line:100% position:50% align:middle -stuff. That's totally fine. -That stuff's not included when you - -00:03:51.608 --> 00:03:55.711 line:100% position:50% align:middle -actually deploy it to your application, -but if I were to write "alert('hello')", - -00:03:55.711 --> 00:04:02.939 line:100% position:50% align:middle -and refresh this, you will see if I -search for it. There we go, there is my - -00:04:02.939 --> 00:04:07.421 line:100% position:50% align:middle -actual `alert` code. So any code that gets -written in this index.js is going - -00:04:07.421 --> 00:04:11.398 line:100% position:50% align:middle -to be bundled into your bundle.js file, -and this is...again this is a - -00:04:11.398 --> 00:04:14.668 line:100% position:50% align:middle -development version. So there is going -to be a whole bunch of other stuff - -00:04:14.668 --> 00:04:18.361 line:100% position:50% align:middle -in here that's just for development, -and we're going to learn - -00:04:18.361 --> 00:04:22.731 line:100% position:50% align:middle -how do we take that out for production -mode? So we want to go back to "import - -00:04:22.731 --> 00:04:26.140 line:100% position:50% align:middle -React from `react`," and we want -to create our first component. - -00:04:26.140 --> 00:04:28.999 line:100% position:50% align:middle -And the way that we do that is we -say "class", and we're going to be using - -00:04:28.999 --> 00:04:33.801 line:100% position:50% align:middle -ES6 classes here. And we'll look at what -the difference is between the two. - -00:04:33.801 --> 00:04:40.293 line:100% position:50% align:middle -But we'll say "class StorePicker", and we -use a capital on the front of all of our - -00:04:40.293 --> 00:04:44.770 line:100% position:50% align:middle -components because they can be used more -than once. And we're going to say "extends", - -00:04:44.770 --> 00:04:51.930 line:100% position:50% align:middle -and it's going to extend "React.Component", -and open up and close your curly brackets. - -00:04:51.930 --> 00:04:57.667 line:100% position:50% align:middle -Now that is our very basic component. -In every single component that you build, - -00:04:57.667 --> 00:05:02.638 line:100% position:50% align:middle -it means at least one method, and that -is the render() method. So when a component - -00:05:02.638 --> 00:05:07.779 line:100% position:50% align:middle -gets rendered to the actual page, it will -ask StorePicker "what HTML should - -00:05:07.779 --> 00:05:15.094 line:100% position:50% align:middle -I display?" So we type "render()", and if you -are new to ES6 classes, this is sort - -00:05:15.094 --> 00:05:21.176 line:100% position:50% align:middle -of similar to doing something like this -like "function store()"-- sorry, "render()", - -00:05:21.176 --> 00:05:25.882 line:100% position:50% align:middle -something like that. However, we just -write it like this here, and then - -00:05:25.882 --> 00:05:30.373 line:100% position:50% align:middle -inside of this render() we are going -to return some JSX. - -00:05:30.373 --> 00:05:32.828 line:100% position:50% align:middle -We'll learn about more of that in the -video. So we'll say "return", - -00:05:32.828 --> 00:05:36.250 line:100% position:50% align:middle -I'm just going to have a paragraph -that says "Hello", and close - -00:05:36.250 --> 00:05:41.230 line:100% position:50% align:middle -that up. Now that is our StorePicker -component. How do I get it to actually - -00:05:41.230 --> 00:05:45.764 line:100% position:50% align:middle -render onto the page? If you open up your -HTML here, you're going to see that we - -00:05:45.764 --> 00:05:50.004 line:100% position:50% align:middle -have an empty div right here. Div with the -id of "main," and this is where the React - -00:05:50.004 --> 00:05:54.194 line:100% position:50% align:middle -app is going to go. This is called a -mounting point for us with a div with the - -00:05:54.194 --> 00:06:00.031 line:100% position:50% align:middle -id of "main." So what we do here, is we -need to go and grab `react-dom` - -00:06:00.031 --> 00:06:03.379 line:100% position:50% align:middle -because React is not just for HTML -in the DOM. - -00:06:03.379 --> 00:06:07.705 line:100% position:50% align:middle -It can also be used to create -Android apps as well as iOS - -00:06:07.705 --> 00:06:12.791 line:100% position:50% align:middle -apps, and there is a `canvas` render. -So where React renders out to is not just - -00:06:12.791 --> 00:06:17.820 line:100% position:50% align:middle -HTML, but in our case we actually want it -to render to HTML. So we need to import - -00:06:17.820 --> 00:06:23.640 line:100% position:50% align:middle -the render() method from a package called -"react-dom." Now sometimes you may see - -00:06:23.640 --> 00:06:29.856 line:100% position:50% align:middle -people say import reactDOM -from 'react-dom,' and then what we're - -00:06:29.856 --> 00:06:35.840 line:100% position:50% align:middle -going to do is down here we'll say -"ReactDom.render()", but in our case, we - -00:06:35.840 --> 00:06:39.411 line:100% position:50% align:middle -don't need the entire `react-dom` package. -We just need that one render() method. - -00:06:39.411 --> 00:06:45.596 line:100% position:50% align:middle -So rather than import the entire package, -we just import one of the methods - -00:06:45.596 --> 00:06:49.205 line:100% position:50% align:middle -from it, and that's what these -curly brackets in ES6 will do. - -00:06:49.205 --> 00:06:52.541 line:100% position:50% align:middle -So what we do is say "render()", -and the first thing that we - -00:06:52.541 --> 00:06:56.588 line:100% position:50% align:middle -pass it is what component would we -like to render. In our case, it's going - -00:06:56.588 --> 00:07:01.881 line:100% position:50% align:middle -to be StorePicker. So here we say -"StorePicker", and this is JSX here - -00:07:01.881 --> 00:07:04.223 line:100% position:50% align:middle -because we created this -component, and when you - -00:07:04.223 --> 00:07:08.040 line:100% position:50% align:middle -want to render out a component, -you open up a tag, you type the name - -00:07:08.040 --> 00:07:11.599 line:100% position:50% align:middle -of the component, and then you -close the actual component itself. - -00:07:11.599 --> 00:07:16.957 line:100% position:50% align:middle -And then the second thing is what -DOM element should it render out to? - -00:07:16.957 --> 00:07:21.520 line:100% position:50% align:middle -So we have a div with the id of "main." How -do we select that? Well we can just use - -00:07:21.520 --> 00:07:27.780 line:100% position:50% align:middle -document.querySelector, and we'll pass it -with an id of "main." You could also use - -00:07:27.780 --> 00:07:32.910 line:100% position:50% align:middle -document.getElementById there. So now, -if I save that, and go back to our - -00:07:32.910 --> 00:07:37.760 line:100% position:50% align:middle -application...Oh, there we go. Look all -ready you see "Hello," now if we go to our - -00:07:37.760 --> 00:07:41.900 line:100% position:50% align:middle -React Dev ools, you'll see that the -StorePicker component has been rendered to the - -00:07:41.900 --> 00:07:48.240 line:100% position:50% align:middle -page, and that's pretty much it. Now it's -a best practice to put each of your - -00:07:48.240 --> 00:07:55.096 line:100% position:50% align:middle -components in a separate file. So rather -than us build our entire application - -00:07:55.096 --> 00:07:58.959 line:100% position:50% align:middle -in one file, and there's nothing wrong -with that. However, it's a little bit - -00:07:58.959 --> 00:08:05.400 line:100% position:50% align:middle -easier to maintain it if we put each -of our components in their own files. - -00:08:05.400 --> 00:08:09.650 line:100% position:50% align:middle -So what I like to do is go to `components` -here. I'm going to create a file. - -00:08:09.650 --> 00:08:15.165 line:100% position:50% align:middle -And I'm going to name it StorePicker.js -and I'm naming it exactly as the component - -00:08:15.165 --> 00:08:21.803 line:100% position:50% align:middle -is named. And I'm going to take this -component here and I'm going to go - -00:08:21.803 --> 00:08:26.700 line:100% position:50% align:middle -to StorePicker.js and paste it there. Now -you might think that's all we need to do - -00:08:26.700 --> 00:08:30.039 line:100% position:50% align:middle -in order for it to actually work. -But there's a couple of things that need - -00:08:30.039 --> 00:08:35.059 line:100% position:50% align:middle -to happen here. First of all, we need -React, so we need to import React - -00:08:35.059 --> 00:08:38.982 line:100% position:50% align:middle -from `react`, and you're going to have -to do that in the top of every - -00:08:38.982 --> 00:08:42.437 line:100% position:50% align:middle -single component. Not like jQuery, where -you load on the page, and it's - -00:08:42.437 --> 00:08:46.071 line:100% position:50% align:middle -available to everyone. With ES6 -modules, if you need something - -00:08:46.071 --> 00:08:49.916 line:100% position:50% align:middle -inside of of these JS modules here, -you need to make sure - -00:08:49.916 --> 00:08:53.550 line:100% position:50% align:middle -that you import it inside of every -single file that you need it. - -00:08:53.550 --> 00:08:58.267 line:100% position:50% align:middle -So we've imported React. We've needed it. -We create this class here, and then what - -00:08:58.267 --> 00:09:03.228 line:100% position:50% align:middle -we would do is we type "export default -StorePicker;", and what that's going - -00:09:03.228 --> 00:09:07.214 line:100% position:50% align:middle -to allow us to do is we've created this -tidy little component that we can go - -00:09:07.214 --> 00:09:16.651 line:100% position:50% align:middle -back into our index.js and we will say -"import StorePicker from," now you might - -00:09:16.651 --> 00:09:21.464 line:100% position:50% align:middle -think we just type "StorePicker" right? -However, if it's just a string, Webpack - -00:09:21.464 --> 00:09:24.983 line:100% position:50% align:middle -thinks that you look in the node_modules -directory, and this is not a node module. - -00:09:24.983 --> 00:09:29.440 line:100% position:50% align:middle -This is a module that we've created our -actual selves. So we need to do what's - -00:09:29.440 --> 00:09:34.910 line:100% position:50% align:middle -called a relative path, so "./" for in the -index.html, we need to go inside of the - -00:09:34.910 --> 00:09:39.967 line:100% position:50% align:middle -`components` folder, and we want to look -for StorePicker. You don't need the ".js" - -00:09:39.967 --> 00:09:45.058 line:100% position:50% align:middle -on the end. It's assumed, so you can just -simply type "StorePicker." So if we refresh, - -00:09:45.058 --> 00:09:51.250 line:100% position:50% align:middle -nothing should have happened because we -have just sort of refactored it, made the - -00:09:51.250 --> 00:09:54.353 line:100% position:50% align:middle -component inside of here, and this -is nice. We're going to be able to go - -00:09:54.353 --> 00:09:57.325 line:100% position:50% align:middle -into the StorePicker every time that we -need to edit it. And we don't have - -00:09:57.325 --> 00:10:01.000 line:100% position:50% align:middle -to scroll through a thousand -lines of code in order to work with it. +WEBVTT + +1 +00:00:00.272 --> 00:00:03.022 +(upbeat ukulele) + +2 +00:00:06.939 --> 00:00:08.880 +Alright so let's get up and running + +3 +00:00:08.880 --> 00:00:10.451 +with our first component. + +4 +00:00:10.451 --> 00:00:12.112 +Our first component, we're gonna build something, + +5 +00:00:12.112 --> 00:00:13.664 +looks a little bit something like this, + +6 +00:00:13.664 --> 00:00:15.215 +where it's called our store picker component, + +7 +00:00:15.215 --> 00:00:17.138 +where we're gonna allow people to enter in + +8 +00:00:17.138 --> 00:00:19.314 +the name of the store and when they click + +9 +00:00:19.314 --> 00:00:22.045 +the URL it's going to move them to forward slash store + +10 +00:00:22.045 --> 00:00:24.985 +forward slash the name of the store that we actually have. + +11 +00:00:24.985 --> 00:00:27.752 +So, open up your index dot JS, we're gonna write it here + +12 +00:00:27.752 --> 00:00:30.079 +and then refactor it out to its own component file. + +13 +00:00:30.079 --> 00:00:32.398 +But I wanted to talk real quick about how + +14 +00:00:32.398 --> 00:00:34.521 +this actually gets loaded onto the page. + +15 +00:00:34.521 --> 00:00:36.934 +Earlier we just had written hey and when we saved it, + +16 +00:00:36.934 --> 00:00:38.255 +it automatically refreshed, + +17 +00:00:38.255 --> 00:00:39.651 +but how is that actually happening? + +18 +00:00:39.651 --> 00:00:42.226 +Well, if you view the source on your actual page, + +19 +00:00:42.226 --> 00:00:43.985 +you'll see that there's a script tag here + +20 +00:00:43.985 --> 00:00:46.309 +where it says forward slash static, forward slash JS, + +21 +00:00:46.309 --> 00:00:48.109 +forward slash bundle dot JS. + +22 +00:00:48.109 --> 00:00:51.811 +And what is happening is that webpack, the thing + +23 +00:00:51.811 --> 00:00:54.410 +that's running under the hood with Create React App, + +24 +00:00:54.410 --> 00:00:57.014 +it's sort of taking in your index tag dot JS + +25 +00:00:57.014 --> 00:00:58.983 +and it's gonna take in all the other files that we require + +26 +00:00:58.983 --> 00:01:00.925 +inside of this index dot JS. + +27 +00:01:00.925 --> 00:01:04.059 +It's gonna bundle it all into one big dot JS file. + +28 +00:01:04.059 --> 00:01:06.142 +So if we actually click through to that, + +29 +00:01:06.142 --> 00:01:08.946 +you're going to see that there's already some code in there, + +30 +00:01:08.946 --> 00:01:11.675 +and don't worry too much about this just because + +31 +00:01:11.675 --> 00:01:15.110 +this is the code that's required to do the hot reloading, + +32 +00:01:15.110 --> 00:01:16.616 +the instant updating, + +33 +00:01:16.616 --> 00:01:19.693 +so this code doesn't actually come along for the ride + +34 +00:01:19.693 --> 00:01:21.743 +when we deploy it to our actual application. + +35 +00:01:21.743 --> 00:01:23.188 +This is just for development. + +36 +00:01:23.188 --> 00:01:25.647 +But this little hey that I've written in here. + +37 +00:01:25.647 --> 00:01:27.666 +If I search for alert hey there it is! + +38 +00:01:27.666 --> 00:01:29.618 +There's the code that we've actually written + +39 +00:01:29.618 --> 00:01:32.631 +and I'm sure if I were to say hello, + +40 +00:01:32.631 --> 00:01:35.910 +and give this a save and refresh, + +41 +00:01:35.910 --> 00:01:39.247 +now my bundle dot JS will have hello in there, + +42 +00:01:39.247 --> 00:01:40.582 +you can see it. + +43 +00:01:40.582 --> 00:01:43.136 +So, that's great what we need to do is go into this, + +44 +00:01:43.136 --> 00:01:46.211 +you could delete all of the code that's our index dot JS, + +45 +00:01:46.211 --> 00:01:49.008 +and the very first thing that we need to do is + +46 +00:01:49.008 --> 00:01:51.512 +import our dependencies, and the way we do that is + +47 +00:01:51.512 --> 00:01:55.762 +we type import react, capital r, from quotes react. + +48 +00:01:56.697 --> 00:02:00.226 +And what's gonna happen, sort of behind the scenes there is + +49 +00:02:00.226 --> 00:02:02.406 +it's going to go into our node modules folder, + +50 +00:02:02.406 --> 00:02:03.924 +because remember when we had that + +51 +00:02:03.924 --> 00:02:05.281 +package dot Jsong file here? + +52 +00:02:05.281 --> 00:02:07.953 +And we said that react was one of our dependencies? + +53 +00:02:07.953 --> 00:02:11.072 +Well that means that when we MTM installed it + +54 +00:02:11.072 --> 00:02:14.403 +we were able to then import it via this notation + +55 +00:02:14.403 --> 00:02:16.996 +that we have here, this is called ES6 Modules. + +56 +00:02:16.996 --> 00:02:19.841 +So we imported React from react here, + +57 +00:02:19.841 --> 00:02:22.219 +and then what we need to do here is make a class. + +58 +00:02:22.219 --> 00:02:24.565 +So every single component that we have + +59 +00:02:24.565 --> 00:02:27.420 +is going to be its own class. + +60 +00:02:27.420 --> 00:02:29.266 +And the way that you create a class in React + +61 +00:02:29.266 --> 00:02:31.387 +is you say class, and then we can just + +62 +00:02:31.387 --> 00:02:34.700 +make up the name for it, so let's call it a StorePicker. + +63 +00:02:34.700 --> 00:02:37.701 +It's sort of a best practice to put a capital + +64 +00:02:37.701 --> 00:02:39.920 +on the front of all of your classes + +65 +00:02:39.920 --> 00:02:43.512 +and the reasoning behind that is because they are going + +66 +00:02:43.512 --> 00:02:45.726 +to be reusable if we wanted to render out two or three + +67 +00:02:45.726 --> 00:02:48.410 +StorePicker components to the same page, + +68 +00:02:48.410 --> 00:02:51.296 +we totally could and that sort of notes to us. + +69 +00:02:51.296 --> 00:02:55.322 +Then we'll say 'extends' and react dot component + +70 +00:02:55.322 --> 00:02:57.321 +and component is the thing that we are extending + +71 +00:02:57.321 --> 00:03:01.642 +inside of there. Now you may also see sometimes online + +72 +00:03:01.642 --> 00:03:03.421 +instead of people importing all of React + +73 +00:03:03.421 --> 00:03:06.957 +they will simply just import Component from React + +74 +00:03:06.957 --> 00:03:09.680 +and then they just simply extend Component + +75 +00:03:09.680 --> 00:03:11.284 +instead of React dot Component. + +76 +00:03:11.284 --> 00:03:13.512 +What's the difference? Absolutely nothing. + +77 +00:03:13.512 --> 00:03:15.853 +It doesn't make your bundle file, bundle size + +78 +00:03:15.853 --> 00:03:17.857 +any smaller in the case of React here, + +79 +00:03:17.857 --> 00:03:22.176 +it's just you don't have to type React dot. + +80 +00:03:22.176 --> 00:03:23.660 +So, that's up to you just make sure + +81 +00:03:23.660 --> 00:03:25.800 +you remember that you do it one way. + +82 +00:03:25.800 --> 00:03:27.258 +Another thing you need to remember is + +83 +00:03:27.258 --> 00:03:29.542 +don't put a capital 'r' on here, that will cause + +84 +00:03:29.542 --> 00:03:33.370 +tons of pain in the future, in terms of, + +85 +00:03:33.370 --> 00:03:35.753 +I've done it myself, all sorts of crazy errors + +86 +00:03:35.753 --> 00:03:36.943 +that you don't think you have. + +87 +00:03:36.943 --> 00:03:40.019 +Now we're in this class here and every single class + +88 +00:03:40.019 --> 00:03:43.544 +in React needs at least one method inside of it, + +89 +00:03:43.544 --> 00:03:46.257 +and that method is something called 'render'. + +90 +00:03:46.257 --> 00:03:50.962 +And render determines what html do I put on the page + +91 +00:03:50.962 --> 00:03:53.041 +or what dom elements at the end of the day + +92 +00:03:53.041 --> 00:03:55.813 +do I render out to the page. So the way that we do that is + +93 +00:03:55.813 --> 00:03:59.466 +we type 'render', and this is just the syntax + +94 +00:03:59.466 --> 00:04:01.884 +for putting a method inside of a component. + +95 +00:04:01.884 --> 00:04:04.121 +And then from Render we simply just return + +96 +00:04:04.121 --> 00:04:08.503 +and let's just give ourselves a paragraph that says Hello. + +97 +00:04:08.503 --> 00:04:10.008 +And give that a save. Now, nothing's going to + +98 +00:04:10.008 --> 00:04:12.451 +show up on here and that's because we haven't yet + +99 +00:04:12.451 --> 00:04:15.426 +mounted our application, so this is another + +100 +00:04:15.426 --> 00:04:19.985 +important aspect inside of React, is that we're not + +101 +00:04:19.985 --> 00:04:22.175 +actually ever going to be touching the dom, + +102 +00:04:22.175 --> 00:04:24.810 +like what I mean by that is we're never actually + +103 +00:04:24.810 --> 00:04:27.095 +going to be doing any, like, selecting a div + +104 +00:04:27.095 --> 00:04:29.393 +and updating the text in the div. + +105 +00:04:29.393 --> 00:04:32.568 +But there is one time that we do need to touch the dom + +106 +00:04:32.568 --> 00:04:35.454 +in React, and that is when we mount the entire application + +107 +00:04:35.454 --> 00:04:38.966 +to the page. So if you open up the index dot JS + +108 +00:04:38.966 --> 00:04:42.739 +or index dot html file that's in your public folder + +109 +00:04:42.739 --> 00:04:45.036 +you'll notice that we have this empty div + +110 +00:04:45.036 --> 00:04:47.089 +with a div with an ID of 'main'. + +111 +00:04:47.089 --> 00:04:49.881 +And this is, sort of, where you will be + +112 +00:04:49.881 --> 00:04:51.846 +mounting your React application. + +113 +00:04:51.846 --> 00:04:54.325 +Now if this was another application, + +114 +00:04:54.325 --> 00:04:57.530 +maybe you were working on like a WordPress theme + +115 +00:04:57.530 --> 00:05:00.555 +or you have another CMS where you don't want + +116 +00:05:00.555 --> 00:05:03.170 +the entire app to be built in React, but you want + +117 +00:05:03.170 --> 00:05:05.384 +like maybe a store picker or a video player + +118 +00:05:05.384 --> 00:05:08.288 +to be built in React, if that's the case then + +119 +00:05:08.288 --> 00:05:10.399 +you would have an empty div on the page + +120 +00:05:10.399 --> 00:05:12.341 +and that's where your React would get mounted to. + +121 +00:05:12.341 --> 00:05:14.455 +In our case, the entire application is going to be + +122 +00:05:14.455 --> 00:05:16.978 +built in React, so really the only html + +123 +00:05:16.978 --> 00:05:19.569 +that you need to write is an empty div + +124 +00:05:19.569 --> 00:05:20.991 +where we're gonna mount it to. + +125 +00:05:20.991 --> 00:05:24.162 +So we'll go into here, and in order to actually + +126 +00:05:24.162 --> 00:05:27.004 +get it to render out to the page we need a + +127 +00:05:27.004 --> 00:05:29.840 +secondary package called React Dom. + +128 +00:05:29.840 --> 00:05:32.423 +And the reason why we have a secondary package + +129 +00:05:32.423 --> 00:05:34.667 +called React Dom is because React can be used for + +130 +00:05:34.667 --> 00:05:38.028 +a number of other things that we have, so React + +131 +00:05:38.028 --> 00:05:40.350 +can be used to build iOS apps, and it can be used + +132 +00:05:40.350 --> 00:05:43.198 +for Android apps, and it can be used to render to Canvas. + +133 +00:05:43.198 --> 00:05:46.057 +So it's not just rendering out to the dom, + +134 +00:05:46.057 --> 00:05:47.663 +but in our case we're building a website + +135 +00:05:47.663 --> 00:05:49.322 +so we need to render out to the dom. + +136 +00:05:49.322 --> 00:05:51.192 +So, here what we're gonna do is we're gonna say import, + +137 +00:05:51.192 --> 00:05:54.754 +curly brackets, render from 'react-dom'. + +138 +00:05:54.754 --> 00:05:58.894 +Now, what's the difference between importing just React + +139 +00:05:58.894 --> 00:06:01.098 +without the curly brackets or from this, + +140 +00:06:01.098 --> 00:06:05.492 +which is simply just the render method from react-dom + +141 +00:06:05.492 --> 00:06:08.189 +and the answer to that is in this case we need + +142 +00:06:08.189 --> 00:06:11.368 +the entire React package in order to build our application, + +143 +00:06:11.368 --> 00:06:14.971 +but in some cases you only need one of the methods + +144 +00:06:14.971 --> 00:06:17.041 +you sort of wanna just cherry-pick that + +145 +00:06:17.041 --> 00:06:20.694 +little one method from the package that you need. + +146 +00:06:20.694 --> 00:06:23.256 +And in our case, we only need the render method. + +147 +00:06:23.256 --> 00:06:24.845 +There's a couple of other methods in there + +148 +00:06:24.845 --> 00:06:26.596 +that are used for server side rendering + +149 +00:06:26.596 --> 00:06:29.678 +and rendering out to a string, but in our case + +150 +00:06:29.678 --> 00:06:30.974 +we just want the render method. + +151 +00:06:30.974 --> 00:06:33.544 +So, we have this now method called 'render' + +152 +00:06:33.544 --> 00:06:36.111 +and we can open and close it, and the render method + +153 +00:06:36.111 --> 00:06:39.585 +takes two things: first, it takes some jsx, + +154 +00:06:39.585 --> 00:06:42.539 +which is sort of like html. So, like, let me put + +155 +00:06:42.539 --> 00:06:45.189 +a paragraph tag that says hello there, + +156 +00:06:45.189 --> 00:06:48.552 +or let's do something more fun, 'HEYYYYY'. + +157 +00:06:48.552 --> 00:06:50.130 +And the second thing that render needs + +158 +00:06:50.130 --> 00:06:52.000 +is the mounting point. You need to give it + +159 +00:06:52.000 --> 00:06:55.412 +an actual dom element in order to mount to the page. + +160 +00:06:55.412 --> 00:06:57.127 +So the way that we can do that is supposed to say + +161 +00:06:57.127 --> 00:07:00.474 +'document dot query selector' and you pass it + +162 +00:07:00.474 --> 00:07:03.236 +an ID of 'main' and you can also swap that out + +163 +00:07:03.236 --> 00:07:06.041 +with 'document dot get element by ID' + +164 +00:07:06.041 --> 00:07:08.205 +that would work as well. So I wanna give it a save, + +165 +00:07:08.205 --> 00:07:11.485 +we should be able to mount our React app to the page, + +166 +00:07:11.485 --> 00:07:13.483 +you should see 'HEYYYY' rendering out there. + +167 +00:07:13.483 --> 00:07:16.918 +If you open up your React dev tools now, + +168 +00:07:16.918 --> 00:07:19.201 +so I'm gonna open up React dev tools, + +169 +00:07:19.201 --> 00:07:22.154 +you will see the dev tools tab showing up + +170 +00:07:22.154 --> 00:07:25.190 +and you will see that this is how React sees + +171 +00:07:25.190 --> 00:07:28.016 +your application, as just a paragraph tag. + +172 +00:07:28.016 --> 00:07:30.522 +Now, we don't wanna render out just a paragraph tag, + +173 +00:07:30.522 --> 00:07:33.290 +we want to render out the entire StorePicker tag. + +174 +00:07:33.290 --> 00:07:36.443 +So by creating a component called StorePicker + +175 +00:07:36.443 --> 00:07:38.893 +it allows us to use it by simply just using it + +176 +00:07:38.893 --> 00:07:42.393 +as a regular tag. So let's just say StorePicker, + +177 +00:07:42.393 --> 00:07:44.168 +and I'm going to self-close it. + +178 +00:07:44.168 --> 00:07:46.390 +We'll talk a little bit more about self-closing + +179 +00:07:46.390 --> 00:07:49.016 +in just a second, but it's important that you + +180 +00:07:49.016 --> 00:07:52.940 +either do something like this, StorePicker, + +181 +00:07:52.940 --> 00:07:56.457 +where you have a corresponding closing tag + +182 +00:07:56.457 --> 00:07:59.025 +or you self-close it like that. + +183 +00:07:59.025 --> 00:08:00.583 +Let me get rid of this extra here. + +184 +00:08:00.583 --> 00:08:03.556 +Give it a save, and now when React refreshes + +185 +00:08:03.556 --> 00:08:06.769 +you'll see that we now have a StorePicker component + +186 +00:08:06.769 --> 00:08:08.910 +and inside of that StorePicker component + +187 +00:08:08.910 --> 00:08:10.819 +we see just a regular paragraph tag. + +188 +00:08:10.819 --> 00:08:13.104 +And React dev tools is always going to show you + +189 +00:08:13.104 --> 00:08:16.457 +your custom components in purple and any other, + +190 +00:08:16.457 --> 00:08:19.457 +just regular dom elements in a gray. + +191 +00:08:21.101 --> 00:08:24.114 +Good, now, it's a best practice to store your components + +192 +00:08:24.114 --> 00:08:28.465 +not in one big file, but in order to aid in + +193 +00:08:28.465 --> 00:08:30.969 +re-usability of these StorePicker components + +194 +00:08:30.969 --> 00:08:33.332 +we are going to keep them in separate files + +195 +00:08:33.332 --> 00:08:35.075 +so that we can import them and used them + +196 +00:08:35.075 --> 00:08:37.668 +whenever we want. So let's open up our side bar here, + +197 +00:08:37.668 --> 00:08:40.934 +and what you see in the source folder there's a + +198 +00:08:40.934 --> 00:08:43.389 +components folder. There's nothing in there except a + +199 +00:08:43.389 --> 00:08:46.137 +git keep file, we're gonna create a new file + +200 +00:08:46.137 --> 00:08:48.452 +and we're gonna call it StorePicker dot JS. + +201 +00:08:48.452 --> 00:08:52.543 +I always like to name my components the same as + +202 +00:08:52.543 --> 00:08:55.079 +the file name that we have there. + +203 +00:08:55.079 --> 00:09:00.079 +And then what we wanna do, is take that class of StorePicker + +204 +00:09:00.929 --> 00:09:04.852 +cut it out, move it over to StorePicker dot JS, + +205 +00:09:04.852 --> 00:09:08.945 +and paste it in there. Now lets give both of these a save + +206 +00:09:08.945 --> 00:09:10.416 +or we're gonna run into some errors, + +207 +00:09:10.416 --> 00:09:12.264 +let's see how we can solve these. + +208 +00:09:12.264 --> 00:09:13.991 +So what is it complaining about? + +209 +00:09:13.991 --> 00:09:17.671 +First, StorePicker is not defined, and that's because + +210 +00:09:17.671 --> 00:09:19.916 +in order to use a component in React, + +211 +00:09:19.916 --> 00:09:23.405 +actually in order to use anything in all of + +212 +00:09:23.405 --> 00:09:26.304 +ES6 modules, you first need to import that thing + +213 +00:09:26.304 --> 00:09:30.670 +into the file otherwise it doesn't know where to get it. + +214 +00:09:30.670 --> 00:09:32.124 +It has no idea that we've loaded this, + +215 +00:09:32.124 --> 00:09:34.699 +or we've created this component cause it's not loaded + +216 +00:09:34.699 --> 00:09:36.742 +into our main index dot JS file. + +217 +00:09:36.742 --> 00:09:38.915 +So what we're gonna do here is, + +218 +00:09:38.915 --> 00:09:41.337 +first thing we're gonna do is import React, + +219 +00:09:41.337 --> 00:09:44.310 +so import, React, from, React. + +220 +00:09:44.310 --> 00:09:47.203 +And you may be saying, like 'Hold on Wes!' + +221 +00:09:47.203 --> 00:09:50.182 +'Didn't you already import React in index dot JS?' + +222 +00:09:50.182 --> 00:09:53.166 +And the answer to that is you will always need + +223 +00:09:53.166 --> 00:09:56.218 +to import React into your components, + +224 +00:09:56.218 --> 00:09:58.790 +and the fact that you import React more than once + +225 +00:09:58.790 --> 00:10:01.474 +into your application doesn't matter + +226 +00:10:01.474 --> 00:10:04.622 +it's not going to put through you 40 copies of React, + +227 +00:10:04.622 --> 00:10:06.798 +it's going to de-dupe them and only + +228 +00:10:06.798 --> 00:10:09.230 +give you one copy of React in the rendered. + +229 +00:10:09.230 --> 00:10:12.721 +So you import it, you make what you want to make, + +230 +00:10:12.721 --> 00:10:14.218 +and then at the end of the day + +231 +00:10:14.218 --> 00:10:15.826 +you export the thing that you want. + +232 +00:10:15.826 --> 00:10:18.623 +I always like to think of this as making sausage. + +233 +00:10:18.623 --> 00:10:20.998 +Let's, before I give you this stupid example, + +234 +00:10:20.998 --> 00:10:24.503 +let's export, default, StorePicker. + +235 +00:10:24.503 --> 00:10:27.217 +So what we do here is you, you're making sausage, + +236 +00:10:27.217 --> 00:10:30.893 +you import your ingredients, you make your sausage, + +237 +00:10:30.893 --> 00:10:32.563 +or whatever it is that you're trying to make + +238 +00:10:32.563 --> 00:10:36.595 +and then in order to make that, in order to surface it + +239 +00:10:36.595 --> 00:10:39.289 +to other files in your application you need to + +240 +00:10:39.289 --> 00:10:42.952 +export it as a default from that file. + +241 +00:10:42.952 --> 00:10:45.961 +Now if we go back into index AS dot JS + +242 +00:10:45.961 --> 00:10:47.624 +we're still having this problem because + +243 +00:10:47.624 --> 00:10:49.407 +we're supposed to be trying to use a variable + +244 +00:10:49.407 --> 00:10:52.763 +called StorePicker here, when it knows nothing about it. + +245 +00:10:52.763 --> 00:10:57.720 +So we'll go ahead and import the StorePicker component + +246 +00:10:57.720 --> 00:11:00.869 +from, and you might think like, okay, I'll just say + +247 +00:11:00.869 --> 00:11:03.771 +'StorePicker' right, because that's what it was called. + +248 +00:11:03.771 --> 00:11:06.771 +However, if there is no path on here + +249 +00:11:07.848 --> 00:11:11.781 +then it doesn't know whether to look into node modules + +250 +00:11:11.781 --> 00:11:13.663 +cause it's something we installed, + +251 +00:11:13.663 --> 00:11:16.771 +or it doesn't know to look into your components folder + +252 +00:11:16.771 --> 00:11:18.356 +cause that's something that we made. + +253 +00:11:18.356 --> 00:11:20.213 +So what we wanna do is give it a path, + +254 +00:11:20.213 --> 00:11:22.513 +a relative path to where it is. + +255 +00:11:22.513 --> 00:11:24.150 +So, we're in the source folder, + +256 +00:11:24.150 --> 00:11:26.592 +we need to go into the components folder, + +257 +00:11:26.592 --> 00:11:31.592 +and then we wanna go and grab the StorePicker dot JS file. + +258 +00:11:31.797 --> 00:11:33.973 +Now, you do not need the dot JS on the end + +259 +00:11:33.973 --> 00:11:36.213 +that's assumed, so you can leave that out. + +260 +00:11:36.213 --> 00:11:39.026 +Now when I give it a refresh it should render out + +261 +00:11:39.026 --> 00:11:41.501 +the StorePicker back how we're used to, + +262 +00:11:41.501 --> 00:11:43.281 +let's just double check it one more time + +263 +00:11:43.281 --> 00:11:45.948 +and say 'I am the Store Picker'. + +264 +00:11:47.871 --> 00:11:50.924 +Beautiful! Alright, so hopefully we have that + +265 +00:11:50.924 --> 00:11:53.190 +up and running. We're gonna be doing this whole thing + +266 +00:11:53.190 --> 00:11:55.591 +import, create a class, and export that. + +267 +00:11:55.591 --> 00:11:58.445 +We're gonna be doing that a whole lot throughout this class. + +268 +00:11:58.445 --> 00:12:00.445 +See you in the next one. + diff --git a/RFB/04 - Writing HTML with JSX.vtt b/RFB/04 - Writing HTML with JSX.vtt index a27a0e5..220677a 100755 --- a/RFB/04 - Writing HTML with JSX.vtt +++ b/RFB/04 - Writing HTML with JSX.vtt @@ -1,358 +1,782 @@ -WEBVTT - -00:00:00.000 --> 00:00:02.928 line:100% position:50% align:middle -♪ [music] ♪ - -00:00:07.109 --> 00:00:10.494 line:100% position:50% align:middle -If you've ever tried to write HTML in -JavaScript, you'll know - -00:00:10.494 --> 00:00:12.260 line:100% position:50% align:middle -that it's a pain in the ass, where -you've got a paragraph, - -00:00:12.260 --> 00:00:15.650 line:100% position:50% align:middle -and you've got a concatenate in your -variable name, and you've gotta, - -00:00:15.650 --> 00:00:19.660 line:100% position:50% align:middle -like, open the concatenation again. It's -just a pain in the ass. - -00:00:19.660 --> 00:00:23.140 line:100% position:50% align:middle -ES6 Template Strings has made it a little -bit better, where you can do things like - -00:00:23.140 --> 00:00:28.020 line:100% position:50% align:middle -this, and you can say hello inside of it. -However, it's just not completely there. - -00:00:28.020 --> 00:00:33.890 line:100% position:50% align:middle -So, there's this thing called JSX, which -allows us to write HTML right inside of - -00:00:33.890 --> 00:00:37.730 line:100% position:50% align:middle -our JavaScript. And, while it's not -completely required by React, - -00:00:37.730 --> 00:00:42.540 line:100% position:50% align:middle -pretty much everybody uses it, because the -alternative to creating elements inside of - -00:00:42.540 --> 00:00:48.400 line:100% position:50% align:middle -React is you design like this: You say, -React.createElement. You pass it the tag - -00:00:48.400 --> 00:00:52.220 line:100% position:50% align:middle -name that you'd like. You pass it an -object for all the attributes, - -00:00:52.220 --> 00:00:57.050 line:100% position:50% align:middle -maybe, like, className of "testing", and -then, finally, you pass it all the - -00:00:57.050 --> 00:01:00.090 line:100% position:50% align:middle -content, like, "I love you." And what that -will do is it will create a paragraph tag - -00:01:00.090 --> 00:01:04.750 line:100% position:50% align:middle -with a class of "testing", and it will say, -"I love you." Go back to our code here, - -00:01:04.750 --> 00:01:09.440 line:100% position:50% align:middle -it says, "I love you." It's gone ahead and -created that paragraph element. - -00:01:09.440 --> 00:01:12.240 line:100% position:50% align:middle -But, like, who wants to do that? -Especially when you're nesting things, - -00:01:12.240 --> 00:01:15.260 line:100% position:50% align:middle -it's really no way to live your life. So, -rather than use that, - -00:01:15.260 --> 00:01:22.250 line:100% position:50% align:middle -we use JSX. Now, when you `return` from a -render(), you...previously we just did this: - -00:01:22.250 --> 00:01:27.260 line:100% position:50% align:middle -"Hello," right? However, you're more than -likely going to do multiple lines of - -00:01:27.260 --> 00:01:30.930 line:100% position:50% align:middle -actual code. And you'll know, like, if you -wanted to do this paragraph on its own - -00:01:30.930 --> 00:01:35.180 line:100% position:50% align:middle -line, the `return` is going to put a -semicolon there, and it's not going to - -00:01:35.180 --> 00:01:39.170 line:100% position:50% align:middle -return anything for us. So what you -actually want to do from your `return` is - -00:01:39.170 --> 00:01:42.610 line:100% position:50% align:middle -give yourself a pair of parentheses. And -then, inside of that, - -00:01:42.610 --> 00:01:46.500 line:100% position:50% align:middle -we're going to write all of the HTML that -we actually need. So, - -00:01:46.500 --> 00:01:53.110 line:100% position:50% align:middle -first tag that we actually need is a form -element here, and if you just type "form" - -00:01:53.110 --> 00:01:58.860 line:100% position:50% align:middle -and hit your CTRL-e tab, if you have -Emmet, it will just expand the actual HTML - -00:01:58.860 --> 00:02:02.020 line:100% position:50% align:middle -for you. I've got a blog post on that. If -you're interested in how to get it to - -00:02:02.020 --> 00:02:05.450 line:100% position:50% align:middle -work, just search "Wes Bos React Emmet," -something like that, and you'll find it on - -00:02:05.450 --> 00:02:09.400 line:100% position:50% align:middle -my blog post. Now, there's a couple of -different things that we need to know - -00:02:09.400 --> 00:02:13.960 line:100% position:50% align:middle -about this form element. First of all, if -you want to give it a class, - -00:02:13.960 --> 00:02:18.530 line:100% position:50% align:middle -and we need to, you cannot just say -"class='store-selector'" - -00:02:18.530 --> 00:02:23.070 line:100% position:50% align:middle -because "class" is a reserved word in -JavaScript, and React and JSX have - -00:02:23.070 --> 00:02:27.930 line:100% position:50% align:middle -disallowed it. So you need to say "className." -That's just one little pain that you - -00:02:27.930 --> 00:02:32.840 line:100% position:50% align:middle -need to remember. However, what I find -with using Emmet, instead of writing - -00:02:32.840 --> 00:02:37.260 line:100% position:50% align:middle -"className" every time, I just say -"form.store-selector", hit CTRL-e, - -00:02:37.260 --> 00:02:41.990 line:100% position:50% align:middle -and that will automatically scaffold it -out, and it detects that I'm not in HTML, - -00:02:41.990 --> 00:02:45.930 line:100% position:50% align:middle -I'm actually in JSX right now, and it's -going to use "className" instead of "class." - -00:02:45.930 --> 00:02:50.080 line:100% position:50% align:middle -We don't need this "action" here, so you can -go ahead and delete that. - -00:02:50.080 --> 00:02:55.830 line:100% position:50% align:middle -Another thing we need to know about JSX is -that you can only ever return one parent - -00:02:55.830 --> 00:02:58.670 line:100% position:50% align:middle -element, and what I mean by that is, I've -got this form tag here, - -00:02:58.670 --> 00:03:02.840 line:100% position:50% align:middle -and I can put as much HTML as I actually -want inside of it. However, - -00:03:02.840 --> 00:03:07.190 line:100% position:50% align:middle -I cannot put, like, maybe a paragraph that -says, right here...watch this. - -00:03:07.190 --> 00:03:12.340 line:100% position:50% align:middle -If I say this, and we go back to our thing -here, we're going to get an error in our - -00:03:12.340 --> 00:03:20.020 line:100% position:50% align:middle -console that says "syntax... fail... Adjacent JSX -elements must be wrapped in an enclosing - -00:03:20.020 --> 00:03:25.620 line:100% position:50% align:middle -tag." And that means you can't return two -elements. You must only ever return one - -00:03:25.620 --> 00:03:29.580 line:100% position:50% align:middle -parent element and put everything inside -of it. So, if you ever run into that, - -00:03:29.580 --> 00:03:33.110 line:100% position:50% align:middle -you can just pop a quick div around both -of those child elements, - -00:03:33.110 --> 00:03:38.560 line:100% position:50% align:middle -and that will return a single element. Now -inside of this form we need an h2 tag that - -00:03:38.560 --> 00:03:47.530 line:100% position:50% align:middle -says "Please Enter A Store." We need an -input tag here with the `type` of "text." - -00:03:47.530 --> 00:03:55.410 line:100% position:50% align:middle -And we are going to have "required" on it, -and then the `placeholder` say "Store Name." - -00:03:55.410 --> 00:04:00.470 line:100% position:50% align:middle -And one thing here you may notice, like -this. This is like if you were a developer - -00:04:00.470 --> 00:04:05.960 line:100% position:50% align:middle -in XHTML 4-point-whatever days, and you -know that everyone used to self close - -00:04:05.960 --> 00:04:10.650 line:100% position:50% align:middle -their tags. And then HTML5 came around and -we said, "Don't self close your tags, - -00:04:10.650 --> 00:04:15.130 line:100% position:50% align:middle -it's not necessary." But now we're back at -JSX and you have to self close your tags. - -00:04:15.130 --> 00:04:21.550 line:100% position:50% align:middle -So, any tag, like an `img` tag, or an `hr` -tag, or a `br` tag, all of these tags that - -00:04:21.550 --> 00:04:25.970 line:100% position:50% align:middle -don't have a corresponding, like, closing -tag for you, you need to make sure that - -00:04:25.970 --> 00:04:32.660 line:100% position:50% align:middle -they self close themselves in JSX. And it -will yell at you if you forget to do that. - -00:04:32.660 --> 00:04:37.540 line:100% position:50% align:middle -Again, learning Emmet in your editor is -probably worth it, just because it takes - -00:04:37.540 --> 00:04:41.580 line:100% position:50% align:middle -care of all these differences from when -you're writing regular HTML here. - -00:04:41.580 --> 00:04:47.030 line:100% position:50% align:middle -If I want a button with the `type` of -"submit", just because of some CSS that I - -00:04:47.030 --> 00:04:51.590 line:100% position:50% align:middle -have, and we'll say "Visit Store." Now, we -haven't actually hooked this up to any - -00:04:51.590 --> 00:04:55.260 line:100% position:50% align:middle -functionality at this point. It's just -simply what it actually looks like, - -00:04:55.260 --> 00:04:58.190 line:100% position:50% align:middle -and what we're going to do is we're going -to circle back and hook up all these - -00:04:58.190 --> 00:05:02.610 line:100% position:50% align:middle -events. So when you hit Submit, we take -the details out of this placeholder here. - -00:05:02.610 --> 00:05:05.420 line:100% position:50% align:middle -If we hop on over to our browser, you're -going to see, it says, - -00:05:05.420 --> 00:05:08.050 line:100% position:50% align:middle -"Please enter a store. Store name. Visit -store." It's not styled yet. - -00:05:08.050 --> 00:05:11.010 line:100% position:50% align:middle -We'll go over that in just a second. -However, there's one more thing I need to - -00:05:11.010 --> 00:05:14.410 line:100% position:50% align:middle -show you, and that's writing comments in -JSX. So you might think, - -00:05:14.410 --> 00:05:17.760 line:100% position:50% align:middle -okay, I've got a form here, and I want to -give myself a comment, - -00:05:17.760 --> 00:05:22.970 line:100% position:50% align:middle -I'll just say, "Look here." If you save -that, we actually see the JavaScript - -00:05:22.970 --> 00:05:27.260 line:100% position:50% align:middle -comment here. So I think, okay, maybe I'll -use HTML comments. "Look here." - -00:05:27.260 --> 00:05:30.000 line:100% position:50% align:middle -Right, because maybe it's like that. That -doesn't work as well. - -00:05:30.000 --> 00:05:34.860 line:100% position:50% align:middle -It yells at you for actually using a -comment. So if you to comment in React - -00:05:34.860 --> 00:05:37.880 line:100% position:50% align:middle -JSX, it's a little bit weird. It's a lot -weird. It's really annoying, - -00:05:37.880 --> 00:05:42.280 line:100% position:50% align:middle -but you have to use curly brackets. - -00:05:42.280 --> 00:05:46.300 line:100% position:50% align:middle -"{/* Hello */}". And that is a legit -comment inside of JSX. - -00:05:46.300 --> 00:05:51.640 line:100% position:50% align:middle -You can always comment regular JavaScript -anywhere else. It's only when you enter - -00:05:51.640 --> 00:05:57.390 line:100% position:50% align:middle -into this JSX here, where you have to use -these special comments in JSX here. - -00:05:57.390 --> 00:06:02.350 line:100% position:50% align:middle -So, if you need any sort of comment, you -need to make sure that you put it in - -00:06:02.350 --> 00:06:05.530 line:100% position:50% align:middle -there. And then one other, like, really -weird thing that has happened to me - -00:06:05.530 --> 00:06:08.130 line:100% position:50% align:middle -before, and I banged my head against the -wall for a couple hours, - -00:06:08.130 --> 00:06:14.620 line:100% position:50% align:middle -so maybe just commit this to memory, if -you put your comment right above whatever - -00:06:14.620 --> 00:06:19.440 line:100% position:50% align:middle -it is that you return, watch what's going -to happen here. Oh, big error here. - -00:06:19.440 --> 00:06:23.590 line:100% position:50% align:middle -"Module build failed: SyntaxError: -Unexpected token." It's telling you that - -00:06:23.590 --> 00:06:27.910 line:100% position:50% align:middle -the problem is that class right here, but -the actual problem is that we're actually - -00:06:27.910 --> 00:06:33.630 line:100% position:50% align:middle -trying to return this and this. And like -we said earlier, you can only ever return - -00:06:33.630 --> 00:06:37.500 line:100% position:50% align:middle -a single parent, not two. So don't put -your comments at the top level. - -00:06:37.500 --> 00:06:41.039 line:100% position:50% align:middle -Either put them above or put them inside -of your actual element - -00:06:41.039 --> 00:06:43.000 line:100% position:50% align:middle -that you're returning there. +WEBVTT + +1 +00:00:00.577 --> 00:00:03.244 +(upbeat music) + +2 +00:00:07.040 --> 00:00:08.740 +If you've ever tried to write HTML + +3 +00:00:08.740 --> 00:00:11.310 +inside of JavaScript you'll know that it's really + +4 +00:00:11.310 --> 00:00:13.169 +just a pain in the ass. + +5 +00:00:13.169 --> 00:00:14.794 +So what you'd have to do is you'd have + +6 +00:00:14.794 --> 00:00:16.840 +a paragraph tag and then if you want something inside of it + +7 +00:00:16.840 --> 00:00:19.201 +you have to close your quotes and you'd have to + +8 +00:00:19.201 --> 00:00:21.490 +have to concatenate in a variable inside of it + +9 +00:00:21.490 --> 00:00:24.340 +and you inevitably forget one of the pluses + +10 +00:00:24.340 --> 00:00:26.390 +and the whole thing will be broken. + +11 +00:00:26.390 --> 00:00:30.170 +And it's a little bit easier now where in ES6 + +12 +00:00:30.170 --> 00:00:32.410 +you could do something with a paragraph tag + +13 +00:00:32.410 --> 00:00:35.048 +and you can, inside of that you can put + +14 +00:00:35.048 --> 00:00:37.210 +a variable name and that's fine. + +15 +00:00:37.210 --> 00:00:39.750 +However, in React there's this thing called JSX + +16 +00:00:39.750 --> 00:00:42.690 +which allows us to just mix using JavaScript + +17 +00:00:42.690 --> 00:00:47.570 +and the HTML that we love and know and that is called a JSX. + +18 +00:00:47.570 --> 00:00:49.580 +So I'm gonna show you how to use it. + +19 +00:00:49.580 --> 00:00:51.630 +And actually I should say that JSX + +20 +00:00:51.630 --> 00:00:54.660 +is not required to write a React application, + +21 +00:00:54.660 --> 00:00:56.870 +however I would say most React developers + +22 +00:00:56.870 --> 00:00:57.703 +go ahead and use it. + +23 +00:00:57.703 --> 00:01:01.220 +The alternative to not using JSX, + +24 +00:01:01.220 --> 00:01:04.220 +which looks like this, is to, maybe I had + +25 +00:01:04.220 --> 00:01:07.840 +a paragraph with a class of hey, + +26 +00:01:07.840 --> 00:01:11.140 +instead of using that I could return React + +27 +00:01:11.140 --> 00:01:14.920 +dot create element and we wanna create a paragraph tag + +28 +00:01:14.920 --> 00:01:17.470 +with some attributes, we want the class name + +29 +00:01:17.470 --> 00:01:21.440 +to be hey and the value to be heyyyooo + +30 +00:01:22.690 --> 00:01:25.240 +and if I give that a save you'll see that we render out + +31 +00:01:25.240 --> 00:01:28.390 +heyyyooo here and that is rendered out to a React element. + +32 +00:01:28.390 --> 00:01:31.290 +However, that's as we say, that's no way to live + +33 +00:01:31.290 --> 00:01:33.110 +your life because as soon as you start + +34 +00:01:33.110 --> 00:01:36.480 +getting into nested elements then you have to nest + +35 +00:01:36.480 --> 00:01:39.000 +a React dot create element inside of here + +36 +00:01:39.000 --> 00:01:41.430 +and before you know it you're just weeping in the corner + +37 +00:01:41.430 --> 00:01:42.780 +because that's really hard to write. + +38 +00:01:42.780 --> 00:01:45.304 +So, we wanna swap that out with just using + +39 +00:01:45.304 --> 00:01:48.085 +regular HTML that we love and know. + +40 +00:01:48.085 --> 00:01:50.910 +Except there's a couple gotchas and we're gonna go through + +41 +00:01:50.910 --> 00:01:52.180 +what they all are now. + +42 +00:01:52.180 --> 00:01:55.850 +So, first thing we want to do is if we have + +43 +00:01:55.850 --> 00:01:58.220 +a form tag, I'm gonna go ahead and do that, + +44 +00:01:58.220 --> 00:02:00.640 +you give your form there, and you wanna give it + +45 +00:02:00.640 --> 00:02:03.317 +a class, you can't just use regular class + +46 +00:02:03.317 --> 00:02:07.710 +of store selector, and you're gonna see here, + +47 +00:02:08.914 --> 00:02:11.160 +warning, invalid DOM property class, + +48 +00:02:11.160 --> 00:02:12.270 +did you mean class name? + +49 +00:02:12.270 --> 00:02:15.480 +So when you want to add a class for CSS purposes + +50 +00:02:15.480 --> 00:02:18.250 +you have to put a class name on it + +51 +00:02:18.250 --> 00:02:20.060 +and that will get you up and running. + +52 +00:02:20.060 --> 00:02:22.860 +I recommend using Emmet, which is probably + +53 +00:02:22.860 --> 00:02:25.750 +what you're seeing me here, I just type form + +54 +00:02:25.750 --> 00:02:28.796 +dot store selector and hit tab + +55 +00:02:28.796 --> 00:02:31.410 +and that will automatically auto complete me + +56 +00:02:31.410 --> 00:02:33.910 +and it will detect that I'm not in regular HTML, + +57 +00:02:33.910 --> 00:02:37.650 +but I'm in JSX and it will use class name instead of class. + +58 +00:02:37.650 --> 00:02:39.490 +So if you're interested in how to get that work + +59 +00:02:39.490 --> 00:02:41.250 +for your editor I have some blog posts, + +60 +00:02:41.250 --> 00:02:45.350 +just search Wes Bos React Emmet + +61 +00:02:45.350 --> 00:02:48.120 +and it will give you what you want. + +62 +00:02:48.120 --> 00:02:50.320 +The other that we need to know about this + +63 +00:02:50.320 --> 00:02:53.740 +is if you are returning multiple lines, + +64 +00:02:53.740 --> 00:02:55.610 +so for example I have this form here + +65 +00:02:55.610 --> 00:02:58.071 +and inside of that let's give ourselves + +66 +00:02:58.071 --> 00:03:01.780 +an H2 tag that says, please enter a store. + +67 +00:03:01.780 --> 00:03:05.130 +What this does is it's actually going to work just fine, + +68 +00:03:05.130 --> 00:03:07.560 +see please enter a store, we have the form tag. + +69 +00:03:07.560 --> 00:03:09.750 +However, it's not indented properly + +70 +00:03:09.750 --> 00:03:12.070 +and that, I don't know about you, but that really bugs me. + +71 +00:03:12.070 --> 00:03:14.672 +So, well you might think, okay, I'll just do this, + +72 +00:03:14.672 --> 00:03:17.090 +I'll just put it on its own line. + +73 +00:03:17.090 --> 00:03:19.710 +But JavaScript has this handy little feature + +74 +00:03:19.710 --> 00:03:23.510 +where it'll break and the handy feature + +75 +00:03:23.510 --> 00:03:27.340 +is called ASI, automatic semicolon insertion + +76 +00:03:27.340 --> 00:03:29.911 +and it'll say, return, oh, you forgot a semicolon + +77 +00:03:29.911 --> 00:03:32.660 +and it will return nothing. + +78 +00:03:32.660 --> 00:03:35.160 +So what I like to do, and this is what a lot of people do, + +79 +00:03:35.160 --> 00:03:37.740 +is you just return a pair of parentheses + +80 +00:03:37.740 --> 00:03:40.600 +and then put your HTML inside of that + +81 +00:03:40.600 --> 00:03:45.490 +and good old BEDMAS, brackets, exponents, division, + +82 +00:03:45.490 --> 00:03:48.410 +you get the point, it will return the, + +83 +00:03:48.410 --> 00:03:50.460 +it will run the code in the parentheses first + +84 +00:03:50.460 --> 00:03:53.985 +and you're able to just return parentheses and a form tag. + +85 +00:03:53.985 --> 00:03:56.110 +If you're net to JavaScript, make sure + +86 +00:03:56.110 --> 00:03:58.750 +that you're not doing this, which is return is not + +87 +00:03:58.750 --> 00:04:01.561 +a function, it's a keyword and then we're returning + +88 +00:04:01.561 --> 00:04:05.210 +whatever is inside of the parentheses. + +89 +00:04:05.210 --> 00:04:08.340 +A couple other things we need to know about JSX + +90 +00:04:08.340 --> 00:04:12.200 +and the other one is that you cannot return + +91 +00:04:12.200 --> 00:04:13.640 +what's called sibling elements. + +92 +00:04:13.640 --> 00:04:16.290 +So above the form tag if I wanted to return + +93 +00:04:16.290 --> 00:04:19.352 +a paragraph tag that says fish and give that a save, + +94 +00:04:19.352 --> 00:04:22.220 +it's gonna yell at me and it's going to say, + +95 +00:04:22.220 --> 00:04:25.010 +failed to compile adjacent JSX elements + +96 +00:04:25.010 --> 00:04:27.260 +must be wrapped in a closing tag. + +97 +00:04:27.260 --> 00:04:29.750 +And that is because from a render method + +98 +00:04:29.750 --> 00:04:32.910 +you can only ever return one element. + +99 +00:04:32.910 --> 00:04:35.070 +You can put as many elements inside of the parent + +100 +00:04:35.070 --> 00:04:37.090 +element as you want, you just can't like, + +101 +00:04:37.090 --> 00:04:39.540 +if I put the paragraph inside of there it works just fine, + +102 +00:04:39.540 --> 00:04:42.150 +you just can't return sibling elements. + +103 +00:04:42.150 --> 00:04:45.270 +So that could be a problem, especially if you're using + +104 +00:04:45.270 --> 00:04:47.972 +a flex box or CSS grid where you need to return + +105 +00:04:47.972 --> 00:04:51.982 +six or seven children with no wrapper. + +106 +00:04:51.982 --> 00:04:54.580 +The solution to that, and this is brand new + +107 +00:04:54.580 --> 00:04:59.580 +in React 16.2, is you can wrap them in a React + +108 +00:04:59.710 --> 00:05:04.710 +dot fragment tag and then put this inside of there + +109 +00:05:05.430 --> 00:05:08.100 +and then that allows us to do things like + +110 +00:05:08.100 --> 00:05:09.830 +put our paragraph tag inside of it, + +111 +00:05:09.830 --> 00:05:12.960 +you can return as many adjacent elements as you want + +112 +00:05:12.960 --> 00:05:15.860 +and that React fragment tag is going to render + +113 +00:05:15.860 --> 00:05:16.860 +out to nothing. + +114 +00:05:16.860 --> 00:05:19.040 +Let me show you what I mean by that. + +115 +00:05:19.040 --> 00:05:22.010 +If we open it up, open up our store picker, + +116 +00:05:22.010 --> 00:05:23.650 +you see that it just renders out + +117 +00:05:23.650 --> 00:05:25.780 +just a paragraph tag and a form tag. + +118 +00:05:25.780 --> 00:05:28.536 +Previously what you had to do is just render out + +119 +00:05:28.536 --> 00:05:31.620 +a dummy div and then that gave you all these + +120 +00:05:31.620 --> 00:05:33.930 +extra unnecessary divs in your markup + +121 +00:05:33.930 --> 00:05:36.060 +which can really goof up your CSS + +122 +00:05:36.060 --> 00:05:38.150 +if you're using any sort of flex box or grid. + +123 +00:05:38.150 --> 00:05:41.650 +So React fragment is what you want. + +124 +00:05:41.650 --> 00:05:44.130 +It is coming soon where we'll be able + +125 +00:05:44.130 --> 00:05:47.140 +to do something like this where you just render out + +126 +00:05:47.140 --> 00:05:50.210 +blank tags and blank closing tags, + +127 +00:05:50.210 --> 00:05:53.790 +however it is currently not in the Babel version + +128 +00:05:53.790 --> 00:05:58.090 +that create your React app supports, so it won't work. + +129 +00:05:58.090 --> 00:06:01.740 +So the easiest way is to render out React dot fragment + +130 +00:06:01.740 --> 00:06:04.810 +or you can also import it like this, + +131 +00:06:06.118 --> 00:06:11.118 +fragment and then you can just render out a fragment tag + +132 +00:06:11.360 --> 00:06:12.960 +and that will do the exact same thing. + +133 +00:06:12.960 --> 00:06:14.980 +So put that in your back pocket + +134 +00:06:14.980 --> 00:06:16.770 +because you're going to need it. + +135 +00:06:16.770 --> 00:06:20.070 +Another thing you need to know about is commenting in JSX + +136 +00:06:20.070 --> 00:06:23.244 +does not look like commenting in regular React. + +137 +00:06:23.244 --> 00:06:26.460 +What we actually need to do for comments + +138 +00:06:26.460 --> 00:06:29.110 +is use curly brackets and JavaScript comments. + +139 +00:06:29.110 --> 00:06:31.680 +So, inside of here if I wanted to leave myself + +140 +00:06:31.680 --> 00:06:34.610 +a comment I would give myself a set of curly brackets + +141 +00:06:34.610 --> 00:06:37.131 +and curly brackets in JSX means + +142 +00:06:37.131 --> 00:06:41.230 +I'm doing some JavaScript, and we'll go + +143 +00:06:41.230 --> 00:06:43.430 +much more into this, but that notes + +144 +00:06:43.430 --> 00:06:48.040 +to JSX that I'm gonna hop back into JavaScript land + +145 +00:06:48.040 --> 00:06:51.180 +for a quick second and maybe set a variable, + +146 +00:06:51.180 --> 00:06:53.630 +maybe do a calculation, in our case + +147 +00:06:53.630 --> 00:06:57.340 +we're just going to do a comment which is this. + +148 +00:06:58.430 --> 00:06:59.820 +And it'll look like that. + +149 +00:06:59.820 --> 00:07:04.070 +So there is no regular HTML comments like that + +150 +00:07:04.070 --> 00:07:07.900 +or there is no just forward slash, forward slash comments + +151 +00:07:07.900 --> 00:07:10.410 +because that will comment out the closing bracket. + +152 +00:07:10.410 --> 00:07:13.473 +So you must use a block comment in JavaScript + +153 +00:07:13.473 --> 00:07:16.960 +and most editors, VS Code, will know + +154 +00:07:16.960 --> 00:07:20.730 +that you're in React JSX code and it'll hook up + +155 +00:07:20.730 --> 00:07:23.130 +your command forward slash to just automatically + +156 +00:07:23.130 --> 00:07:24.830 +toggle those comments on and off. + +157 +00:07:24.830 --> 00:07:27.189 +So it's not too much of an issue, + +158 +00:07:27.189 --> 00:07:29.710 +you just have to remember those things. + +159 +00:07:29.710 --> 00:07:32.170 +One other things is, don't put a comment above here, + +160 +00:07:32.170 --> 00:07:33.640 +that's going to give you the same issue + +161 +00:07:33.640 --> 00:07:38.180 +that we had where if you are, I've wasted many hours + +162 +00:07:38.180 --> 00:07:41.198 +on this before I wrote myself a little comment + +163 +00:07:41.198 --> 00:07:44.129 +like this is a store picker, and it tells you, + +164 +00:07:44.129 --> 00:07:49.129 +syntax error, unexpected token, comma, what. + +165 +00:07:49.400 --> 00:07:52.720 +And I finally realized that it was that whole + +166 +00:07:52.720 --> 00:07:54.260 +adjacent JSX selector. + +167 +00:07:54.260 --> 00:07:56.060 +The error message doesn't tell you that, + +168 +00:07:56.060 --> 00:07:59.154 +but you cannot return both a comment + +169 +00:07:59.154 --> 00:08:02.790 +and an element, if you want to have a comment + +170 +00:08:02.790 --> 00:08:05.840 +you must put it inside of your returned element. + +171 +00:08:05.840 --> 00:08:09.570 +Whether that's a fragment or a regular div tag + +172 +00:08:09.570 --> 00:08:11.200 +or a form tag in our case, + +173 +00:08:11.200 --> 00:08:12.440 +and that will get you up and running. + +174 +00:08:12.440 --> 00:08:15.020 +So, let's get rid of that form, + +175 +00:08:15.020 --> 00:08:18.110 +we'll get our H2 tag, we also need an input + +176 +00:08:18.110 --> 00:08:20.300 +with the type of text. + +177 +00:08:20.300 --> 00:08:22.120 +We want a required attribute on there + +178 +00:08:22.120 --> 00:08:25.614 +and we'll have a placeholder which is enter + +179 +00:08:25.614 --> 00:08:30.137 +or store name and then we'll have a button + +180 +00:08:30.137 --> 00:08:34.810 +with the type of submit and then inside of that + +181 +00:08:34.810 --> 00:08:39.810 +we will say, visit store, put a little arrow there. + +182 +00:08:41.890 --> 00:08:45.080 +Good, it's not styled yet, but we're gonna get into that + +183 +00:08:45.080 --> 00:08:47.310 +in the next video, you should see it being rendered out. + +184 +00:08:47.310 --> 00:08:50.889 +If we look at our elements panel, it's just regular, + +185 +00:08:50.889 --> 00:08:53.600 +let's open it up here, it's just the div, the main + +186 +00:08:53.600 --> 00:08:55.810 +and a form in all of our regular elements, + +187 +00:08:55.810 --> 00:08:57.810 +but if we look at it in our React dev tools + +188 +00:08:57.810 --> 00:09:01.150 +as React sees it, it's simply just a store picker component + +189 +00:09:01.150 --> 00:09:03.909 +which we could use all throughout our application. + +190 +00:09:03.909 --> 00:09:06.076 +(mumbles) + +191 +00:09:09.847 --> 00:09:11.850 +Now if you click on that, it's actually not + +192 +00:09:11.850 --> 00:09:14.190 +going to do anything, that's because we have not + +193 +00:09:14.190 --> 00:09:16.570 +hooked up the events just yet, but we will + +194 +00:09:16.570 --> 00:09:18.880 +be coming to that in a very soon video as well. + +195 +00:09:18.880 --> 00:09:20.080 +See you in the next one. + diff --git a/RFB/05 - Loading CSS into our React Application.vtt b/RFB/05 - Loading CSS into our React Application.vtt index b2efb65..824a14c 100755 --- a/RFB/05 - Loading CSS into our React Application.vtt +++ b/RFB/05 - Loading CSS into our React Application.vtt @@ -1,115 +1,282 @@ -WEBVTT - -00:00:03.580 --> 00:00:07.150 line:100% position:50% align:middle -♪ [music] ♪ - -00:00:07.150 --> 00:00:12.470 line:100% position:50% align:middle -CSS in React can be done a number of -different ways and you may have heard some - -00:00:12.470 --> 00:00:16.820 line:100% position:50% align:middle -people do inline style, some people do a -separate CSS file for every single - -00:00:16.820 --> 00:00:20.170 line:100% position:50% align:middle -component, and some people just do the -regular old way, where they have a Sass - -00:00:20.170 --> 00:00:25.360 line:100% position:50% align:middle -file or a CSS file and then they load it -into their HTML. So, whatever works. - -00:00:25.360 --> 00:00:29.330 line:100% position:50% align:middle -Chances are, if you have an existing -website, you already have CSS already set - -00:00:29.330 --> 00:00:32.910 line:100% position:50% align:middle -up. So, you don't need to involve that in -your whole Webpack build, - -00:00:32.910 --> 00:00:36.560 line:100% position:50% align:middle -you probably already have a process for -that. And there's no problem in just - -00:00:36.560 --> 00:00:41.660 line:100% position:50% align:middle -having a link tag and saying style.css in -your index.html and everything will be - -00:00:41.660 --> 00:00:45.475 line:100% position:50% align:middle -rendered on out. However, there are a -couple other ways. If I go to my - -00:00:45.475 --> 00:00:52.683 line:100% position:50% align:middle -index.html, one of the things that we can -do is load in our CSS and let Webpack do - -00:00:52.683 --> 00:00:56.650 line:100% position:50% align:middle -all of the loading for us, and the hot -reloading and all of that good stuff. - -00:00:56.650 --> 00:01:03.410 line:100% position:50% align:middle -So, I have compiled a style.css file for -you. Never mind all these style files, - -00:01:03.410 --> 00:01:06.600 line:100% position:50% align:middle -we're going to go over there when we hit -the animation videos. - -00:01:06.600 --> 00:01:12.060 line:100% position:50% align:middle -But, I've compiled a style.css file for -you and what we can then do is, - -00:01:12.060 --> 00:01:16.520 line:100% position:50% align:middle -we simply just type import and we don't -need to name it like styles, - -00:01:16.520 --> 00:01:23.264 line:100% position:50% align:middle -because we're not going to be using it. -We simply just say "import './css/style.css';" - -00:01:23.264 --> 00:01:26.460 line:100% position:50% align:middle -and that's going to take -everything that's inside of this file, - -00:01:26.460 --> 00:01:32.140 line:100% position:50% align:middle -Webpack is going to compile it all and -it's going to pop a style tag on the page - -00:01:32.140 --> 00:01:36.310 line:100% position:50% align:middle -for us. So now, when I save that, refresh, -automatically things are starting to look - -00:01:36.310 --> 00:01:41.520 line:100% position:50% align:middle -a lot better. All of that CSS is starting -to kick in. Some other people will have - -00:01:41.520 --> 00:01:46.320 line:100% position:50% align:middle -separate .css files for every single -component that they work on. - -00:01:46.320 --> 00:01:51.520 line:100% position:50% align:middle -And what that allows them to do is really -just scope the CSS to that specific - -00:01:51.520 --> 00:01:56.880 line:100% position:50% align:middle -component without having to load into -other pages. So, you could do that if you - -00:01:56.880 --> 00:02:00.060 line:100% position:50% align:middle -want. That's really a bit more of an -advanced topic. So, as far as we're - -00:02:00.060 --> 00:02:06.120 line:100% position:50% align:middle -concerned right now, we just want to -import CSS from the style.css file. - -00:02:06.120 --> 00:02:09.980 line:100% position:50% align:middle -And then, in a future video, we're going -to look at how do we actually run an NPM - -00:02:09.980 --> 00:02:15.320 line:100% position:50% align:middle -script in order to compile the style or -fuse Sass or Less or anything like that. - -00:02:15.320 --> 00:02:17.000 line:100% position:50% align:middle -How do you compile that on in? +WEBVTT + +1 +00:00:00.088 --> 00:00:02.838 line:15% +(cheerful music) + +2 +00:00:07.285 --> 00:00:09.040 +CSS in React can be approached + +3 +00:00:09.040 --> 00:00:11.700 +in a number of different ways so let's take a look + +4 +00:00:11.700 --> 00:00:13.610 +at some of the different options that we have. + +5 +00:00:13.610 --> 00:00:15.210 +So first of all, you might already have + +6 +00:00:15.210 --> 00:00:18.430 +an existing website which you're integrating React into, + +7 +00:00:18.430 --> 00:00:20.550 +and if that's the case, you likely already have + +8 +00:00:20.550 --> 00:00:23.750 +an existing build process and an existing CSS + +9 +00:00:23.750 --> 00:00:25.460 +way that you like to write your CSS. + +10 +00:00:25.460 --> 00:00:27.180 +So, if that was the case, + +11 +00:00:27.180 --> 00:00:29.370 +then you would just open up your indexed HTML + +12 +00:00:29.370 --> 00:00:32.490 +or whatever application has this mounting point + +13 +00:00:32.490 --> 00:00:33.690 +that we talked about earlier, + +14 +00:00:33.690 --> 00:00:35.430 +and you just stick a link tag in there + +15 +00:00:35.430 --> 00:00:39.120 +and you have style.css, then the CSS in that CSS file + +16 +00:00:39.120 --> 00:00:41.390 +is going to be applied to any classes and tags + +17 +00:00:41.390 --> 00:00:43.760 +that get rendered out to the page. + +18 +00:00:43.760 --> 00:00:48.240 +Another option, and this is often called Componentized CSS + +19 +00:00:48.240 --> 00:00:51.510 +or Inline-CSS, and the idea behind this is + +20 +00:00:51.510 --> 00:00:56.390 +rather than writing a big CSS file or maybe writing + +21 +00:00:56.390 --> 00:00:59.040 +multiple SAZ files that compile into one, + +22 +00:00:59.040 --> 00:01:01.800 +well, what people will do is they will import the CSS + +23 +00:01:01.800 --> 00:01:03.750 +directly into a component + +24 +00:01:03.750 --> 00:01:05.770 +that only relates with that component. + +25 +00:01:05.770 --> 00:01:08.370 +So, maybe I've got some CSS + +26 +00:01:08.370 --> 00:01:11.460 +that applies to my store selector and styles in h2, + +27 +00:01:11.460 --> 00:01:13.460 +and styles the button and the input, + +28 +00:01:13.460 --> 00:01:16.100 +then I would just simply import it into this component + +29 +00:01:16.100 --> 00:01:18.980 +and that will sort of tightly couple the CSS + +30 +00:01:18.980 --> 00:01:21.820 +with the actual component that gets rendered out. + +31 +00:01:21.820 --> 00:01:24.090 +So, those are sort of the two options, + +32 +00:01:24.090 --> 00:01:26.400 +there's lots of opinions on either side + +33 +00:01:26.400 --> 00:01:28.650 +as to which way people like + +34 +00:01:28.650 --> 00:01:31.460 +and I'm not going to really step in there because + +35 +00:01:31.460 --> 00:01:32.870 +it's a bit more of an advanced topic + +36 +00:01:32.870 --> 00:01:35.100 +and I will be covering that in my advanced React. + +37 +00:01:35.100 --> 00:01:36.310 +So I'm gonna show you how to + +38 +00:01:36.310 --> 00:01:40.000 +import CSS directly into our index.js file + +39 +00:01:40.000 --> 00:01:42.970 +which is going to get applied to the entire application. + +40 +00:01:42.970 --> 00:01:46.000 +Then, in a future video, I'm gonna show you how to + +41 +00:01:46.000 --> 00:01:48.750 +compile some CSS, so if you are looking to use + +42 +00:01:48.750 --> 00:01:50.550 +something like SAZ or stylus + +43 +00:01:50.550 --> 00:01:52.210 +and you wanna apply it to this application, + +44 +00:01:52.210 --> 00:01:53.220 +we're gonna look at how we do it + +45 +00:01:53.220 --> 00:01:55.660 +and that's gonna happen in the animation video. + +46 +00:01:55.660 --> 00:01:57.500 +So, all we really need to do here is, + +47 +00:01:57.500 --> 00:01:59.800 +I have a style.CSS file for you + +48 +00:01:59.800 --> 00:02:00.930 +and it's already compiled, + +49 +00:02:00.930 --> 00:02:03.100 +again we're gonna come back to compiling that + +50 +00:02:03.100 --> 00:02:05.980 +in a future video, you simply just need to + +51 +00:02:05.980 --> 00:02:09.420 +import and then we need to go into the current folder + +52 +00:02:09.420 --> 00:02:12.020 +and then there's a CSS folder and inside of that + +53 +00:02:12.020 --> 00:02:15.500 +we have a style.css file and because we are + +54 +00:02:15.500 --> 00:02:18.290 +set up on create react app, and again, + +55 +00:02:18.290 --> 00:02:20.670 +create react app under the hood + +56 +00:02:20.670 --> 00:02:22.940 +will do all the web-pack config for us, + +57 +00:02:22.940 --> 00:02:25.640 +the webpack config is smart enough to know that + +58 +00:02:25.640 --> 00:02:28.310 +this is obviously not a Javascript file, + +59 +00:02:28.310 --> 00:02:29.900 +so what it's going to do is it's going to + +60 +00:02:29.900 --> 00:02:33.210 +load in the CSS, stick it into a style tag, + +61 +00:02:33.210 --> 00:02:36.110 +and then anytime we make any changes to this CSS, + +62 +00:02:36.110 --> 00:02:38.310 +it's gonna automatically do that hot reloading thing + +63 +00:02:38.310 --> 00:02:40.080 +or it will change it for us. + +64 +00:02:40.080 --> 00:02:43.790 +Now, when we compile it for production and all that, + +65 +00:02:43.790 --> 00:02:47.700 +then we are going to kick out a separate .css file + +66 +00:02:47.700 --> 00:02:51.020 +and we'll look at that much later in this course + +67 +00:02:51.020 --> 00:02:51.853 +of when we have it. + +68 +00:02:51.853 --> 00:02:54.480 +So that's pretty much it, we just import the CSS, + +69 +00:02:54.480 --> 00:02:55.880 +then it gets applied and you can see + +70 +00:02:55.880 --> 00:02:58.370 +that this stuff is starting to look a lot better. + diff --git a/RFB/06 - Creating our application layout with components.vtt b/RFB/06 - Creating our application layout with components.vtt index 96e64ff..7ccd7be 100755 --- a/RFB/06 - Creating our application layout with components.vtt +++ b/RFB/06 - Creating our application layout with components.vtt @@ -1,267 +1,1034 @@ -WEBVTT - -00:00:00.289 --> 00:00:03.289 line:100% position:50% align:middle -♪ [music] ♪ - -00:00:07.059 --> 00:00:11.040 line:100% position:50% align:middle -We want to make the app layout and -that's this whole thing is going to be our - -00:00:11.040 --> 00:00:15.090 line:100% position:50% align:middle -app, and then inside of app we're going to -have...we got a Header component, - -00:00:15.090 --> 00:00:18.310 line:100% position:50% align:middle -we've got a whole bunch of Fish components -here. We've got our Order component and - -00:00:18.310 --> 00:00:23.250 line:100% position:50% align:middle -we've got our Inventory component. So -let's sort of scaffold that out and then - -00:00:23.250 --> 00:00:25.750 line:100% position:50% align:middle -we'll go into each component -and sort of hook them on up. - -00:00:25.750 --> 00:00:29.140 line:100% position:50% align:middle -So go back to our Sublime Text or whatever -editor you're using here, - -00:00:29.140 --> 00:00:33.186 line:100% position:50% align:middle -and we want to make a new component and -I'm going to call that "App.js." - -00:00:33.186 --> 00:00:37.390 line:100% position:50% align:middle -And what you can do is you can pretty -much just take...if you're comfortable - -00:00:37.390 --> 00:00:40.080 line:100% position:50% align:middle -with this already, you can take it from -StorePicker and put it in App. - -00:00:40.080 --> 00:00:43.700 line:100% position:50% align:middle -I'm going to go through it once more with -you. So first we need React, - -00:00:43.700 --> 00:00:50.930 line:100% position:50% align:middle -then we want to make a component for our -application, so say, "class App extends, - -00:00:50.930 --> 00:00:54.290 line:100% position:50% align:middle -React.component." - -00:00:54.290 --> 00:00:57.860 line:100% position:50% align:middle -And what is the one method that you -absolutely need on all of your components? - -00:00:57.860 --> 00:01:02.550 line:100% position:50% align:middle -You need a render() method. And inside of -that what we're going to do, - -00:01:02.550 --> 00:01:07.460 line:100% position:50% align:middle -is we're going to return some JSX. So we -open and close these parentheses here - -00:01:07.460 --> 00:01:13.900 line:100% position:50% align:middle -because we're entering in multiple lines -of JSX. And then we need a div with the - -00:01:13.900 --> 00:01:23.700 line:100% position:50% align:middle -class of "catch-of-the-day," and inside of -that, we're going to have a menu. - -00:01:23.700 --> 00:01:26.530 line:100% position:50% align:middle -Inside of that, we're going to have a -Header component. - -00:01:26.530 --> 00:01:30.050 line:100% position:50% align:middle -Now, this here Header, capital H, it's not -the same thing as a header tag. - -00:01:30.050 --> 00:01:34.190 line:100% position:50% align:middle -It's a component that we are actually -going to make. I'm going to put it in - -00:01:34.190 --> 00:01:37.890 line:100% position:50% align:middle -there and we'll see why that will break -and how we can fix that. - -00:01:37.890 --> 00:01:40.500 line:100% position:50% align:middle -And then below here, we're going -to...eventually, we're going to have a - -00:01:40.500 --> 00:01:43.040 line:100% position:50% align:middle -whole bunch of these Fish components here. -So we're just going to have Fish/, - -00:01:43.040 --> 00:01:45.340 line:100% position:50% align:middle -Fish/, Fish/, Fish/, over and over. But we -haven't done that yet, - -00:01:45.340 --> 00:01:48.060 line:100% position:50% align:middle -so I'm just going to leave it right at -Header. - -00:01:48.060 --> 00:01:55.750 line:100% position:50% align:middle -And then down here, we are going to have -an Order component and we need the - -00:01:55.750 --> 00:02:02.160 line:100% position:50% align:middle -Inventory component. So give that a save -and we head back to our Google - -00:02:02.160 --> 00:02:07.120 line:100% position:50% align:middle -Chrome here, nothing changed. And why is -still rendering StorePicker? - -00:02:07.120 --> 00:02:10.160 line:100% position:50% align:middle -It's because our render() method here is -still rendering out the StorePicker, - -00:02:10.160 --> 00:02:15.390 line:100% position:50% align:middle -it makes sense, right? So we need to go -back into here. We need to export - -00:02:15.390 --> 00:02:18.400 line:100% position:50% align:middle -default App. We need to go back into our -index.js - -00:02:18.400 --> 00:02:22.500 line:100% position:50% align:middle -and we're going to get into routing in a -future video where if you're on the home - -00:02:22.500 --> 00:02:25.380 line:100% position:50% align:middle -page, it'll show you StorePicker, -otherwise, it's going to show you the App - -00:02:25.380 --> 00:02:28.930 line:100% position:50% align:middle -component, sort of like one or the other. -But we haven't hooked up routing yet. - -00:02:28.930 --> 00:02:36.360 line:100% position:50% align:middle -So what I want to do is just import the -App component from our components - -00:02:36.360 --> 00:02:43.290 line:100% position:50% align:middle -directory and then we'll render out the -App component here. - -00:02:43.290 --> 00:02:47.700 line:100% position:50% align:middle -Save, go back. See, now it refreshes. -Nothing here. Let's see what our dev tools - -00:02:47.700 --> 00:02:51.370 line:100% position:50% align:middle -is telling us. It's telling us we have an -error here: "ReferenceError: Header is not - -00:02:51.370 --> 00:02:56.150 line:100% position:50% align:middle -defined." The reason we get that is because -we have not yet made this Header component - -00:02:56.150 --> 00:03:00.970 line:100% position:50% align:middle -nor have we made the Order component or -the Inventory component. So let's go to - -00:03:00.970 --> 00:03:04.580 line:100% position:50% align:middle -our components directory here, a new file, -make a Header.js so we'll start to see - -00:03:04.580 --> 00:03:11.630 line:100% position:50% align:middle -a pattern of making new components. We -need to grab React. We're going to make - -00:03:11.630 --> 00:03:15.692 line:100% position:50% align:middle -ourselves a class. - -00:03:20.230 --> 00:03:25.010 line:100% position:50% align:middle -And then what is the one method you always -need? Is render() inside of that. - -00:03:25.010 --> 00:03:31.020 line:100% position:50% align:middle -Let's just `return`. Let's just give -ourselves a paragraph tag for now that - -00:03:31.020 --> 00:03:38.240 line:100% position:50% align:middle -says "Header" and then, of course, we need -to export default Header. Now that we've - -00:03:38.240 --> 00:03:41.680 line:100% position:50% align:middle -made this Header component, we need to go -back to our App.js file. - -00:03:41.680 --> 00:03:48.310 line:100% position:50% align:middle -We've used it here, so we need to import -Header from './Header'; Why not use the - -00:03:48.310 --> 00:03:52.150 line:100% position:50% align:middle -components folder? Because we're -already in App.js and we're just going to - -00:03:52.150 --> 00:03:55.300 line:100% position:50% align:middle -a sibling file here called Header.js. - -00:03:55.300 --> 00:03:59.580 line:100% position:50% align:middle -Now, if I give that a save, it's going to -start to complain that it cannot find - -00:03:59.580 --> 00:04:04.530 line:100% position:50% align:middle -module "React." Capital R there. But -now it's complaining that Order is not - -00:04:04.530 --> 00:04:08.530 line:100% position:50% align:middle -defined and that's just because we haven't -done Order and we haven't done Inventory - -00:04:08.530 --> 00:04:12.950 line:100% position:50% align:middle -yet. So if I just temporarily take those -out to see Header is now rendered to - -00:04:12.950 --> 00:04:18.680 line:100% position:50% align:middle -the page but we need to do the exact same -thing we did on Header for Order as well - -00:04:18.680 --> 00:04:24.459 line:100% position:50% align:middle -as Inventory. So I'm just going to take a -copy and name it Order.js. And I grab - -00:04:24.459 --> 00:04:29.414 line:100% position:50% align:middle -every instance and name it Order. -And then I can name this Inventory.js. - -00:04:29.414 --> 00:04:33.420 line:100% position:50% align:middle -Grab every instance of -Order and name it Inventory. - -00:04:33.420 --> 00:04:39.320 line:100% position:50% align:middle -Finally, we'll go to our App here, I'm -going to grab Header and say, - -00:04:39.320 --> 00:04:43.096 line:100% position:50% align:middle -import Order. We'll also want -to import Inventory. - -00:04:43.096 --> 00:04:46.044 line:100% position:50% align:middle -Good, so we have just made...that was - -00:04:46.044 --> 00:04:50.380 line:100% position:50% align:middle -pretty quick, but we just made three like -really simple components; Inventory, - -00:04:50.380 --> 00:04:56.090 line:100% position:50% align:middle -Order and Header. And now when we refresh, -we should now see Header, - -00:04:56.090 --> 00:04:59.860 line:100% position:50% align:middle -Order and Inventory being rendered out, -but our React DevTools here, - -00:04:59.860 --> 00:05:02.930 line:100% position:50% align:middle -you can see that we have our App -component, inside of that we've got our - -00:05:02.930 --> 00:05:06.500 line:100% position:50% align:middle -Header component, we've got an Order -component, we've got an Inventory - -00:05:06.500 --> 00:05:07.611 line:100% position:50% align:middle -component. +WEBVTT + +1 +00:00:00.109 --> 00:00:02.692 +(upbeat music) + +2 +00:00:06.640 --> 00:00:08.730 +Next up we need to make our App component + +3 +00:00:08.730 --> 00:00:10.450 +and the App component is going to be sort + +4 +00:00:10.450 --> 00:00:11.650 +of like the momma component + +5 +00:00:11.650 --> 00:00:13.840 +that's gonna hold all of our children, + +6 +00:00:13.840 --> 00:00:15.320 +and then inside of that we're going + +7 +00:00:15.320 --> 00:00:17.930 +to have a header component which is gonna show us the title. + +8 +00:00:17.930 --> 00:00:19.920 +We're going to have a bunch of fish components + +9 +00:00:19.920 --> 00:00:23.160 +which are going to render out a picture and the title, + +10 +00:00:23.160 --> 00:00:25.650 +a description, and the ability to add it to our order. + +11 +00:00:25.650 --> 00:00:27.510 +Then we have an order component here, + +12 +00:00:27.510 --> 00:00:29.380 +and an inventory component. + +13 +00:00:29.380 --> 00:00:31.100 +All of these things are going to be siblings + +14 +00:00:31.100 --> 00:00:34.190 +and they will all be a child of the App component + +15 +00:00:34.190 --> 00:00:37.550 +which is going to allow us to share things like, data. + +16 +00:00:37.550 --> 00:00:41.100 +So if I were to change this data to a different value + +17 +00:00:41.100 --> 00:00:43.950 +it's going to update across all three of them. + +18 +00:00:43.950 --> 00:00:47.020 +It's gonna allow us to share things like methods, + +19 +00:00:47.020 --> 00:00:49.790 +where if I were to remove a fish from here, + +20 +00:00:49.790 --> 00:00:51.760 +it's going to remove it from here + +21 +00:00:51.760 --> 00:00:53.370 +as well as update our order. + +22 +00:00:53.370 --> 00:00:54.882 +That's going to sort of essentialize + +23 +00:00:54.882 --> 00:00:58.120 +both the data and the functionality + +24 +00:00:58.120 --> 00:00:59.580 +of the events that need to happen. + +25 +00:00:59.580 --> 00:01:02.140 +So, let's go back over to our catch of the day + +26 +00:01:02.140 --> 00:01:06.050 +and open up our sidebar that we've got here. + +27 +00:01:06.050 --> 00:01:08.138 +By the way, maybe I should show you that real quick. + +28 +00:01:08.138 --> 00:01:10.520 +If you're wondering why sometimes when I like, + +29 +00:01:10.520 --> 00:01:15.430 +goof up the indentation or if I use a single quote + +30 +00:01:15.430 --> 00:01:17.680 +or a double quote, something like that, + +31 +00:01:17.680 --> 00:01:19.270 +and then I give a save and it just, whoop, + +32 +00:01:19.270 --> 00:01:21.350 +all automatically fixed, for me, + +33 +00:01:21.350 --> 00:01:23.710 +that's because I'm using something called Prettier + +34 +00:01:23.710 --> 00:01:25.420 +and you can go ahead and find an extension + +35 +00:01:25.420 --> 00:01:27.155 +for your editor called Prettier. + +36 +00:01:27.155 --> 00:01:29.620 +And it's great for React because + +37 +00:01:29.620 --> 00:01:32.210 +it'll often do things like, maybe, for example, + +38 +00:01:32.210 --> 00:01:36.930 +in here, if I have like an open hi tag + +39 +00:01:36.930 --> 00:01:39.550 +and it'll automatically close the hi tag + +40 +00:01:39.550 --> 00:01:41.120 +and then if I were to give that a save, + +41 +00:01:41.120 --> 00:01:43.530 +it says, "oh, well, there's nothing in between here, + +42 +00:01:43.530 --> 00:01:46.870 +there's no child, so why don't you just self close." + +43 +00:01:46.870 --> 00:01:49.270 +So there's a lot of like, nice, little, + +44 +00:01:49.270 --> 00:01:51.610 +fixes that you can get when you turn on Prettier. + +45 +00:01:51.610 --> 00:01:53.700 +It's totally different for every single editor + +46 +00:01:53.700 --> 00:01:56.390 +and even in VS Code you can either configure it + +47 +00:01:56.390 --> 00:01:58.700 +via the Prettier plugin via an ESLint. + +48 +00:01:58.700 --> 00:02:01.040 +So I'm gonna leave that to another tutorial, + +49 +00:02:01.040 --> 00:02:02.820 +but definitely check that out + +50 +00:02:02.820 --> 00:02:04.360 +if you're getting a little bit frustrated + +51 +00:02:04.360 --> 00:02:06.150 +with the formatting in React. + +52 +00:02:06.150 --> 00:02:08.160 +So, we wanna go into our components here. + +53 +00:02:08.160 --> 00:02:11.220 +I'm gonna make a new file in the components directory. + +54 +00:02:11.220 --> 00:02:14.610 +I'm gonna call it App.js with a capital a. + +55 +00:02:14.610 --> 00:02:15.720 +Good. + +56 +00:02:15.720 --> 00:02:18.290 +Give that a save, and inside of that, + +57 +00:02:18.290 --> 00:02:19.460 +what is the first thing we need? + +58 +00:02:19.460 --> 00:02:21.180 +Well, we need React. + +59 +00:02:21.180 --> 00:02:23.211 +We need to import that from our React package. + +60 +00:02:23.211 --> 00:02:26.020 +Then we need to make our App components. + +61 +00:02:26.020 --> 00:02:29.920 +We'll say class App, capital a, extends, + +62 +00:02:31.160 --> 00:02:32.530 +React.Component. + +63 +00:02:33.510 --> 00:02:35.270 +And then let's go ahead. + +64 +00:02:35.270 --> 00:02:37.280 +Before you even do that, I often will, like, + +65 +00:02:37.280 --> 00:02:39.010 +start typing the render method. + +66 +00:02:39.010 --> 00:02:42.616 +But before you even do that go ahead and export default App + +67 +00:02:42.616 --> 00:02:44.336 +because the amount of times that I forgot + +68 +00:02:44.336 --> 00:02:47.240 +to actually export it from a file, + +69 +00:02:47.240 --> 00:02:49.510 +that just causes headaches, so export it right away. + +70 +00:02:49.510 --> 00:02:51.540 +You might even may want to make a nice little snippet + +71 +00:02:51.540 --> 00:02:54.550 +for you editor that does exactly this. + +72 +00:02:54.550 --> 00:02:56.550 +Now inside of it we need our render method + +73 +00:02:56.550 --> 00:02:58.160 +which shows what we have. + +74 +00:02:58.160 --> 00:02:59.870 +And from that, we're going to return, + +75 +00:02:59.870 --> 00:03:03.630 +and I showed you in a couple of videos ago how to return. + +76 +00:03:03.630 --> 00:03:04.620 +Parenthesis. + +77 +00:03:04.620 --> 00:03:07.202 +And inside of that, let's just give ourselves + +78 +00:03:07.202 --> 00:03:11.010 +maybe a div with a class of catch of the day. + +79 +00:03:13.700 --> 00:03:15.380 +Beautiful. + +80 +00:03:15.380 --> 00:03:18.040 +Put a paragraph, "heyyy!" + +81 +00:03:18.040 --> 00:03:18.990 +Good. + +82 +00:03:18.990 --> 00:03:22.185 +Now, we will go back to our App and, + +83 +00:03:22.185 --> 00:03:24.780 +if I refresh it, nothing's changed. + +84 +00:03:24.780 --> 00:03:26.840 +And that's because if we go back to our + +85 +00:03:26.840 --> 00:03:30.890 +index.js file we're still hard-coding the store picker + +86 +00:03:30.890 --> 00:03:33.200 +which is good for the front page, + +87 +00:03:33.200 --> 00:03:35.770 +but as soon as I, here let me show you, + +88 +00:03:35.770 --> 00:03:37.320 +that's the store picker. + +89 +00:03:37.320 --> 00:03:39.330 +But as soon as I go to an actual page, + +90 +00:03:39.330 --> 00:03:41.646 +then I wanna change to the App. + +91 +00:03:41.646 --> 00:03:44.370 +We're gonna figure out how to do that with routing, + +92 +00:03:44.370 --> 00:03:47.610 +but for now, let's just hard-code that App component. + +93 +00:03:47.610 --> 00:03:50.210 +So, we'll duplicate this one here + +94 +00:03:50.210 --> 00:03:52.760 +and change it over to the App component. + +95 +00:03:52.760 --> 00:03:57.210 +And then we'll just render out the App component. + +96 +00:03:57.210 --> 00:03:59.200 +Getting some errors here. + +97 +00:03:59.200 --> 00:04:02.760 +"You're render method should have a return statement." + +98 +00:04:02.760 --> 00:04:04.928 +So go back to our App.js. + +99 +00:04:04.928 --> 00:04:08.320 +Oh, how does return even work? + +100 +00:04:08.320 --> 00:04:10.930 +You have to be able to spell in order to code. + +101 +00:04:10.930 --> 00:04:11.763 +Okay. + +102 +00:04:11.763 --> 00:04:13.700 +So I've got my App component working + +103 +00:04:13.700 --> 00:04:17.060 +and if we go to our React you see that the REC=DEV tools + +104 +00:04:17.060 --> 00:04:19.390 +that we have are App component rendering out. + +105 +00:04:19.390 --> 00:04:21.820 +Inside of that we have a div with a class name + +106 +00:04:21.820 --> 00:04:23.870 +of catch of the day. + +107 +00:04:23.870 --> 00:04:25.740 +Then inside of that we'll give ourselves a div + +108 +00:04:25.740 --> 00:04:27.080 +with a class of menu. + +109 +00:04:27.080 --> 00:04:30.430 +Again, make sure you hit that class name instead of class. + +110 +00:04:30.430 --> 00:04:32.890 +And inside of that we are going to, + +111 +00:04:32.890 --> 00:04:35.370 +let's just scaffold out what the components are + +112 +00:04:35.370 --> 00:04:36.570 +that we're going to make. + +113 +00:04:36.570 --> 00:04:38.790 +So we're going to have a header component, + +114 +00:04:38.790 --> 00:04:41.260 +and that's going to look like this. + +115 +00:04:41.260 --> 00:04:43.380 +Now, it's going to start erroring out on us + +116 +00:04:43.380 --> 00:04:45.209 +because we haven't yet made that component. + +117 +00:04:45.209 --> 00:04:47.360 +Then underneath that we're gonna have a bunch + +118 +00:04:47.360 --> 00:04:48.420 +of fish components. + +119 +00:04:48.420 --> 00:04:50.250 +It's gonna look a little something like that, + +120 +00:04:50.250 --> 00:04:51.540 +except we haven't gotten there yet + +121 +00:04:51.540 --> 00:04:54.020 +so just put the header in there, for now. + +122 +00:04:54.020 --> 00:04:57.190 +Beside that we want and inventory component, + +123 +00:04:58.090 --> 00:05:01.030 +and beside that we also want an order component. + +124 +00:05:03.010 --> 00:05:05.560 +Now it's going to tell us that header inventory + +125 +00:05:05.560 --> 00:05:06.700 +and order do not work. + +126 +00:05:06.700 --> 00:05:08.160 +Oooh. That's cool. + +127 +00:05:08.160 --> 00:05:12.640 +If you click it, it automatically opens it up in the editor. + +128 +00:05:12.640 --> 00:05:13.607 +I didn't know that. + +129 +00:05:13.607 --> 00:05:15.180 +Neat. + +130 +00:05:15.180 --> 00:05:16.650 +So that's kinda cool. + +131 +00:05:16.650 --> 00:05:20.016 +It'll go right to the file where the thing is broken. + +132 +00:05:20.016 --> 00:05:22.140 +So let's go ahead and make a header inventory + +133 +00:05:22.140 --> 00:05:22.973 +and order component. + +134 +00:05:22.973 --> 00:05:25.810 +So back to our components folder, new file, + +135 +00:05:25.810 --> 00:05:27.080 +we'll call it header.js. + +136 +00:05:29.400 --> 00:05:31.110 +And if you want to at this point, + +137 +00:05:31.110 --> 00:05:32.780 +maybe code it by hand once more, + +138 +00:05:32.780 --> 00:05:33.613 +but you're probably going + +139 +00:05:33.613 --> 00:05:35.600 +to be copying pasting it fairly often + +140 +00:05:35.600 --> 00:05:37.450 +so we'll import React from React + +141 +00:05:39.440 --> 00:05:44.440 +and then we'll class header extends React.component. + +142 +00:05:46.270 --> 00:05:48.150 +That needs a render method. + +143 +00:05:48.150 --> 00:05:50.470 +We'll come back to that in just a second. + +144 +00:05:50.470 --> 00:05:55.370 +Then we'll export default header. + +145 +00:05:55.370 --> 00:05:57.270 +And inside of the render method we're going + +146 +00:05:57.270 --> 00:06:00.000 +to return in actual header tags. + +147 +00:06:00.000 --> 00:06:02.400 +So this is just a regular html header tag + +148 +00:06:02.400 --> 00:06:04.300 +with a class of top. + +149 +00:06:04.300 --> 00:06:06.650 +And inside of that, let's just give ourselves h1 + +150 +00:06:06.650 --> 00:06:09.520 +that says catch of the day. + +151 +00:06:10.410 --> 00:06:12.810 +We'll come back to the styling of that in just a second. + +152 +00:06:12.810 --> 00:06:15.850 +Underneath that we want a h3 class of tagline. + +153 +00:06:15.850 --> 00:06:17.820 +These are just matching up with all the styles + +154 +00:06:17.820 --> 00:06:19.600 +that I've pre-written for you. + +155 +00:06:19.600 --> 00:06:23.330 +And then inside of that we need a span + +156 +00:06:23.330 --> 00:06:27.030 +that just says fresh daily or whatever it is + +157 +00:06:27.030 --> 00:06:27.863 +that you like to show. + +158 +00:06:27.863 --> 00:06:29.630 +We're gonna swap that out, not gonna hard-code it, + +159 +00:06:29.630 --> 00:06:30.740 +in just a second. + +160 +00:06:30.740 --> 00:06:32.077 +So give that a save. + +161 +00:06:32.077 --> 00:06:34.870 +If you wanna see how it works + +162 +00:06:34.870 --> 00:06:36.460 +then we'll go back to our App, + +163 +00:06:36.460 --> 00:06:40.690 +let me just comment out inventory in order real quick, + +164 +00:06:40.690 --> 00:06:41.670 +and we should... + +165 +00:06:41.670 --> 00:06:43.930 +Oh, (laughs) why doesn't it work? + +166 +00:06:43.930 --> 00:06:46.360 +Well, we have made the header component + +167 +00:06:46.360 --> 00:06:49.750 +but we have not yet imported it into the file that we need. + +168 +00:06:49.750 --> 00:06:51.280 +So, this is kinda interesting. + +169 +00:06:51.280 --> 00:06:53.947 +We don't need to import it into our index.js, + +170 +00:06:53.947 --> 00:06:56.640 +it's unnecessary to import things + +171 +00:06:56.640 --> 00:06:59.090 +that are not used in that exact file. + +172 +00:06:59.090 --> 00:07:01.110 +You just need to import into the file + +173 +00:07:01.110 --> 00:07:02.580 +where it's going to be used. + +174 +00:07:02.580 --> 00:07:05.560 +So, import the header from, and now it's a sibling, + +175 +00:07:05.560 --> 00:07:07.760 +we're already in the components folder + +176 +00:07:07.760 --> 00:07:10.170 +in a file called App.js so we'll just go + +177 +00:07:10.170 --> 00:07:12.380 +to a sibling and we'll say import it + +178 +00:07:12.380 --> 00:07:14.740 +from the header.js file. + +179 +00:07:14.740 --> 00:07:17.550 +Now if I give that a save it should show us the header. + +180 +00:07:17.550 --> 00:07:20.320 +Oh, now it's giving me some grief here. + +181 +00:07:20.320 --> 00:07:24.620 +Adjacent.jsxl must be wrapped in an enclosing tag. + +182 +00:07:24.620 --> 00:07:27.220 +What did we do inside of App? + +183 +00:07:28.610 --> 00:07:29.500 +What did we do inside of here? + +184 +00:07:29.500 --> 00:07:32.850 +Oh, obviously that h3 tag needs to go inside + +185 +00:07:32.850 --> 00:07:33.990 +of the header tag. + +186 +00:07:33.990 --> 00:07:36.300 +And then you see that this is showing up + +187 +00:07:36.300 --> 00:07:38.420 +for us which looks great. + +188 +00:07:38.420 --> 00:07:41.370 +And let's just get it matched up to what this looks like. + +189 +00:07:41.370 --> 00:07:43.160 +I have spans wrapped around the 'of the' + +190 +00:07:43.160 --> 00:07:46.310 +and then around each of the words 'of' and 'the'. + +191 +00:07:46.310 --> 00:07:48.010 +So we'll go back to our header.js, + +192 +00:07:48.930 --> 00:07:50.320 +and it's of. + +193 +00:07:51.400 --> 00:07:54.690 +Put of and the on it's own line, + +194 +00:07:54.690 --> 00:07:57.670 +and we're gonna wrap the entire thing in a class of of the. + +195 +00:07:59.760 --> 00:08:02.310 +And then we're gonna wrap each of the words + +196 +00:08:02.310 --> 00:08:04.640 +in a span of the class of of, + +197 +00:08:04.640 --> 00:08:06.440 +and a span of the class of the. + +198 +00:08:07.690 --> 00:08:11.910 +So h1, catch, span of the class ofThe, + +199 +00:08:12.890 --> 00:08:15.780 +then get an of and the the and finally the day, + +200 +00:08:15.780 --> 00:08:17.250 +and that should... + +201 +00:08:17.250 --> 00:08:18.083 +There we go. + +202 +00:08:18.083 --> 00:08:19.930 +We hit the little anchor and the formatting + +203 +00:08:19.930 --> 00:08:21.680 +of CSS has kicked in. + +204 +00:08:21.680 --> 00:08:23.480 +And if we open this up, you see App, + +205 +00:08:23.480 --> 00:08:24.970 +and we have our header component. + +206 +00:08:24.970 --> 00:08:27.010 +Let's go off and finish the other two, + +207 +00:08:27.010 --> 00:08:30.339 +which is our inventory and our order component. + +208 +00:08:30.339 --> 00:08:32.160 +Actually, those go the other way around. + +209 +00:08:32.160 --> 00:08:35.170 +It's the order and then the inventory component. + +210 +00:08:35.170 --> 00:08:36.420 +It's gonna start yelling at us + +211 +00:08:36.420 --> 00:08:37.980 +cause we haven't yet imported them, + +212 +00:08:37.980 --> 00:08:41.610 +so what I like to do is just duplicate this over, + +213 +00:08:41.610 --> 00:08:46.540 +and then select order, and then do that again for inventory. + +214 +00:08:49.470 --> 00:08:50.480 +Now, it's gonna tell us + +215 +00:08:50.480 --> 00:08:53.930 +that it cannot find a component called inventory + +216 +00:08:53.930 --> 00:08:55.100 +cause we haven't yet made it. + +217 +00:08:55.100 --> 00:08:56.890 +So, we'll go in, and what I like + +218 +00:08:56.890 --> 00:08:58.740 +to do in a case like this is just + +219 +00:08:58.740 --> 00:09:03.040 +to save a copy of header and just make that inventory. + +220 +00:09:05.700 --> 00:09:10.070 +And then I will get rid of all the html inside of there, + +221 +00:09:10.070 --> 00:09:12.810 +and we'll just return a div with a class of inventory, + +222 +00:09:17.510 --> 00:09:18.960 +and then rename the component. + +223 +00:09:18.960 --> 00:09:20.080 +This is kind of important. + +224 +00:09:20.080 --> 00:09:21.830 +Sometimes I forget to... + +225 +00:09:21.830 --> 00:09:25.360 +It will still work if you export it as header, + +226 +00:09:25.360 --> 00:09:28.090 +however, it will show up as header in your div tools + +227 +00:09:28.090 --> 00:09:29.090 +which is a bit confusing. + +228 +00:09:29.090 --> 00:09:31.670 +So, make sure you rename that to inventory. + +229 +00:09:33.550 --> 00:09:34.680 +And that's up and running. + +230 +00:09:34.680 --> 00:09:36.780 +One actually cool thing that Prettier does + +231 +00:09:36.780 --> 00:09:38.940 +for me is if it just does a one liner, + +232 +00:09:38.940 --> 00:09:40.800 +you're using parenthesis here, + +233 +00:09:40.800 --> 00:09:42.520 +and you only have a one liner, + +234 +00:09:42.520 --> 00:09:44.900 +it's gonna tell you, "hey, that's not necessary." + +235 +00:09:44.900 --> 00:09:47.720 +I can do that on one line so it'll just get rid of them. + +236 +00:09:47.720 --> 00:09:50.940 +So I might have to put those back in at a later time. + +237 +00:09:50.940 --> 00:09:53.000 +I'll save that again. + +238 +00:09:53.000 --> 00:09:54.770 +Give ourselves an order.js. + +239 +00:09:54.770 --> 00:09:57.220 +Remember to use capitals on all these file names. + +240 +00:09:57.220 --> 00:10:00.830 +We'll just call this order, + +241 +00:10:00.830 --> 00:10:03.150 +give it div the class name of order. + +242 +00:10:04.990 --> 00:10:05.823 +Beautiful. + +243 +00:10:05.823 --> 00:10:06.820 +So we have our order in the middle, + +244 +00:10:06.820 --> 00:10:09.410 +our inventory on the right and our catch of the day. + +245 +00:10:09.410 --> 00:10:11.400 +Obviously I am too squished here + +246 +00:10:11.400 --> 00:10:13.970 +so I'm gonna bring that down to the bottom. + +247 +00:10:13.970 --> 00:10:15.980 +And everything is looking good. + +248 +00:10:15.980 --> 00:10:18.270 +I also have this cheesy little fold button here + +249 +00:10:18.270 --> 00:10:19.900 +which has nothing to do with React, + +250 +00:10:19.900 --> 00:10:22.970 +it's just when it's checked it will apply + +251 +00:10:22.970 --> 00:10:26.880 +some CSS that puts a transform and skew on this + +252 +00:10:26.880 --> 00:10:28.360 +to make it look a little bit 3D. + +253 +00:10:28.360 --> 00:10:29.670 +It's kinda fun to have on. + +254 +00:10:29.670 --> 00:10:32.840 +So that is a sort of a scaffold out of our application. + +255 +00:10:32.840 --> 00:10:34.421 +We have the main bones. + +256 +00:10:34.421 --> 00:10:37.010 +Let's move onto the next one which is talking about + +257 +00:10:37.010 --> 00:10:41.110 +how do we make this header component somewhat dynamic + +258 +00:10:41.110 --> 00:10:44.010 +because we have just been hard-coding the values in there. + diff --git a/RFB/07 - Passing Dynamic data with props.vtt b/RFB/07 - Passing Dynamic data with props.vtt index ee00972..64f135a 100755 --- a/RFB/07 - Passing Dynamic data with props.vtt +++ b/RFB/07 - Passing Dynamic data with props.vtt @@ -1,344 +1,810 @@ -WEBVTT - -00:00:06.925 --> 00:00:09.023 line:100% position:50% align:middle -Before, all the components in -React that we've been making - -00:00:09.023 --> 00:00:12.247 line:100% position:50% align:middle -have been just static, which means -that we've been hard-coding it. - -00:00:12.247 --> 00:00:17.550 line:100% position:50% align:middle -Now, the question is, how do you get data -from one component into another component? - -00:00:17.550 --> 00:00:22.020 line:100% position:50% align:middle -And the way that we supply data to a -component is via something called "props." - -00:00:22.020 --> 00:00:27.929 line:100% position:50% align:middle -Now if you are used to HTML which I assume -you are, these are just regular HTML tags. - -00:00:27.929 --> 00:00:31.742 line:100% position:50% align:middle -And we have these things called "attributes" -like `type` and `class` and `src` and `alt`. - -00:00:31.742 --> 00:00:35.097 line:100% position:50% align:middle -And what are these attributes used for? -Well, maybe you have an img tag, - -00:00:35.097 --> 00:00:38.676 line:100% position:50% align:middle -you have "dog.jpg," and `alt` will say, -"A Cool Dog." - -00:00:38.676 --> 00:00:44.490 line:100% position:50% align:middle -These are just ways that you can supply -additional information to the tag. - -00:00:44.490 --> 00:00:50.000 line:100% position:50% align:middle -Now, in React props, it works exactly the -same way. If you want to pass information - -00:00:50.000 --> 00:00:56.020 line:100% position:50% align:middle -to a tag, you pass it via a prop. So what -I want to do is go to our App layout right - -00:00:56.020 --> 00:01:00.000 line:100% position:50% align:middle -here, and we'll go to our Header tag. -Now this is our Header component, - -00:01:00.000 --> 00:01:04.010 line:100% position:50% align:middle -which we've made, and we can simply just -make up as many attributes as we want. - -00:01:04.010 --> 00:01:13.120 line:100% position:50% align:middle -So if I say tagline="Fresh Seafood -Market", what we've done there is we've - -00:01:13.120 --> 00:01:19.521 line:100% position:50% align:middle -passed a `tagline` prop to that argument. -Now if we go back to our Header.js here, - -00:01:19.521 --> 00:01:29.212 line:100% position:50% align:middle -and we were to then scaffold out some of -our HTML here. So we need a header tag - -00:01:29.212 --> 00:01:35.561 line:100% position:50% align:middle -of the class of "top." And inside of that, -I want an h1 tag that says - -00:01:35.561 --> 00:01:42.564 line:100% position:50% align:middle -"Catch of the Day." Below that, I want h3 -with a class of "tagline." And that will - -00:01:42.564 --> 00:01:46.067 line:100% position:50% align:middle -just say, "Fill Me In." And then we're -going to come back and make that - -00:01:46.067 --> 00:01:49.674 line:100% position:50% align:middle -little bit right here dynamic. Because -maybe you're building an application - -00:01:49.674 --> 00:01:53.397 line:100% position:50% align:middle -where the tagline is going to -be different from store to store. - -00:01:53.397 --> 00:01:56.278 line:100% position:50% align:middle -I'll give that a save. -It should automatically refresh. Good. - -00:01:56.278 --> 00:01:59.118 line:100% position:50% align:middle -Don't worry if that doesn't look exactly -like the answer here. We're going to - -00:01:59.118 --> 00:02:02.019 line:100% position:50% align:middle -figure that out in a second. -But you see that we have this little bit - -00:02:02.019 --> 00:02:07.750 line:100% position:50% align:middle -of "Fill Me In." Now, what I want you to -do is open your React DevTools here. - -00:02:07.750 --> 00:02:14.680 line:100% position:50% align:middle -Find that Header component in React. -And you're going to see that this Header - -00:02:14.680 --> 00:02:18.410 line:100% position:50% align:middle -component now has something called "Props." -And there's `tagline`. - -00:02:18.410 --> 00:02:22.740 line:100% position:50% align:middle -I just made up `tagline`. I just pulled that -out of thin air. You can name your props - -00:02:22.740 --> 00:02:27.165 line:100% position:50% align:middle -whatever you wish to name them. -And then that data will then be made - -00:02:27.165 --> 00:02:28.961 line:100% position:50% align:middle -available to the component. - -00:02:28.961 --> 00:02:36.509 line:100% position:50% align:middle -So if I had another one like -age="5000" and cool=... - -00:02:36.509 --> 00:02:39.591 line:100% position:50% align:middle -like, I wanted to pass like a Boolean, -I would pass it then with a curly, we'll - -00:02:39.591 --> 00:02:45.616 line:100% position:50% align:middle -look at that in a second. Then we refresh -here, go back to our React DevTools. - -00:02:45.616 --> 00:02:50.335 line:100% position:50% align:middle -Click Header, you now see that we've got a -String, String and a Boolean being passed. - -00:02:50.335 --> 00:02:54.157 line:100% position:50% align:middle -So that's how I give this Header component -a little bit more information. - -00:02:54.157 --> 00:02:57.954 line:100% position:50% align:middle -That's gonna be really useful when you -need to pass our Fish tag information - -00:02:57.954 --> 00:03:02.430 line:100% position:50% align:middle -above that specific fish. Now, if we go -on the other side, which is Header.js, - -00:03:02.430 --> 00:03:07.900 line:100% position:50% align:middle -how do we access the information inside of -it? Well, that's done via something called - -00:03:07.900 --> 00:03:13.540 line:100% position:50% align:middle -"props." Now, one thing we haven't done yet -is, how do you put variables into JSX? - -00:03:13.540 --> 00:03:18.701 line:100% position:50% align:middle -And the way that you do that is you -delete the text here, open up one set - -00:03:18.701 --> 00:03:24.266 line:100% position:50% align:middle -of curly brackets. And you say -"this.props.tagline." Now, what is - -00:03:24.266 --> 00:03:29.503 line:100% position:50% align:middle -"this.props?" Well, "this" is going to -refer to the actual component. - -00:03:29.503 --> 00:03:34.544 line:100% position:50% align:middle -"Props" is going to be an object like this -that's available to us. And then we can - -00:03:34.544 --> 00:03:39.225 line:100% position:50% align:middle -simply call ".tagline.cool" or ".age". -Now you give that a save. - -00:03:39.225 --> 00:03:43.303 line:100% position:50% align:middle -You'll see, automatically, this "Fresh -Seafood Market" has been updated. - -00:03:43.303 --> 00:03:47.062 line:100% position:50% align:middle -So if I could go on into my App here, -I can change this to say anything - -00:03:47.062 --> 00:03:51.370 line:100% position:50% align:middle -that I well desire, "Wes Is Cool!" -Give it a save. - -00:03:51.370 --> 00:03:54.173 line:100% position:50% align:middle -And it will swap it out -with whatever text. - -00:03:54.173 --> 00:04:00.710 line:100% position:50% align:middle -I also want to show you one thing here. -If we go to Header.js and right above our - -00:04:00.710 --> 00:04:05.010 line:100% position:50% align:middle -`return`, inside of the render() yet, let's -just `console.log(this)` and see really what - -00:04:05.010 --> 00:04:10.360 line:100% position:50% align:middle -we're dealing with here. We've got `this`, -open that up. This is our entire component - -00:04:10.360 --> 00:04:13.930 line:100% position:50% align:middle -right here. And then inside of that, -you've got something called "props." - -00:04:13.930 --> 00:04:17.236 line:100% position:50% align:middle -And that's just the object that contains -all of the data that you want. - -00:04:17.236 --> 00:04:23.150 line:100% position:50% align:middle -And you can use `this.props.whatever` -anywhere inside of this render() method, - -00:04:23.150 --> 00:04:26.021 line:100% position:50% align:middle -and it's going to be made -available to you. - -00:04:26.021 --> 00:04:30.030 line:100% position:50% align:middle -One other cool thing about React DevTools -is if we go to React here, - -00:04:30.030 --> 00:04:34.980 line:100% position:50% align:middle -and you open it up, and you click on one -of your components called Header, - -00:04:34.980 --> 00:04:39.015 line:100% position:50% align:middle -you'll see this little thing in the corner -that says "($r in the console)." - -00:04:39.015 --> 00:04:42.410 line:100% position:50% align:middle -And what that does is, if you ever need -just play with your React DevTools, - -00:04:42.410 --> 00:04:47.160 line:100% position:50% align:middle -you click on the current component that -you want, go back to your console here and - -00:04:47.160 --> 00:04:53.180 line:100% position:50% align:middle -just type in "$r" and that is going to be -equal to the current component. - -00:04:53.180 --> 00:04:59.300 line:100% position:50% align:middle -You can say "$r.props.tagline" and that -will give you Fresh Seafood Market. - -00:04:59.300 --> 00:05:02.980 line:100% position:50% align:middle -So if you're ever trying to just debug -something on the command line here, - -00:05:02.980 --> 00:05:09.160 line:100% position:50% align:middle -just select the actual component that you -want and you can type "$r" in the console. - -00:05:09.160 --> 00:05:15.270 line:100% position:50% align:middle -That also works in just regular JavaScript -as well. Let's say you wanted to check one - -00:05:15.270 --> 00:05:18.410 line:100% position:50% align:middle -of these things right here, like this one. -So I clicked on this one, - -00:05:18.410 --> 00:05:23.948 line:100% position:50% align:middle -go to your console and type "$0." That -will give you the current element there. - -00:05:23.948 --> 00:05:27.587 line:100% position:50% align:middle -You can do things like classList -and see all the classes on it. - -00:05:27.587 --> 00:05:31.515 line:100% position:50% align:middle -So those two are helpful when -you're working in the React DevTools. - -00:05:31.515 --> 00:05:35.214 line:100% position:50% align:middle -Now, I just want to go back to our App -and clean this up. - -00:05:35.214 --> 00:05:39.527 line:100% position:50% align:middle -I don't need the "cool" and "age," -I just need tagline is equal to true. - -00:05:39.527 --> 00:05:43.816 line:100% position:50% align:middle -And that is how you use props. We're going -to be doing it quite a bit more. - -00:05:43.816 --> 00:05:47.130 line:100% position:50% align:middle -And then we're also going to be looking at -something called "propTypes" which will - -00:05:47.130 --> 00:05:52.668 line:100% position:50% align:middle -allow you to validate that, A, data is -passed, and B, the data that is passed is - -00:05:52.668 --> 00:05:58.180 line:100% position:50% align:middle -the correct type. So if it's expecting a -number or a function, it's going to error - -00:05:58.180 --> 00:06:02.720 line:100% position:50% align:middle -out if it gives you a string and that will -help you make nice really rigid - -00:06:02.720 --> 00:06:06.993 line:100% position:50% align:middle -components. One last thing we need to do -is make this Catch of the Day look like it - -00:06:06.993 --> 00:06:10.423 line:100% position:50% align:middle -doesn't look terrible. So go to your -header and there's just some extra HTML - -00:06:10.423 --> 00:06:15.284 line:100% position:50% align:middle -that we need to add to this. So put your -"Catch of the Day" on its own line. - -00:06:15.284 --> 00:06:22.213 line:100% position:50% align:middle -And the word Catch, it's fine. Then we'll -have a "span" with class of "ofThe." - -00:06:22.213 --> 00:06:26.951 line:100% position:50% align:middle -Inside of that, we'll have a span with the -class of "of" and a span with the class of - -00:06:26.951 --> 00:06:36.531 line:100% position:50% align:middle -"the." And we'll just put "of" "the", -and then we'll leave "Day" on its own line. - -00:06:36.531 --> 00:06:41.319 line:100% position:50% align:middle -That should give us the nice little -anchor. Good. You can see the anchor, - -00:06:41.319 --> 00:06:45.077 line:100% position:50% align:middle -it's good. And then we also don't have -a white background behind that. - -00:06:45.077 --> 00:06:50.140 line:100% position:50% align:middle -So what we're going to do here is -just wrap this entire thing in a span. - -00:06:50.140 --> 00:06:52.867 line:100% position:50% align:middle -That should give us that nice, -white background. Good. +WEBVTT + +1 +00:00:00.522 --> 00:00:03.272 line:15% +(cheerful music) + +2 +00:00:07.660 --> 00:00:09.320 +Two fundamental concepts that we're going to cover + +3 +00:00:09.320 --> 00:00:11.500 +in this course are props and state. + +4 +00:00:11.500 --> 00:00:13.450 +And props are the first one that we're + +5 +00:00:13.450 --> 00:00:14.590 +going to learn about and + +6 +00:00:14.590 --> 00:00:17.830 +they are very similar to HTML attribute so + +7 +00:00:17.830 --> 00:00:19.700 +if you've ever had an image tag before + +8 +00:00:19.700 --> 00:00:21.610 +you always know that you have to provide + +9 +00:00:21.610 --> 00:00:23.370 +at least two things, the first thing + +10 +00:00:23.370 --> 00:00:25.860 +you need to tell is source, which is dog.jpg, + +11 +00:00:25.860 --> 00:00:29.410 +and alt, which is the alternate description of that. + +12 +00:00:29.410 --> 00:00:31.740 +Now, those two things, these attributes, + +13 +00:00:31.740 --> 00:00:35.500 +they provide more information to the tag, why? + +14 +00:00:35.500 --> 00:00:37.240 +Because without those two things, + +15 +00:00:37.240 --> 00:00:39.200 +the tag would not be able to render itself + +16 +00:00:39.200 --> 00:00:40.818 +to the page, because it has no idea + +17 +00:00:40.818 --> 00:00:43.330 +about the information that is required of it. + +18 +00:00:43.330 --> 00:00:45.850 +Same thing if I have an input with the type of text, + +19 +00:00:45.850 --> 00:00:49.160 +it needs to know what type of input it's going to be + +20 +00:00:49.160 --> 00:00:51.250 +before it renders out to the page. + +21 +00:00:51.250 --> 00:00:53.780 +Now, because we're dealing with components, + +22 +00:00:53.780 --> 00:00:56.400 +this is very much the same way in React, + +23 +00:00:56.400 --> 00:00:58.820 +however, they're not called attributes anymore, + +24 +00:00:58.820 --> 00:01:00.020 +they're called props. + +25 +00:01:00.020 --> 00:01:03.910 +And props are the way that we get data into a component. + +26 +00:01:03.910 --> 00:01:05.670 +And this is going to be very very handy, + +27 +00:01:05.670 --> 00:01:06.930 +because we just talk about this, + +28 +00:01:06.930 --> 00:01:09.250 +let's go into our React dev tools here and + +29 +00:01:09.250 --> 00:01:11.260 +remember that we have this app layout, + +30 +00:01:11.260 --> 00:01:13.550 +and inside of app we have our header, + +31 +00:01:13.550 --> 00:01:15.020 +our order, and inventory. + +32 +00:01:15.020 --> 00:01:15.940 +What's going to happen is, + +33 +00:01:15.940 --> 00:01:18.480 +we're going to have some data that lives in our app + +34 +00:01:18.480 --> 00:01:20.300 +and we're going to need some way to get + +35 +00:01:20.300 --> 00:01:22.940 +the data from our app into our header component, + +36 +00:01:22.940 --> 00:01:25.370 +or, in our case, if someone's going to pass + +37 +00:01:25.370 --> 00:01:27.800 +any type of data into the header component, + +38 +00:01:27.800 --> 00:01:30.070 +how do we then access it from inside + +39 +00:01:30.070 --> 00:01:31.460 +of the header component? + +40 +00:01:31.460 --> 00:01:34.750 +And that is how props work, and that's what props are for. + +41 +00:01:34.750 --> 00:01:37.740 +I always like to think about props and state, + +42 +00:01:37.740 --> 00:01:38.990 +we're going to go into state in a bit, + +43 +00:01:38.990 --> 00:01:40.670 +you can come back to this. + +44 +00:01:40.670 --> 00:01:42.260 +State is where the data lives. + +45 +00:01:42.260 --> 00:01:43.970 +State is the data's home + +46 +00:01:43.970 --> 00:01:46.930 +and props is how the data gets to where it needs to go + +47 +00:01:46.930 --> 00:01:49.490 +and so state is like, state is the home + +48 +00:01:49.490 --> 00:01:52.070 +and props is like a bus, or a car, + +49 +00:01:52.070 --> 00:01:54.630 +that's how it gets to its end destination + +50 +00:01:54.630 --> 00:01:57.080 +of where it actually needs to be displayed. + +51 +00:01:57.080 --> 00:02:00.350 +So, let's go into our header.js + +52 +00:02:00.350 --> 00:02:02.790 +and let's open up our app.js + +53 +00:02:02.790 --> 00:02:04.660 +those are the only two that we need. + +54 +00:02:04.660 --> 00:02:07.400 +And I need to be able to make this tagline + +55 +00:02:07.400 --> 00:02:09.270 +that we have here, "Fresh Seafood Market", + +56 +00:02:09.270 --> 00:02:10.670 +I need to make that dynamic, + +57 +00:02:10.670 --> 00:02:12.500 +I want to be able to pass it in, + +58 +00:02:12.500 --> 00:02:14.660 +because maybe that's coming from a database + +59 +00:02:14.660 --> 00:02:15.990 +or it's in a variable, or you just + +60 +00:02:15.990 --> 00:02:18.150 +want to pass it in when you use the header. + +61 +00:02:18.150 --> 00:02:20.120 +So what we do is, we go into app. + +62 +00:02:20.120 --> 00:02:22.490 +And we simply just make up our own props. + +63 +00:02:22.490 --> 00:02:25.250 +There are no preset props that you are + +64 +00:02:25.250 --> 00:02:27.140 +supposed to use and not supposed to use, + +65 +00:02:27.140 --> 00:02:29.010 +you simply just go ahead and make them up. + +66 +00:02:29.010 --> 00:02:31.160 +Obviously you can't use any of the existing ones + +67 +00:02:31.160 --> 00:02:33.560 +that will overwrite HTML attributes, + +68 +00:02:33.560 --> 00:02:36.060 +but past that, the sky is the limit. + +69 +00:02:36.060 --> 00:02:38.190 +So let's just call it tagline + +70 +00:02:38.190 --> 00:02:41.440 +and let's set it to Wes Is Cool. + +71 +00:02:41.440 --> 00:02:43.100 +Give that a save, go back here, + +72 +00:02:43.100 --> 00:02:45.440 +I want you to open up your React dev tools + +73 +00:02:45.440 --> 00:02:47.620 +and we'll go look for our header + +74 +00:02:47.620 --> 00:02:49.130 +now when you click on the header, + +75 +00:02:49.130 --> 00:02:50.960 +you're going to see that this props + +76 +00:02:50.960 --> 00:02:53.380 +is now populated in the sidebar here. + +77 +00:02:53.380 --> 00:02:55.730 +So props is kind of like an object, + +78 +00:02:55.730 --> 00:02:58.100 +an object of data that got passed in, + +79 +00:02:58.100 --> 00:03:01.410 +sort of like an argument's object in a function + +80 +00:03:01.410 --> 00:03:03.440 +of everything that got passed in. + +81 +00:03:03.440 --> 00:03:05.920 +So we now know that we have the tagline + +82 +00:03:05.920 --> 00:03:08.030 +available to us now you can pass in + +83 +00:03:08.030 --> 00:03:10.000 +any number of different types and + +84 +00:03:10.000 --> 00:03:11.980 +we're going to be talking about how to validate these + +85 +00:03:11.980 --> 00:03:14.530 +with something called prop types in a future video, + +86 +00:03:14.530 --> 00:03:18.950 +now you can say age equals 500 and you notice how + +87 +00:03:18.950 --> 00:03:20.040 +this is a little bit different + +88 +00:03:20.040 --> 00:03:22.070 +if you want to pass in a number + +89 +00:03:22.070 --> 00:03:23.310 +you have to use curly brackets + +90 +00:03:23.310 --> 00:03:25.910 +if you want to pass in anything other than a string, + +91 +00:03:25.910 --> 00:03:27.740 +you have to be using curly brackets + +92 +00:03:27.740 --> 00:03:30.900 +so I could say like cool equals true. + +93 +00:03:32.800 --> 00:03:36.090 +Now and if I go back to my header here, + +94 +00:03:36.090 --> 00:03:39.240 +you'll see that we have age, cool, and tagline + +95 +00:03:39.240 --> 00:03:43.590 +being shown in there, and then we can go into our header + +96 +00:03:43.590 --> 00:03:45.900 +and you can do a little something like this, + +97 +00:03:45.900 --> 00:03:48.680 +where you delete the actual hard-coded values + +98 +00:03:48.680 --> 00:03:51.450 +and when you want to use + +99 +00:03:51.450 --> 00:03:54.260 +a variable inside of JSX, + +100 +00:03:54.260 --> 00:03:56.850 +we just give a set of curly brackets + +101 +00:03:56.850 --> 00:04:00.230 +and what did we say that curly brackets does in JSX? + +102 +00:04:00.230 --> 00:04:01.620 +It says, I'm just going to go + +103 +00:04:01.620 --> 00:04:03.860 +back to Javascript for a quick second + +104 +00:04:03.860 --> 00:04:05.950 +and that's why, because we need to be + +105 +00:04:05.950 --> 00:04:07.930 +able to use Javascript variables here. + +106 +00:04:07.930 --> 00:04:09.810 +And the way that you can reference it is + +107 +00:04:09.810 --> 00:04:13.120 +this.props.tagline, + +108 +00:04:13.120 --> 00:04:14.680 +and let's go back. + +109 +00:04:14.680 --> 00:04:18.510 +This is going to be the component instance, + +110 +00:04:18.510 --> 00:04:21.740 +meaning that whatever got passed in when it was used + +111 +00:04:21.740 --> 00:04:24.670 +in our case this is a component instance, + +112 +00:04:24.670 --> 00:04:26.574 +you could have many of them + +113 +00:04:26.574 --> 00:04:30.550 +then, .props is going to be an object inside of + +114 +00:04:30.550 --> 00:04:33.580 +the component which contains all of our + +115 +00:04:33.580 --> 00:04:37.180 +final properties so tagline, age, cool. + +116 +00:04:37.180 --> 00:04:38.730 +Now if I give that a refresh, + +117 +00:04:38.730 --> 00:04:40.930 +Wes Is Cool is showing up, why? + +118 +00:04:40.930 --> 00:04:43.160 +Because I've passed it in right here + +119 +00:04:43.160 --> 00:04:46.940 +and I could just say something like Catch of the day, + +120 +00:04:46.940 --> 00:04:49.350 +refresh, it's going to automatically update it + +121 +00:04:49.350 --> 00:04:53.060 +so let's change that back to Fresh Seafood Market. + +122 +00:04:53.060 --> 00:04:54.840 +That's going to be really helpful because + +123 +00:04:54.840 --> 00:04:57.910 +that is ultimately how + +124 +00:04:57.910 --> 00:05:01.650 +data is going to get into our actual application. + +125 +00:05:01.650 --> 00:05:05.690 +So I'm going to go ahead and remove this age and cool + +126 +00:05:06.530 --> 00:05:10.810 +and we are just going to be passing in the header tagline. + +127 +00:05:10.810 --> 00:05:12.900 +One other thing I want to show you in the React dev tools + +128 +00:05:12.900 --> 00:05:14.810 +right now is the dollar r trek + +129 +00:05:14.810 --> 00:05:16.660 +so if we go back to our header here + +130 +00:05:16.660 --> 00:05:18.140 +you may be a little confused about like + +131 +00:05:18.140 --> 00:05:20.039 +what is this, right? + +132 +00:05:20.039 --> 00:05:21.940 +And what's neat about that is + +133 +00:05:21.940 --> 00:05:24.500 +if you go into React dev tools, and you open it up, + +134 +00:05:24.500 --> 00:05:27.210 +and you click on any component that you have, + +135 +00:05:27.210 --> 00:05:29.490 +it's going to say equals equals dollar r + +136 +00:05:29.490 --> 00:05:31.460 +and now, what does that mean? + +137 +00:05:31.460 --> 00:05:33.760 +Well, let me rewind real quick + +138 +00:05:33.760 --> 00:05:35.460 +and show you about dollar zero. + +139 +00:05:35.460 --> 00:05:39.070 +So React aside, in most dev tools, + +140 +00:05:39.070 --> 00:05:41.760 +Firefox and Chrome, and I'm assuming the other ones, + +141 +00:05:41.760 --> 00:05:44.840 +if you want to be able to select an element, + +142 +00:05:44.840 --> 00:05:49.410 +like let's say I have, let's find something in here, + +143 +00:05:49.410 --> 00:05:53.720 +menu, header, like let's say I wanted to select this H1 + +144 +00:05:53.720 --> 00:05:55.090 +it tells you it's dollar zero. + +145 +00:05:55.090 --> 00:05:58.990 +So when you click something in Chrome dev tools, + +146 +00:05:58.990 --> 00:06:02.550 +you can go to the console and type in dollar zero, + +147 +00:06:02.550 --> 00:06:05.520 +and what that will do is it will show you + +148 +00:06:05.520 --> 00:06:07.890 +whatever it is that you have clicked in here. + +149 +00:06:07.890 --> 00:06:11.370 +So if I click on H3, and I run that dollar zero again, + +150 +00:06:11.370 --> 00:06:13.760 +it's going to show me that I have selected that + +151 +00:06:13.760 --> 00:06:15.400 +and that's great because it's a little short cut. + +152 +00:06:15.400 --> 00:06:17.860 +You don't have to select it for yourself. + +153 +00:06:17.860 --> 00:06:20.475 +Also, dollar one will show you the second last thing + +154 +00:06:20.475 --> 00:06:23.590 +that you clicked and dollar two will show you + +155 +00:06:23.590 --> 00:06:25.080 +the third last thing that you clicked, + +156 +00:06:25.080 --> 00:06:26.410 +and so on and so on, so, + +157 +00:06:26.410 --> 00:06:27.910 +that can be helpful in the dev tools. + +158 +00:06:27.910 --> 00:06:31.860 +Now in React dev tools, we also have this dollar r + +159 +00:06:31.860 --> 00:06:34.530 +so if I click on my header component, + +160 +00:06:34.530 --> 00:06:36.580 +and then go over to my console, + +161 +00:06:36.580 --> 00:06:40.080 +and type in dollar r, it's going to show us + +162 +00:06:40.080 --> 00:06:42.220 +the component instance that we have. + +163 +00:06:42.220 --> 00:06:44.240 +You can open that up and you'll see + +164 +00:06:44.240 --> 00:06:46.380 +that we have everything that is available + +165 +00:06:46.380 --> 00:06:48.570 +and this was a big aha moment for me in React + +166 +00:06:48.570 --> 00:06:51.940 +because I was like oh, this whole component thing? + +167 +00:06:51.940 --> 00:06:54.730 +It's just an object and it has some stuff in here + +168 +00:06:54.730 --> 00:06:57.950 +that we don't necessarily care about like the updater + +169 +00:06:57.950 --> 00:07:00.600 +and internal instance and whatnot but + +170 +00:07:00.600 --> 00:07:03.280 +we do care about this props object inside of there. + +171 +00:07:03.280 --> 00:07:07.640 +So this is that, is a dollar r.props.tagline + +172 +00:07:07.640 --> 00:07:09.830 +and if we were to have multiple instances + +173 +00:07:09.830 --> 00:07:12.700 +of that header tag, so let me duplicate it, + +174 +00:07:12.700 --> 00:07:16.120 +first one is Fresh Seafood Market + +175 +00:07:16.120 --> 00:07:18.010 +second one is Wes Is Cool + +176 +00:07:19.610 --> 00:07:21.410 +give that a save, now it's just going to render out + +177 +00:07:21.410 --> 00:07:23.170 +two different header tags for us + +178 +00:07:23.170 --> 00:07:24.590 +with the difference being that + +179 +00:07:24.590 --> 00:07:26.230 +each of them has its own props + +180 +00:07:26.230 --> 00:07:27.950 +and that's what I mean by instance. + +181 +00:07:27.950 --> 00:07:30.370 +This is always going to be equal to that instance + +182 +00:07:30.370 --> 00:07:32.060 +and then when I have clicked this one, + +183 +00:07:32.060 --> 00:07:34.380 +this is going to be equal to the second one. + +184 +00:07:34.380 --> 00:07:37.860 +So that's what you need to know about this + +185 +00:07:37.860 --> 00:07:40.510 +and that dollar r is going to be really helpful + +186 +00:07:40.510 --> 00:07:43.250 +for when we get moving in. + +187 +00:07:43.250 --> 00:07:44.620 +Finally, I'll just talk about these little + +188 +00:07:44.620 --> 00:07:46.900 +warnings that you have popping up in the dev tools + +189 +00:07:46.900 --> 00:07:50.440 +So these are warnings, red ones are errors, + +190 +00:07:50.440 --> 00:07:54.030 +generally the yellow warnings are nothing to sweat about, + +191 +00:07:54.030 --> 00:07:58.130 +but create React app does run this thing called ESLint, + +192 +00:07:58.130 --> 00:08:00.940 +and it sort of does like little code quality checks on you + +193 +00:08:00.940 --> 00:08:03.470 +and if you're doing something that could be cleaned up, + +194 +00:08:03.470 --> 00:08:05.790 +or could potentially cause a problem for you, + +195 +00:08:05.790 --> 00:08:06.883 +it's going to tell you. + +196 +00:08:06.883 --> 00:08:10.920 +In our case, if we go into our index.js + +197 +00:08:10.920 --> 00:08:14.180 +it's telling us that we have the StorePicker component + +198 +00:08:14.180 --> 00:08:16.930 +but we're not using it anywhere on the page + +199 +00:08:16.930 --> 00:08:19.380 +so it's like hey, why are you importing this + +200 +00:08:19.380 --> 00:08:21.120 +if you're not using it anywhere on the page + +201 +00:08:21.120 --> 00:08:23.560 +and we are going to be using it in just a couple videos, + +202 +00:08:23.560 --> 00:08:25.910 +so I'm going to ignore that just for now. + From 83a1abd3e9f2acfd58265bb0e3f9e88be03eca57 Mon Sep 17 00:00:00 2001 From: Jonathan Dahan Date: Thu, 31 Jan 2019 15:10:51 -0500 Subject: [PATCH 2/3] 17-23 --- RFB/17 - Displaying Order State with JSX.vtt | 2154 ++++++++---- ...8 - Persisting our State with Firebase.vtt | 1997 +++++++---- ...rsisting Order State with localstorage.vtt | 1572 ++++++--- ...onal Data Flow and Live State Editing .vtt | 2186 ++++++++---- RFB/21 - Removing Items from State.vtt | 1093 ++++-- RFB/22 - Animating React Components.vtt | 2970 +++++++++++------ ... - Component Validation with PropTypes.vtt | 1469 +++++--- 7 files changed, 9230 insertions(+), 4211 deletions(-) diff --git a/RFB/17 - Displaying Order State with JSX.vtt b/RFB/17 - Displaying Order State with JSX.vtt index da0ae9b..d9f94a4 100755 --- a/RFB/17 - Displaying Order State with JSX.vtt +++ b/RFB/17 - Displaying Order State with JSX.vtt @@ -1,560 +1,1594 @@ -WEBVTT - -00:00:00.323 --> 00:00:04.336 line:100% position:50% align:middle -♪[music]♪ - -00:00:06.540 --> 00:00:09.780 line:100% position:50% align:middle -So what we want to do is we want to -display our actual order here. - -00:00:09.780 --> 00:00:15.130 line:100% position:50% align:middle -So we have the sort of object here which -has all the keys in the number of pounds - -00:00:15.130 --> 00:00:19.000 line:100% position:50% align:middle -I want, but we want to actually display -that to a user in a way that's meaningful. - -00:00:19.000 --> 00:00:22.600 line:100% position:50% align:middle -So we want to show them how many pounds -they've bought, what type of fish they - -00:00:22.600 --> 00:00:26.570 line:100% position:50% align:middle -bought, and allow them to remove it from -their order, show them the cumulative - -00:00:26.570 --> 00:00:31.490 line:100% position:50% align:middle -total of that one line item as well as -show them the entire reduced total of - -00:00:31.490 --> 00:00:32.560 line:100% position:50% align:middle -their entire order. - -00:00:32.560 --> 00:00:37.020 line:100% position:50% align:middle -So how do we do that? Well, our order -component here, which if you go into - -00:00:37.020 --> 00:00:40.220 line:100% position:50% align:middle -app.js, you're going to see our Order -component, and it needs two things. - -00:00:40.220 --> 00:00:43.740 line:100% position:50% align:middle -First, it needs all the fishes because -we're going to need things like the name - -00:00:43.740 --> 00:00:49.130 line:100% position:50% align:middle -of it and the price of it. So we'll pass -it to that. So "this.state.fishes". - -00:00:49.130 --> 00:00:54.190 line:100% position:50% align:middle -And we also need the order itself, so -we'll say "order = {this.state.order}". - -00:00:54.190 --> 00:00:57.370 line:100% position:50% align:middle -And you may be saying say like, "Why don't -I just pass the entire state down?" Well, - -00:00:57.370 --> 00:01:00.870 line:100% position:50% align:middle -I probably will have more stuff in the -future in my application and this is - -00:01:00.870 --> 00:01:03.670 line:100% position:50% align:middle -probably not a good practice just to pass -your entire state all the way down. - -00:01:03.670 --> 00:01:07.270 line:100% position:50% align:middle -Just pick and choose the actual things -that you need, especially when we get into - -00:01:07.270 --> 00:01:09.300 line:100% position:50% align:middle -propTypes, that's going to come in handy. - -00:01:09.300 --> 00:01:13.720 line:100% position:50% align:middle -Now let's go over to our Order component -here. And first of all, we need to replace - -00:01:13.720 --> 00:01:19.610 line:100% position:50% align:middle -this paragraph tag with a div with a class -of "order-wrap". And then inside of that, - -00:01:19.610 --> 00:01:24.640 line:100% position:50% align:middle -give yourself an 'h2' that says "Order" or -"Your Order," whatever you feel like - -00:01:24.640 --> 00:01:28.060 line:100% position:50% align:middle -saying. Inside of here I want to show all -of my orders as well as the total, - -00:01:28.060 --> 00:01:31.840 line:100% position:50% align:middle -so we need a couple variables actually to -work with before we return this JSX. - -00:01:31.840 --> 00:01:36.760 line:100% position:50% align:middle -So right above in our 'return', I'm going to -make a new variable called "orderIds" - -00:01:36.760 --> 00:01:44.040 line:100% position:50% align:middle -and that's going to be 'Object.keys()' of -'this.props.order', right? Because the order - -00:01:44.040 --> 00:01:48.080 line:100% position:50% align:middle -got passed down via props and we want -an array of all of the keys. - -00:01:48.080 --> 00:01:55.900 line:100% position:50% align:middle -Now I could just go ahead and put that in -here if I wanted with some curly brackets. - -00:01:56.000 --> 00:01:59.800 line:100% position:50% align:middle -Load some type of fishes, and when I add -it to the order, you see that fish1, - -00:01:59.800 --> 00:02:03.950 line:100% position:50% align:middle -fish2, that's getting added to my actual -order. But we don't just want to show - -00:02:03.950 --> 00:02:07.280 line:100% position:50% align:middle -that, we want to show the total and -everything else along with it. - -00:02:07.280 --> 00:02:12.300 line:100% position:50% align:middle -So along with 'orderIds', we want the -totals. So we say, "const total =" - -00:02:12.300 --> 00:02:18.050 line:100% position:50% align:middle -and we're going to take this 'orderIds' -and 'reduce' it. And if you've never used - -00:02:18.050 --> 00:02:22.920 line:100% position:50% align:middle -reduce() before, it allows you to loop over -an array and add up a whole bunch of - -00:02:22.920 --> 00:02:27.430 line:100% position:50% align:middle -stuff, or just really return a new -something, an object, array, or something - -00:02:27.430 --> 00:02:31.330 line:100% position:50% align:middle -like that. In our case, we're using a very -simple use case, which would be adding up - -00:02:31.330 --> 00:02:32.020 line:100% position:50% align:middle -a bunch of things. - -00:02:32.020 --> 00:02:38.470 line:100% position:50% align:middle -So we'll have a prevTotal and we'll have a -key for that. Use an arrow function here. - -00:02:38.470 --> 00:02:43.510 line:100% position:50% align:middle -Then inside of it, we need the fish, which -is we have all of the fishes but we don't - -00:02:43.510 --> 00:02:49.610 line:100% position:50% align:middle -have the one specific fish. So -"this.props.fish[key]", that's the fish1, - -00:02:49.610 --> 00:02:54.280 line:100% position:50% align:middle -fish2, fish 3, etc., etc. We -need the count, how many of them did they - -00:02:54.280 --> 00:03:05.320 line:100% position:50% align:middle -buy? So "const count = this.props.order[key]". -So if there is like - -00:03:05.320 --> 00:03:09.430 line:100% position:50% align:middle -a 'fish1' in the order, it's going to tell -us how many they have purchased. - -00:03:09.430 --> 00:03:13.960 line:100% position:50% align:middle -And then finally, we need to know is that -fish available? Because they may have - -00:03:13.960 --> 00:03:17.090 line:100% position:50% align:middle -bought it, but then it might be removed -from the order at a later time. - -00:03:17.090 --> 00:03:20.500 line:100% position:50% align:middle -Remember, this is a real time application -where things can change at any given - -00:03:20.500 --> 00:03:27.200 line:100% position:50% align:middle -moment. So we check first is there a fish, -and then we also check if the fish status - -00:03:27.200 --> 00:03:29.199 line:100% position:50% align:middle -is equal to available. - -00:03:31.610 --> 00:03:37.570 line:100% position:50% align:middle -Now we simply just go ahead and add it up. -So we say if the fish is available then we - -00:03:37.570 --> 00:03:42.270 line:100% position:50% align:middle -can go ahead and add it to the total. -So we return the prevTotal. - -00:03:42.270 --> 00:03:47.030 line:100% position:50% align:middle -So the amount that we added up in the last -run plus and we're going to take the count - -00:03:47.030 --> 00:03:55.420 line:100% position:50% align:middle -times the fish.price or zero. And why you -do that or zero, that's because - -00:03:55.420 --> 00:03:59.090 line:100% position:50% align:middle -sometimes the fish will be in our order -but then it will be deleted, - -00:03:59.090 --> 00:04:03.920 line:100% position:50% align:middle -and we don't want to...we want to make -sure that we don't run into any issues - -00:04:03.920 --> 00:04:07.780 line:100% position:50% align:middle -there. Otherwise, we're just going to -return the prevTotal, and why do we do - -00:04:07.780 --> 00:04:11.510 line:100% position:50% align:middle -that? Because if it's available, we'll -return the new amount, otherwise, - -00:04:11.510 --> 00:04:13.560 line:100% position:50% align:middle -we'll return the last amount. - -00:04:13.560 --> 00:04:18.490 line:100% position:50% align:middle -This reduce() right here, we need to start -with a starting value. - -00:04:18.490 --> 00:04:25.290 line:100% position:50% align:middle -So you need to make sure we put a comma -zero here, and then we should have a value - -00:04:25.290 --> 00:04:31.110 line:100% position:50% align:middle -called total. So let's take it and -we'll put it in here, just as total, and - -00:04:31.110 --> 00:04:37.330 line:100% position:50% align:middle -when we add things to our order, -fishes.order. "Cannot read property 'fish1' of - -00:04:37.330 --> 00:04:44.520 line:100% position:50% align:middle -undefined," and that is because we forgot -this is not...it's not "this.props.fish" and - -00:04:44.520 --> 00:04:48.720 line:100% position:50% align:middle -if I had propTypes, that would have -caught it, we will go into that in - -00:04:48.720 --> 00:04:54.490 line:100% position:50% align:middle -just a second. It's "fishes", and save that. -Now you're going to load some in, - -00:04:54.490 --> 00:04:56.450 line:100% position:50% align:middle -add them to order... there we go. - -00:04:56.450 --> 00:05:03.310 line:100% position:50% align:middle -So as I am adding in my values here, the -amount that we're paying is just going up - -00:05:03.310 --> 00:05:07.960 line:100% position:50% align:middle -and up and up. So that's good. -Now, it's not formatted properly, - -00:05:07.960 --> 00:05:11.930 line:100% position:50% align:middle -so how do we do that? Well, we know in -our helpers file, you have this function - -00:05:11.930 --> 00:05:17.760 line:100% position:50% align:middle -called formatPrice. So we can just -import formatPrice function from our - -00:05:17.760 --> 00:05:26.500 line:100% position:50% align:middle -helpers file. And then we'll go down to -our total here, grab that, - -00:05:26.500 --> 00:05:31.260 line:100% position:50% align:middle -add it , add to order. Here we go, looking -good. Just get this formatted properly or - -00:05:31.260 --> 00:05:35.194 line:100% position:50% align:middle -get rid of this 'orderIds', don't need it. -We'll have an unordered list with - -00:05:35.194 --> 00:05:37.443 line:100% position:50% align:middle -the class of "order". - -00:05:37.930 --> 00:05:44.390 line:100% position:50% align:middle -And inside of that, give yourselves a -list item with a class of "total". Inside - -00:05:44.390 --> 00:05:49.480 line:100% position:50% align:middle -of that, give yourself a 'strong' tag that -says "Total:", and below that we're going - -00:05:49.480 --> 00:05:54.830 line:100% position:50% align:middle -to move our formatted price total up below -it just so that some of the CSS that I've - -00:05:54.830 --> 00:06:00.050 line:100% position:50% align:middle -written for you will kick and it'll look a -little bit better. Let's take a look. - -00:06:00.050 --> 00:06:04.590 line:100% position:50% align:middle -Very nice. Okay, so let's do the other -part, which is displaying each individual - -00:06:04.590 --> 00:06:09.760 line:100% position:50% align:middle -fish that is currently in our order. Now, -in order to render out each of the - -00:06:09.760 --> 00:06:13.790 line:100% position:50% align:middle -individual items from our order, I'm not -going to make a separate component in this - -00:06:13.790 --> 00:06:16.870 line:100% position:50% align:middle -case, and I could. And if you're thinking -that, you can go ahead. - -00:06:16.870 --> 00:06:19.690 line:100% position:50% align:middle -However, I wanted to show you another -thing that's called a render function, - -00:06:19.690 --> 00:06:26.170 line:100% position:50% align:middle -where sometimes it doesn't make sense to -create an entirely new component where you - -00:06:26.170 --> 00:06:31.820 line:100% position:50% align:middle -have to pass everything down, but you also -know that it's a lot to put a lot of code - -00:06:31.820 --> 00:06:36.330 line:100% position:50% align:middle -in just one render function in here and it -starts to get a little bit overwhelming. - -00:06:36.330 --> 00:06:42.220 line:100% position:50% align:middle -So what we could also do is shell out some -of the work to a separate render function - -00:06:42.220 --> 00:06:45.790 line:100% position:50% align:middle -that just lives inside of our order -component. So I'll show you what I mean - -00:06:45.790 --> 00:06:52.950 line:100% position:50% align:middle -here. Let's go to this order here and -let's grab some curly brackets. - -00:06:52.950 --> 00:06:58.317 line:100% position:50% align:middle -And we have this array of orderIds. So -we're going to grab all of those orderIds - -00:06:58.317 --> 00:07:02.540 line:100% position:50% align:middle -here and we are going to loop over -them with a 'map'. - -00:07:02.540 --> 00:07:07.240 line:100% position:50% align:middle -Now, usually we would have something like -this, a key, and then we would return a - -00:07:07.240 --> 00:07:11.720 line:100% position:50% align:middle -paragraph with that actual key in it. And -you don't have to do this because I'm - -00:07:11.720 --> 00:07:14.640 line:100% position:50% align:middle -going to delete it. But I'll just show -you, let's use a list item because we're - -00:07:14.640 --> 00:07:18.900 line:100% position:50% align:middle -inside of an unordered list. And there's -some fishes in, and you see that now when - -00:07:18.900 --> 00:07:22.770 line:100% position:50% align:middle -I add the items in, it's yelling at me for -not having a key. That's fine, - -00:07:22.770 --> 00:07:27.730 line:100% position:50% align:middle -don't worry about that. But now when I add -them, it will render it out for us. But - -00:07:27.730 --> 00:07:31.910 line:100% position:50% align:middle -I've got a lot more to put on in here, and -in also we're going to do animation in a - -00:07:31.910 --> 00:07:36.920 line:100% position:50% align:middle -future video where we animate in this -value right here, and that's going to take - -00:07:36.920 --> 00:07:38.680 line:100% position:50% align:middle -a lot more code as well. - -00:07:38.680 --> 00:07:43.400 line:100% position:50% align:middle -So I don't want to do it right in here, -I'm going to shell it off to a render - -00:07:43.400 --> 00:07:46.450 line:100% position:50% align:middle -function. So I'm going to delete this and -we're just going to say, - -00:07:46.450 --> 00:07:52.160 line:100% position:50% align:middle -"this.renderOrder". And what that does is -it says all right, renderOrder, and we can - -00:07:52.160 --> 00:07:55.740 line:100% position:50% align:middle -go up here right before our render and -we'll make our renderOrder() function. - -00:07:55.740 --> 00:08:00.950 line:100% position:50% align:middle -And I just made this method up, it's not a -specific one to React, - -00:08:00.950 --> 00:08:05.520 line:100% position:50% align:middle -I can call it whatever I want. That will -give us the key for each one, and then we - -00:08:05.520 --> 00:08:08.480 line:100% position:50% align:middle -need a couple lines here, we need the -actual fish, say, - -00:08:08.480 --> 00:08:18.590 line:100% position:50% align:middle -"this.props.fishes[key];" And then we also -need the count, which is going to be - -00:08:18.590 --> 00:08:27.510 line:100% position:50% align:middle -"this.props.fishes[key];" Actually not -"fishes", it's going to be "order", - -00:08:27.510 --> 00:08:29.850 line:100% position:50% align:middle -because that will tell us how many -they have ordered. - -00:08:29.850 --> 00:08:37.880 line:100% position:50% align:middle -Now, if there is no fish or the -fish.status is equal to unavailable, - -00:08:37.880 --> 00:08:44.080 line:100% position:50% align:middle -then we need to return a list item. And -we're going to do this because we're going - -00:08:44.080 --> 00:08:48.730 line:100% position:50% align:middle -to be able to delete a fish. And if -someone has it in their basket and then we - -00:08:48.730 --> 00:08:53.370 line:100% position:50% align:middle -delete the fish or we mark it as -"unavailable" then they need to know that - -00:08:53.370 --> 00:08:59.820 line:100% position:50% align:middle -they can't buy that fish because it's no -longer available, right? And we give this - -00:08:59.820 --> 00:09:05.770 line:100% position:50% align:middle -one a key of "{key}", and again, that will help -React determine which actual domino this - -00:09:05.770 --> 00:09:13.650 line:100% position:50% align:middle -is, and then inside of that we'll say, -"Sorry," and we'll say, "Fish is no longer - -00:09:13.650 --> 00:09:15.060 line:100% position:50% align:middle -available!" - -00:09:15.060 --> 00:09:21.174 line:100% position:50% align:middle -Now, we can actually take it one step -further and say, "If there is a fish," - -00:09:21.174 --> 00:09:26.510 line:100% position:50% align:middle -then we can say the fish.name. So if I -have like Pacific Halibut and I mark it as - -00:09:26.510 --> 00:09:32.298 line:100% position:50% align:middle -unavailable, we'll say, "Pacific Halibut -is no longer available." - -00:09:32.298 --> 00:09:37.130 line:100% position:50% align:middle -Otherwise, if someone totally -deletes the fish entirely from our - -00:09:37.130 --> 00:09:40.640 line:100% position:50% align:middle -inventory management system that we're -going to build, then we won't know the - -00:09:40.640 --> 00:09:45.310 line:100% position:50% align:middle -name of it because it will be deleted and -we'll just say "fish". So if there's a fish, - -00:09:45.310 --> 00:09:48.760 line:100% position:50% align:middle -put the fish's name there, otherwise, -just put the word, "Fish is no longer - -00:09:48.760 --> 00:09:49.270 line:100% position:50% align:middle -available." - -00:09:49.270 --> 00:09:58.410 line:100% position:50% align:middle -Good, then let's go down here and we will -return the actual list item for when the - -00:09:58.410 --> 00:10:05.700 line:100% position:50% align:middle -fish is available. Key equals key. Inside -of that we'll give ourselves a span - -00:10:05.700 --> 00:10:16.950 line:100% position:50% align:middle -where we say "count lbs", fish.name, so "3lbs -of Pacific Halibut." And then we'll - -00:10:16.950 --> 00:10:24.330 line:100% position:50% align:middle -have a span with the class of "price", where -we will not just give the fish.price - -00:10:24.330 --> 00:10:29.310 line:100% position:50% align:middle -because that is just one pound, but we'll -take the count and multiply that by the - -00:10:29.310 --> 00:10:36.980 line:100% position:50% align:middle -fish.price. And then we'll wrap that -entire thing here in our formatPrice - -00:10:36.980 --> 00:10:43.050 line:100% position:50% align:middle -function. See where we're at right now, -add it in, add some stuff to our order. - -00:10:43.050 --> 00:10:50.256 line:100% position:50% align:middle -We got an error, "Cannot read property -'props' of undefined." This is the exact - -00:10:50.256 --> 00:10:51.994 line:100% position:50% align:middle -problem that we were having earlier. - -00:10:52.330 --> 00:10:57.802 line:100% position:50% align:middle -I use 'this' inside of a function that -wasn't render(). What do we do when you - -00:10:57.802 --> 00:11:05.120 line:100% position:50% align:middle -want to be able to access 'this' inside of a -method? You need to bind it. So we can - -00:11:06.231 --> 00:11:14.080 line:100% position:50% align:middle -grab a constructor or run super(), and we'll -say "this.renderorder = - -00:11:14.080 --> 00:11:22.250 line:100% position:50% align:middle -this.renderOrder.bind(this);" And with that -one line this renderOrder() function should - -00:11:22.250 --> 00:11:29.490 line:100% position:50% align:middle -now be bound to Order and we'll able to -access thing on Order, such as 'props'. - -00:11:29.490 --> 00:11:30.415 line:100% position:50% align:middle -Load it in. - -00:11:31.006 --> 00:11:34.850 line:100% position:50% align:middle -Oh, you have to know how to spell -"return." You're probably screaming at me - -00:11:34.850 --> 00:11:38.530 line:100% position:50% align:middle -this whole time while I was coding. -Otherwise, JavaScript won't work. - -00:11:38.530 --> 00:11:43.080 line:100% position:50% align:middle -Load it in, and there we go, one pound of -Pacific Halibut, one pound of Lobster, and - -00:11:43.080 --> 00:11:46.000 line:100% position:50% align:middle -then when I add additional ones, -it will just keep adding up. +WEBVTT + +1 +00:00:00.000 --> 00:00:02.583 line:15% +(upbeat music) + +2 +00:00:06.800 --> 00:00:08.180 +Now that we've successfully got + +3 +00:00:08.180 --> 00:00:10.190 +our items added to our order. + +4 +00:00:10.190 --> 00:00:12.051 +We need to take that order state + +5 +00:00:12.051 --> 00:00:13.680 +and display it on the page, + +6 +00:00:13.680 --> 00:00:14.890 +along with some other information. + +7 +00:00:14.890 --> 00:00:16.550 +So, let's take a quick look here, + +8 +00:00:16.550 --> 00:00:20.120 +at my answer and when I add items to my order + +9 +00:00:20.120 --> 00:00:21.780 +it's obviously going to show us + +10 +00:00:21.780 --> 00:00:23.495 +how many of each we want. + +11 +00:00:23.495 --> 00:00:25.196 +What fish we are having, + +12 +00:00:25.196 --> 00:00:27.750 +and then it will do a couple things here. + +13 +00:00:27.750 --> 00:00:30.313 +It'll display the price, and then we'll be able to + +14 +00:00:30.313 --> 00:00:32.468 +as we add more it'll multiple that price. + +15 +00:00:32.468 --> 00:00:35.840 +And then whenever you have multiple items. + +16 +00:00:35.840 --> 00:00:37.138 +It's going to total it out, + +17 +00:00:37.138 --> 00:00:39.350 +so it's going to add these values together. + +18 +00:00:39.350 --> 00:00:43.160 +So, let's hop on over to our order dot JS, + +19 +00:00:43.160 --> 00:00:45.230 +'cause that's where everything is going to happen + +20 +00:00:45.230 --> 00:00:49.382 +and we'll go into this div of the class name of order. + +21 +00:00:49.382 --> 00:00:52.640 +Actually that should have a class name of order wrap. + +22 +00:00:52.640 --> 00:00:55.630 +I believe that lines up with some of the CSS + +23 +00:00:55.630 --> 00:00:56.820 +that I have inside of that. + +24 +00:00:56.820 --> 00:01:00.360 +We need ourselves an h2 tag that says order. + +25 +00:01:00.360 --> 00:01:01.250 +Good. + +26 +00:01:01.250 --> 00:01:03.840 +And then inside of that we're going to have + +27 +00:01:03.840 --> 00:01:05.340 +essentially an unordered list + +28 +00:01:05.340 --> 00:01:07.450 +and every single item in our order + +29 +00:01:07.450 --> 00:01:08.970 +is going to be a list item. + +30 +00:01:08.970 --> 00:01:12.400 +But, before we even get to looping over that, + +31 +00:01:12.400 --> 00:01:15.220 +let's work on the displaying of the actual total. + +32 +00:01:15.220 --> 00:01:18.570 +So, here I've got the total displaying, + +33 +00:01:18.570 --> 00:01:20.320 +how would I then do that? + +34 +00:01:20.320 --> 00:01:23.520 +Well, I'm in the order and does the order + +35 +00:01:23.520 --> 00:01:25.700 +have any information, available to me? + +36 +00:01:25.700 --> 00:01:28.350 +I don't know let's take a quick look here. + +37 +00:01:28.350 --> 00:01:30.060 +So, go to catch of the day. + +38 +00:01:30.060 --> 00:01:31.810 +We'll load some sample fishes. + +39 +00:01:31.810 --> 00:01:33.320 +We'll add a couple to our order + +40 +00:01:33.320 --> 00:01:35.080 +we'll open up our app state, + +41 +00:01:35.080 --> 00:01:37.980 +and our order has stuff in it. + +42 +00:01:37.980 --> 00:01:40.530 +But, if I open up my order component. + +43 +00:01:42.740 --> 00:01:43.920 +There's nothing in it right? + +44 +00:01:43.920 --> 00:01:45.400 +So, we have to pass the den. + +45 +00:01:45.400 --> 00:01:47.210 +I'm going to ask you one more time, + +46 +00:01:47.210 --> 00:01:50.700 +how do we get stuff to a component? + +47 +00:01:50.700 --> 00:01:52.030 +Via props right? + +48 +00:01:52.030 --> 00:01:54.200 +So we'll open up our app state, + +49 +00:01:54.200 --> 00:01:56.155 +we'll go down to our order component + +50 +00:01:56.155 --> 00:01:57.870 +and we need a couple things here. + +51 +00:01:57.870 --> 00:01:59.620 +We need to pass down the fishes, + +52 +00:01:59.620 --> 00:02:04.010 +so we'll say fishes is equal to this dot state dot fishes + +53 +00:02:04.010 --> 00:02:05.950 +and we also need the order so we'll say + +54 +00:02:05.950 --> 00:02:08.850 +order equals this dot state dot order. + +55 +00:02:08.850 --> 00:02:11.340 +Now you may be asking okay so + +56 +00:02:11.340 --> 00:02:13.296 +we're passing down the entire state, + +57 +00:02:13.296 --> 00:02:15.530 +couldn't we just pass down the entire state? + +58 +00:02:15.530 --> 00:02:17.560 +And let me show you actually how this works. + +59 +00:02:17.560 --> 00:02:19.811 +So we'll go back to our chrome here. + +60 +00:02:19.811 --> 00:02:22.229 +Load it up, add some stuff to my order. + +61 +00:02:22.229 --> 00:02:25.460 +And now when I look at my order, + +62 +00:02:25.460 --> 00:02:27.110 +you'll see that our order both + +63 +00:02:27.110 --> 00:02:29.471 +has all of the fishes as well as our + +64 +00:02:29.471 --> 00:02:33.010 +our order state being passed in via props. + +65 +00:02:33.010 --> 00:02:34.270 +There's this other thing in react + +66 +00:02:34.270 --> 00:02:36.570 +that you can do is called an object spread. + +67 +00:02:36.570 --> 00:02:39.320 +And you can essentially spread everything + +68 +00:02:39.320 --> 00:02:40.440 +from state into it. + +69 +00:02:40.440 --> 00:02:43.990 +So, dot, dot, dot, this dot state. + +70 +00:02:43.990 --> 00:02:45.380 +And what they will do is it's going + +71 +00:02:45.380 --> 00:02:47.420 +to take everything in state. + +72 +00:02:47.420 --> 00:02:50.750 +It works the exact same way where we copied an object + +73 +00:02:50.750 --> 00:02:53.560 +but this is going to spread everything + +74 +00:02:53.560 --> 00:02:55.660 +from state into order. + +75 +00:02:55.660 --> 00:02:57.330 +And now if we go back. + +76 +00:02:58.670 --> 00:03:00.100 +And I load some sample fishes + +77 +00:03:00.100 --> 00:03:01.650 +and add some stuff to my order. + +78 +00:03:02.800 --> 00:03:05.040 +It's exactly the same, fishes and order. + +79 +00:03:05.040 --> 00:03:07.120 +Now, that's a little bit lazy + +80 +00:03:07.120 --> 00:03:09.190 +and I could run into some trouble, + +81 +00:03:09.190 --> 00:03:11.250 +by automatically passing everything down. + +82 +00:03:11.250 --> 00:03:12.190 +When I first saw that, I was like + +83 +00:03:12.190 --> 00:03:13.110 +great that's what I want, + +84 +00:03:13.110 --> 00:03:15.550 +I hate having to explicitly pass everything down. + +85 +00:03:15.550 --> 00:03:18.510 +But, we want to make these + +86 +00:03:18.510 --> 00:03:20.740 +really modular components where we + +87 +00:03:20.740 --> 00:03:23.280 +know what sort of data is being passed in + +88 +00:03:23.280 --> 00:03:25.150 +and we don't just assume that + +89 +00:03:25.150 --> 00:03:26.610 +all of the data's get passed in. + +90 +00:03:26.610 --> 00:03:29.570 +And the problem with the spread, with the this dot state + +91 +00:03:29.570 --> 00:03:32.507 +is if I were to add another item to my state, + +92 +00:03:32.507 --> 00:03:35.980 +maybe like age, a hundred + +93 +00:03:35.980 --> 00:03:39.930 +and cool is true. + +94 +00:03:39.930 --> 00:03:43.850 +Watch what happens now when I open up my order state, + +95 +00:03:43.850 --> 00:03:46.490 +it automatically passes down all of that data + +96 +00:03:46.490 --> 00:03:47.950 +whether I like it or not. + +97 +00:03:47.950 --> 00:03:49.820 +And you should not be passing down data, + +98 +00:03:49.820 --> 00:03:51.990 +unless you explicitly need it. + +99 +00:03:51.990 --> 00:03:55.630 +So, that spread can be helpful, + +100 +00:03:55.630 --> 00:03:57.810 +if you have an object full + +101 +00:03:57.810 --> 00:03:59.840 +of multiple things that you wanna pass down. + +102 +00:03:59.840 --> 00:04:03.430 +But, don't use it to pass down your entire state. + +103 +00:04:03.430 --> 00:04:07.130 +So we'll bring that back to just explicitly + +104 +00:04:07.130 --> 00:04:09.728 +passing these things down that we need. + +105 +00:04:09.728 --> 00:04:12.840 +Good, so we'll head over to our order now. + +106 +00:04:12.840 --> 00:04:15.880 +And what I wanna do is, before we return some JSX, + +107 +00:04:15.880 --> 00:04:19.730 +we need to tally up the total of our actual order, right? + +108 +00:04:19.730 --> 00:04:22.060 +So what we'll do here is first things we need + +109 +00:04:22.060 --> 00:04:24.090 +just an array of all the order ids. + +110 +00:04:24.090 --> 00:04:27.810 +We'll say const the order ideas equals, + +111 +00:04:27.810 --> 00:04:30.150 +and we'll use our object dot keys, again. + +112 +00:04:30.150 --> 00:04:32.770 +And we'll say this dot props dot order. + +113 +00:04:32.770 --> 00:04:35.530 +And that's just try to display that below it, + +114 +00:04:35.530 --> 00:04:37.340 +so we'll say order ids. + +115 +00:04:39.370 --> 00:04:40.390 +Pull up some sample fishes, + +116 +00:04:40.390 --> 00:04:43.060 +and then as I add the items to my order. + +117 +00:04:43.060 --> 00:04:45.130 +You'll that we're able to see that, + +118 +00:04:45.130 --> 00:04:47.050 +there's fish one and fish two in my order + +119 +00:04:47.050 --> 00:04:49.260 +I can add a fish four, + +120 +00:04:49.260 --> 00:04:50.610 +add a fish five, et cetera. + +121 +00:04:50.610 --> 00:04:53.240 +You see that the order ids are being added to the order. + +122 +00:04:53.240 --> 00:04:54.450 +So, that's good. + +123 +00:04:54.450 --> 00:04:59.040 +Next, we need to make a total of how much each of them cost. + +124 +00:04:59.040 --> 00:05:01.210 +So we'll say const total equals, + +125 +00:05:01.210 --> 00:05:03.580 +and we're gonna take the order ids + +126 +00:05:03.580 --> 00:05:05.930 +and we're gonna run a reduce on them + +127 +00:05:05.930 --> 00:05:07.970 +and what a reduce is, is sort of + +128 +00:05:07.970 --> 00:05:10.640 +like a four loop or a map. + +129 +00:05:10.640 --> 00:05:14.780 +But, instead of returning a new item, + +130 +00:05:14.780 --> 00:05:17.300 +from like a map or instead of just looping over + +131 +00:05:17.300 --> 00:05:20.840 +and updating an external variable like a four loop would. + +132 +00:05:20.840 --> 00:05:23.652 +A reduce will take in some data and return + +133 +00:05:23.652 --> 00:05:27.690 +sorta like a tally or it can actually + +134 +00:05:27.690 --> 00:05:28.930 +do a whole bunch of other stuff. + +135 +00:05:28.930 --> 00:05:32.710 +But, in this case we are just going to return a tally. + +136 +00:05:32.710 --> 00:05:33.860 +If you're interested in learning + +137 +00:05:33.860 --> 00:05:35.800 +more about these reduce and map. + +138 +00:05:35.800 --> 00:05:38.304 +I have a course javascript30.com + +139 +00:05:38.304 --> 00:05:40.525 +and I have this two specific days. + +140 +00:05:40.525 --> 00:05:44.850 +Day one, array cardio day one, which is day four. + +141 +00:05:44.850 --> 00:05:47.430 +And array cardio two which is on day seven. + +142 +00:05:47.430 --> 00:05:49.795 +These go over map, filter, reduce. + +143 +00:05:49.795 --> 00:05:51.660 +All of those array methods, + +144 +00:05:51.660 --> 00:05:54.280 +that are going to make you a better JavaScript developer. + +145 +00:05:54.280 --> 00:05:56.100 +So, if you're having trouble with reduce, + +146 +00:05:56.100 --> 00:05:58.010 +maybe take a quick break and go over those. + +147 +00:05:58.010 --> 00:06:00.630 +So, we have reduce here and that's going to + +148 +00:06:00.630 --> 00:06:04.191 +take in the prev total which is maybe the tally, + +149 +00:06:04.191 --> 00:06:05.959 +and it's going to take in the key, + +150 +00:06:05.959 --> 00:06:08.422 +which is fish one, fish two, fish three. + +151 +00:06:08.422 --> 00:06:10.880 +We'll use an arrow and curly brackets. + +152 +00:06:10.880 --> 00:06:14.290 +Now, inside of here we need to make a couple variables. + +153 +00:06:14.290 --> 00:06:16.540 +So, say const fish, we need to grab + +154 +00:06:16.540 --> 00:06:18.543 +the actual fish that we're looping over. + +155 +00:06:18.543 --> 00:06:22.250 +This dot props dot fishes, + +156 +00:06:22.250 --> 00:06:25.300 +and we use the key to grab it. + +157 +00:06:25.300 --> 00:06:28.900 +We need how many of the fish they are buying, + +158 +00:06:28.900 --> 00:06:32.040 +'cause if you are buying three of fish one, + +159 +00:06:32.040 --> 00:06:33.020 +then we need that value. + +160 +00:06:33.020 --> 00:06:37.820 +So we'll say const count is dot props dot order, + +161 +00:06:37.820 --> 00:06:41.760 +key and then we also need a bullion to tell us + +162 +00:06:41.760 --> 00:06:43.080 +if that fish is available, + +163 +00:06:43.080 --> 00:06:45.581 +because there is an option where + +164 +00:06:45.581 --> 00:06:48.302 +you can add something to your order like lobster. + +165 +00:06:48.302 --> 00:06:52.190 +And then, if it's sold out it should + +166 +00:06:52.190 --> 00:06:53.460 +tell us that it's sold out. + +167 +00:06:53.460 --> 00:06:54.930 +'Cause then we're in a bit of trouble + +168 +00:06:54.930 --> 00:06:57.000 +where someone has something in their order + +169 +00:06:57.000 --> 00:06:59.140 +but then it's been changed to sold out. + +170 +00:06:59.140 --> 00:07:01.204 +So they shouldn't be charged for it, + +171 +00:07:01.204 --> 00:07:02.480 +they should just be told + +172 +00:07:02.480 --> 00:07:04.191 +sorry lobsters no longer available + +173 +00:07:04.191 --> 00:07:08.360 +and then the total should be reflected based on that. + +174 +00:07:08.360 --> 00:07:11.379 +So we will go const is available is equal to + +175 +00:07:11.379 --> 00:07:13.020 +first you want to check if there + +176 +00:07:13.020 --> 00:07:15.870 +is a fish, so it's not deleted. + +177 +00:07:15.870 --> 00:07:20.870 +And, the fish dot status is equal to available. + +178 +00:07:22.600 --> 00:07:24.570 +Good, now what we need to do is simply say + +179 +00:07:24.570 --> 00:07:27.950 +if the fish is available, + +180 +00:07:27.950 --> 00:07:31.370 +then we are going to return the previous total + +181 +00:07:31.370 --> 00:07:33.460 +which is the sorta the running tally + +182 +00:07:33.460 --> 00:07:35.540 +of how much the order cost so far + +183 +00:07:35.540 --> 00:07:37.840 +as we're looping through each fish. + +184 +00:07:37.840 --> 00:07:40.185 +Plus, then we want to take the count, + +185 +00:07:40.185 --> 00:07:43.260 +how many of each one, multiply it + +186 +00:07:43.260 --> 00:07:46.800 +by the fish dot price. + +187 +00:07:46.800 --> 00:07:50.330 +And then, if not we just want to return the previous total. + +188 +00:07:50.330 --> 00:07:52.540 +Because in this case the fish wasn't available + +189 +00:07:52.540 --> 00:07:54.550 +so we're going to skip over that one + +190 +00:07:54.550 --> 00:07:57.600 +and keep adding up the additional ones. + +191 +00:07:57.600 --> 00:08:00.250 +And then finally, a reduce when your adding numbers + +192 +00:08:01.104 --> 00:08:03.129 +you need to always start with the starting value, + +193 +00:08:03.129 --> 00:08:05.030 +in our case we're going to start with zero. + +194 +00:08:05.030 --> 00:08:07.150 +So, if that worked, let's just + +195 +00:08:07.150 --> 00:08:08.290 +double check that, that works. + +196 +00:08:08.290 --> 00:08:10.921 +We'll go down here and do ourselves + +197 +00:08:10.921 --> 00:08:15.230 +a class of total and inside of that + +198 +00:08:15.230 --> 00:08:16.930 +I'm gonna give myself a strong tag, + +199 +00:08:16.930 --> 00:08:20.280 +and we'll pop the total variable inside of that. + +200 +00:08:21.140 --> 00:08:24.060 +So go back here, we'll load up some sample fishes, + +201 +00:08:24.060 --> 00:08:26.880 +you can see it is zero, 'cause there's nothing added yet. + +202 +00:08:26.880 --> 00:08:30.250 +But now, as I add item to, there we go, beauty. + +203 +00:08:30.250 --> 00:08:33.530 +As I add more items to my order, the value is going up. + +204 +00:08:33.530 --> 00:08:36.020 +This is obviously, cents, so how do we fix that? + +205 +00:08:36.020 --> 00:08:39.290 +Let's go back to our order and we'll import + +206 +00:08:39.290 --> 00:08:42.595 +the helper of format money, our helpers file + +207 +00:08:42.595 --> 00:08:44.990 +and then we'll go down to our total + +208 +00:08:44.990 --> 00:08:47.340 +and here we can just say total + +209 +00:08:47.340 --> 00:08:50.700 +and then wrap the total in a format money, + +210 +00:08:51.940 --> 00:08:53.530 +function. + +211 +00:08:53.530 --> 00:08:56.160 +Oh it does not contain something + +212 +00:08:56.160 --> 00:08:58.830 +called format money from the helpers. + +213 +00:08:58.830 --> 00:08:59.770 +Why not? + +214 +00:08:59.770 --> 00:09:00.880 +What is it called? + +215 +00:09:01.830 --> 00:09:05.250 +Format price not format money. + +216 +00:09:05.250 --> 00:09:06.083 +Boom. + +217 +00:09:06.970 --> 00:09:07.940 +Good, total zero. + +218 +00:09:07.940 --> 00:09:11.000 +Load some sample fishes, add some items to the order. + +219 +00:09:11.000 --> 00:09:12.420 +You can see that the order total + +220 +00:09:12.420 --> 00:09:14.970 +is going up and up and up as we need it. + +221 +00:09:14.970 --> 00:09:16.040 +Good. + +222 +00:09:16.040 --> 00:09:17.630 +Now, let's actually go ahead + +223 +00:09:17.630 --> 00:09:20.406 +and loop over each of the order ids. + +224 +00:09:20.406 --> 00:09:24.740 +So that we can display that fish and how many that we have. + +225 +00:09:24.740 --> 00:09:26.878 +Now, let's loop over the order ids + +226 +00:09:26.878 --> 00:09:29.700 +and the way that we do that is we're going to give ourselves + +227 +00:09:29.700 --> 00:09:32.240 +an unordered list and then inside of that + +228 +00:09:32.240 --> 00:09:35.340 +we'll take our order ids and we'll map over that. + +229 +00:09:35.340 --> 00:09:38.170 +And let's just say key and for each key + +230 +00:09:38.170 --> 00:09:41.402 +what we're going to do is we're going to + +231 +00:09:41.402 --> 00:09:44.390 +return, and just lets say a list item + +232 +00:09:45.660 --> 00:09:47.620 +and inside of that put the key. + +233 +00:09:47.620 --> 00:09:49.820 +So let's just double check that, that works. + +234 +00:09:50.920 --> 00:09:53.550 +Some sample fishes, yeah there we go. + +235 +00:09:53.550 --> 00:09:57.600 +So now if I inspect that, we're getting a list item + +236 +00:09:57.600 --> 00:10:01.070 +for ever single one that we have. + +237 +00:10:01.070 --> 00:10:01.903 +Good. + +238 +00:10:01.903 --> 00:10:03.030 +Now, I'm gonna show you something + +239 +00:10:03.030 --> 00:10:05.510 +that I like to call a render function + +240 +00:10:05.510 --> 00:10:08.380 +and this is something that I like to use + +241 +00:10:08.380 --> 00:10:11.430 +when my, my render function here + +242 +00:10:11.430 --> 00:10:13.350 +starts to get a little bit overloaded. + +243 +00:10:13.350 --> 00:10:16.480 +Meaning that, that's a lot of code going on in here, + +244 +00:10:16.480 --> 00:10:18.510 +and as soon as you find yourself + +245 +00:10:18.510 --> 00:10:21.650 +having a bit too much code inside of your render function. + +246 +00:10:21.650 --> 00:10:24.140 +That probably means that you're doing + +247 +00:10:24.140 --> 00:10:26.037 +too much in a specific component. + +248 +00:10:26.037 --> 00:10:29.300 +And you could probably shell off some of that + +249 +00:10:31.010 --> 00:10:34.210 +complexity to a separate component. + +250 +00:10:34.210 --> 00:10:36.810 +But, then you're sometimes in the middle where + +251 +00:10:36.810 --> 00:10:39.550 +you're like this is really complex for one render function, + +252 +00:10:39.550 --> 00:10:42.470 +but it doesn't make a whole lot of sense to + +253 +00:10:42.470 --> 00:10:45.250 +to make a separate component just for this one item + +254 +00:10:45.250 --> 00:10:46.400 +'cause I'm really not gonna be + +255 +00:10:46.400 --> 00:10:49.310 +using it anywhere else, inside of it. + +256 +00:10:49.310 --> 00:10:51.880 +So, what I like to do is I like to make separate + +257 +00:10:51.880 --> 00:10:54.630 +render functions inside of a single component. + +258 +00:10:54.630 --> 00:10:57.270 +So, what I'll do here is I'll make a new function + +259 +00:10:57.270 --> 00:11:00.190 +called render order and I'm just making this up + +260 +00:11:00.190 --> 00:11:02.270 +and that's going to take in a key + +261 +00:11:02.270 --> 00:11:04.800 +and we'll have an arrow function coming from that. + +262 +00:11:04.800 --> 00:11:07.290 +And then, from the render order what we can do + +263 +00:11:07.290 --> 00:11:11.530 +is we can return that list item with the key. + +264 +00:11:14.260 --> 00:11:15.770 +And then what you can do when + +265 +00:11:15.770 --> 00:11:17.730 +you're looping over it in your map. + +266 +00:11:17.730 --> 00:11:19.700 +Instead of doing all the complexity + +267 +00:11:19.700 --> 00:11:22.460 +of doing the loop right inside of this. + +268 +00:11:22.460 --> 00:11:23.930 +We can simply shell off + +269 +00:11:23.930 --> 00:11:26.980 +that map function of to another function. + +270 +00:11:26.980 --> 00:11:31.980 +So we'll say map this dot render order. + +271 +00:11:32.034 --> 00:11:34.290 +And then that's all we have to do for this. + +272 +00:11:34.290 --> 00:11:36.000 +Nice and clean and then we know + +273 +00:11:36.000 --> 00:11:37.370 +that when we're rendering out + +274 +00:11:37.370 --> 00:11:39.680 +each of the list items for the order. + +275 +00:11:39.680 --> 00:11:42.120 +We can go to the separate render order function + +276 +00:11:42.120 --> 00:11:43.070 +and deal with it there. + +277 +00:11:43.070 --> 00:11:44.480 +So let's just double check that + +278 +00:11:44.480 --> 00:11:45.900 +these list items are still in there. + +279 +00:11:45.900 --> 00:11:47.224 +Maybe I'll put a fish in there, + +280 +00:11:47.224 --> 00:11:50.080 +just to show that it changed. + +281 +00:11:50.080 --> 00:11:52.900 +Load some sample fishes and then as I add the items + +282 +00:11:52.900 --> 00:11:56.990 +to the order they are showing up in a separate function. + +283 +00:11:56.990 --> 00:11:58.100 +Good. + +284 +00:11:59.860 --> 00:12:01.270 +Now what we need to do is before + +285 +00:12:01.270 --> 00:12:03.770 +we return we need a couple variables again. + +286 +00:12:03.770 --> 00:12:06.530 +So, we need these fish and count variables, + +287 +00:12:06.530 --> 00:12:08.720 +I'm just going to copy these. + +288 +00:12:08.720 --> 00:12:10.662 +Put them up here. + +289 +00:12:10.662 --> 00:12:12.350 +Const fish, count + +290 +00:12:13.680 --> 00:12:16.100 +and we'll go inside of this + +291 +00:12:16.100 --> 00:12:19.640 +and we're going to return the list item + +292 +00:12:19.640 --> 00:12:22.980 +with count lbs + +293 +00:12:24.410 --> 00:12:26.090 +and then fish dot name. + +294 +00:12:27.370 --> 00:12:29.510 +And then we'll go down here + +295 +00:12:29.510 --> 00:12:33.290 +and let's say count times fish dot price. + +296 +00:12:35.940 --> 00:12:38.280 +And then we'll grab our format price + +297 +00:12:40.220 --> 00:12:43.230 +and wrap that there. + +298 +00:12:43.230 --> 00:12:44.860 +Beautiful. + +299 +00:12:44.860 --> 00:12:47.200 +So we'll load some samples, add to order, good. + +300 +00:12:47.200 --> 00:12:49.170 +We got one pound of Pacific halibut. + +301 +00:12:49.170 --> 00:12:51.390 +We're gonna into styling it, + +302 +00:12:51.390 --> 00:12:53.500 +so we have it look a little bit like this. + +303 +00:12:53.500 --> 00:12:55.330 +Add each of them to order, we're gonna get some + +304 +00:12:55.330 --> 00:12:57.920 +fancy items showing up here. + +305 +00:12:57.920 --> 00:12:59.550 +But for now, there are not animating + +306 +00:12:59.550 --> 00:13:01.730 +because we haven't hit that just yet. + +307 +00:13:01.730 --> 00:13:03.300 +Now there is one problem here + +308 +00:13:03.300 --> 00:13:06.600 +where if I were to go to my app state + +309 +00:13:07.770 --> 00:13:10.090 +and find our fishes and find fish one + +310 +00:13:10.090 --> 00:13:14.120 +and change it to unavailable. + +311 +00:13:14.120 --> 00:13:15.440 +You see that, that just changed + +312 +00:13:15.440 --> 00:13:16.940 +the price there from $32. + +313 +00:13:16.940 --> 00:13:20.770 +I'll do it once more, remove change this back to available. + +314 +00:13:20.770 --> 00:13:25.770 +It's $49.24 make it unavailable and it's 32 dollars. + +315 +00:13:26.100 --> 00:13:30.000 +That's because here, when we're calculating the total + +316 +00:13:30.000 --> 00:13:31.830 +we're figuring out if it's available. + +317 +00:13:31.830 --> 00:13:33.230 +But, there's a bit of a problem here + +318 +00:13:33.230 --> 00:13:36.140 +where we're just showing the fish regardless. + +319 +00:13:36.140 --> 00:13:38.460 +So before we actually return this list item, + +320 +00:13:38.460 --> 00:13:41.090 +we need to check if that person is there. + +321 +00:13:41.090 --> 00:13:45.060 +So we'll say if fish dot available, + +322 +00:13:46.060 --> 00:13:49.610 +or fish dot status, is equal to + +323 +00:13:49.610 --> 00:13:51.950 +available then, + +324 +00:13:52.920 --> 00:13:53.780 +and what I like to do in this case + +325 +00:13:53.780 --> 00:13:56.480 +is just make a new variable called is available again. + +326 +00:13:57.830 --> 00:14:02.350 +So const is available + +327 +00:14:04.060 --> 00:14:06.310 +is equal to fish dot status. + +328 +00:14:06.310 --> 00:14:11.080 +So if it is not available so bang available + +329 +00:14:11.080 --> 00:14:13.880 +then we're going to return a list item + +330 +00:14:13.880 --> 00:14:16.870 +and we'll just say sorry fish dot name, + +331 +00:14:18.330 --> 00:14:20.100 +first we wanna say if there's a fish, + +332 +00:14:20.100 --> 00:14:22.580 +then we'll say fish dot name. + +333 +00:14:23.490 --> 00:14:24.750 +Otherwise we're just going to say + +334 +00:14:24.750 --> 00:14:28.780 +the fish is no longer available. + +335 +00:14:29.750 --> 00:14:31.570 +So the reason why I'm doing that + +336 +00:14:31.570 --> 00:14:33.770 +is because there's the possibility + +337 +00:14:33.770 --> 00:14:35.640 +that and we don't have this just yet. + +338 +00:14:35.640 --> 00:14:38.540 +But as I load all these fishes into inventory + +339 +00:14:38.540 --> 00:14:40.270 +and someone adds it to cart. + +340 +00:14:40.270 --> 00:14:41.760 +What's going to happen is that + +341 +00:14:41.760 --> 00:14:44.680 +I can just possibly delete this fish altogether. + +342 +00:14:44.680 --> 00:14:48.480 +Pacific halibut and then there's no way for us to know + +343 +00:14:48.480 --> 00:14:50.550 +what that fish was in their cart, + +344 +00:14:50.550 --> 00:14:52.470 +because we only have a fish key. + +345 +00:14:52.470 --> 00:14:53.730 +So what we do is her is we say + +346 +00:14:53.730 --> 00:14:55.430 +if they have a fish, we'll say + +347 +00:14:55.430 --> 00:14:58.580 +sorry halibut is no longer available, + +348 +00:14:58.580 --> 00:15:00.440 +but if the whole thing is deleted + +349 +00:15:00.440 --> 00:15:02.540 +then we'll just say fish is no longer available. + +350 +00:15:02.540 --> 00:15:04.670 +Nice little fall back that we have there. + +351 +00:15:04.670 --> 00:15:06.410 +Now if we give that a save. + +352 +00:15:06.410 --> 00:15:07.400 +Load some samples. + +353 +00:15:07.400 --> 00:15:08.800 +Add some to our order. + +354 +00:15:10.020 --> 00:15:14.720 +Now, we can change Pacific halibut to unavailable. + +355 +00:15:18.000 --> 00:15:20.270 +And ugh it doesn't work. + +356 +00:15:20.270 --> 00:15:24.730 +If fish dot status is available that didn't fix it. + +357 +00:15:24.730 --> 00:15:27.100 +Any errors in our console here, + +358 +00:15:27.100 --> 00:15:28.650 +we'll get over that in just a second. + +359 +00:15:28.650 --> 00:15:30.170 +So I actually don't know what happened here. + +360 +00:15:30.170 --> 00:15:33.190 +Let's just double check our logic here. + +361 +00:15:33.190 --> 00:15:37.500 +I am dumb and I forgot to type a return in front of this. + +362 +00:15:37.500 --> 00:15:39.710 +So you have to always return your JSX + +363 +00:15:39.710 --> 00:15:43.280 +and then that will stop the function from running. + +364 +00:15:43.280 --> 00:15:44.860 +So if it's not available it returns + +365 +00:15:44.860 --> 00:15:47.990 +sorry otherwise we're just going to return this right here. + +366 +00:15:47.990 --> 00:15:49.370 +Good, let's double check that. + +367 +00:15:49.370 --> 00:15:51.520 +Load some samples add some to our order. + +368 +00:15:53.130 --> 00:15:55.980 +Find our app, open up our fishes, + +369 +00:15:55.980 --> 00:15:57.400 +this is going to get really easy once + +370 +00:15:57.400 --> 00:15:59.230 +we start having some UI to do this. + +371 +00:15:59.230 --> 00:16:03.020 +Unavailable, sorry Pacific halibut is no longer available. + +372 +00:16:03.020 --> 00:16:04.150 +Beautiful. + +373 +00:16:04.150 --> 00:16:06.370 +Awesome, one last thing we wanna do is + +374 +00:16:06.370 --> 00:16:07.830 +let's go down to unordered list, + +375 +00:16:07.830 --> 00:16:12.640 +let's give it a class name of order. + +376 +00:16:15.290 --> 00:16:18.290 +And that should give us a little bit, a nicer styling. + +377 +00:16:18.290 --> 00:16:19.560 +And then we get this error here. + +378 +00:16:19.560 --> 00:16:22.400 +Each child in an array or iterator + +379 +00:16:22.400 --> 00:16:23.680 +should have a unique key prop. + +380 +00:16:23.680 --> 00:16:25.550 +And again, the reason why we need to do that + +381 +00:16:25.550 --> 00:16:27.930 +is 'cause all of the list items inside of our order + +382 +00:16:27.930 --> 00:16:29.840 +they need to have a unique key prop, + +383 +00:16:29.840 --> 00:16:32.600 +so react can quickly find them, if it needs to update them. + +384 +00:16:32.600 --> 00:16:35.220 +So we have to go back up to our render order here + +385 +00:16:35.220 --> 00:16:38.920 +and we'll give a key to that and we can use our key + +386 +00:16:38.920 --> 00:16:40.795 +our variable as a unique identifier. + +387 +00:16:40.795 --> 00:16:43.320 +And then we also need to do it on + +388 +00:16:43.320 --> 00:16:44.601 +the sorry is not available. + +389 +00:16:44.601 --> 00:16:48.160 +Key is equal to key. + +390 +00:16:49.200 --> 00:16:51.860 +That should stop it from whining at us. + +391 +00:16:52.870 --> 00:16:55.270 +Console nothing wrong with that. + +392 +00:16:55.270 --> 00:16:57.390 +Beautiful, let's move on to our next one, + +393 +00:16:57.390 --> 00:16:59.140 +which is persisting state so we don't + +394 +00:16:59.140 --> 00:17:02.910 +have to do this every single time we reload the page. + +395 +00:17:02.910 --> 00:17:04.990 +We've lost all of our fish and our orders, + +396 +00:17:04.990 --> 00:17:06.650 +how do you persist that to a database + +397 +00:17:06.650 --> 00:17:08.410 +so that we can refresh the page + +398 +00:17:08.410 --> 00:17:10.950 +and not have to reinstate all of those. + diff --git a/RFB/18 - Persisting our State with Firebase.vtt b/RFB/18 - Persisting our State with Firebase.vtt index fdbda15..46e8fea 100755 --- a/RFB/18 - Persisting our State with Firebase.vtt +++ b/RFB/18 - Persisting our State with Firebase.vtt @@ -1,691 +1,1306 @@ -WEBVTT - -00:00:00.000 --> 00:00:03.000 line:100% position:50% align:middle -♪ [music] ♪ - -00:00:07.180 --> 00:00:11.980 line:100% position:50% align:middle -So far with our application, when we -refresh the page, all of our data is gone, - -00:00:11.980 --> 00:00:16.140 line:100% position:50% align:middle -and there's no persisting of actual data, -and for that to actually work we need - -00:00:16.140 --> 00:00:19.717 line:100% position:50% align:middle -some sort of backend service, and what -we're going to be using in this video is - -00:00:19.717 --> 00:00:23.620 line:100% position:50% align:middle -something called Firebase. Firebase is a -product from Google and it's really, - -00:00:23.620 --> 00:00:27.040 line:100% position:50% align:middle -really nice, and probably the coolest part -about is that it uses something called - -00:00:27.040 --> 00:00:31.950 line:100% position:50% align:middle -HTML5 WebSockets meaning that you can -sync all of your data from your - -00:00:31.950 --> 00:00:37.240 line:100% position:50% align:middle -application up to Firebase and vice versa. -When someone changes it in Firebase, - -00:00:37.240 --> 00:00:42.580 line:100% position:50% align:middle -it will be synced to our application, so -what Firebase allows us to do is not only - -00:00:42.580 --> 00:00:47.990 line:100% position:50% align:middle -have a backend database but also make that -real-time, so that regardless of who's got - -00:00:47.990 --> 00:00:52.603 line:100% position:50% align:middle -the application open or how -many people are editing it at once, - -00:00:52.603 --> 00:00:55.300 line:100% position:50% align:middle -that data will always be -synced to everyone's' computer. - -00:00:55.300 --> 00:01:00.800 line:100% position:50% align:middle -So I'm going to show you an example right -here, and I've got a blank Firebase - -00:01:00.800 --> 00:01:05.988 line:100% position:50% align:middle -database right here, and the way you can -think about Firebase as it's one big - -00:01:05.988 --> 00:01:10.820 line:100% position:50% align:middle -object. Now that works really, really well -with React, because the state is one big - -00:01:10.820 --> 00:01:15.270 line:100% position:50% align:middle -object, and what's really cool is that we -can sync our state with Firebase, - -00:01:15.270 --> 00:01:18.430 line:100% position:50% align:middle -and then any time any of them changes, -they'll all automatically sync together. - -00:01:18.430 --> 00:01:22.080 line:100% position:50% align:middle -So I'm going to go to -old-fashioned-grumpy-teeth here and click - -00:01:22.080 --> 00:01:25.610 line:100% position:50% align:middle -Visit Store. And all of sudden, you see -on my right-hand side - -00:01:25.610 --> 00:01:29.850 line:100% position:50% align:middle -I have created that store and we've got -owner. This is some authentication stuff - -00:01:29.850 --> 00:01:33.280 line:100% position:50% align:middle -that we're going to be doing in later -videos. However, when I load some sample - -00:01:33.280 --> 00:01:37.370 line:100% position:50% align:middle -fishes here, oh, look, it -automatically...those fishes pop up, - -00:01:37.370 --> 00:01:42.010 line:100% position:50% align:middle -and there's all of my fishes. There's fish -one and if I can add them to my order, - -00:01:42.010 --> 00:01:45.680 line:100% position:50% align:middle -no problem. However, if I were to -change one of these to maybe, - -00:01:45.680 --> 00:01:51.692 line:100% position:50% align:middle -like, Atlantic. Look it. It's happening in -real-time, both in my application but also - -00:01:51.692 --> 00:01:55.604 line:100% position:50% align:middle -it's being synced up to Firebase and that -also works the other way around. - -00:01:55.604 --> 00:02:02.250 line:100% position:50% align:middle -I changed this back to Pacific. Hit Enter. -See how it changed it in Firebase - -00:02:02.250 --> 00:02:05.450 line:100% position:50% align:middle -and it's going to go open here. So if I -were to open up, like, - -00:02:05.450 --> 00:02:09.400 line:100% position:50% align:middle -Safari here. I can see all the data about -it. I'm not able to log in, - -00:02:09.400 --> 00:02:13.830 line:100% position:50% align:middle -because I'm not the owner of this one, and -we'll talk about that in our actual - -00:02:13.830 --> 00:02:17.740 line:100% position:50% align:middle -authentication application. But if I were -then to change one of these, - -00:02:17.740 --> 00:02:23.520 line:100% position:50% align:middle -again, back to Atlantic...see, changed -right there. Sorry, it's a little bit hard - -00:02:23.520 --> 00:02:27.720 line:100% position:50% align:middle -to see. I'm going to make it bigger. That -one changed. That one changed. - -00:02:27.720 --> 00:02:31.489 line:100% position:50% align:middle -It's real-time regardless of -who's got this specific store - -00:02:31.489 --> 00:02:34.120 line:100% position:50% align:middle -open at any given moment. - -00:02:34.120 --> 00:02:39.250 line:100% position:50% align:middle -Great. Now what I need you to do is to -sign up for a Firebase account. - -00:02:39.250 --> 00:02:44.470 line:100% position:50% align:middle -Go to firebase.com and sign up and you'll -go to your Firebase dashboard - -00:02:44.470 --> 00:02:49.130 line:100% position:50% align:middle -so Firebase recently just changed -everything up on us. So if you have, - -00:02:49.130 --> 00:02:54.540 line:100% position:50% align:middle -like, a previous one from the last version -of Sartorial or any other Firebase - -00:02:54.540 --> 00:02:58.130 line:100% position:50% align:middle -that maybe you ever worked with. Make sure -that you create a new project using the - -00:02:58.130 --> 00:03:03.280 line:100% position:50% align:middle -new Firebase, not the old legacy one that -we don't want. So you want to go ahead - -00:03:03.280 --> 00:03:11.040 line:100% position:50% align:middle -and create a new project here, and we're -going to call that Catch Of The Day, - -00:03:11.040 --> 00:03:14.510 line:100% position:50% align:middle -and then put your name in it because -there's going to be thousands of you - -00:03:14.510 --> 00:03:18.740 line:100% position:50% align:middle -creating this and we can't all have the -same name. Create the project there. - -00:03:18.740 --> 00:03:22.600 line:100% position:50% align:middle -Now first thing we need to do is go -to the database here - -00:03:22.600 --> 00:03:26.660 line:100% position:50% align:middle -and this is going to be our empty -database. Now we want to click on the - -00:03:26.660 --> 00:03:31.130 line:100% position:50% align:middle -rules right here, and we're going to learn -all about how authentication works - -00:03:31.130 --> 00:03:35.528 line:100% position:50% align:middle -and by default, Firebase is now locked -down, meaning that no one can edit the - -00:03:35.528 --> 00:03:41.000 line:100% position:50% align:middle -data. However for learning, it's a little -bit cumbersome, because who likes to build - -00:03:41.000 --> 00:03:44.310 line:100% position:50% align:middle -their authentication before they -actually learn how to use the thing. - -00:03:44.310 --> 00:03:47.380 line:100% position:50% align:middle -So what we're going to do is we're going -to open it up, and it's obviously just - -00:03:47.380 --> 00:03:50.740 line:100% position:50% align:middle -going to be you working on this database, -and then, in the authentication video, - -00:03:50.740 --> 00:03:54.170 line:100% position:50% align:middle -we're going to come back here and make -sure that we lock it down so that only the - -00:03:54.170 --> 00:03:57.400 line:100% position:50% align:middle -person who owns that specific -store will be able to edit it. - -00:03:57.400 --> 00:04:01.240 line:100% position:50% align:middle -So we've got these rules called ".read" -and ".write" and right here it's saying - -00:04:01.240 --> 00:04:07.550 line:100% position:50% align:middle -everybody can't, so we are just going to -change that to true, and we are going to - -00:04:07.550 --> 00:04:14.120 line:100% position:50% align:middle -say ".write" to also be true and then -give that a save. And it's going to tell - -00:04:14.120 --> 00:04:18.125 line:100% position:50% align:middle -us your security rules are defined as -public, anyone...that's no problem there. - -00:04:18.600 --> 00:04:20.830 line:100% position:50% align:middle -Again, we're going to -come back and grab it. - -00:04:20.830 --> 00:04:26.050 line:100% position:50% align:middle -Now we need to head back to our code -here, and we need to open up our app - -00:04:26.050 --> 00:04:32.350 line:100% position:50% align:middle -component and take a little look at our -state here. So we've got our state, - -00:04:32.350 --> 00:04:35.445 line:100% position:50% align:middle -and order isn't going to be synced to -Firebase. We're actually going to sync - -00:04:35.445 --> 00:04:39.700 line:100% position:50% align:middle -that with local storage in a future -video, but the fishes... Any change that - -00:04:39.700 --> 00:04:43.900 line:100% position:50% align:middle -happens to any of our fish state, that -needs to be synced with Firebase, - -00:04:43.900 --> 00:04:46.720 line:100% position:50% align:middle -and we're going to be using a package -called Rebase to do that. - -00:04:46.720 --> 00:04:51.069 line:100% position:50% align:middle -In order to connect to Rebase, we need to -make a new file and I'm not going to put - -00:04:51.069 --> 00:04:53.950 line:100% position:50% align:middle -that in a components folder because it's -not a component. I'm going to go one level - -00:04:53.950 --> 00:04:59.030 line:100% position:50% align:middle -higher in source and I'm going to -call it base.js, and in there, - -00:04:59.030 --> 00:05:06.090 line:100% position:50% align:middle -we're going to import the Rebase package -from re-base, and we are going to create - -00:05:06.090 --> 00:05:10.870 line:100% position:50% align:middle -what's called a base and that's just a -connection to our Firebase database. - -00:05:10.870 --> 00:05:18.020 line:100% position:50% align:middle -So we are saying const base equals -Rebase.createClass and we need to - -00:05:18.020 --> 00:05:22.303 line:100% position:50% align:middle -pass it a couple of things. We need an -API key, we need the domain that we're - -00:05:22.303 --> 00:05:26.520 line:100% position:50% align:middle -actually connecting to, as well as the -database you were [inaudible]. - -00:05:26.520 --> 00:05:29.450 line:100% position:50% align:middle -So what I want you to do is go back to -your Firebase console, - -00:05:29.450 --> 00:05:33.130 line:100% position:50% align:middle -click on the name of your database -in the top, left-hand corner, - -00:05:33.130 --> 00:05:37.270 line:100% position:50% align:middle -just make sure you're on this page where -it says iOS. It might change by the time - -00:05:37.270 --> 00:05:41.210 line:100% position:50% align:middle -you're seeing this but we have this, "Add -Firebase to your web app." Click that - -00:05:41.210 --> 00:05:46.990 line:100% position:50% align:middle -and it's going to pop open some javascript -config here. Now we don't need all of - -00:05:46.990 --> 00:05:50.980 line:100% position:50% align:middle -this. We just need the first three -things, apiKey, authDomain - -00:05:50.980 --> 00:05:56.240 line:100% position:50% align:middle -and databaseURL. You can also set store -files with that as well if you're - -00:05:56.240 --> 00:05:59.340 line:100% position:50% align:middle -interested in that but we're not -going to be doing that here. - -00:05:59.340 --> 00:06:06.270 line:100% position:50% align:middle -And you just paste that on in here and -then we'll export that base URL so that we - -00:06:06.270 --> 00:06:11.270 line:100% position:50% align:middle -can access this database connection -from any one of our files. - -00:06:11.270 --> 00:06:15.220 line:100% position:50% align:middle -Anytime we need to work with Firebase, we -can just import this base, - -00:06:15.220 --> 00:06:18.978 line:100% position:50% align:middle -and it's going to be already connected -to Firebase and doing all the - -00:06:18.978 --> 00:06:20.950 line:100% position:50% align:middle -API keys behind the scenes. - -00:06:20.950 --> 00:06:25.800 line:100% position:50% align:middle -By the way, if you're wondering, like, is -that safe to put a API key on the client, - -00:06:25.800 --> 00:06:30.496 line:100% position:50% align:middle -like, couldn't anyone see that? And that's -where the authentication rules on Firebase - -00:06:30.496 --> 00:06:34.250 line:100% position:50% align:middle -are going to come in handy so totally -fine if you're wondering about that. - -00:06:34.250 --> 00:06:38.640 line:100% position:50% align:middle -Then we head back over to our app.js and -we want to import the base. - -00:06:38.640 --> 00:06:47.110 line:100% position:50% align:middle -So we say import base from base. -That's our base.js file and now - -00:06:47.110 --> 00:06:51.880 line:100% position:50% align:middle -we need to talk a little bit about -something called the React lifecycle - -00:06:51.880 --> 00:06:57.000 line:100% position:50% align:middle -hooks. React has this component, -lifecycle, where it gives us a number of - -00:06:57.000 --> 00:07:03.520 line:100% position:50% align:middle -sort of entry points into a component. So -when a component is being mounted or - -00:07:03.520 --> 00:07:08.030 line:100% position:50% align:middle -when a component is being rendered onto -the page, there's different entry points - -00:07:08.030 --> 00:07:14.030 line:100% position:50% align:middle -where we can hook into and do various -things like do an AJAX request or check - -00:07:14.030 --> 00:07:18.380 line:100% position:50% align:middle -for any number of items or, in our case, -we're going to connect to rebate. - -00:07:18.380 --> 00:07:22.860 line:100% position:50% align:middle -We're going to be using one called -componentWillMount, and what that does is - -00:07:22.860 --> 00:07:27.740 line:100% position:50% align:middle -it allows us to hook into that, like, -split-second right before our component is - -00:07:27.740 --> 00:07:31.830 line:100% position:50% align:middle -rendered, our app component is rendered to -the screen, and it's going to allow us to - -00:07:31.830 --> 00:07:37.950 line:100% position:50% align:middle -sync our component state with our actual -Firebase state. So we've got - -00:07:37.950 --> 00:07:41.996 line:100% position:50% align:middle -componentWillMount, componentDidMount, -componentWillReceiveProps, - -00:07:41.996 --> 00:07:46.428 line:100% position:50% align:middle -shouldComponentUpdate, -componentWillupdate, componentDidUpdate - -00:07:46.428 --> 00:07:49.756 line:100% position:50% align:middle -and, like, anytime you feel like, hmm, I -need to do, like, a quick check or I need - -00:07:49.756 --> 00:07:54.910 line:100% position:50% align:middle -to go and fetch something on one of these -hooks, go to this component lifecycle and - -00:07:54.910 --> 00:07:59.857 line:100% position:50% align:middle -look for the one that you want. The one -that we want is called componentWillMount - -00:07:59.857 --> 00:08:03.630 line:100% position:50% align:middle -and I'm going to do that right -underneath our constructor here. - -00:08:03.630 --> 00:08:09.640 line:100% position:50% align:middle -I'll say componentWillMount. Now we -didn't make that up. That is a special one - -00:08:09.640 --> 00:08:14.410 line:100% position:50% align:middle -that is made by React. So we have render, -which we know is a special one, - -00:08:14.410 --> 00:08:17.520 line:100% position:50% align:middle -but then we've just been making up, like, -addFish and loadSamples. - -00:08:17.520 --> 00:08:20.920 line:100% position:50% align:middle -Now componentWillMount is one that -specifically comes from React - -00:08:20.920 --> 00:08:25.690 line:100% position:50% align:middle -and we can take a look at it right here. -Invoked once, both on the client and the - -00:08:25.690 --> 00:08:29.520 line:100% position:50% align:middle -server. So that's important to know if -you're doing server-side rendering. - -00:08:29.520 --> 00:08:33.340 line:100% position:50% align:middle -Immediately, before the initial rendering -occurs, you call setState within this - -00:08:33.340 --> 00:08:37.440 line:100% position:50% align:middle -method on render. Render will see the -updated state and will be executed only - -00:08:37.440 --> 00:08:41.410 line:100% position:50% align:middle -once despite the state change. So that's -really interesting because if you wanted - -00:08:41.410 --> 00:08:45.420 line:100% position:50% align:middle -to change state before it got rendered to -the page rather than rendering it, - -00:08:45.420 --> 00:08:47.976 line:100% position:50% align:middle -changing state, and then -rendering a second time, that could - -00:08:47.976 --> 00:08:50.263 line:100% position:50% align:middle -really save you in performance. - -00:08:50.263 --> 00:08:56.130 line:100% position:50% align:middle -So what we want to do is to say this.ref -equals base.syncState, - -00:08:56.130 --> 00:09:00.621 line:100% position:50% align:middle -and the first thing that it takes is a -string that points to the actual piece of - -00:09:00.621 --> 00:09:03.960 line:100% position:50% align:middle -your Firebase that you'd like to sync -with, because if we take a look at my - -00:09:03.960 --> 00:09:07.216 line:100% position:50% align:middle -Firebase right here...and this is the one -that I've done. The top level is, - -00:09:07.216 --> 00:09:11.715 line:100% position:50% align:middle -like, the entire database and we don't -want to sync this one store. - -00:09:11.715 --> 00:09:16.300 line:100% position:50% align:middle -Remember that, like, we're just viewing -this one, panicky-lazy-fungi store, - -00:09:16.300 --> 00:09:21.000 line:100% position:50% align:middle -and we don't want to sync the entire -thing. So we have to tell it don't sync - -00:09:21.000 --> 00:09:24.350 line:100% position:50% align:middle -the entire catch-of-the-day, -but instead, sync - -00:09:24.350 --> 00:09:31.138 line:100% position:50% align:middle -catch-of-the-day/panicky-lazy-fungi/fishes -so let me do that here. - -00:09:31.138 --> 00:09:34.960 line:100% position:50% align:middle -If we do backticks it would be... -let's grab the URL - -00:09:34.960 --> 00:09:44.490 line:100% position:50% align:middle -here panicky-lazy-fungi/fishes, right? But -I can't hard-code panicky-lazy-fungi - -00:09:44.490 --> 00:09:47.871 line:100% position:50% align:middle -because that's going -to be different depending on - -00:09:47.871 --> 00:09:51.520 line:100% position:50% align:middle -which of the stores I'm on, right? - -00:09:51.520 --> 00:09:57.640 line:100% position:50% align:middle -So how do we get that little piece of the -URL here, panicky-lazy-fungi or - -00:09:57.640 --> 00:10:05.080 line:100% position:50% align:middle -drab-drab-tomatoes? How do I access that -actual piece? Well, that's done via props. - -00:10:05.080 --> 00:10:11.980 line:100% position:50% align:middle -If we go and inspect our app -component here, you'll see that...look, - -00:10:11.980 --> 00:10:18.950 line:100% position:50% align:middle -oh, this.props.params... And we never did -anything to do that but our friend React - -00:10:18.950 --> 00:10:24.340 line:100% position:50% align:middle -Router, which is the parent to app, said, -"Oh, by the way, you probably will need - -00:10:24.340 --> 00:10:29.332 line:100% position:50% align:middle -this storeId variable." Now remember -that's what we did in our index.js, - -00:10:29.332 --> 00:10:34.934 line:100% position:50% align:middle -storeId was defined right here. You -probably will need that so we can simply - -00:10:34.934 --> 00:10:43.076 line:100% position:50% align:middle -just use this.props.params.storeid and -that's it. I have access to the actual - -00:10:43.076 --> 00:10:48.420 line:100% position:50% align:middle -piece and then we do /fishes because if we -look at this right here, we're also going - -00:10:48.420 --> 00:10:52.703 line:100% position:50% align:middle -to do authentication which has owner, and -we may have other metadata associated with - -00:10:52.703 --> 00:10:57.160 line:100% position:50% align:middle -this store. The fishes is just one piece -of that actual store so that's where we're - -00:10:57.160 --> 00:11:02.750 line:100% position:50% align:middle -going to be syncing it, and then we also -need to pass in an object which has a - -00:11:02.750 --> 00:11:07.130 line:100% position:50% align:middle -context, which is this, and the state -that we actually want to sync. - -00:11:07.130 --> 00:11:10.236 line:100% position:50% align:middle -In our case, it's going to be called -fishes. Because, like, we also have an - -00:11:10.236 --> 00:11:15.060 line:100% position:50% align:middle -OrderState which we could sync as well, -but in our case, we only want to do fishes - -00:11:15.060 --> 00:11:19.830 line:100% position:50% align:middle -so that is componentWillMount, and then -however what happens if we switch from - -00:11:19.830 --> 00:11:25.430 line:100% position:50% align:middle -one store to another store? We need to -stop syncing as soon as we go to another - -00:11:25.430 --> 00:11:28.220 line:100% position:50% align:middle -store or we go to another page. -Otherwise, you're going to be, - -00:11:28.220 --> 00:11:32.810 line:100% position:50% align:middle -like, racking up all these listeners -behind the scenes, and it could be - -00:11:32.810 --> 00:11:43.142 line:100% position:50% align:middle -catastrophic. So we want to say -componentWillUnmount, and we simply say - -00:11:43.142 --> 00:11:48.808 line:100% position:50% align:middle -base, which is our Firebase, -.removeBinding then we pass it this.ref, - -00:11:48.808 --> 00:11:55.280 line:100% position:50% align:middle -and that's why we put the syncState in -here, that's Y-N-C. We put the syncState - -00:11:55.280 --> 00:11:59.660 line:100% position:50% align:middle -in the ref so that we could reference -it later and remove that. - -00:11:59.660 --> 00:12:04.340 line:100% position:50% align:middle -So let's give that a save and see where -we're at. I'm going to go back to my - -00:12:04.340 --> 00:12:10.812 line:100% position:50% align:middle -Firebase console here. Open up my Catch Of -The Day. Go to my database and - -00:12:10.812 --> 00:12:14.720 line:100% position:50% align:middle -then I'm going to go to our application -that we've got here, drab-drab-tomatoes - -00:12:14.720 --> 00:12:17.810 line:100% position:50% align:middle -and I'm going to load in some sample -fishes, add some to my order. - -00:12:17.810 --> 00:12:22.450 line:100% position:50% align:middle -Looks to be working. Now if I go to my -Firebase console, do we see any data? - -00:12:22.450 --> 00:12:26.690 line:100% position:50% align:middle -Yep, there we go, just popped up. -Opened it up, there's my fishes, - -00:12:26.690 --> 00:12:31.550 line:100% position:50% align:middle -fish one, fish two. Now the cool thing -about that is when I then refresh this - -00:12:31.550 --> 00:12:38.650 line:100% position:50% align:middle -page, all of that data is then immediately -reinstated for me and I can make changes - -00:12:38.650 --> 00:12:44.620 line:100% position:50% align:middle -to it, either on the Firebase side or on -my state side. Here, let's go in here and - -00:12:44.620 --> 00:12:52.320 line:100% position:50% align:middle -change Pacific Halibut to Atlantic. -Enter. Go back to our app. - -00:12:52.320 --> 00:12:55.142 line:100% position:50% align:middle -It's already being updated. -If I refresh once more, - -00:12:55.142 --> 00:12:58.190 line:100% position:50% align:middle -it's already updated immediately. - -00:12:58.190 --> 00:13:03.890 line:100% position:50% align:middle -So just with...I don't know, maybe we -wrote 15, 20 lines of code in this video. - -00:13:03.890 --> 00:13:07.980 line:100% position:50% align:middle -It's very simple to be able to sync all of -your state, and now you don't have to - -00:13:07.980 --> 00:13:12.440 line:100% position:50% align:middle -worry about, okay, I changed my state, I -need to make sure that I updated that in - -00:13:12.440 --> 00:13:15.830 line:100% position:50% align:middle -the database. And these things get out of -sync really easily where now, - -00:13:15.830 --> 00:13:20.140 line:100% position:50% align:middle -you as a developer, you only care about -your state and everything else, - -00:13:20.140 --> 00:13:23.564 line:100% position:50% align:middle -your HTML, as well as your -Firebase, it's going to be listening - -00:13:23.564 --> 00:13:25.500 line:100% position:50% align:middle -to that and they're going -to update themselves. \ No newline at end of file +WEBVTT + +1 +00:00:00.317 --> 00:00:03.067 +(cheerful music) + +2 +00:00:07.065 --> 00:00:09.804 +So far, when we add any data here, + +3 +00:00:09.804 --> 00:00:11.651 +and we add items to our order, + +4 +00:00:11.651 --> 00:00:12.968 +and then we refresh the page, + +5 +00:00:12.968 --> 00:00:16.876 +we lose both our menu items here as well as our order. + +6 +00:00:16.876 --> 00:00:19.210 +So, what we wanna do is, when we load in some fishes, + +7 +00:00:19.210 --> 00:00:21.517 +or when we create a new fish, or when we update the fish, + +8 +00:00:21.517 --> 00:00:23.201 +we want to save that to a database, + +9 +00:00:23.201 --> 00:00:25.388 +so that when I come back to it at a later point in time, + +10 +00:00:25.388 --> 00:00:28.140 +or when someone actually visits our store, + +11 +00:00:28.140 --> 00:00:30.515 +that data needs to be available to them. + +12 +00:00:30.515 --> 00:00:32.441 +So, we are gonna be using a service from Google, + +13 +00:00:32.441 --> 00:00:35.284 +called Firebase, and Firebase is awesome, + +14 +00:00:35.284 --> 00:00:37.476 +because it's super easy to get up and running, + +15 +00:00:37.476 --> 00:00:39.368 +it's really intuitive for JavaScript developer, + +16 +00:00:39.368 --> 00:00:41.747 +and, most of all, it is real-time. + +17 +00:00:41.747 --> 00:00:45.026 +Meaning that if I update any piece of data + +18 +00:00:45.026 --> 00:00:47.135 +on our application that is in Firebase, + +19 +00:00:47.135 --> 00:00:48.990 +it will automatically relay that to + +20 +00:00:48.990 --> 00:00:51.155 +everyone else who has a store open. + +21 +00:00:51.155 --> 00:00:54.175 +It uses a technology called WebSockets, + +22 +00:00:54.175 --> 00:00:55.545 +which is part of HTML5, + +23 +00:00:55.545 --> 00:00:57.728 +and WebSockets allows us to do real-time, + +24 +00:00:57.728 --> 00:01:00.060 +rather than using like a Ajax, + +25 +00:01:00.060 --> 00:01:02.960 +where we ping the database for changes. + +26 +00:01:02.960 --> 00:01:04.202 +So, I just want to show you an example + +27 +00:01:04.202 --> 00:01:07.754 +of how Firebase works. So, I have my answer going up here, + +28 +00:01:07.754 --> 00:01:10.794 +and as I refresh it's going to give me a random one, + +29 +00:01:10.794 --> 00:01:13.300 +and if I go over to my Firebase database here, + +30 +00:01:13.300 --> 00:01:15.257 +you can see that this is my database, + +31 +00:01:15.257 --> 00:01:16.942 +and then underneath that we're going to have + +32 +00:01:16.942 --> 00:01:19.359 +all of our stores, and (laughing) looks like somebody, + +33 +00:01:19.359 --> 00:01:22.009 +I just deleted this, but somebody must be trying to demo + +34 +00:01:22.009 --> 00:01:24.342 +out on the website, 'cause they just created that. + +35 +00:01:24.342 --> 00:01:27.466 +Now, as soon as I visit the store, you see what happens + +36 +00:01:27.466 --> 00:01:31.197 +is it updates handsome-helpless-nuclei, + +37 +00:01:31.197 --> 00:01:33.991 +and I open it up and there is only an owner, + +38 +00:01:33.991 --> 00:01:36.926 +which we are gonna be using that for authentication, + +39 +00:01:36.926 --> 00:01:39.075 +but as soon as I load some sample fishes in, + +40 +00:01:39.075 --> 00:01:42.235 +you'll see that that data is automatically relayed + +41 +00:01:42.235 --> 00:01:44.388 +to Firebase. So we got fish one through nine, + +42 +00:01:44.388 --> 00:01:46.307 +and then as I add them to the order, + +43 +00:01:46.307 --> 00:01:47.894 +the order is not going to be, + +44 +00:01:47.894 --> 00:01:48.823 +we're gonna be using something called + +45 +00:01:48.823 --> 00:01:50.392 +Local Storage for that. + +46 +00:01:50.392 --> 00:01:51.788 +But, what's kinda neat about that + +47 +00:01:51.788 --> 00:01:54.282 +is as soon as I make a change, + +48 +00:01:54.282 --> 00:01:56.183 +let me zoom out on this so we can see. + +49 +00:01:56.183 --> 00:01:58.263 +Soon as I make a change to Pacific Halibut, + +50 +00:01:58.263 --> 00:02:00.013 +maybe say Atlantic... + +51 +00:02:01.211 --> 00:02:03.718 +You see that it's obviously updating right here, + +52 +00:02:03.718 --> 00:02:06.416 +it's updating right here, and it's updating right here. + +53 +00:02:06.416 --> 00:02:09.651 +Which is great, because that's updating our state, + +54 +00:02:09.651 --> 00:02:14.224 +but the state is also being mirrored to our Firebase, right. + +55 +00:02:14.224 --> 00:02:16.037 +You can see it says, "Atlantic Halibut." + +56 +00:02:16.037 --> 00:02:18.612 +So, that means if I change it to West Halibut and hit enter, + +57 +00:02:18.612 --> 00:02:21.062 +you see that that data automatically updated, + +58 +00:02:21.062 --> 00:02:24.689 +and is now mirrored over to our Catch-of-the-Day + +59 +00:02:24.689 --> 00:02:26.685 +application right here and right here, + +60 +00:02:26.685 --> 00:02:30.279 +similarly, if I were open this up in maybe Safari, + +61 +00:02:30.279 --> 00:02:33.354 +you can see I can't login cause I'm not the owner of that, + +62 +00:02:33.354 --> 00:02:34.799 +and that's what we will go over + +63 +00:02:34.799 --> 00:02:37.391 +in our authentication episode, but it says, "West Halibut." + +64 +00:02:37.391 --> 00:02:42.210 +Now, if I were to change this again to "Cool Halibut" + +65 +00:02:42.210 --> 00:02:44.966 +and hit enter, it updated it both in Safari + +66 +00:02:44.966 --> 00:02:48.149 +as well as in every other browser that currently + +67 +00:02:48.149 --> 00:02:50.649 +has this item open, which is amazing. + +68 +00:02:50.649 --> 00:02:52.803 +So, let's get started with that, + +69 +00:02:52.803 --> 00:02:55.414 +what I need you to do is to sign-up. + +70 +00:02:55.414 --> 00:03:00.199 +Go to firebase.google.com and sign-up for an account + +71 +00:03:00.199 --> 00:03:02.173 +or just login with your Google account. + +72 +00:03:02.173 --> 00:03:04.270 +I need you to make a new project, + +73 +00:03:04.270 --> 00:03:06.577 +so we're gonna go ahead and add a new project here, + +74 +00:03:06.577 --> 00:03:09.827 +and you can call that Catch of the Day, + +75 +00:03:11.456 --> 00:03:14.300 +and then you can put your name in there, + +76 +00:03:14.300 --> 00:03:16.052 +cause there's gonna be lots of us with it. + +77 +00:03:16.052 --> 00:03:17.815 +So Wes Bos, I've done this a couple times + +78 +00:03:17.815 --> 00:03:19.295 +I'm gonna put 2 on it, + +79 +00:03:19.295 --> 00:03:21.602 +and it's gonna give you a nice project. + +80 +00:03:21.602 --> 00:03:24.290 +Then, you can decide where the data is going to go, + +81 +00:03:24.290 --> 00:03:26.890 +and, we can create the project. + +82 +00:03:26.890 --> 00:03:28.566 +Now, while that is creating, + +83 +00:03:28.566 --> 00:03:31.741 +let's go into our actual application here, + +84 +00:03:31.741 --> 00:03:35.543 +and we're gonna create a new file called base.js, + +85 +00:03:35.543 --> 00:03:37.463 +and this is not gonna go in the components folder, + +86 +00:03:37.463 --> 00:03:39.633 +it's not a component, it's gonna go directly + +87 +00:03:39.633 --> 00:03:41.541 +in our SRC file. + +88 +00:03:41.541 --> 00:03:44.178 +So, call this base.js, + +89 +00:03:44.178 --> 00:03:46.372 +and no capitals or anything on that one, + +90 +00:03:46.372 --> 00:03:48.789 +and then inside of this we need two packages. + +91 +00:03:48.789 --> 00:03:51.746 +So, first we're gonna import somethin called the rebase, + +92 +00:03:51.746 --> 00:03:54.621 +and that's going to be from a package called re-base, + +93 +00:03:54.621 --> 00:03:57.142 +and that's going to allow us, + +94 +00:03:57.142 --> 00:04:00.723 +it's like a React/Firebase specific package + +95 +00:04:00.723 --> 00:04:03.067 +that's gonna allow us to mirror our state + +96 +00:04:03.067 --> 00:04:05.840 +to our Firebase changes. And then we also need + +97 +00:04:05.840 --> 00:04:09.730 +the official Firebase package from Firebase, + +98 +00:04:09.730 --> 00:04:12.187 +and that's what we're going to be using + +99 +00:04:12.187 --> 00:04:15.212 +for anything that is not just mirroring to state. + +100 +00:04:15.212 --> 00:04:16.655 +And when we setup re-base, + +101 +00:04:16.655 --> 00:04:18.999 +we actually have to pass it out Firebase. + +102 +00:04:18.999 --> 00:04:21.933 +Now, inside of that we need to configure our application, + +103 +00:04:21.933 --> 00:04:26.933 +so let's say const.firebaseApp = firebase.initializeApp, + +104 +00:04:28.866 --> 00:04:31.240 +and then inside of that we need to go back + +105 +00:04:31.240 --> 00:04:34.212 +to our application here, that the project is now ready, + +106 +00:04:34.212 --> 00:04:37.054 +so we're gonna click on continue. + +107 +00:04:37.054 --> 00:04:40.284 +And Firebase has a couple of different items in it, + +108 +00:04:40.284 --> 00:04:42.109 +they have off, which we're gonna use, + +109 +00:04:42.109 --> 00:04:44.129 +they have a database, real-time database, + +110 +00:04:44.129 --> 00:04:45.309 +which we are gonna use. + +111 +00:04:45.309 --> 00:04:46.674 +Then they also have the ability + +112 +00:04:46.674 --> 00:04:49.702 +to host your application there, and maybe store files, + +113 +00:04:49.702 --> 00:04:51.793 +and do something called server-less function, + +114 +00:04:51.793 --> 00:04:53.725 +so we're not using those three ones, + +115 +00:04:53.725 --> 00:04:56.444 +in this tutorial we will just be using the Auth + +116 +00:04:56.444 --> 00:04:59.837 +and the Database, so click on the Databse that you got here, + +117 +00:04:59.837 --> 00:05:02.678 +and we're going to click on the Get Started. + +118 +00:05:02.678 --> 00:05:06.928 +We're just looking for some sort of authentication. + +119 +00:05:09.125 --> 00:05:11.991 +And, by default Firebase puts some auth on it, + +120 +00:05:11.991 --> 00:05:13.832 +and what we're gonna do is we're gonna temporarily + +121 +00:05:13.832 --> 00:05:16.532 +disable that authentication until we get to those videos, + +122 +00:05:16.532 --> 00:05:19.762 +so let's go over to our rules, here. + +123 +00:05:19.762 --> 00:05:22.919 +And, you're going to change these + +124 +00:05:22.919 --> 00:05:25.002 +to read true, write true, + +125 +00:05:26.750 --> 00:05:29.179 +and that's gonna open up all of the security rules, + +126 +00:05:29.179 --> 00:05:30.695 +obviously you would never do that + +127 +00:05:30.695 --> 00:05:31.852 +in a production application, + +128 +00:05:31.852 --> 00:05:33.452 +we're gonna be coming back to that, + +129 +00:05:33.452 --> 00:05:35.115 +for now let's just open it right up + +130 +00:05:35.115 --> 00:05:37.342 +so that we can get prototyping, + +131 +00:05:37.342 --> 00:05:40.519 +and we'll go ahead and publish that. + +132 +00:05:40.519 --> 00:05:43.868 +And, next what we need to do is get that configuration, + +133 +00:05:43.868 --> 00:05:46.392 +we need apiKeys and authDomain and whatnot, + +134 +00:05:46.392 --> 00:05:47.559 +so that is.... + +135 +00:05:49.574 --> 00:05:51.936 +That is available if you go to project overview, + +136 +00:05:51.936 --> 00:05:53.223 +and it says, "Get started here." + +137 +00:05:53.223 --> 00:05:55.686 +We are doing a webapp, so you click that, + +138 +00:05:55.686 --> 00:05:58.762 +and it's going to give us the config that we need. + +139 +00:05:58.762 --> 00:06:01.438 +So, let's just copy, we don't need everything + +140 +00:06:01.438 --> 00:06:04.688 +just this object right here, copy that, + +141 +00:06:05.845 --> 00:06:08.262 +go ahead and take these away, + +142 +00:06:09.345 --> 00:06:11.108 +and I'll paste it in there. + +143 +00:06:11.108 --> 00:06:13.498 +We actually really only need a couple things, + +144 +00:06:13.498 --> 00:06:16.970 +so we need the apiKey, we need the authDomain, + +145 +00:06:16.970 --> 00:06:17.803 +and we also need the databaseURL. + +146 +00:06:17.803 --> 00:06:21.220 +We can get rid of these things right here + +147 +00:06:23.421 --> 00:06:26.158 +because we're not specifically using them. + +148 +00:06:26.158 --> 00:06:29.075 +Good! Now what we need to do is create our rebase, + +149 +00:06:29.075 --> 00:06:33.242 +so we'll say const base = Rebase.createClass, + +150 +00:06:35.086 --> 00:06:37.675 +and then we will pass it, capital C on there, + +151 +00:06:37.675 --> 00:06:41.132 +we pass it our firebaseApp.database, + +152 +00:06:41.132 --> 00:06:43.802 +and database is a function that will return + +153 +00:06:43.802 --> 00:06:46.767 +the actual database that we have. Good! + +154 +00:06:46.767 --> 00:06:48.253 +Now, so we've created two things here, + +155 +00:06:48.253 --> 00:06:50.000 +we've created our firebaseApp, + +156 +00:06:50.000 --> 00:06:52.328 +and we've creating our rebase binding, + +157 +00:06:52.328 --> 00:06:54.796 +and then we need to export them from here. + +158 +00:06:54.796 --> 00:06:58.539 +So we're gonna say export { firebaseApp }; + +159 +00:06:58.539 --> 00:07:01.286 +and here let's leave a comment, + +160 +00:07:01.286 --> 00:07:04.786 +this is a named export. Cause remember in, + +161 +00:07:05.812 --> 00:07:09.397 +let's go over to js, remember when we imported formatPrice? + +162 +00:07:09.397 --> 00:07:13.090 +That was a named import, we knew what it was called, + +163 +00:07:13.090 --> 00:07:15.202 +and this is a named export, + +164 +00:07:15.202 --> 00:07:17.182 +and then we're also going to say, + +165 +00:07:17.182 --> 00:07:18.974 +"This is a default export." + +166 +00:07:18.974 --> 00:07:22.503 +So, the main thing that gets exported from this base.js + +167 +00:07:22.503 --> 00:07:26.651 +config file, is our base that we've created with rebase. + +168 +00:07:26.651 --> 00:07:28.909 +We'll say export default base, + +169 +00:07:28.909 --> 00:07:32.140 +and that's gonna allow us to bring it into our other file. + +170 +00:07:32.140 --> 00:07:34.683 +So, that's good, we can close all these files down. + +171 +00:07:34.683 --> 00:07:38.513 +Now, what we need to do is go back into our app.js, + +172 +00:07:38.513 --> 00:07:41.689 +and we need to now mirror our fish state + +173 +00:07:41.689 --> 00:07:46.125 +over to what is our firebase. And in order to do that, + +174 +00:07:46.125 --> 00:07:48.658 +we need to sort of wait until this App component + +175 +00:07:48.658 --> 00:07:52.046 +is on the page, and then we'll start to sync them up. + +176 +00:07:52.046 --> 00:07:54.179 +So, this is where we're gonna start getting into + +177 +00:07:54.179 --> 00:07:56.000 +what are called Lifestyle Methods. + +178 +00:07:56.000 --> 00:07:57.716 +And Lifecycle Methods in React are, + +179 +00:07:57.716 --> 00:08:01.404 +if you're used to jQery, you know that we have + +180 +00:08:01.404 --> 00:08:04.402 +a document ready and that's when the page is ready to go, + +181 +00:08:04.402 --> 00:08:06.323 +or you have like a window on load, + +182 +00:08:06.323 --> 00:08:08.741 +and that's when all the images have been downloaded. + +183 +00:08:08.741 --> 00:08:10.821 +In React we have all kinds of Lifecycle Methods + +184 +00:08:10.821 --> 00:08:14.243 +that essentially tell us when certain things are happening, + +185 +00:08:14.243 --> 00:08:16.439 +and the one that we're going to be using + +186 +00:08:16.439 --> 00:08:18.003 +is called componentDidMount(), + +187 +00:08:18.003 --> 00:08:20.664 +and componentDidMount() is sort of like a hook + +188 +00:08:20.664 --> 00:08:23.764 +into the very first possible second + +189 +00:08:23.764 --> 00:08:27.831 +that the application is loaded onto the page, + +190 +00:08:27.831 --> 00:08:30.287 +and in our page the specific app componoent. + +191 +00:08:30.287 --> 00:08:32.815 +So, you can take a quick look here + +192 +00:08:32.815 --> 00:08:35.728 +at all the React lifecycle methods. + +193 +00:08:35.728 --> 00:08:37.310 +There's the constructor(), which we've talked about, + +194 +00:08:37.310 --> 00:08:39.407 +there's compononentWillMount(), render(), + +195 +00:08:39.407 --> 00:08:41.470 +componentDidMount(), and then there's a whole bunch + +196 +00:08:41.470 --> 00:08:44.079 +for updating, shouldComponentUpdate(), + +197 +00:08:44.079 --> 00:08:47.454 +compnonentWillUpdate(), we're go over a couple more of these + +198 +00:08:47.454 --> 00:08:50.734 +in specific use cases, but definitely take a look + +199 +00:08:50.734 --> 00:08:52.360 +at the docs for all of the different + +200 +00:08:52.360 --> 00:08:54.880 +lifecycle methods that we have. + +201 +00:08:54.880 --> 00:08:56.797 +So, we're gonna go into + +202 +00:08:57.807 --> 00:08:59.770 +our app here, and above our custom methods + +203 +00:08:59.770 --> 00:09:03.403 +we're going to add a compononentDidMount(), + +204 +00:09:03.403 --> 00:09:06.277 +and let's just do a console.log("MOUNTED"), + +205 +00:09:06.277 --> 00:09:08.707 +let's just double check that that's still firing, + +206 +00:09:08.707 --> 00:09:10.403 +open it up, yeah we get our app + +207 +00:09:10.403 --> 00:09:12.043 +that js console.logging "MOUNTED." + +208 +00:09:12.043 --> 00:09:14.228 +So, now that we know we're in good shape, + +209 +00:09:14.228 --> 00:09:16.785 +what we're going to do is import our firebase. + +210 +00:09:16.785 --> 00:09:20.285 +So, let's say import base from up a level, + +211 +00:09:21.559 --> 00:09:25.179 +and then that is just going to be from the base.js file, + +212 +00:09:25.179 --> 00:09:27.387 +and in our componentDidMount() we're going to say + +213 +00:09:27.387 --> 00:09:31.637 +this.ref, and this.ref is different than the actual + +214 +00:09:32.471 --> 00:09:35.452 +input refs that we were talking about earlier, + +215 +00:09:35.452 --> 00:09:39.429 +refs in Firebase are sort of the reference to + +216 +00:09:39.429 --> 00:09:41.621 +a piece of data in the database, + +217 +00:09:41.621 --> 00:09:43.848 +and we'll talk more about that in the future. + +218 +00:09:43.848 --> 00:09:47.431 +I'll say base.syncState(), + +219 +00:09:48.393 --> 00:09:51.143 +and we're going to sync this with + +220 +00:09:52.859 --> 00:09:55.960 +not with the entire database, cause it's unnecessary, + +221 +00:09:55.960 --> 00:09:58.289 +let me go back to my database and show you, + +222 +00:09:58.289 --> 00:10:02.293 +let me go back to that other one I was working with, + +223 +00:10:02.293 --> 00:10:03.876 +and go to database. + +224 +00:10:05.084 --> 00:10:09.150 +So, all this data here, we don't necessarily care + +225 +00:10:09.150 --> 00:10:13.986 +about king, or uptight-jealous-women, or helpless-cacti, + +226 +00:10:13.986 --> 00:10:17.887 +because that's not our data for this specific store, + +227 +00:10:17.887 --> 00:10:22.237 +we just care about the handsome-helpless-nuclei, right? + +228 +00:10:22.237 --> 00:10:26.213 +So, we're going to sync it with the name of the store. + +229 +00:10:26.213 --> 00:10:30.953 +And where do we get the name of the store in app? + +230 +00:10:30.953 --> 00:10:34.048 +Well, let's go back here, let's look at it. + +231 +00:10:34.048 --> 00:10:39.048 +Quaint-defeated-people, and if we look at our app component, + +232 +00:10:42.285 --> 00:10:46.057 +you'll notice that we have props from React router, + +233 +00:10:46.057 --> 00:10:47.940 +React router is gonna give our props, + +234 +00:10:47.940 --> 00:10:50.829 +and in match there's going to be something call params, + +235 +00:10:50.829 --> 00:10:53.593 +and then there's going to be a storeId, + +236 +00:10:53.593 --> 00:10:55.703 +and that will give us quaint-defeated-people, + +237 +00:10:55.703 --> 00:10:58.895 +that will give us whatever is in the actual URL. + +238 +00:10:58.895 --> 00:11:00.795 +So, we will sync it with, + +239 +00:11:00.795 --> 00:11:03.225 +and we will put the params in there, + +240 +00:11:03.225 --> 00:11:05.892 +this.props.match.params.storeId, + +241 +00:11:08.248 --> 00:11:11.055 +and that seems a little bit long, + +242 +00:11:11.055 --> 00:11:12.480 +and that is probably true. + +243 +00:11:12.480 --> 00:11:15.239 +So, what we can do is we can destructor that our + +244 +00:11:15.239 --> 00:11:17.988 +into it's own variable, we'll just name it params. + +245 +00:11:17.988 --> 00:11:20.321 +So, above we'll say const... + +246 +00:11:21.496 --> 00:11:24.079 +Params = this.props.match, + +247 +00:11:25.475 --> 00:11:28.663 +and then we're able to grab the params.storeID in there, + +248 +00:11:28.663 --> 00:11:30.661 +and then /fishes, right? + +249 +00:11:30.661 --> 00:11:35.099 +Because even inside of our catch-of-the-day, + +250 +00:11:35.099 --> 00:11:37.840 +if we're inside of one of the specific, + +251 +00:11:37.840 --> 00:11:40.443 +we don't care about the owner just yet, + +252 +00:11:40.443 --> 00:11:41.940 +we're going to be going into that, + +253 +00:11:41.940 --> 00:11:44.765 +but we care about the fishes, not anything else. + +254 +00:11:44.765 --> 00:11:46.606 +So, that's why we do /fishes. + +255 +00:11:46.606 --> 00:11:48.589 +That's a kinda cool thing about Firebase, + +256 +00:11:48.589 --> 00:11:51.328 +is as you get deep in nested objects, + +257 +00:11:51.328 --> 00:11:55.925 +you just do /// and that helps you go deeper. + +258 +00:11:55.925 --> 00:12:00.249 +So, that is the ref to / the store name / + +259 +00:12:00.249 --> 00:12:03.362 +the actual fishes object, which will contain + +260 +00:12:03.362 --> 00:12:07.277 +and mirror our state. Good? And then the sync state + +261 +00:12:07.277 --> 00:12:10.610 +also requires an object of some options, + +262 +00:12:11.743 --> 00:12:14.352 +the first one is context, it is going to be this, + +263 +00:12:14.352 --> 00:12:18.091 +and the state that we are going to sync + +264 +00:12:18.091 --> 00:12:20.264 +is going to be fishes, right? + +265 +00:12:20.264 --> 00:12:21.744 +It's not going to be our order state, + +266 +00:12:21.744 --> 00:12:24.072 +we're going to be syncing our fish state. + +267 +00:12:24.072 --> 00:12:26.542 +So, if I give that a save... + +268 +00:12:26.542 --> 00:12:31.542 +Now, I can close this out, if we go to our application, + +269 +00:12:31.689 --> 00:12:34.022 +and we go to our database... + +270 +00:12:37.928 --> 00:12:41.657 +Going to look at it, get started, there's nothing in there, + +271 +00:12:41.657 --> 00:12:44.907 +but if I load some sample fishes, boom! + +272 +00:12:46.578 --> 00:12:49.697 +Look at, quaint-defeated-people, fishes, + +273 +00:12:49.697 --> 00:12:52.022 +all of that data is now being synced, + +274 +00:12:52.022 --> 00:12:56.321 +and if I change Pacific Halibut to Atlantic... + +275 +00:12:56.321 --> 00:12:59.287 +And go back, oooh! It has changed as well, + +276 +00:12:59.287 --> 00:13:03.281 +so isn't that amazing, that just this much code + +277 +00:13:03.281 --> 00:13:05.752 +is able to sync our state we don't have to do any + +278 +00:13:05.752 --> 00:13:09.009 +updating and whatnot? So, I really like this package + +279 +00:13:09.009 --> 00:13:13.092 +for syncing state between Firebase and our state. + +280 +00:13:13.942 --> 00:13:16.450 +Now, what we also have to do is that we are now + +281 +00:13:16.450 --> 00:13:18.174 +listening for changes on here, + +282 +00:13:18.174 --> 00:13:22.674 +but if I were to go back and then go into another one + +283 +00:13:22.674 --> 00:13:25.092 +called the Wes-Store and visit that one, + +284 +00:13:25.092 --> 00:13:28.055 +and load in some fishes, now what I have done, + +285 +00:13:28.055 --> 00:13:31.567 +is I've created two stores, however we unmounted + +286 +00:13:31.567 --> 00:13:34.697 +the application by going back to the store picker, + +287 +00:13:34.697 --> 00:13:36.771 +and then we remounted it by going forward. + +288 +00:13:36.771 --> 00:13:39.203 +And if your user were to do that multiple times, + +289 +00:13:39.203 --> 00:13:42.064 +what happens is you are sort of listening for changes + +290 +00:13:42.064 --> 00:13:45.467 +every single time, but you're never unlistening for changes, + +291 +00:13:45.467 --> 00:13:48.207 +and that can lead to what is called a memory leak + +292 +00:13:48.207 --> 00:13:50.998 +in the future because you forgot to actually + +293 +00:13:50.998 --> 00:13:53.705 +kinda cleanup after you left that store. + +294 +00:13:53.705 --> 00:13:55.715 +So, that's exactly what we need to do, + +295 +00:13:55.715 --> 00:13:59.210 +we're going to be using another Lifecycle Method + +296 +00:13:59.210 --> 00:14:03.142 +called componentWillUnmount(), + +297 +00:14:03.142 --> 00:14:05.915 +and as soon as the component is unmounting, + +298 +00:14:05.915 --> 00:14:08.923 +so console.log("UNMOUNTING"); + +299 +00:14:08.923 --> 00:14:10.590 +And, so, here we go. + +300 +00:14:12.301 --> 00:14:14.551 +Now, let's go to this page. + +301 +00:14:15.681 --> 00:14:17.927 +I visit a store, and then I go back, + +302 +00:14:17.927 --> 00:14:19.928 +you see that it says "UNMOUNTING," why? + +303 +00:14:19.928 --> 00:14:21.826 +Because that triggered an unmount + +304 +00:14:21.826 --> 00:14:23.939 +because the app component is no longer shower. + +305 +00:14:23.939 --> 00:14:26.707 +And then we simply just need to take our base package + +306 +00:14:26.707 --> 00:14:31.000 +and removeBinding(this.ref); + +307 +00:14:31.000 --> 00:14:33.417 +and that's exactly why we stored + +308 +00:14:33.417 --> 00:14:37.462 +the reference to the database in this.ref, + +309 +00:14:37.462 --> 00:14:40.795 +so that when we leave, we can remove it. + +310 +00:14:42.625 --> 00:14:45.385 +Beautiful! So, I'm gonna visit the store, + +311 +00:14:45.385 --> 00:14:48.365 +and then when I go back, it's gonna unmount it for me, + +312 +00:14:48.365 --> 00:14:52.201 +and clean up any memory issues that may have. + +313 +00:14:52.201 --> 00:14:55.618 +Beautiful! So, now when we load the page, + +314 +00:14:57.087 --> 00:14:59.822 +load some sample fishes, and I refresh the page, + +315 +00:14:59.822 --> 00:15:02.736 +you see that after a split second, + +316 +00:15:02.736 --> 00:15:06.484 +the fish are immediately re-instated into my store, + +317 +00:15:06.484 --> 00:15:10.777 +because they are now being persisted in our database. + +318 +00:15:10.777 --> 00:15:12.205 +One last thing, you'll probably see this + +319 +00:15:12.205 --> 00:15:14.142 +FIREBASE WARNING: Invalid query segment, + +320 +00:15:14.142 --> 00:15:16.582 +I did look this up, and it's just an issue + +321 +00:15:16.582 --> 00:15:19.040 +with the current Firebase package, + +322 +00:15:19.040 --> 00:15:21.548 +once they've already fixed it on gitHub + +323 +00:15:21.548 --> 00:15:24.396 +and once they push that, it should no longer be an issue. + +324 +00:15:24.396 --> 00:15:26.147 +So, if you do see this, you're taking it in + +325 +00:15:26.147 --> 00:15:27.943 +the first couple days after I release it. + +326 +00:15:27.943 --> 00:15:29.796 +You can totally safely ignore that. + diff --git a/RFB/19 - Persisting Order State with localstorage.vtt b/RFB/19 - Persisting Order State with localstorage.vtt index fa415b8..a1fadc8 100755 --- a/RFB/19 - Persisting Order State with localstorage.vtt +++ b/RFB/19 - Persisting Order State with localstorage.vtt @@ -1,542 +1,1030 @@ -WEBVTT - -00:00:00.000 --> 00:00:04.802 line:100% position:50% align:middle -♪ [music] ♪ - -00:00:06.080 --> 00:00:10.330 line:100% position:50% align:middle -So we have our state syncing to -our Firebase, and that's great for when we - -00:00:10.330 --> 00:00:13.970 line:100% position:50% align:middle -refresh. The data is still going to be -there. However, when I add stuff to my - -00:00:13.970 --> 00:00:19.760 line:100% position:50% align:middle -order and I refresh, all that data is then -lost. And, rather than sync that to - -00:00:19.760 --> 00:00:23.530 line:100% position:50% align:middle -Firebase, I want to show you to sync that -to HTML5 local storage. - -00:00:23.530 --> 00:00:27.520 line:100% position:50% align:middle -And essentially what that means is we're -going to be storing the data pertaining to - -00:00:27.520 --> 00:00:30.350 line:100% position:50% align:middle -the user's order in the actual browser. - -00:00:30.350 --> 00:00:34.390 line:100% position:50% align:middle -Now, you could use cookies for that but -local storage is a much better fit. - -00:00:34.390 --> 00:00:39.780 line:100% position:50% align:middle -Now, we are going to head back to these -React component life cycle methods. - -00:00:39.780 --> 00:00:44.630 line:100% position:50% align:middle -And we need to hook into two more of our -life cycle methods. First of all, - -00:00:44.630 --> 00:00:50.110 line:100% position:50% align:middle -what we need to do is we need to hook -into when the data actually changes. - -00:00:50.110 --> 00:00:55.750 line:100% position:50% align:middle -And rather than going into every single -piece where we may update our order state, - -00:00:55.750 --> 00:00:59.143 line:100% position:50% align:middle -we can hook into one of the life cycle -methods that's called - -00:00:59.143 --> 00:01:01.210 line:100% position:50% align:middle -"componentWillUpdate." - -00:01:01.210 --> 00:01:04.450 line:100% position:50% align:middle -Let's take a look at it right here. Here -we go. "Updating." componentWillUpdate. - -00:01:04.450 --> 00:01:09.260 line:100% position:50% align:middle -Invoked immediately before rendering when -new props or state is being received. - -00:01:09.260 --> 00:01:12.740 line:100% position:50% align:middle -So what that means is that this hook here, -componentWillUpdate., - -00:01:12.740 --> 00:01:19.070 line:100% position:50% align:middle -it runs whenever props or state changes. -And that's perfect, because our order is - -00:01:19.070 --> 00:01:22.350 line:100% position:50% align:middle -state, and that is going to be changed and -passed down via props. - -00:01:22.350 --> 00:01:26.180 line:100% position:50% align:middle -So, we're going to hook into the -componentWillUpdate, and I want to show - -00:01:26.180 --> 00:01:26.940 line:100% position:50% align:middle -you how this works. - -00:01:26.940 --> 00:01:31.384 line:100% position:50% align:middle -Let's go up to right underneath our -componentWillMount and we'll use - -00:01:31.384 --> 00:01:35.230 line:100% position:50% align:middle -componentWillUpdate. And that thing will -pass you in two things. - -00:01:35.230 --> 00:01:40.870 line:100% position:50% align:middle -It will pass you in the next props and the -next state, so that's like the updated - -00:01:40.870 --> 00:01:45.070 line:100% position:50% align:middle -props and the updated state. And if -I were to just console log, - -00:01:45.070 --> 00:01:51.700 line:100% position:50% align:middle -something changed, and I'll take these two -props and state and I'll console log them - -00:01:51.700 --> 00:01:56.950 line:100% position:50% align:middle -both as well. By the way, that's a little -trick you can do, next props the next day - -00:01:56.950 --> 00:01:59.150 line:100% position:50% align:middle -I'll show you what that does here. - -00:01:59.150 --> 00:02:05.410 line:100% position:50% align:middle -So we are going to add something to our -order, and now when we see something - -00:02:05.410 --> 00:02:09.460 line:100% position:50% align:middle -changed, open that up, there is our next -props, that's what that little trick does. - -00:02:09.460 --> 00:02:14.720 line:100% position:50% align:middle -If you pass in a curly bracket object, -it's going to name them. - -00:02:14.720 --> 00:02:19.380 line:100% position:50% align:middle -So you actually know what these variables -are called. So next props is showing us - -00:02:19.380 --> 00:02:23.070 line:100% position:50% align:middle -all of our props, and next state is -showing us all of our state. - -00:02:23.070 --> 00:02:27.960 line:100% position:50% align:middle -So that's good, we need to know that, and -any time that our state will change, - -00:02:27.960 --> 00:02:31.160 line:100% position:50% align:middle -it's going to run this -componentWillUpdate hook. - -00:02:31.160 --> 00:02:35.270 line:100% position:50% align:middle -So inside of that what we need to do is -set our local storage. - -00:02:35.270 --> 00:02:39.000 line:100% position:50% align:middle -Now if you're never worked with local -storage before, you can access it by going - -00:02:39.000 --> 00:02:43.720 line:100% position:50% align:middle -to your application tab here, and you go -to local storage and then click on the - -00:02:43.720 --> 00:02:47.910 line:100% position:50% align:middle -actual domain name here. Now you might -have some other stuff in here depending on - -00:02:47.910 --> 00:02:52.130 line:100% position:50% align:middle -if you've ever run any other applications -on your localhost domain. - -00:02:52.130 --> 00:02:56.570 line:100% position:50% align:middle -And your local storage is going to be tied -directly to your localhost domain. - -00:02:56.570 --> 00:03:00.610 line:100% position:50% align:middle -Now, there is some Firebase stuff in here, -you don't have to really worry about that, - -00:03:00.610 --> 00:03:07.320 line:100% position:50% align:middle -but local storage is a key value pair. -Meaning that you can set a key here, - -00:03:07.320 --> 00:03:12.580 line:100% position:50% align:middle -and a value...it's like an object, except -the only difference is that you cannot - -00:03:12.580 --> 00:03:19.280 line:100% position:50% align:middle -nest an object inside of it. You can only -store numbers and strings and booleans and - -00:03:19.280 --> 00:03:20.730 line:100% position:50% align:middle -things like that in the value part. - -00:03:20.730 --> 00:03:25.170 line:100% position:50% align:middle -So the way that local storage works, if -you've never used it...and if you're - -00:03:25.170 --> 00:03:27.790 line:100% position:50% align:middle -familiar with it you can skip ahead a -couple of minutes...we'll have local - -00:03:27.790 --> 00:03:32.930 line:100% position:50% align:middle -storage and you say .setitem. And I'm -going to say "Wes," and I'm going to set - -00:03:32.930 --> 00:03:40.408 line:100% position:50% align:middle -that as, "is really cool." Now I jump back -to my application tab, and there we go, - -00:03:40.408 --> 00:03:46.507 line:100% position:50% align:middle -"Wes is really cool." And then I can call -it localstorage.getItem("Wes"), - -00:03:46.507 --> 00:03:48.920 line:100% position:50% align:middle -and it will return to me -that actual value. - -00:03:48.920 --> 00:03:52.360 line:100% position:50% align:middle -So what we're going to do is that whenever -the order state is updated, - -00:03:52.360 --> 00:03:55.170 line:100% position:50% align:middle -we're going to store it, we're going to -set item in local storage, - -00:03:55.170 --> 00:03:58.760 line:100% position:50% align:middle -and then when someone refreshes the page, -when they're loading it for the first - -00:03:58.760 --> 00:04:02.890 line:100% position:50% align:middle -time, we're going to check if there's -anything in local storage and if there is, - -00:04:02.890 --> 00:04:07.640 line:100% position:50% align:middle -we're going to restore our state via one -of these life cycle hooks. - -00:04:07.640 --> 00:04:13.390 line:100% position:50% align:middle -So we're going to go in here and we're -going to say localstorage.setItem, - -00:04:13.390 --> 00:04:18.630 line:100% position:50% align:middle -and I'm going to save it as order dash and -then the name of the actual store, - -00:04:18.630 --> 00:04:24.859 line:100% position:50% align:middle -so Drab Drab Tomatoes, right? But we -can't, again, we can't hard code that, - -00:04:24.859 --> 00:04:29.302 line:100% position:50% align:middle -but we can use props, because props gets -passed down. So we'll say - -00:04:29.302 --> 00:04:37.160 line:100% position:50% align:middle -this.props.params.storeID. And again, -that's available to us if we go to our - -00:04:37.160 --> 00:04:44.070 line:100% position:50% align:middle -React dev tools here. And we'll go to -"App," open that up, you see it's in our - -00:04:44.070 --> 00:04:47.970 line:100% position:50% align:middle -app.params' available here, -if we open up our order here it's actually - -00:04:47.970 --> 00:04:53.360 line:100% position:50% align:middle -not available to us. So if it's available -at app level but not available at order - -00:04:53.360 --> 00:04:59.200 line:100% position:50% align:middle -level, how do we pass down all the params? -Well, we can go to our app and - -00:04:59.200 --> 00:05:03.830 line:100% position:50% align:middle -figure out where we create our order which -is right here. So we passed in fishes, - -00:05:03.900 --> 00:05:08.140 line:100% position:50% align:middle -and if this is getting a big long you -can put them on their own lines. - -00:05:08.140 --> 00:05:11.140 line:100% position:50% align:middle -And we can either pass down all of the -params or just the one. - -00:05:11.140 --> 00:05:15.578 line:100% position:50% align:middle -So I'm going to pass them all down, and -I'm going to say this.props.params. - -00:05:15.578 --> 00:05:19.970 line:100% position:50% align:middle -Now when that refreshes, we'll go -to our order component. - -00:05:19.970 --> 00:05:25.620 line:100% position:50% align:middle -And look, params are now available to us -at order level, and we have the storeID. - -00:05:25.620 --> 00:05:31.281 line:100% position:50% align:middle -So we can go back to where we set our -local storage, this.props.params.storeID. - -00:05:31.281 --> 00:05:33.820 line:100% position:50% align:middle -so we're going to set, -that's going to be the key, - -00:05:33.820 --> 00:05:42.330 line:100% position:50% align:middle -and then the actual value is going to be -our next state.order. - -00:05:42.330 --> 00:05:45.120 line:100% position:50% align:middle -Right? Because next state is the entire -state, and we don't want to put everything - -00:05:45.120 --> 00:05:49.220 line:100% position:50% align:middle -in there, just the order state inside of -that. Now, that's not going to work and - -00:05:49.220 --> 00:05:53.450 line:100% position:50% align:middle -I'm going to show you exactly why, so -let's go ahead and run that. - -00:05:53.450 --> 00:05:57.930 line:100% position:50% align:middle -And I'm going to go to my application tab, -and I'm going to go to my local storage - -00:05:57.930 --> 00:06:03.670 line:100% position:50% align:middle -here, and as I enter the order, you see -it right here. It's object object. - -00:06:03.670 --> 00:06:09.980 line:100% position:50% align:middle -And why is that? The reason is, because -you cannot store an object inside of local - -00:06:09.980 --> 00:06:16.010 line:100% position:50% align:middle -storage, you can only store strings. So -it's actually just turning the object into - -00:06:16.010 --> 00:06:20.050 line:100% position:50% align:middle -a string, and that's what you get with -object object. So how would you turn an - -00:06:20.050 --> 00:06:24.550 line:100% position:50% align:middle -object into string? Well you can turn it -into JSON. So we'll just wrap that entire - -00:06:24.550 --> 00:06:32.900 line:100% position:50% align:middle -thing is a json.stringify, and then we -will start adding things to our order. - -00:06:32.900 --> 00:06:36.380 line:100% position:50% align:middle -And you should see... hey, there we go, -fish one, and then when I update it, you - -00:06:36.380 --> 00:06:41.130 line:100% position:50% align:middle -see local storage is getting updated, -add to order, add a couple more. - -00:06:41.130 --> 00:06:45.550 line:100% position:50% align:middle -And it's just storing the exact -representation of our order state in local - -00:06:45.550 --> 00:06:51.100 line:100% position:50% align:middle -storage. So that's one way, but now when I -refresh, it's still there. - -00:06:51.100 --> 00:06:54.720 line:100% position:50% align:middle -Drab Drab Tomato, it actually gets -overwritten because that will run on page - -00:06:54.720 --> 00:07:01.460 line:100% position:50% align:middle -load, but we have a problem here where it -doesn't actually reinstate our order. - -00:07:01.460 --> 00:07:05.610 line:100% position:50% align:middle -And we need to go back up to this -component, willMount life cycle hook, - -00:07:05.610 --> 00:07:10.856 line:100% position:50% align:middle -so again right before... maybe we put a -comment in here. This runs right before - -00:07:10.856 --> 00:07:16.250 line:100% position:50% align:middle -the app is rendered. And we already used -that to hook into our Firebase, - -00:07:16.250 --> 00:07:23.270 line:100% position:50% align:middle -but we can also check if there is any -order in local storage. So I'm going to - -00:07:23.270 --> 00:07:29.760 line:100% position:50% align:middle -make a reference to that local storage, -equals, and then we're going to try to - -00:07:29.760 --> 00:07:36.443 line:100% position:50% align:middle -get that item. So say, -localstorage.getItem, you need to back - -00:07:36.443 --> 00:07:44.660 line:100% position:50% align:middle -text, order-this.props.params.storeID. -Then if there is something in - -00:07:44.660 --> 00:07:48.930 line:100% position:50% align:middle -local storage, because it very well may be -that there's nothing in local storage, so - -00:07:48.930 --> 00:07:57.030 line:100% position:50% align:middle -we need to check. If there is a local -storage ref, then we need to update our - -00:07:57.030 --> 00:08:07.727 line:100% position:50% align:middle -app component, order state, then we say -this.setState. Then we're going to update - -00:08:07.727 --> 00:08:10.450 line:100% position:50% align:middle -the order state, -which is going to be... - -00:08:10.450 --> 00:08:15.590 line:100% position:50% align:middle -you might think it's local storage ref, -but again, that's just going to give us - -00:08:15.590 --> 00:08:20.830 line:100% position:50% align:middle -this, fish one... let me add a couple -more to it. That's just a string, - -00:08:20.830 --> 00:08:25.700 line:100% position:50% align:middle -so how do you turn a string back into an -object? Well we do the opposite of - -00:08:25.700 --> 00:08:29.970 line:100% position:50% align:middle -json.stringify, and it's json.parse. -And that will turn the string that we - -00:08:29.970 --> 00:08:35.170 line:100% position:50% align:middle -stored in local storage back into an -actual object here. So good, - -00:08:35.170 --> 00:08:41.220 line:100% position:50% align:middle -give that a save. Hey hey, there we go, -works already. Every time I refresh now, - -00:08:41.220 --> 00:08:44.980 line:100% position:50% align:middle -you will be able to see one pound -Atlantic, and I can update that. - -00:08:44.980 --> 00:08:48.960 line:100% position:50% align:middle -It's all being stored in local storage, -and we can refresh it. - -00:08:48.960 --> 00:08:54.990 line:100% position:50% align:middle -So there is a split second right there -where it does render, and then it actually - -00:08:54.990 --> 00:08:58.740 line:100% position:50% align:middle -fixes itself. You see it says, "Sorry, -it's not available," I'm not sure if you - -00:08:58.740 --> 00:09:03.780 line:100% position:50% align:middle -can catch that. And that's just because -the actual application component is - -00:09:03.780 --> 00:09:07.530 line:100% position:50% align:middle -rendering to the page, and then our local -storage ref is updating. - -00:09:07.530 --> 00:09:11.208 line:100% position:50% align:middle -So it's sort of doing a double render. I'm -going to leave it at that just because - -00:09:11.208 --> 00:09:15.930 line:100% position:50% align:middle -for simplicity's sake. However, -you could use one of the life cycle hooks - -00:09:15.930 --> 00:09:21.460 line:100% position:50% align:middle -called shouldComponentUpdate, right -here. Invoke before rendering when new - -00:09:21.460 --> 00:09:28.260 line:100% position:50% align:middle -props or states are being received. So, -componentWillUpdate gives us the new - -00:09:28.260 --> 00:09:32.457 line:100% position:50% align:middle -props and the new state. And -shouldComponentUpdate also gives us the - -00:09:32.457 --> 00:09:38.020 line:100% position:50% align:middle -new props and the new state. However, that -will... instead of us setting it in local - -00:09:38.020 --> 00:09:42.880 line:100% position:50% align:middle -storage, we will be able to tell React if -that component should re-render. - -00:09:42.880 --> 00:09:47.580 line:100% position:50% align:middle -So we're kind of getting a double render -happening here, and shouldComponentUpdate - -00:09:47.580 --> 00:09:52.250 line:100% position:50% align:middle -allows you to return true or return false -from this actual method. - -00:09:52.250 --> 00:09:56.130 line:100% position:50% align:middle -And then if... let's say you've got like, -four or five pieces of data coming in, and - -00:09:56.130 --> 00:09:59.800 line:100% position:50% align:middle -every time a new piece of data comes in, -that component re-renders itself. - -00:09:59.800 --> 00:10:04.040 line:100% position:50% align:middle -Maybe you want it to wait for four, five -of those pieces of data to all come in, - -00:10:04.040 --> 00:10:07.640 line:100% position:50% align:middle -and then re-render, that's where -shouldComponentUpdate sort of comes in, - -00:10:07.640 --> 00:10:12.320 line:100% position:50% align:middle -where you could say, if I have all five -pieces of data or if I then have my order - -00:10:12.320 --> 00:10:16.820 line:100% position:50% align:middle -state properly, then return true, and that -will cause it to re-render. - -00:10:16.820 --> 00:10:20.450 line:100% position:50% align:middle -Otherwise, return false, and then that's -just going to... it's going to stop right - -00:10:20.450 --> 00:10:24.340 line:100% position:50% align:middle -there. It's going to say, okay I have new -data but I'm not going to re-render myself - -00:10:24.340 --> 00:10:29.300 line:100% position:50% align:middle -on the page until someone returns true -from this. So there's a whole bunch of - -00:10:29.300 --> 00:10:33.820 line:100% position:50% align:middle -different life cycle hooks, and what I -probably recommend here is look through - -00:10:33.820 --> 00:10:37.170 line:100% position:50% align:middle -every single life cycle hook is in there, -read through what it does, - -00:10:37.170 --> 00:10:41.070 line:100% position:50% align:middle -and then you sort of have them in the back -of your mind so that when you've come upon - -00:10:41.070 --> 00:10:43.807 line:100% position:50% align:middle -a problem, you could say, -"Oh, I can probably fix it - -00:10:43.807 --> 00:10:46.000 line:100% position:50% align:middle -with one of these life cycle hooks." \ No newline at end of file +WEBVTT + +1 +00:00:00.078 --> 00:00:02.661 +(Upbeat music) + +2 +00:00:05.918 --> 00:00:09.235 +Now that our menu of fish is being persisted + +3 +00:00:09.235 --> 00:00:12.418 +to Firebase and reinstated every single time that I refresh, + +4 +00:00:12.418 --> 00:00:15.007 +let's turn our attention to order which is not being + +5 +00:00:15.007 --> 00:00:18.271 +persisted and every time I refresh, I totally lose my order. + +6 +00:00:18.271 --> 00:00:21.156 +I'm going to show you another way to persist data + +7 +00:00:21.156 --> 00:00:23.925 +that's not in a database, but sometimes you just need + +8 +00:00:23.925 --> 00:00:26.944 +to keep data in the users browser so that if they come back + +9 +00:00:26.944 --> 00:00:29.146 +to it or they change pages or refresh, + +10 +00:00:29.146 --> 00:00:30.417 +then we can reinstate it. + +11 +00:00:30.417 --> 00:00:32.594 +We're going to be doing it in the local storage + +12 +00:00:32.594 --> 00:00:35.540 +and if you've never heard of local storage four + +13 +00:00:35.540 --> 00:00:37.515 +it's kind of like cookies, + +14 +00:00:37.515 --> 00:00:40.995 +but a little bit easier to work with. + +15 +00:00:40.995 --> 00:00:44.328 +And, it's a key value token meaning that we can grab + +16 +00:00:44.328 --> 00:00:45.407 +a whole bunch of keys + +17 +00:00:45.407 --> 00:00:48.111 +and then you can store values along with them + +18 +00:00:48.111 --> 00:00:52.073 +and then you can come back to that at a later point in time + +19 +00:00:52.073 --> 00:00:54.995 +and pull that data and put it back into your applications. + +20 +00:00:54.995 --> 00:00:57.324 +So, you can see that Firebase actually uses + +21 +00:00:57.324 --> 00:00:59.781 +local storage itself. + +22 +00:00:59.781 --> 00:01:03.715 +There's some fish IDs that are being pulled in here from + +23 +00:01:03.715 --> 00:01:07.589 +previously when I was testing my other local app. + +24 +00:01:07.589 --> 00:01:10.626 +Then there's other things like other applications I, + +25 +00:01:10.626 --> 00:01:11.526 +by chance, + +26 +00:01:11.526 --> 00:01:14.616 +used this local storage 3000 for other applications. + +27 +00:01:14.616 --> 00:01:17.738 +I have got some tokens here that is used for authentication + +28 +00:01:17.738 --> 00:01:19.278 +and not really sure what this is from. + +29 +00:01:19.278 --> 00:01:21.862 +Probably from some other application running a local host. + +30 +00:01:21.862 --> 00:01:24.248 +If you're ever not sure, you can always just clear it out, + +31 +00:01:24.248 --> 00:01:29.248 +delete everything, refresh your browser and then you'll see + +32 +00:01:29.351 --> 00:01:31.955 +all of the different data that is being added + +33 +00:01:31.955 --> 00:01:34.446 +from your application on Pagelook. + +34 +00:01:34.446 --> 00:01:38.395 +So, let's go back to our application here. + +35 +00:01:38.395 --> 00:01:43.213 +We want to persist this order state in 'local storage', + +36 +00:01:43.213 --> 00:01:45.844 +so, we are in the app component, that makes sense, + +37 +00:01:45.844 --> 00:01:48.609 +but we need to talk about a couple other different + +38 +00:01:48.609 --> 00:01:50.192 +life cycle methods. + +39 +00:01:51.327 --> 00:01:54.056 +The other one that we're going to be using is called + +40 +00:01:54.056 --> 00:01:56.219 +'componentDidUpdate'. + +41 +00:01:56.219 --> 00:01:58.159 +This is something that is evoked + +42 +00:01:58.159 --> 00:01:59.962 +immediately after updating occurs. + +43 +00:01:59.962 --> 00:02:02.241 +This method is not called for the initial render. + +44 +00:02:02.241 --> 00:02:05.789 +That's perfect for us because as soon as it's loaded + +45 +00:02:05.789 --> 00:02:08.562 +and as soon as someone modifies their order, + +46 +00:02:08.562 --> 00:02:13.072 +what we want to do is to update our local storage showing us + +47 +00:02:13.072 --> 00:02:16.356 +that this is exactly what they have added to their order. + +48 +00:02:16.356 --> 00:02:19.087 +So, let's go ahead and do that. + +49 +00:02:19.087 --> 00:02:22.392 +We'll go to 'componentDidMount', we'll go underneath here. + +50 +00:02:22.392 --> 00:02:24.975 +We'll say 'componentDidUpdate'. + +51 +00:02:26.300 --> 00:02:28.083 +And sometimes I like to put + +52 +00:02:28.083 --> 00:02:30.603 +that above my 'componentWillUnmount' so you can kind of see + +53 +00:02:30.603 --> 00:02:33.642 +the whole lifecycle of this thing happens first, + +54 +00:02:33.642 --> 00:02:35.064 +this thing happens next. + +55 +00:02:35.064 --> 00:02:38.897 +So, component update, let's just 'console.log' + +56 +00:02:39.779 --> 00:02:41.112 +'IT UPDATED!!!'. + +57 +00:02:44.795 --> 00:02:47.499 +And we'll go and every time I add something to my order, + +58 +00:02:47.499 --> 00:02:50.862 +you'll see that 'IT UPDATED!!' is being called. + +59 +00:02:50.862 --> 00:02:53.339 +Which is good. Okay, good. + +60 +00:02:53.339 --> 00:02:57.722 +Now, let's take a look. Also, there are no arguments. + +61 +00:02:57.722 --> 00:03:00.034 +Sometimes you're going to see something like + +62 +00:03:00.034 --> 00:03:02.873 +'componentDidCAtch' or 'setState'. + +63 +00:03:02.873 --> 00:03:05.767 +You're going to see that it takes arguments and component + +64 +00:03:05.767 --> 00:03:08.551 +will update 'takes no arguments' because if we need + +65 +00:03:08.551 --> 00:03:10.869 +to be able to access props or states, + +66 +00:03:10.869 --> 00:03:12.411 +we simply just need to use + +67 +00:03:12.411 --> 00:03:14.404 +'this.props' or 'this.state'. + +68 +00:03:14.404 --> 00:03:18.386 +So, let's 'console.log', 'this.state.order'. + +69 +00:03:18.386 --> 00:03:21.526 +Every single time that we modify our order. + +70 +00:03:21.526 --> 00:03:25.707 +Good. So we're seeing that our order state is there. + +71 +00:03:25.707 --> 00:03:29.886 +Now, how do we stick that into our actual local storage? + +72 +00:03:29.886 --> 00:03:31.175 +Well, it's pretty simple. + +73 +00:03:31.175 --> 00:03:33.899 +We simply just say 'localStorage' + +74 +00:03:33.899 --> 00:03:38.899 +capital 'S.setitem' and the item that we're going to set is, + +75 +00:03:40.528 --> 00:03:42.522 +well we can't just say order because this + +76 +00:03:42.522 --> 00:03:44.939 +is gonna be for a specific... + +77 +00:03:45.816 --> 00:03:47.475 +(laughing) Oh that's terrible! + +78 +00:03:47.475 --> 00:03:52.009 +Panicky, unsightly wise of me. Let's go to a better one. + +79 +00:03:52.009 --> 00:03:53.561 +Here we go. + +80 +00:03:53.561 --> 00:03:55.040 +Loaded in, add to order. + +81 +00:03:55.040 --> 00:03:59.242 +We want to store the order for that specific store. + +82 +00:03:59.242 --> 00:04:02.669 +So, the question is, where do you get the store name? + +83 +00:04:02.669 --> 00:04:03.917 +That can come from 'props'. + +84 +00:04:03.917 --> 00:04:04.750 +Remember? + +85 +00:04:04.750 --> 00:04:07.583 +'this.props.match.params.storeId'. + +86 +00:04:10.964 --> 00:04:14.958 +We're going to use the key which is the left hand side. + +87 +00:04:14.958 --> 00:04:17.540 +Application. That's gonna be this. + +88 +00:04:17.540 --> 00:04:19.856 +And then the value is going to be + +89 +00:04:19.856 --> 00:04:21.255 +'this.state.order'. + +90 +00:04:21.255 --> 00:04:23.257 +Now, let me show you what happens + +91 +00:04:23.257 --> 00:04:25.022 +when that actually happens. + +92 +00:04:25.022 --> 00:04:26.566 +Get rid of that. + +93 +00:04:26.566 --> 00:04:27.399 +Save. + +94 +00:04:28.523 --> 00:04:29.410 +Load some sample. + +95 +00:04:29.410 --> 00:04:30.813 +We don't need to load some sample fishes (laughs) + +96 +00:04:30.813 --> 00:04:32.440 +because they already are. + +97 +00:04:32.440 --> 00:04:34.547 +Now, when I modify it, look what's happening. + +98 +00:04:34.547 --> 00:04:39.047 +We are getting the key of 'ugliest-nervous-diagnoses', + +99 +00:04:39.982 --> 00:04:42.612 +but the value is 'obect object'. + +100 +00:04:42.612 --> 00:04:43.493 +The reason why... + +101 +00:04:43.493 --> 00:04:45.711 +If you're ever wondering, like how come I always + +102 +00:04:45.711 --> 00:04:46.675 +see this "object object". + +103 +00:04:46.675 --> 00:04:49.760 +That's because if you ever tried to convert an object + +104 +00:04:49.760 --> 00:04:50.994 +to a string... + +105 +00:04:50.994 --> 00:04:55.553 +So like if I have "const wes" is = to "name: wes". + +106 +00:04:55.553 --> 00:04:57.126 +If I ever have an object and I try + +107 +00:04:57.126 --> 00:04:59.910 +to 'alert' it 'wes'. You will see that this is the 'object' + +108 +00:04:59.910 --> 00:05:02.552 +to 'object' as well and that's because anytime you try to + +109 +00:05:02.552 --> 00:05:07.349 +put an object into a place where a string is required, + +110 +00:05:07.349 --> 00:05:11.191 +the browser will just say "oh, I was expecting a string, + +111 +00:05:11.191 --> 00:05:13.674 +but you gave me something else. So, I'm just going to + +112 +00:05:13.674 --> 00:05:16.480 +call the '.toString' method on that. + +113 +00:05:16.480 --> 00:05:18.932 +That's where it (laughs) gives you "object" to "object" + +114 +00:05:18.932 --> 00:05:20.210 +which is not much use to us. + +115 +00:05:20.210 --> 00:05:25.210 +So, what we need to do is convert that 'object' to a string + +116 +00:05:25.226 --> 00:05:27.534 +representation and that's exaclty what + +117 +00:05:27.534 --> 00:05:29.367 +'JSON.stringify does'. + +118 +00:05:30.223 --> 00:05:33.188 +If I pass 'wes' to that, you will see that it gives me + +119 +00:05:33.188 --> 00:05:36.298 +the string version of what that actual object is. + +120 +00:05:36.298 --> 00:05:39.195 +That's what we're going to use to store in our database. + +121 +00:05:39.195 --> 00:05:42.744 +Just take your 'this.that.state.order' + +122 +00:05:42.744 --> 00:05:45.375 +and wrap it in a JSON. + +123 +00:05:45.375 --> 00:05:47.458 +Capital 'JSON.stringify'. + +124 +00:05:48.379 --> 00:05:51.242 +Now, go back to your application tab. + +125 +00:05:51.242 --> 00:05:53.061 +We're gonna be watching this. + +126 +00:05:53.061 --> 00:05:55.812 +And then, every time I update my order, + +127 +00:05:55.812 --> 00:05:58.394 +that local storage is going to work. + +128 +00:05:58.394 --> 00:06:01.043 +If I refresh the page, you'll see that, oh, + +129 +00:06:01.043 --> 00:06:02.793 +for a split second... + +130 +00:06:05.836 --> 00:06:07.850 +it is being updated. + +131 +00:06:07.850 --> 00:06:09.082 +But then I refresh. + +132 +00:06:09.082 --> 00:06:10.143 +Watch real quick! + +133 +00:06:10.143 --> 00:06:11.418 +It's there for a second and + +134 +00:06:11.418 --> 00:06:13.329 +then it updates to a blank object + +135 +00:06:13.329 --> 00:06:16.527 +and that's because when the component mounts, we are + +136 +00:06:16.527 --> 00:06:19.265 +updating state which is, in turn, triggering + +137 +00:06:19.265 --> 00:06:20.926 +'componentDidUpdate'. + +138 +00:06:20.926 --> 00:06:24.769 +So, what we need to do is...but when we mount, we need to + +139 +00:06:24.769 --> 00:06:27.102 +first, just reinstate the... + +140 +00:06:28.528 --> 00:06:29.679 +local storage. + +141 +00:06:29.679 --> 00:06:32.679 +"First reinstate our local storage". + +142 +00:06:33.777 --> 00:06:35.315 +So, we will say... + +143 +00:06:35.315 --> 00:06:39.815 +'const localStorageRef = to localStorage.getItem' + +144 +00:06:41.450 --> 00:06:44.970 +Local storage is super easy, it's '.setItem.getItem" + +145 +00:06:44.970 --> 00:06:47.322 +and I think it's '.removeItem' to delete it. + +146 +00:06:47.322 --> 00:06:52.322 +And we want to get the item from the 'params.store ID'. + +147 +00:06:52.716 --> 00:06:55.928 +Actually, we don't need back text there. + +148 +00:06:55.928 --> 00:06:59.190 +Let's just 'console.log', 'localStorageRef' + +149 +00:06:59.190 --> 00:07:01.617 +just to see what we've got there. + +150 +00:07:01.617 --> 00:07:05.174 +And, it's nul. It shouldn't be nul. + +151 +00:07:05.174 --> 00:07:09.193 +Oh, capital ID. My entire life is deciding whether + +152 +00:07:09.193 --> 00:07:12.364 +ID should be camel cased or not. + +153 +00:07:12.364 --> 00:07:14.335 +So, put a lower case D there + +154 +00:07:14.335 --> 00:07:18.134 +and now let's add some items to our order and then refresh. + +155 +00:07:18.134 --> 00:07:19.624 +We'll see that this is our + +156 +00:07:19.624 --> 00:07:23.207 +local storage ref right here which is fish 1 and + +157 +00:07:23.207 --> 00:07:24.641 +we had seven of them. + +158 +00:07:24.641 --> 00:07:27.407 +So, what we want to do is take that local storage ref, + +159 +00:07:27.407 --> 00:07:29.044 +which is going to be fish 7 + +160 +00:07:29.044 --> 00:07:31.387 +and set it to state, but sometimes we're going + +161 +00:07:31.387 --> 00:07:33.771 +to be visiting a brand new store and there might not be + +162 +00:07:33.771 --> 00:07:34.720 +anything in it. + +163 +00:07:34.720 --> 00:07:36.444 +What we're going to do is say "If" + +164 +00:07:36.444 --> 00:07:40.798 +there is a 'localStorageRef', then, we are going to say + +165 +00:07:40.798 --> 00:07:42.131 +'this.set.state' + +166 +00:07:43.504 --> 00:07:46.313 +and we're going to update the order to be... + +167 +00:07:46.313 --> 00:07:48.796 +and you might think like we can just set it to + +168 +00:07:48.796 --> 00:07:51.637 +'localStorageRef', but what is 'localStorageRef'? + +169 +00:07:51.637 --> 00:07:54.563 +It's a string, right, we need to turn it back into an object + +170 +00:07:54.563 --> 00:07:56.618 +because that is what it's expecting. + +171 +00:07:56.618 --> 00:07:59.753 +So, wrap that thing in the opposite of 'JSON.stringify' + +172 +00:07:59.753 --> 00:08:01.985 +and it's 'JSON.parse'. + +173 +00:08:01.985 --> 00:08:06.386 +That will turn it back from a string into an object. + +174 +00:08:06.386 --> 00:08:08.703 +So, if there is a local storage value, + +175 +00:08:08.703 --> 00:08:10.025 +you're going to reinstate it. + +176 +00:08:10.025 --> 00:08:13.108 +Now, if I add some items to my order, + +177 +00:08:14.786 --> 00:08:16.314 +Add some lobster. + +178 +00:08:16.314 --> 00:08:18.083 +And refresh. + +179 +00:08:18.083 --> 00:08:20.914 +Ahhhhhhh nooo! What happened?! + +180 +00:08:20.914 --> 00:08:25.035 +"Cannot read property status of undefined". + +181 +00:08:25.035 --> 00:08:27.027 +I don't actually know what the issue is here, + +182 +00:08:27.027 --> 00:08:29.761 +but I think it would be helpful to watch me debug this. + +183 +00:08:29.761 --> 00:08:33.576 +My first idea is, is this order actually getting parse? + +184 +00:08:33.576 --> 00:08:37.635 +So, I'm going to 'console.log(JSON.parse(localStorageRef'. + +185 +00:08:37.635 --> 00:08:41.802 +And we'll also do 'console.log' of 'Restoring it'. + +186 +00:08:43.879 --> 00:08:47.269 +Then, go back to the app here and we see restoring it and + +187 +00:08:47.269 --> 00:08:50.298 +we also see that our fish is right there so that's good. + +188 +00:08:50.298 --> 00:08:53.321 +There's nothing wrong with this and it's being set to state. + +189 +00:08:53.321 --> 00:08:55.961 +Let's take a quicker look at the actual error. + +190 +00:08:55.961 --> 00:09:00.016 +"Cannot read property status of undefined". + +191 +00:09:00.016 --> 00:09:01.349 +Ah, there we go. + +192 +00:09:02.575 --> 00:09:04.266 +It's "is available 'fish.status'". + +193 +00:09:04.266 --> 00:09:07.289 +So, what's happening actually here is that we're looping + +194 +00:09:07.289 --> 00:09:10.706 +over all of the keys in our render order, + +195 +00:09:11.733 --> 00:09:16.219 +but what's happening is that there actually is no fish. + +196 +00:09:16.219 --> 00:09:18.426 +So, you're trying to get status of something + +197 +00:09:18.426 --> 00:09:20.286 +that doesn't exist which is the fish. + +198 +00:09:20.286 --> 00:09:22.263 +So, that's a bit of an issue + +199 +00:09:22.263 --> 00:09:24.865 +so one thing we probably could do + +200 +00:09:24.865 --> 00:09:28.101 +is say that if there is a fish first and there's + +201 +00:09:28.101 --> 00:09:30.355 +a fish status, but why is there no fish? + +202 +00:09:30.355 --> 00:09:33.145 +Let's talk about that for a quick second. + +203 +00:09:33.145 --> 00:09:37.303 +And what's happening here is that when the component mounts, + +204 +00:09:37.303 --> 00:09:40.510 +we are checking 'localStorage' and if it's there, + +205 +00:09:40.510 --> 00:09:43.980 +we are setting that to 'state' and then we're setting up + +206 +00:09:43.980 --> 00:09:45.297 +our 'syncState'. + +207 +00:09:45.297 --> 00:09:48.058 +And there's a bit of an issue because 'localStorage' + +208 +00:09:48.058 --> 00:09:50.175 +is local and it's gonna be immediate. + +209 +00:09:50.175 --> 00:09:52.690 +It's gonna be immediately set to 'this'. + +210 +00:09:52.690 --> 00:09:56.469 +The problem with this rebase is that there is a split second + +211 +00:09:56.469 --> 00:09:59.239 +where you have to go to 'Rebase' or go to 'Firebase' + +212 +00:09:59.239 --> 00:10:03.141 +and come back with the actual data and then, + +213 +00:10:03.141 --> 00:10:05.489 +what's happening is we're trying to render out + +214 +00:10:05.489 --> 00:10:08.270 +the order before the fishes actually exist. Right? + +215 +00:10:08.270 --> 00:10:11.271 +Because when we load the page, the fishes are empty until + +216 +00:10:11.271 --> 00:10:13.462 +they can come back from 'Firebase' and be put back + +217 +00:10:13.462 --> 00:10:14.562 +into our state. + +218 +00:10:14.562 --> 00:10:18.274 +That's what Rebase is doing, it's syncing it back into it. + +219 +00:10:18.274 --> 00:10:22.008 +So, should we wait on this? Or something like this? + +220 +00:10:22.008 --> 00:10:24.243 +There's a couple of things that we could do here. + +221 +00:10:24.243 --> 00:10:25.076 +We could say, first, + +222 +00:10:25.076 --> 00:10:28.658 +we could just check and say that it's not available. + +223 +00:10:28.658 --> 00:10:29.791 +We'd say... + +224 +00:10:29.791 --> 00:10:31.541 +'fish.&&fish.status'. + +225 +00:10:32.777 --> 00:10:35.444 +We're going to check if there is a fish and if the fish + +226 +00:10:35.444 --> 00:10:37.345 +status is available. + +227 +00:10:37.345 --> 00:10:38.178 +We check. + +228 +00:10:38.178 --> 00:10:40.679 +If there is a fish and the fish status is available. + +229 +00:10:40.679 --> 00:10:42.255 +So, let's take a quick look here. + +230 +00:10:42.255 --> 00:10:45.177 +I've got a bunch of fishes in there, but, you see how it + +231 +00:10:45.177 --> 00:10:47.356 +sort of quickly flashes? + +232 +00:10:47.356 --> 00:10:49.689 +Sorry, that fish is no longer available + +233 +00:10:49.689 --> 00:10:52.244 +and that's because as we load it, the fishes + +234 +00:10:52.244 --> 00:10:54.331 +aren't there and as the fish get put in, + +235 +00:10:54.331 --> 00:10:56.203 +we will re-render that. + +236 +00:10:56.203 --> 00:10:57.611 +So, that's not great. + +237 +00:10:57.611 --> 00:10:59.727 +What we could do here is before we even + +238 +00:10:59.727 --> 00:11:04.727 +render that out, we could just say 'if there's no fish' + +239 +00:11:04.787 --> 00:11:08.756 +we could do this down here, 'then return null'. + +240 +00:11:08.756 --> 00:11:10.434 +And if you return 'null' from anything, + +241 +00:11:10.434 --> 00:11:11.832 +it will just render out. + +242 +00:11:11.832 --> 00:11:13.195 +Absolutely nothing. + +243 +00:11:13.195 --> 00:11:15.600 +So, let's see this. + +244 +00:11:15.600 --> 00:11:17.964 +So you see now it's just an empty order until + +245 +00:11:17.964 --> 00:11:20.787 +the fish get put in and then it's updating for us. + +246 +00:11:20.787 --> 00:11:22.779 +I'm pretty happy with that. + +247 +00:11:22.779 --> 00:11:27.612 +Put a little comment on that 'make sure the fish is loaded + +248 +00:11:29.608 --> 00:11:31.275 +before we continue'. + +249 +00:11:33.997 --> 00:11:38.025 +Good, so that is fixed. Now we are reinstating our storage. + +250 +00:11:38.025 --> 00:11:40.402 +Let's try it real quick with another. + +251 +00:11:40.402 --> 00:11:43.988 +So this is 'ugliest nervous diagnoses' and I'm + +252 +00:11:43.988 --> 00:11:47.987 +going to go back to my store picker and go to a new one. + +253 +00:11:47.987 --> 00:11:50.826 +Load some sample fishes, add some to the order. + +254 +00:11:50.826 --> 00:11:54.962 +And then I'm gonna go back to that initial one. + +255 +00:11:54.962 --> 00:11:58.208 +And it reinstates my old one because in our application, + +256 +00:11:58.208 --> 00:12:01.078 +now we have two stores worth of data being pushed + +257 +00:12:01.078 --> 00:12:02.521 +into our local storage. + diff --git a/RFB/20 - Bi-directional Data Flow and Live State Editing .vtt b/RFB/20 - Bi-directional Data Flow and Live State Editing .vtt index 79f4946..b38530a 100755 --- a/RFB/20 - Bi-directional Data Flow and Live State Editing .vtt +++ b/RFB/20 - Bi-directional Data Flow and Live State Editing .vtt @@ -1,668 +1,1518 @@ -WEBVTT - -00:00:00.000 --> 00:00:03.008 line:100% position:50% align:middle -♪ [music] ♪ - -00:00:07.000 --> 00:00:10.140 line:100% position:50% align:middle -Now we need to build the inventory -management system, which is in our third - -00:00:10.140 --> 00:00:14.640 line:100% position:50% align:middle -column right here. Whenever we have this -specific halibut and the price or however - -00:00:14.640 --> 00:00:19.220 line:100% position:50% align:middle -much it costs, we need to be able to -update our state immediately as well as - -00:00:19.220 --> 00:00:26.150 line:100% position:50% align:middle -Firebase. And Rebase is going to relay -that to Firebase. For every single thing - -00:00:26.150 --> 00:00:29.680 line:100% position:50% align:middle -in our state, every single fish in our -state, we need to render out one of these - -00:00:29.680 --> 00:00:35.320 line:100% position:50% align:middle -blocks here, to edit it. Now we already -have that block for adding a new fish, - -00:00:35.320 --> 00:00:40.440 line:100% position:50% align:middle -where we can add something and say it's -cool and we can have a fish pic in it. - -00:00:40.440 --> 00:00:43.960 line:100% position:50% align:middle -And when I add that, it will just push it -into our state for us, - -00:00:43.960 --> 00:00:49.550 line:100% position:50% align:middle -but we can't edit it or delete that actual -item from our inventory at all. - -00:00:49.550 --> 00:00:54.620 line:100% position:50% align:middle -All we need to do is go to our inventory -component here. And right above our load - -00:00:54.620 --> 00:00:59.790 line:100% position:50% align:middle -sample fishes and actually above our add -fish form, we need to loop over every - -00:00:59.790 --> 00:01:03.060 line:100% position:50% align:middle -single fish that we have. We can do the -same thing we've been doing, - -00:01:03.060 --> 00:01:08.060 line:100% position:50% align:middle -object.keys, this.props.fishes, -because we've already passed down - -00:01:08.060 --> 00:01:12.240 line:100% position:50% align:middle -our fishes to our inventory state. At -least I think we have. Let's double check - -00:01:12.240 --> 00:01:17.940 line:100% position:50% align:middle -that. Look for our inventory. Oh, we -haven't actually. Here's our inventory, - -00:01:17.940 --> 00:01:22.430 line:100% position:50% align:middle -so we need to pass down our fishes. -this.state.fishes. - -00:01:22.430 --> 00:01:29.840 line:100% position:50% align:middle -Good. Go to our inventory here. -this.props.fishes. And we will map over - -00:01:29.840 --> 00:01:36.547 line:100% position:50% align:middle -that. And the map I am going to pass that -off to another function. We're going to - -00:01:36.547 --> 00:01:43.740 line:100% position:50% align:middle -create a render function called render -inventory, I'll say this.renderinventory. - -00:01:43.740 --> 00:01:49.830 line:100% position:50% align:middle -Then we go up here. We're going to make a -render inventory method, - -00:01:49.830 --> 00:01:57.940 line:100% position:50% align:middle -which will take in the key. And from that -we will return...let's just return a - -00:01:57.940 --> 00:02:01.620 line:100% position:50% align:middle -paragraph tag with the actual key. Let's -just make sure this is all actually - -00:02:01.620 --> 00:02:08.140 line:100% position:50% align:middle -working. Awesome! So now I've got all of -these different fishes popping up and this - -00:02:08.140 --> 00:02:14.080 line:100% position:50% align:middle -render inventory is then being put into -it. So what HTML do we actually need for - -00:02:14.080 --> 00:02:18.560 line:100% position:50% align:middle -this render inventory? We need a div with -a class of fish edit. - -00:02:18.560 --> 00:02:24.340 line:100% position:50% align:middle -So .fishedit. That needs a key of key, -otherwise React is going yell at us for it - -00:02:24.340 --> 00:02:29.910 line:100% position:50% align:middle -not being unique. Then inside of that -we've got a whole bunch of inputs that we - -00:02:29.910 --> 00:02:33.790 line:100% position:50% align:middle -need. Now we need the following five -things: name, price, status, - -00:02:33.790 --> 00:02:37.910 line:100% position:50% align:middle -description, and image. I'm going to do -the same kung fu that I did before. - -00:02:37.910 --> 00:02:44.240 line:100% position:50% align:middle -We have an input with type of text. This -one needs a name attribute and I'll show - -00:02:44.240 --> 00:02:49.970 line:100% position:50% align:middle -you why in just a second. Probably put a -placeholder on it just in case we delete - -00:02:49.970 --> 00:02:56.883 line:100% position:50% align:middle -it entirely. I'll say fish, -paste it in. Uppercase. Okay. - -00:02:56.883 --> 00:03:00.606 line:100% position:50% align:middle -Cool! So that's all of our -inputs. However. name, price, - -00:03:00.606 --> 00:03:08.560 line:100% position:50% align:middle -status. Status should be a select. So -we'll say select. And that select is going - -00:03:08.560 --> 00:03:12.300 line:100% position:50% align:middle -to have two options. You can just look at -your add fish form because this is exact - -00:03:12.300 --> 00:03:20.950 line:100% position:50% align:middle -same sort of mark up that we had, so we -want fresh and unavailable. - -00:03:20.950 --> 00:03:30.560 line:100% position:50% align:middle -Description is not an input. It is a text -area. There's a couple more things. - -00:03:30.560 --> 00:03:34.590 line:100% position:50% align:middle -First of all, we're going to need to put -the value of the fish into it, as well as - -00:03:34.590 --> 00:03:40.030 line:100% position:50% align:middle -we are going to need to data bind it, -which means that whenever I make an edit - -00:03:40.030 --> 00:03:46.030 line:100% position:50% align:middle -to any one of these, it's going to update -our state directly. That last part that we - -00:03:46.030 --> 00:03:52.520 line:100% position:50% align:middle -need is we actually need the information -about the fish. We will go up right before - -00:03:52.520 --> 00:03:58.376 line:100% position:50% align:middle -our return, and we'll say const fish -equals this.props.fishes[key]. - -00:03:58.376 --> 00:04:01.700 line:100% position:50% align:middle -And that should give -us the actual fish. And we can go to each - -00:04:01.700 --> 00:04:12.920 line:100% position:50% align:middle -of these. Satus. Description. Image. And -say value equals fish dot - not fish dot. - -00:04:12.920 --> 00:04:18.390 line:100% position:50% align:middle -We actually need the value there. Here we -go. Name, price, status, - -00:04:18.390 --> 00:04:24.630 line:100% position:50% align:middle -description and image. Let's take a look -at where we're at. React is going to yell - -00:04:24.630 --> 00:04:28.510 line:100% position:50% align:middle -at us because we used value and not -default value, and I'll tell you why in - -00:04:28.510 --> 00:04:32.500 line:100% position:50% align:middle -just a sec. Open up our dev tools here. -Cannot read properties undefined. - -00:04:32.500 --> 00:04:38.540 line:100% position:50% align:middle -This is an error. I'm glad that we always -trip up on this because this is a big - -00:04:38.540 --> 00:04:45.230 line:100% position:50% align:middle -thing in React. I use props of this. Why -can't I use this? Because this function, - -00:04:45.230 --> 00:04:50.950 line:100% position:50% align:middle -render inventory, is not render and it's -not bound to the actual inventory - -00:04:50.950 --> 00:04:54.080 line:100% position:50% align:middle -component. So how do we do that? Well we -give ourselves a constructor. - -00:04:54.080 --> 00:05:02.310 line:100% position:50% align:middle -And we call super. Then inside of that we -will say this.renderinventory equals - -00:05:02.310 --> 00:05:07.150 line:100% position:50% align:middle -this.renderinventory.bindthis. -When that reloads we now have a couple of - -00:05:07.150 --> 00:05:10.370 line:100% position:50% align:middle -problems going on here. First of all, -we see all of our fishes. - -00:05:10.370 --> 00:05:14.860 line:100% position:50% align:middle -This is great. We see all these inventory -things, but I can't edit them. - -00:05:14.860 --> 00:05:18.750 line:100% position:50% align:middle -What's going on here? And second of all, -I've got this warning in the console here. - -00:05:18.750 --> 00:05:23.090 line:100% position:50% align:middle -You provided a value of prop without an on -change handler. This will render a read - -00:05:23.090 --> 00:05:28.240 line:100% position:50% align:middle -only field. If the field is mutable, use -default value. Essentially, - -00:05:28.240 --> 00:05:35.990 line:100% position:50% align:middle -React doesn't want you just sticking state -(fish) into an input unless you have a plan - -00:05:35.990 --> 00:05:41.730 line:100% position:50% align:middle -for actually updating it. If that needs to -just be set once and it's not going to be - -00:05:41.730 --> 00:05:46.090 line:100% position:50% align:middle -bound to state then that's fine. That's -what we did in our store picker. - -00:05:46.090 --> 00:05:52.510 line:100% position:50% align:middle -You'll remember that when we did our store -picker ,we used default value instead of - -00:05:52.510 --> 00:05:56.920 line:100% position:50% align:middle -value. That's because this was not tied to -our state at all. It was simply just a one - -00:05:56.920 --> 00:06:03.380 line:100% position:50% align:middle -time thing. React is saying if you put -state in an input box, you must also - -00:06:03.380 --> 00:06:08.280 line:100% position:50% align:middle -provide us with some sort of instruction -as to how to update that state. - -00:06:08.280 --> 00:06:14.280 line:100% position:50% align:middle -That's really important because React -doesn't want you just having state in your - -00:06:14.280 --> 00:06:17.830 line:100% position:50% align:middle -input box in your HTML as well as in state -and they get out of sync. - -00:06:17.830 --> 00:06:23.200 line:100% position:50% align:middle -It wants one core area where our state is -coming from, and that is our application - -00:06:23.200 --> 00:06:27.790 line:100% position:50% align:middle -state. To update this box here what we -really need to do is we need to update our - -00:06:27.790 --> 00:06:32.530 line:100% position:50% align:middle -state, which React will then in turn -update that. It wants to keep them in - -00:06:32.530 --> 00:06:38.260 line:100% position:50% align:middle -sync. We need to listen for a change on -each of these inputs and when any time any - -00:06:38.260 --> 00:06:43.140 line:100% position:50% align:middle -of these inputs are changed, we need to -then update our corresponding state. - -00:06:43.140 --> 00:06:46.720 line:100% position:50% align:middle -So let's do it with a name one first, -then we'll go through and do the rest. - -00:06:46.720 --> 00:06:52.120 line:100% position:50% align:middle -We'll specify an onchange event listener. -When that happens we are going to run a - -00:06:52.120 --> 00:06:55.450 line:100% position:50% align:middle -function which gives us the event. Giving -us the event is really important here and - -00:06:55.450 --> 00:06:59.791 line:100% position:50% align:middle -I'll show you why in a second. Say -this.handlechange. and we'll pass it the - -00:06:59.791 --> 00:07:04.710 line:100% position:50% align:middle -event as well as we'll pass it the key for -that specific fish. Now where did handle - -00:07:04.710 --> 00:07:09.109 line:100% position:50% align:middle -change come from? I just made that up. -We need to specify our own handle change - -00:07:09.109 --> 00:07:11.684 line:100% position:50% align:middle -method here -and we need to grab - -00:07:11.684 --> 00:07:16.315 line:100% position:50% align:middle -the actual fish. So I'll say -const fish equals this.props.fishes, - -00:07:16.315 --> 00:07:20.920 line:100% position:50% align:middle -so we're back at key. Now, before -we forget, if I use this inside of a - -00:07:20.920 --> 00:07:25.130 line:100% position:50% align:middle -method that we make up, we need to bind it -to the actual component itself. - -00:07:25.130 --> 00:07:31.070 line:100% position:50% align:middle -So we'll say handle change. Just to make -sure that this is all working, - -00:07:31.070 --> 00:07:35.940 line:100% position:50% align:middle -we are going to console log the actual -fish, and when I change this name input on - -00:07:35.940 --> 00:07:39.850 line:100% position:50% align:middle -any of them, it should console log the -corresponding fish. Let's see. - -00:07:39.850 --> 00:07:44.230 line:100% position:50% align:middle -No. Key is not defined because our handle -change needs to take in the event and the - -00:07:44.230 --> 00:07:51.610 line:100% position:50% align:middle -key. Now when I change it, there we go. We -see our fish. Changed to Pacific Halibut. - -00:07:51.610 --> 00:07:54.650 line:100% position:50% align:middle -You notice it's still not changing, and -that's because we have not yet been - -00:07:54.650 --> 00:08:00.120 line:100% position:50% align:middle -updating state. These inputs cannot be -edited unless we update state as well. - -00:08:00.120 --> 00:08:08.310 line:100% position:50% align:middle -However, we are seeing information about -that fish. So we need to first take a copy - -00:08:08.310 --> 00:08:16.780 line:100% position:50% align:middle -of that fish and update it with the new -data. We'll say const updated fish equals. - -00:08:16.780 --> 00:08:20.220 line:100% position:50% align:middle -Now we're going to take a copy of fish. -How do you copy an object? - -00:08:20.220 --> 00:08:25.130 line:100% position:50% align:middle -Well you could use object.assign and -you take an empty object and then you put - -00:08:25.130 --> 00:08:31.750 line:100% position:50% align:middle -in your fish object. That will take an -actual copy of it. But we can use the fish - -00:08:31.750 --> 00:08:37.500 line:100% position:50% align:middle -spread. So ...fish. Then we need -to just overlay our new attributes, - -00:08:37.500 --> 00:08:41.190 line:100% position:50% align:middle -or our new properties, on top of it. So -first of all, what changed? - -00:08:41.190 --> 00:08:45.940 line:100% position:50% align:middle -How do we know what changed? My console -log... I'll comment that out and console - -00:08:45.940 --> 00:08:52.390 line:100% position:50% align:middle -log the event e.target. Let's see what -we got here. I'm going to change fish to - -00:08:52.390 --> 00:08:59.300 line:100% position:50% align:middle -fish x. And look. There's our actual -input. So e.target is going to give us - -00:08:59.300 --> 00:09:04.693 line:100% position:50% align:middle -the actual element itself and that will -allow us to console log e.target.name. - -00:09:04.693 --> 00:09:08.699 line:100% position:50% align:middle -That's why we had to put a name -attribute on it. e.target.value. - -00:09:09.030 --> 00:09:16.430 line:100% position:50% align:middle -Let's see here. New fish. I put an x on -the end. Aha! Name? That's the actual - -00:09:16.430 --> 00:09:21.750 line:100% position:50% align:middle -property that we're updating. And new fish -x. That's the new value that we've been - -00:09:21.750 --> 00:09:27.200 line:100% position:50% align:middle -having there. What we can do is take this -updated fish and overlay the new - -00:09:27.200 --> 00:09:33.570 line:100% position:50% align:middle -properties on it. So what property has -been updated? Well we can't say like if - -00:09:33.570 --> 00:09:39.690 line:100% position:50% align:middle -it's name then type name, if it's image -then type image. We can use what's called - -00:09:39.690 --> 00:09:43.630 line:100% position:50% align:middle -a computed property. We can say the -property that we're changing is called - -00:09:43.700 --> 00:09:50.260 line:100% position:50% align:middle -e.target.name. Remember that's going -to be name or price or status or - -00:09:50.260 --> 00:09:55.910 line:100% position:50% align:middle -description or image. The actual value -of that is going to be e.target.value. - -00:09:55.910 --> 00:10:01.510 line:100% position:50% align:middle -That's going to help us just change -the one thing that actually changed there. - -00:10:01.510 --> 00:10:09.664 line:100% position:50% align:middle -If we console log the updated fish, we -should now see...open that up, the actual - -00:10:09.664 --> 00:10:16.457 line:100% position:50% align:middle -name of this value is new fish x, right? -If I console log change - -00:10:16.457 --> 00:10:20.346 line:100% position:50% align:middle -Pacific Halibut, -you should then see - -00:10:21.227 --> 00:10:25.970 line:100% position:50% align:middle -the name is Pacific Halibut x. Why is this -an array? Actually we don't need the - -00:10:25.970 --> 00:10:29.030 line:100% position:50% align:middle -square brackets here because it's not an -array, it's just an actual value. - -00:10:29.030 --> 00:10:32.880 line:100% position:50% align:middle -Take those square brackets off. Let me -change Pacific Halibut once more. - -00:10:32.880 --> 00:10:38.650 line:100% position:50% align:middle -Put an x on the end. We see that the name -is Pacific Halibut with an x on it. - -00:10:38.650 --> 00:10:44.130 line:100% position:50% align:middle -Good, but that's still not updating our -actual inventory, so we need to then take - -00:10:44.130 --> 00:10:49.570 line:100% position:50% align:middle -this updated fish and pass it to our app -component which is then, - -00:10:49.570 --> 00:10:55.680 line:100% position:50% align:middle -in turn, going to update it. We need to -make one more method on our app component. - -00:10:55.680 --> 00:11:01.416 line:100% position:50% align:middle -Right below add fish I'm going to make one -called update fish. That will take in the - -00:11:01.416 --> 00:11:05.580 line:100% position:50% align:middle -key of the fish that we want to update, -as well as the new updated fish. - -00:11:05.958 --> 00:11:09.510 line:100% position:50% align:middle -Inside of that we'll say const -fishes equals. We'll take a copy of the - -00:11:09.510 --> 00:11:17.963 line:100% position:50% align:middle -existing this.state.fishes. Then we'll -update it. So fishes key equals fish. Or - -00:11:17.963 --> 00:11:28.121 line:100% position:50% align:middle -maybe we'll call that updated fish. Then -we call set state this.setstatefishes. - -00:11:28.981 --> 00:11:32.030 line:100% position:50% align:middle -Good. Now we've got this -updated fish method. We need to make it - -00:11:32.030 --> 00:11:36.850 line:100% position:50% align:middle -available to our inventory component here. -Again, you're probably noticing a trend. - -00:11:36.850 --> 00:11:41.230 line:100% position:50% align:middle -If I need to make this method available to -something like our inventory component - -00:11:41.230 --> 00:11:49.210 line:100% position:50% align:middle -here, like we passed add fish and load -samples and fishes, we can also pass down - -00:11:49.210 --> 00:11:55.280 line:100% position:50% align:middle -our update fish, this.updatefish. -Good. We'll go up here. - -00:11:55.280 --> 00:12:02.530 line:100% position:50% align:middle -Make sure that our add fish and our update -fish are bound. Then inventory. - -00:12:02.530 --> 00:12:09.820 line:100% position:50% align:middle -We'll go back to our handle change method -and say this.props.updatefish. - -00:12:09.820 --> 00:12:16.140 line:100% position:50% align:middle -We'll pass it the key as well as our -updated fish object. Now when I update my - -00:12:16.140 --> 00:12:22.220 line:100% position:50% align:middle -Pacific Halibut and put cool in front of -it, look! It's updating our state - -00:12:22.220 --> 00:12:27.110 line:100% position:50% align:middle -immediately, which means that... Again, -let's go through the flow. - -00:12:27.110 --> 00:12:32.490 line:100% position:50% align:middle -We have an onchange handler which will -trigger when someone types into it and it - -00:12:32.490 --> 00:12:37.290 line:100% position:50% align:middle -triggers a change. That in turn is going -to run this handle change function, - -00:12:37.290 --> 00:12:41.349 line:100% position:50% align:middle -which is going to take a copy of that one -single fish, not all of them, that one - -00:12:41.349 --> 00:12:45.640 line:100% position:50% align:middle -single fish. Here's where we take -the copy of it. Then we just overwrite - -00:12:45.640 --> 00:12:49.740 line:100% position:50% align:middle -whatever had changed. So this is a dynamic -way to get the name, - -00:12:49.740 --> 00:12:54.290 line:100% position:50% align:middle -the price, the status from that fish, and -then we overwrite the actual value that - -00:12:54.290 --> 00:12:59.380 line:100% position:50% align:middle -got changed there, so e.target.value. -We then pass that up to our update - -00:12:59.380 --> 00:13:04.230 line:100% position:50% align:middle -fish function which lives on our app.js. -Let's take a look here. - -00:13:04.230 --> 00:13:11.120 line:100% position:50% align:middle -Update fish. Update fish. That's a little -hot tip. Sublime text hit command R and - -00:13:11.120 --> 00:13:14.330 line:100% position:50% align:middle -just type update fish and you can go right -to the actual function. - -00:13:14.330 --> 00:13:19.220 line:100% position:50% align:middle -That takes in the key as well as the -updated fish object. We take a copy of all - -00:13:19.220 --> 00:13:24.070 line:100% position:50% align:middle -of the fishes, which we always do when we -update our state. We overwrite that one - -00:13:24.070 --> 00:13:28.510 line:100% position:50% align:middle -updated fish with our new updated fish -object. Finally we set state, - -00:13:28.510 --> 00:13:35.180 line:100% position:50% align:middle -which in turn is going to update our type -box. That's like four steps to update a - -00:13:35.180 --> 00:13:39.350 line:100% position:50% align:middle -box. That may seem like, "Wow! That was -like one line in JQuery and this seems - -00:13:39.350 --> 00:13:43.570 line:100% position:50% align:middle -like a lot of work," but once your apps -get more complicated, you're really going - -00:13:43.570 --> 00:13:48.710 line:100% position:50% align:middle -to love just having your state in one -place and not having to worry about having - -00:13:48.710 --> 00:13:52.450 line:100% position:50% align:middle -a bunch of balls in the air. Let's go and -update the rest of them. So we just take - -00:13:52.450 --> 00:14:00.730 line:100% position:50% align:middle -this onchange handler, and you can just -pop it on all of the rest of your inputs. - -00:14:00.730 --> 00:14:08.260 line:100% position:50% align:middle -Input onselect, on textarea, and on our -description here. I'm going to paste that - -00:14:08.260 --> 00:14:13.680 line:100% position:50% align:middle -in. Then it should finally stop yelling at -us for not having an onchange handler - -00:14:13.680 --> 00:14:18.550 line:100% position:50% align:middle -when we use value. Good, we don't see it -anymore. Then any time I change something - -00:14:18.550 --> 00:14:22.480 line:100% position:50% align:middle -that's related to how much this costs, if -I change it from fresh to sold out, - -00:14:22.480 --> 00:14:27.870 line:100% position:50% align:middle -it should automatically update. If I -change the description, "This is cool." - -00:14:27.870 --> 00:14:32.240 line:100% position:50% align:middle -Good. I just want to double check that -it's also working in our Firebase console - -00:14:32.240 --> 00:14:39.830 line:100% position:50% align:middle -here. We are on the store called Drab Drab -Tomato. Open that up. - -00:14:39.830 --> 00:14:44.950 line:100% position:50% align:middle -Going to go into fishes. Going to go into -fish one. Cool Pacific Halibut. - -00:14:44.950 --> 00:14:51.900 line:100% position:50% align:middle -Bring this sucker over here. When I change -Cool Pacific Halibut to Lovely, - -00:14:51.900 --> 00:14:57.870 line:100% position:50% align:middle -it's updating everywhere. Ha! Isn't this -amazing? One state, just sort of like - -00:14:57.870 --> 00:15:01.000 line:100% position:50% align:middle -propagates wherever else -you wish to have it. +WEBVTT + +1 +00:00:02.422 --> 00:00:05.005 +(bright music) + +2 +00:00:06.173 --> 00:00:08.250 +Next up we need to work + +3 +00:00:08.250 --> 00:00:09.910 +on this inventory part here + +4 +00:00:09.910 --> 00:00:12.780 +where I'd be able to edit the price of a fish + +5 +00:00:12.780 --> 00:00:15.690 +and it can sync to Firebase and all that good stuff. + +6 +00:00:15.690 --> 00:00:20.690 +So we are going to open up our inventory.js + +7 +00:00:20.880 --> 00:00:23.990 +and we are going to create a new Component, + +8 +00:00:23.990 --> 00:00:25.460 +not called AddFishForm, + +9 +00:00:25.460 --> 00:00:27.330 +but EditFishForm. + +10 +00:00:28.338 --> 00:00:30.140 +So we'll go into our Components folder, + +11 +00:00:30.140 --> 00:00:34.890 +we'll make a new file called EditFishForm.js. + +12 +00:00:34.890 --> 00:00:37.530 +And then we'll do our whole song and dance + +13 +00:00:37.530 --> 00:00:41.832 +of import React from React + +14 +00:00:41.832 --> 00:00:44.190 +and then I'm gonna go hyper speed. + +15 +00:00:46.650 --> 00:00:48.190 +Okay, so I've imported a React, + +16 +00:00:48.190 --> 00:00:50.040 +I've made a new class with a render method + +17 +00:00:50.040 --> 00:00:52.070 +and it just says edit fish in a paragraph tag + +18 +00:00:52.070 --> 00:00:55.120 +and I exported the default EditFishForm. + +19 +00:00:55.120 --> 00:00:57.180 +Then we'll go into our inventory + +20 +00:00:57.180 --> 00:01:00.641 +and we wanna loop over all of our different fish. + +21 +00:01:00.641 --> 00:01:01.810 +First question, + +22 +00:01:01.810 --> 00:01:04.450 +do we even have our fish in the inventory Component? + +23 +00:01:04.450 --> 00:01:05.300 +Let's double check that. + +24 +00:01:05.300 --> 00:01:06.840 +So I'll go to our app, + +25 +00:01:06.840 --> 00:01:09.630 +let's open up our React dev tools + +26 +00:01:09.630 --> 00:01:11.510 +and we'll search for inventory. + +27 +00:01:12.470 --> 00:01:13.520 +And nope, + +28 +00:01:13.520 --> 00:01:16.310 +there's only add fish and load sample fish functions. + +29 +00:01:16.310 --> 00:01:20.020 +So we'll go back into our app Component here + +30 +00:01:20.020 --> 00:01:22.380 +and we'll find where we did this + +31 +00:01:22.380 --> 00:01:27.380 +and we'll just say fish is equal to this.state.fishes. + +32 +00:01:27.970 --> 00:01:28.803 +Good. + +33 +00:01:28.803 --> 00:01:30.390 +Then we'll go back into our inventory Component, + +34 +00:01:30.390 --> 00:01:33.490 +we will import our EditFishForm + +35 +00:01:34.698 --> 00:01:37.680 +and then we'll go right above our AddFishForm + +36 +00:01:37.680 --> 00:01:41.200 +and say this.props.fishes.map. + +37 +00:01:41.200 --> 00:01:43.720 +And for each fish we are going to + +38 +00:01:43.720 --> 00:01:48.680 +render out a EditFishForm tag. + +39 +00:01:48.680 --> 00:01:49.939 +So what does that give us? + +40 +00:01:49.939 --> 00:01:52.520 +A big old error. + +41 +00:01:52.520 --> 00:01:53.682 +So what happened here? + +42 +00:01:53.682 --> 00:01:57.098 +Cannot read property map of undefined. + +43 +00:01:57.098 --> 00:02:00.210 +Oh, that's because this.props.fishes + +44 +00:02:00.210 --> 00:02:01.540 +is gonna be an object. + +45 +00:02:01.540 --> 00:02:05.220 +So we'll say object.keys, + +46 +00:02:05.220 --> 00:02:07.019 +this.props.fishes.maps. + +47 +00:02:07.019 --> 00:02:10.330 +So we'll turn that into an array before we map over it. + +48 +00:02:10.330 --> 00:02:12.270 +And what else have we got here? + +49 +00:02:12.270 --> 00:02:14.900 +Cannot convert null or undefined to an object. + +50 +00:02:14.900 --> 00:02:17.060 +So I'll show you how I debug this as well. + +51 +00:02:17.060 --> 00:02:19.850 +Take that line off that's causing us an issue + +52 +00:02:19.850 --> 00:02:21.750 +and we'll look at our inventory. + +53 +00:02:21.750 --> 00:02:25.190 +And I passed it as fish, not fishes. + +54 +00:02:25.190 --> 00:02:26.741 +So I'll go back to our app, + +55 +00:02:26.741 --> 00:02:28.020 +fishes. + +56 +00:02:29.870 --> 00:02:31.024 +Good. + +57 +00:02:31.024 --> 00:02:32.210 +Probably screaming at me for minutes. + +58 +00:02:32.210 --> 00:02:33.043 +There we go. + +59 +00:02:33.043 --> 00:02:34.440 +So for every fish that we have, + +60 +00:02:34.440 --> 00:02:36.750 +we have this edit fish Component showing up. + +61 +00:02:36.750 --> 00:02:38.210 +So EditFishForm. + +62 +00:02:38.210 --> 00:02:39.400 +See we got (buzzing lips) + +63 +00:02:39.400 --> 00:02:41.435 +all these Component being rendered out. + +64 +00:02:41.435 --> 00:02:44.700 +Then instead of our edit fish we are going to + +65 +00:02:44.700 --> 00:02:48.800 +return a div with the class of fish edit. + +66 +00:02:48.800 --> 00:02:51.180 +So this doesn't need to be a form tag, + +67 +00:02:51.180 --> 00:02:53.130 +this can just be a regular old div. + +68 +00:02:53.130 --> 00:02:54.690 +And then inside of that I'm gonna do + +69 +00:02:54.690 --> 00:02:56.480 +a little bit more kung fu, + +70 +00:02:56.480 --> 00:02:57.640 +where we've got our name, + +71 +00:02:57.640 --> 00:02:59.330 +price, status, description. + +72 +00:02:59.330 --> 00:03:01.790 +And I'm going to make all of those + +73 +00:03:01.790 --> 00:03:06.790 +into an input with the type of text, + +74 +00:03:08.970 --> 00:03:11.840 +the name of and whatever that is. + +75 +00:03:11.840 --> 00:03:13.270 +So the name is important here + +76 +00:03:13.270 --> 00:03:15.220 +and I'll show you why in just a second. + +77 +00:03:20.448 --> 00:03:23.120 +So we've got a whole bunch of input boxes. + +78 +00:03:23.120 --> 00:03:26.780 +The status needs to be put into a select, + +79 +00:03:26.780 --> 00:03:28.640 +which I'll add that there. + +80 +00:03:28.640 --> 00:03:29.850 +Select. + +81 +00:03:29.850 --> 00:03:31.970 +And the options we can actually pull + +82 +00:03:31.970 --> 00:03:34.810 +the options right from our select here. + +83 +00:03:34.810 --> 00:03:35.940 +Beautiful. + +84 +00:03:35.940 --> 00:03:39.300 +And our description needs to be a text area. + +85 +00:03:47.348 --> 00:03:49.460 +Good, we've got a text area. + +86 +00:03:49.460 --> 00:03:51.050 +And our drop down, everything. + +87 +00:03:51.050 --> 00:03:56.050 +So now let's hook the values actually up to the fish. + +88 +00:03:56.200 --> 00:03:59.410 +So we don't actually have the individual fish + +89 +00:03:59.410 --> 00:04:01.780 +being passed down to our EditFishForm, + +90 +00:04:01.780 --> 00:04:04.020 +so we'll go back to our inventory. + +91 +00:04:04.020 --> 00:04:07.110 +And we have this fish here + +92 +00:04:07.110 --> 00:04:08.600 +and this is actually not a fish. + +93 +00:04:08.600 --> 00:04:09.900 +Let's change that to key + +94 +00:04:09.900 --> 00:04:12.370 +'cause that is just a key of the actual fish. + +95 +00:04:12.370 --> 00:04:14.544 +And then we'll pass the individual fish down + +96 +00:04:14.544 --> 00:04:18.040 +by saying this.props.fishes, + +97 +00:04:18.040 --> 00:04:20.183 +square bracket, key. + +98 +00:04:20.183 --> 00:04:23.450 +And if that worked, + +99 +00:04:24.530 --> 00:04:27.043 +let me search for our EditFishForm. + +100 +00:04:27.043 --> 00:04:27.876 +There we go. + +101 +00:04:27.876 --> 00:04:29.130 +See every single EditFishForm has + +102 +00:04:29.130 --> 00:04:33.830 +an individual description for each of the individual fishes. + +103 +00:04:33.830 --> 00:04:36.050 +So we can go back and we can set + +104 +00:04:36.050 --> 00:04:41.050 +the value of all these inputs to be the value from props. + +105 +00:04:41.170 --> 00:04:42.531 +So status, + +106 +00:04:42.531 --> 00:04:43.480 +name, + +107 +00:04:43.480 --> 00:04:44.380 +price, + +108 +00:04:44.380 --> 00:04:45.220 +description, + +109 +00:04:45.220 --> 00:04:46.300 +and image. + +110 +00:04:47.600 --> 00:04:52.600 +Say value is equal to this.props.fish. + +111 +00:04:52.950 --> 00:04:55.040 +Whatever the actual name is. + +112 +00:04:55.040 --> 00:04:56.520 +Now this is gonna yell at us + +113 +00:04:56.520 --> 00:04:58.100 +and we're not using default value + +114 +00:04:58.100 --> 00:04:59.580 +and I explain why in just a second. + +115 +00:04:59.580 --> 00:05:01.560 +But let's see how it works. + +116 +00:05:01.560 --> 00:05:02.393 +Beautiful. + +117 +00:05:02.393 --> 00:05:03.370 +Pacific halibut, + +118 +00:05:03.370 --> 00:05:04.203 +fresh. + +119 +00:05:04.203 --> 00:05:06.750 +You see that by default it switches this one to sold out, + +120 +00:05:06.750 --> 00:05:07.820 +which is great. + +121 +00:05:07.820 --> 00:05:09.530 +And there are some errors in the console, + +122 +00:05:09.530 --> 00:05:10.830 +so let's deal with them one by one. + +123 +00:05:10.830 --> 00:05:11.700 +Each child in an array, + +124 +00:05:11.700 --> 00:05:13.250 +oh we always get this one. + +125 +00:05:13.250 --> 00:05:17.090 +So let's go to inventory and we're looping over + +126 +00:05:17.090 --> 00:05:19.260 +and returning a fish for each one. + +127 +00:05:19.260 --> 00:05:22.410 +So we need to say key is equal to key + +128 +00:05:22.410 --> 00:05:25.390 +so that each EditFishForm is unique. + +129 +00:05:25.390 --> 00:05:26.550 +Does that get rid of that one? + +130 +00:05:26.550 --> 00:05:27.383 +Yep. + +131 +00:05:27.383 --> 00:05:28.490 +Now this one. + +132 +00:05:28.490 --> 00:05:30.490 +Warning, failed prop type. + +133 +00:05:30.490 --> 00:05:33.410 +You provided a value prop on a form field + +134 +00:05:33.410 --> 00:05:35.820 +without an onChange handler. + +135 +00:05:35.820 --> 00:05:37.490 +This will render a read-only field. + +136 +00:05:37.490 --> 00:05:39.124 +So try typing one of these. + +137 +00:05:39.124 --> 00:05:40.480 +Nothing. + +138 +00:05:40.480 --> 00:05:41.530 +Nothing happens. + +139 +00:05:41.530 --> 00:05:44.860 +And that's because React doesn't like it + +140 +00:05:44.860 --> 00:05:48.260 +when you put state into an editable area + +141 +00:05:48.260 --> 00:05:50.970 +without you having a plan for updating it. + +142 +00:05:50.970 --> 00:05:51.803 +Why? + +143 +00:05:51.803 --> 00:05:54.104 +Because as soon as you put state into a text box, + +144 +00:05:54.104 --> 00:05:57.330 +now all of a sudden you've got state in two spots. + +145 +00:05:57.330 --> 00:05:59.110 +You've got state in your actual state + +146 +00:05:59.110 --> 00:06:01.170 +and you have state in a text box. + +147 +00:06:01.170 --> 00:06:05.240 +And now it's all spread across two different areas + +148 +00:06:05.240 --> 00:06:07.440 +and that can get out of hand real quickly. + +149 +00:06:07.440 --> 00:06:11.063 +So what React does is rather than you + +150 +00:06:11.063 --> 00:06:13.470 +typing into an input box, + +151 +00:06:13.470 --> 00:06:17.670 +what it does is it will intercept the event that you create. + +152 +00:06:17.670 --> 00:06:20.780 +I'm gonna type the X key into the pacific halibut. + +153 +00:06:20.780 --> 00:06:21.900 +Bam, hit it. + +154 +00:06:21.900 --> 00:06:23.784 +What it will do is immediately backspace it + +155 +00:06:23.784 --> 00:06:25.560 +and be like no, no, no, + +156 +00:06:25.560 --> 00:06:28.640 +you must put it into state if you want that to change. + +157 +00:06:28.640 --> 00:06:31.300 +So what we would have to do is go to our app, + +158 +00:06:31.300 --> 00:06:32.540 +go to our fishes, + +159 +00:06:32.540 --> 00:06:35.560 +go to this first one and change it + +160 +00:06:35.560 --> 00:06:37.360 +and put Xs in it. + +161 +00:06:37.360 --> 00:06:39.100 +And that will of course update it. + +162 +00:06:39.100 --> 00:06:41.290 +But if we want to be able to type into here, + +163 +00:06:41.290 --> 00:06:44.030 +we need to listen for an OnChange event. + +164 +00:06:44.030 --> 00:06:45.870 +So that's exactly what we're gonna be doing. + +165 +00:06:45.870 --> 00:06:48.302 +Back to our EditFishForm. + +166 +00:06:48.302 --> 00:06:52.270 +On each of these values that we have here, + +167 +00:06:52.270 --> 00:06:57.070 +so just gonna go to select all my values. + +168 +00:06:58.850 --> 00:07:02.170 +And I'm gonna say OnChange is equal to + +169 +00:07:03.060 --> 00:07:04.990 +this.handlechange. + +170 +00:07:07.070 --> 00:07:08.100 +Then we're gonna, + +171 +00:07:08.100 --> 00:07:09.540 +oh nice formatting there. + +172 +00:07:09.540 --> 00:07:11.250 +I guess as soon as you hit for it'll + +173 +00:07:11.250 --> 00:07:12.910 +bring it onto its own line. + +174 +00:07:12.910 --> 00:07:14.230 +Then up here we're going to make + +175 +00:07:14.230 --> 00:07:18.040 +a handle change method of our own. + +176 +00:07:19.040 --> 00:07:21.800 +And that method is going to take in the event. + +177 +00:07:21.800 --> 00:07:24.810 +And then we're just gonna console log the event + +178 +00:07:24.810 --> 00:07:27.620 +and that's good enough for now. + +179 +00:07:27.620 --> 00:07:30.724 +So as soon as I put my cursor in here and type an X, + +180 +00:07:30.724 --> 00:07:34.100 +the console is gonna console log this proxy + +181 +00:07:34.100 --> 00:07:36.380 +which is this is the actual event that's happening. + +182 +00:07:36.380 --> 00:07:37.270 +See? + +183 +00:07:37.270 --> 00:07:40.330 +It's running the event every single time. + +184 +00:07:40.330 --> 00:07:41.900 +And on that event there's something + +185 +00:07:41.900 --> 00:07:44.420 +called event.currenttarget. + +186 +00:07:44.420 --> 00:07:45.900 +And the current target is the thing + +187 +00:07:45.900 --> 00:07:48.010 +that the event got fired on. + +188 +00:07:48.010 --> 00:07:50.810 +So that should give us the actual input box. + +189 +00:07:50.810 --> 00:07:52.060 +There we go. + +190 +00:07:52.060 --> 00:07:54.240 +See how this is a bit of a different way + +191 +00:07:54.240 --> 00:07:56.160 +to do it versus refs? + +192 +00:07:56.160 --> 00:07:58.190 +We can just grab the event.target + +193 +00:07:58.190 --> 00:08:01.630 +and then we can grab the event.target.value out of it. + +194 +00:08:02.950 --> 00:08:05.150 +And if I put an X on the end here, + +195 +00:08:05.150 --> 00:08:07.060 +you see how it's console logging + +196 +00:08:07.060 --> 00:08:09.030 +whatever it is that I'm trying to type, + +197 +00:08:09.030 --> 00:08:10.930 +but it's not updating the text box? + +198 +00:08:10.930 --> 00:08:12.690 +'cause React is like nuh uh uh, + +199 +00:08:12.690 --> 00:08:14.360 +it's not in state. + +200 +00:08:14.360 --> 00:08:18.560 +So what we need to do is create an updated fish object + +201 +00:08:18.560 --> 00:08:23.030 +and then somehow swim upstream (chuckles) + +202 +00:08:23.030 --> 00:08:25.780 +from EditFishForm to inventory, + +203 +00:08:25.780 --> 00:08:27.640 +and then from inventory to app. + +204 +00:08:27.640 --> 00:08:32.120 +We need to get that updated fish back into our state. + +205 +00:08:32.120 --> 00:08:32.953 +Okay, okay. + +206 +00:08:32.953 --> 00:08:35.360 +So let's first go here. + +207 +00:08:35.360 --> 00:08:38.250 +Let's say update that fish. + +208 +00:08:38.250 --> 00:08:40.079 +So first thing we're gonna do is one, + +209 +00:08:40.079 --> 00:08:43.910 +take a copy of the current fish. + +210 +00:08:44.750 --> 00:08:47.230 +So say const updated fish + +211 +00:08:47.230 --> 00:08:50.290 +is equal to dot, dot, dot, + +212 +00:08:50.290 --> 00:08:54.290 +this.props.fish. + +213 +00:08:54.290 --> 00:08:56.350 +And let's just console log the updated fish, + +214 +00:08:56.350 --> 00:08:58.410 +see what we're working with here. + +215 +00:09:00.270 --> 00:09:01.940 +So we've got the updated fish, + +216 +00:09:01.940 --> 00:09:02.930 +we've got the description, + +217 +00:09:02.930 --> 00:09:03.890 +pacific halibut, + +218 +00:09:03.890 --> 00:09:05.730 +but I'm putting an X on the end of this. + +219 +00:09:05.730 --> 00:09:09.010 +So what we need to do is we need to update the name, right? + +220 +00:09:09.010 --> 00:09:11.830 +So what you can do is go here + +221 +00:09:11.830 --> 00:09:13.510 +and let's put this object on its own line + +222 +00:09:13.510 --> 00:09:14.960 +so it looks a little nicer. + +223 +00:09:16.549 --> 00:09:18.600 +And ideally what would happen is we would + +224 +00:09:18.600 --> 00:09:23.600 +update the name to be event.currenttarget.value. + +225 +00:09:24.980 --> 00:09:26.661 +So give that a save. + +226 +00:09:26.661 --> 00:09:29.780 +And now if I put an X on the end, + +227 +00:09:29.780 --> 00:09:34.420 +our new updated fish has an X on the end. + +228 +00:09:34.420 --> 00:09:37.339 +But what if wanna change the price? + +229 +00:09:37.339 --> 00:09:39.290 +If I put a two in front of it + +230 +00:09:39.290 --> 00:09:40.310 +you see it doesn't work. + +231 +00:09:40.310 --> 00:09:41.180 +Why? + +232 +00:09:41.180 --> 00:09:43.680 +Well that's because it doesn't know + +233 +00:09:43.680 --> 00:09:45.980 +which property to actually update. + +234 +00:09:45.980 --> 00:09:48.510 +So what we can do is this is a new thing in ES6, + +235 +00:09:48.510 --> 00:09:50.440 +it's called computed property names, + +236 +00:09:50.440 --> 00:09:52.920 +where we essentially want the value + +237 +00:09:52.920 --> 00:09:55.750 +that's being updated to also be dynamic. + +238 +00:09:55.750 --> 00:09:58.490 +And the way that you can do that is with square brackets. + +239 +00:09:58.490 --> 00:10:01.620 +And this is why I told you to put a name on there, + +240 +00:10:02.460 --> 00:10:04.250 +let me take this and comment that out for a sec, + +241 +00:10:04.250 --> 00:10:08.940 +if we console log event.currenttarget.name, + +242 +00:10:11.049 --> 00:10:14.980 +then it will tell us that the name was updated, + +243 +00:10:14.980 --> 00:10:16.460 +the price was updated, + +244 +00:10:17.610 --> 00:10:18.870 +the status was updated, + +245 +00:10:18.870 --> 00:10:19.930 +the description was updated, + +246 +00:10:19.930 --> 00:10:21.600 +and the image was updated. + +247 +00:10:21.600 --> 00:10:24.640 +So we can figure out what got changed + +248 +00:10:24.640 --> 00:10:27.731 +just by using the event.currenttarget.name + +249 +00:10:27.731 --> 00:10:31.540 +and setting it to the event.currenttarget.value. + +250 +00:10:31.540 --> 00:10:32.373 +So that's really nice. + +251 +00:10:32.373 --> 00:10:34.560 +We just take a copy of the current fish + +252 +00:10:34.560 --> 00:10:36.920 +and then overwrite the one thing that changed. + +253 +00:10:36.920 --> 00:10:37.830 +And I really like this, + +254 +00:10:37.830 --> 00:10:39.730 +because sometimes I see people making + +255 +00:10:39.730 --> 00:10:41.470 +like handle name change, + +256 +00:10:41.470 --> 00:10:42.970 +handle description change, + +257 +00:10:42.970 --> 00:10:43.810 +handle status change, + +258 +00:10:43.810 --> 00:10:45.850 +you make a new method for every single field + +259 +00:10:45.850 --> 00:10:47.240 +and that's not really maintainable + +260 +00:10:47.240 --> 00:10:50.080 +because you're doing all kinds of stuff there. + +261 +00:10:50.080 --> 00:10:52.215 +So if this worked, + +262 +00:10:52.215 --> 00:10:53.685 +I should be able to, + +263 +00:10:53.685 --> 00:10:56.440 +oh man, how does JavaScript work? + +264 +00:10:56.440 --> 00:10:57.605 +I forgot a comma. + +265 +00:10:57.605 --> 00:10:58.770 +There we go. + +266 +00:11:00.010 --> 00:11:02.450 +If this works I should be able to change the halibut. + +267 +00:11:02.450 --> 00:11:03.283 +Good. + +268 +00:11:03.283 --> 00:11:04.230 +And it still doesn't show there + +269 +00:11:04.230 --> 00:11:05.390 +'cause we haven't updated state, + +270 +00:11:05.390 --> 00:11:07.390 +but I see that there's an X there. + +271 +00:11:07.390 --> 00:11:10.140 +And now if I put a nine on the end of the price, + +272 +00:11:10.140 --> 00:11:13.180 +the new updated fish shows me a nine. + +273 +00:11:13.180 --> 00:11:14.510 +Good. + +274 +00:11:14.510 --> 00:11:16.390 +So now the question is how do I + +275 +00:11:16.390 --> 00:11:19.370 +get this updated fish to swim upstream? + +276 +00:11:19.370 --> 00:11:21.090 +So what we're gonna do is we're gonna go back + +277 +00:11:21.090 --> 00:11:24.890 +to where our state is and that is our app Component. + +278 +00:11:24.890 --> 00:11:27.090 +We're going to right below addFish, + +279 +00:11:27.090 --> 00:11:29.665 +we're gonna make an updateFish property + +280 +00:11:29.665 --> 00:11:33.040 +and that method is going to take in a key, + +281 +00:11:33.040 --> 00:11:34.564 +which is which fish is getting updated + +282 +00:11:34.564 --> 00:11:37.780 +and a updated fish. + +283 +00:11:37.780 --> 00:11:39.731 +And what that will do is it will simply + +284 +00:11:39.731 --> 00:11:42.840 +take a copy of the current fish. + +285 +00:11:42.840 --> 00:11:46.850 +one, take a copy of the current state. + +286 +00:11:47.865 --> 00:11:52.865 +Const, fishes equals this.state.fishes + +287 +00:11:54.690 --> 00:11:56.700 +'cause it's not props 'cause we are actually + +288 +00:11:56.700 --> 00:12:00.130 +in the Component where the state is living. + +289 +00:12:00.130 --> 00:12:01.680 +And then two, + +290 +00:12:01.680 --> 00:12:04.360 +update that state. + +291 +00:12:05.750 --> 00:12:08.490 +And we can just say fishes, + +292 +00:12:08.490 --> 00:12:09.660 +square bracket, + +293 +00:12:09.660 --> 00:12:13.430 +key, is equal to updated fish. + +294 +00:12:13.430 --> 00:12:14.710 +We could also use the computed + +295 +00:12:14.710 --> 00:12:16.651 +property value there if you like. + +296 +00:12:16.651 --> 00:12:18.620 +And then three, + +297 +00:12:18.620 --> 00:12:21.280 +set that to state. + +298 +00:12:21.280 --> 00:12:26.160 +This.setstate, fishes. + +299 +00:12:26.160 --> 00:12:31.160 +Fishes or hot shot just fishes will work there. + +300 +00:12:31.430 --> 00:12:33.450 +Oh, a couple mistakes there. + +301 +00:12:36.550 --> 00:12:37.640 +Beautiful. + +302 +00:12:37.640 --> 00:12:39.720 +Okay, now we have this update fish function + +303 +00:12:39.720 --> 00:12:42.710 +that should take in a key and an updated fish. + +304 +00:12:42.710 --> 00:12:46.270 +We'll go down to our inventory and pass it. + +305 +00:12:46.270 --> 00:12:48.030 +So instead of passing addFish + +306 +00:12:48.030 --> 00:12:49.820 +or in addition to passing addFish, + +307 +00:12:49.820 --> 00:12:52.190 +we'll pass updateFish. + +308 +00:12:52.190 --> 00:12:53.776 +Then we'll go into our inventory + +309 +00:12:53.776 --> 00:12:57.670 +and we need to pass it one step further via props. + +310 +00:12:57.670 --> 00:13:00.020 +So we'll go in here, + +311 +00:13:00.020 --> 00:13:05.020 +say updateFish is equal to this.props.updateFish. + +312 +00:13:05.990 --> 00:13:07.500 +Beautiful. + +313 +00:13:07.500 --> 00:13:11.560 +And then we'll go into our EditFishForm + +314 +00:13:11.560 --> 00:13:16.560 +and we should be able to say this.props.updateFish + +315 +00:13:19.522 --> 00:13:22.880 +and it takes the key and it takes the updated fish. + +316 +00:13:22.880 --> 00:13:24.330 +So we actually have a variable + +317 +00:13:24.330 --> 00:13:25.560 +called updatedFish so that's good. + +318 +00:13:25.560 --> 00:13:27.113 +We'll put that in there, + +319 +00:13:27.113 --> 00:13:29.406 +but where do we get the key from? + +320 +00:13:29.406 --> 00:13:30.600 +Well again, + +321 +00:13:30.600 --> 00:13:32.030 +we've run into this problem where we don't + +322 +00:13:32.030 --> 00:13:33.740 +actually know what the key is, + +323 +00:13:33.740 --> 00:13:37.870 +because we haven't yet passed it into this Component. + +324 +00:13:37.870 --> 00:13:38.703 +I'll show you. + +325 +00:13:38.703 --> 00:13:40.090 +Let's go to React, + +326 +00:13:40.090 --> 00:13:42.440 +let's look for EditFishForm. + +327 +00:13:42.440 --> 00:13:44.630 +And we do see the key right here, + +328 +00:13:44.630 --> 00:13:46.700 +but remember that we can't access the key + +329 +00:13:46.700 --> 00:13:48.440 +when we're inside of a Component. + +330 +00:13:48.440 --> 00:13:50.163 +So if we need that for whatever reason, + +331 +00:13:50.163 --> 00:13:53.020 +we need to pass it down ourselves. + +332 +00:13:53.020 --> 00:13:55.432 +So let's go back to inventory + +333 +00:13:55.432 --> 00:13:57.520 +and we'll call this key + +334 +00:13:57.520 --> 00:14:01.030 +and we'll pass down as index as well. + +335 +00:14:01.030 --> 00:14:02.040 +So here, + +336 +00:14:02.040 --> 00:14:03.420 +say this, + +337 +00:14:03.420 --> 00:14:07.200 +we'll remove that key and say this.props.index. + +338 +00:14:09.130 --> 00:14:12.220 +So let's go through exactly what's happening there + +339 +00:14:12.220 --> 00:14:13.720 +'cause I know that was a lot. + +340 +00:14:13.720 --> 00:14:14.560 +First of all, + +341 +00:14:14.560 --> 00:14:19.560 +we have an input where the value is set to our fish name + +342 +00:14:20.510 --> 00:14:24.600 +and that in turn is living in state. + +343 +00:14:24.600 --> 00:14:27.850 +Then when something changes on that input, + +344 +00:14:27.850 --> 00:14:30.190 +we call this function called handleChange. + +345 +00:14:30.190 --> 00:14:32.420 +React will then automatically + +346 +00:14:32.420 --> 00:14:34.573 +backspace that change that we did, + +347 +00:14:34.573 --> 00:14:37.540 +but we can get the value of what + +348 +00:14:37.540 --> 00:14:42.380 +the person had hoped to type in event.currenttarget.value + +349 +00:14:42.380 --> 00:14:46.250 +and we can take that value and update our fish + +350 +00:14:46.250 --> 00:14:48.990 +by using the event.currenttarget.value + +351 +00:14:48.990 --> 00:14:50.970 +and we can only update the one field + +352 +00:14:50.970 --> 00:14:54.530 +that got updated by using the input's name. + +353 +00:14:54.530 --> 00:14:55.520 +And then finally, + +354 +00:14:55.520 --> 00:14:59.430 +we send all of those changes upstream to our app Component, + +355 +00:14:59.430 --> 00:15:01.316 +because that's where our state lives + +356 +00:15:01.316 --> 00:15:04.010 +with the updateFish functions. + +357 +00:15:04.010 --> 00:15:05.972 +So let's see if it actually works. + +358 +00:15:05.972 --> 00:15:07.980 +Put an X on it. + +359 +00:15:07.980 --> 00:15:09.230 +Of course it doesn't. + +360 +00:15:09.230 --> 00:15:10.210 +Of course it doesn't. + +361 +00:15:10.210 --> 00:15:11.043 +Type error, + +362 +00:15:11.043 --> 00:15:12.600 +this.props.updatedfih. + +363 +00:15:15.369 --> 00:15:16.700 +There's no D there. + +364 +00:15:16.700 --> 00:15:17.533 +There we go. + +365 +00:15:17.533 --> 00:15:20.388 +Should that do it? + +366 +00:15:20.388 --> 00:15:23.224 +(cheers) It seems to be working. + +367 +00:15:23.224 --> 00:15:25.650 +Atlantic halibut. + +368 +00:15:26.980 --> 00:15:27.850 +Beautiful. + +369 +00:15:27.850 --> 00:15:29.360 +And also if you check your Firebase + +370 +00:15:29.360 --> 00:15:31.610 +you should see it also working there. + +371 +00:15:31.610 --> 00:15:34.050 +You can also change the price of your value + +372 +00:15:34.050 --> 00:15:35.140 +and it is updated. + +373 +00:15:35.140 --> 00:15:36.550 +And this is the beauty of React + +374 +00:15:36.550 --> 00:15:39.360 +is that anywhere your values are used, + +375 +00:15:39.360 --> 00:15:42.407 +you can simply just pull in the values + +376 +00:15:42.407 --> 00:15:45.770 +and update the variables down there. + +377 +00:15:45.770 --> 00:15:48.670 +So that is being able to sync our data + +378 +00:15:48.670 --> 00:15:51.190 +and that is generally how you wanna handle + +379 +00:15:51.190 --> 00:15:54.720 +inputs where your state will live in an input. + diff --git a/RFB/21 - Removing Items from State.vtt b/RFB/21 - Removing Items from State.vtt index 2e3aafa..807deea 100755 --- a/RFB/21 - Removing Items from State.vtt +++ b/RFB/21 - Removing Items from State.vtt @@ -1,371 +1,722 @@ -WEBVTT - -00:00:00.000 --> 00:00:02.771 line:100% position:50% align:middle -♪ [music] ♪ - -00:00:07.150 --> 00:00:09.775 line:100% position:50% align:middle -If you've ever worked on other -applications before, you may have heard - -00:00:09.775 --> 00:00:13.845 line:100% position:50% align:middle -the term, or know the term CRUD. -Now, what CRUD means is Create, Read, - -00:00:13.990 --> 00:00:18.150 line:100% position:50% align:middle -Update, and Delete. Now, we've done -create, which is we can create a new fish - -00:00:18.150 --> 00:00:24.540 line:100% position:50% align:middle -in this box here. We can read them into -our state right here. We can update them, - -00:00:24.540 --> 00:00:25.520 line:100% position:50% align:middle -that's what we did here. - -00:00:25.520 --> 00:00:29.650 line:100% position:50% align:middle -But really, the last piece is that -deleting. How do you actually remove one - -00:00:29.650 --> 00:00:33.310 line:100% position:50% align:middle -of these items from our state? -We don't have a way to do that. - -00:00:33.310 --> 00:00:38.833 line:100% position:50% align:middle -So let's go to our App.js. And you know -how we have addFish and updateFish. - -00:00:38.833 --> 00:00:45.375 line:100% position:50% align:middle -We just need to create a third one called -removeFish. And that will take in a key, - -00:00:45.375 --> 00:00:51.986 line:100% position:50% align:middle -and it works the same way up to this, -but we want to delete the actual item - -00:00:51.986 --> 00:00:54.130 line:100% position:50% align:middle -instead of setting it to something. - -00:00:54.130 --> 00:00:56.884 line:100% position:50% align:middle -So we need to first take a -copy of our fishes, - -00:00:56.884 --> 00:01:03.251 line:100% position:50% align:middle -const fishes = ... ourselves -...this.state.fishes - -00:01:03.400 --> 00:01:07.670 line:100% position:50% align:middle -Again, we used 'this.' Hopefully, -that triggers you. We've got to go up to - -00:01:07.670 --> 00:01:15.523 line:100% position:50% align:middle -our constructor. I'm going to add -removeFish. Good. Back to removeFish. - -00:01:15.523 --> 00:01:19.710 line:100% position:50% align:middle -Now, I've got a copy of state. -Then we want to remove it. Now, - -00:01:19.710 --> 00:01:24.248 line:100% position:50% align:middle -you might think, okay, we run -delete fishes [key]; - -00:01:24.248 --> 00:01:27.136 line:100% position:50% align:middle -however because we are -hooked up to firebase, - -00:01:27.136 --> 00:01:31.485 line:100% position:50% align:middle -there's some weirdness around that. -Instead of running delete directly, - -00:01:31.485 --> 00:01:35.994 line:100% position:50% align:middle -which apparently doesn't work with -firebase, you need to explicitly set it to - -00:01:35.994 --> 00:01:40.167 line:100% position:50% align:middle -null. And then we need to update state. - -00:01:40.167 --> 00:01:44.075 line:100% position:50% align:middle -So this.setState and -we simply pass it, fishes. - -00:01:44.838 --> 00:01:50.760 line:100% position:50% align:middle -Good. Now, we should be able to delete -a fish. So we've got this Lovely Pacific - -00:01:50.760 --> 00:01:55.718 line:100% position:50% align:middle -Halibut, which is fish1. Let's try and -go and delete it. We're going to open - -00:01:55.718 --> 00:02:02.000 line:100% position:50% align:middle -our React devtools here. We are going to -find our App component. There we go. - -00:02:02.000 --> 00:02:11.143 line:100% position:50% align:middle -And we can run $r. removeFish, and we're -trying to remove fish-1. Didn't work. - -00:02:11.143 --> 00:02:12.842 line:100% position:50% align:middle -Let's see what happened. - -00:02:12.842 --> 00:02:18.086 line:100% position:50% align:middle -Go back to our React devtools. -Open up our... oh, it's not fish-1, - -00:02:18.086 --> 00:02:24.574 line:100% position:50% align:middle -it's just fish1. That's why. There we go. -Deleted fish1. There was a key there. - -00:02:24.574 --> 00:02:28.438 line:100% position:50% align:middle -It found it. It deleted it. You see our -inventory, as well as our lobster, - -00:02:28.438 --> 00:02:32.550 line:100% position:50% align:middle -and the fact that it was in our order, and -now it's gone. All of those things have - -00:02:32.550 --> 00:02:38.610 line:100% position:50% align:middle -updated where we just touch state once. -Good, but we actually want that to run on - -00:02:38.610 --> 00:02:44.810 line:100% position:50% align:middle -click. Again, we take that removeFish, -we are going to pass it to our inventory, - -00:02:44.810 --> 00:02:50.305 line:100% position:50% align:middle -and call it removeFish. Then I'm going to -open up our inventory component here. - -00:02:50.305 --> 00:02:56.610 line:100% position:50% align:middle -We're going to go into our div class of -fish-edit, and we'll put a button at the - -00:02:56.610 --> 00:03:01.154 line:100% position:50% align:middle -bottom here. Inside of it, we'll say -Remove Fish, and we'll add an onClick - -00:03:01.154 --> 00:03:08.853 line:100% position:50% align:middle -handler to that, will simply will run -this.props.removeFish and you pass it. - -00:03:08.853 --> 00:03:13.763 line:100% position:50% align:middle -We have this key value here, so we -can pass it to key here. That should work. - -00:03:15.854 --> 00:03:22.207 line:100% position:50% align:middle -Remove fish, bomb, done. Bam, bam, -bam, bam, bam, bam, bam, bam. - -00:03:22.207 --> 00:03:25.170 line:100% position:50% align:middle -Oh, they're all gone. We can load in some -more sample ones, and then continue to - -00:03:25.170 --> 00:03:30.888 line:100% position:50% align:middle -remove it. So again, we just created -a new method called removeFish, - -00:03:30.888 --> 00:03:35.108 line:100% position:50% align:middle -we passed it down to our inventory -and called that onClick. Now, - -00:03:35.108 --> 00:03:38.560 line:100% position:50% align:middle -how do we actually update our order as -well, because if I add something to my - -00:03:38.560 --> 00:03:42.621 line:100% position:50% align:middle -order here, I want to be able to delete -it? So let's look at how we do that. - -00:03:43.386 --> 00:03:48.220 line:100% position:50% align:middle -Removing from order is almost exactly the -same way, and maybe I'll challenge you. - -00:03:48.220 --> 00:03:52.522 line:100% position:50% align:middle -Just maybe pause this video and see -if you can write the method in App.js - -00:03:52.522 --> 00:03:56.660 line:100% position:50% align:middle -to remove from order and then hook up a -button in your inventory so that when you - -00:03:56.660 --> 00:04:00.813 line:100% position:50% align:middle -click it, it's going to remove it from -your order. So maybe if you're feeling - -00:04:00.813 --> 00:04:04.070 line:100% position:50% align:middle -comfortable with this right now, pause it, -try it, and then come back and see how - -00:04:04.070 --> 00:04:08.830 line:100% position:50% align:middle -we did it. Otherwise, come along for the -ride with me. So we are going to find our - -00:04:08.830 --> 00:04:15.890 line:100% position:50% align:middle -addToOrder method and right below that we -are going to add a removeFromOrder method - -00:04:15.890 --> 00:04:21.212 line:100% position:50% align:middle -and then inside of that, it is going to -take a key. Which one should we remove? - -00:04:21.212 --> 00:04:24.867 line:100% position:50% align:middle -Let's say const order = -we'll take a copy of the state - -00:04:24.867 --> 00:04:30.638 line:100% position:50% align:middle -this.state.order, and then we will -delete the actual one from our order. - -00:04:30.638 --> 00:04:34.694 line:100% position:50% align:middle -In this case, we can use delete because -we're not limited by firebase. - -00:04:34.694 --> 00:04:43.692 line:100% position:50% align:middle -We'll just say delete order[key]; and -then we will say this.setState({ order )} - -00:04:43.692 --> 00:04:48.037 line:100% position:50% align:middle -And again, we use 'this,' so we -have to go to the constructor here. - -00:04:48.037 --> 00:04:54.857 line:100% position:50% align:middle -And well, I like to keep them together. -addToOrder and removeFromOrder. - -00:04:54.857 --> 00:05:00.766 line:100% position:50% align:middle -Good. Now, let's try it manually -ourselves. Open up React devtools. - -00:05:00.766 --> 00:05:09.000 line:100% position:50% align:middle -So I'm just going to go to an entirely new -store called wes. We're going to load - -00:05:09.000 --> 00:05:12.534 line:100% position:50% align:middle -in some sample fishes here. -I'm going to add fish1 to my order. - -00:05:12.534 --> 00:05:15.830 line:100% position:50% align:middle -I'm going to add fish2 to my order, -maybe a couple of times. Now, - -00:05:15.830 --> 00:05:20.910 line:100% position:50% align:middle -I'll go to React devtools and find our -App component, and then we'll try - -00:05:20.910 --> 00:05:28.891 line:100% position:50% align:middle -manually call it. -So $r.removeFromOrder('fish1') - -00:05:30.131 --> 00:05:35.236 line:100% position:50% align:middle -Beautiful. You see how it just immediately -did that? And if we check our application - -00:05:35.236 --> 00:05:40.730 line:100% position:50% align:middle -state, you should see that it's no longer -actually in our state. So again, - -00:05:40.730 --> 00:05:47.772 line:100% position:50% align:middle -if I add it back, fish1 is right there. -If I go to console and rerun it, - -00:05:49.327 --> 00:05:54.280 line:100% position:50% align:middle -it's deleted. Good. Now, let's hook it up -to a button. Same song and dance. - -00:05:54.280 --> 00:05:58.213 line:100% position:50% align:middle -Take the remove from order. -We're going to go to our order thing here - -00:05:58.213 --> 00:06:03.261 line:100% position:50% align:middle -and we're going to say -removeFromOrder=this.removeFromOrder - -00:06:03.261 --> 00:06:06.781 line:100% position:50% align:middle -Then we'll go into our -inventory component here. - -00:06:06.781 --> 00:06:11.000 line:100% position:50% align:middle -Oh, not our inventory. Our order -component. And we will find where we - -00:06:11.000 --> 00:06:15.206 line:100% position:50% align:middle -actually render out that order, and that -is right here. It's in renderOrder, - -00:06:15.206 --> 00:06:22.065 line:100% position:50% align:middle -and we're going to make a button that we -can put where ever we want because we need - -00:06:22.065 --> 00:06:26.390 line:100% position:50% align:middle -to have the Remove From Order -button right here, after Sorry, - -00:06:26.390 --> 00:06:30.921 line:100% position:50% align:middle -this fish is no longer available. And we -need to have that Remove From Order button - -00:06:30.921 --> 00:06:34.326 line:100% position:50% align:middle -right here, after someone actually -did add it to their order. - -00:06:34.326 --> 00:06:38.481 line:100% position:50% align:middle -So we'll make a remove button, -const removeButton - -00:06:38.481 --> 00:06:41.127 line:100% position:50% align:middle -And this is just going to be JSX. -We haven't done this yet, - -00:06:41.127 --> 00:06:43.230 line:100% position:50% align:middle -but you can store JSX in a variable, - -00:06:43.230 --> 00:06:47.330 line:100% position:50% align:middle -and then use that variable later, wherever -you wish. And then I'm just going to put - -00:06:47.330 --> 00:06:55.092 line:100% position:50% align:middle -× in it, that's just an X. And the -button we'll say onClick= run this. - -00:06:55.092 --> 00:07:02.177 line:100% position:50% align:middle -this.props.removeFromOrder -and we pass it the key, right? - -00:07:02.177 --> 00:07:06.094 line:100% position:50% align:middle -because we have this key value -available to us. Pass it in there. - -00:07:06.094 --> 00:07:12.590 line:100% position:50% align:middle -Good. Then we have this removeButton, -I'm going to put it beside my no longer - -00:07:12.590 --> 00:07:19.127 line:100% position:50% align:middle -available, and then I'm also going to -put it beside this fish count here. - -00:07:22.063 --> 00:07:25.506 line:100% position:50% align:middle -There we've got six pounds of -lobster. I can add it to my order. - -00:07:25.506 --> 00:07:28.186 line:100% position:50% align:middle -You see we've got this X button. -When I click it, does it work? - -00:07:28.652 --> 00:07:33.538 line:100% position:50% align:middle -Beautiful. It works nicely, and it's just -updating our actual order state. - -00:07:33.538 --> 00:07:36.130 line:100% position:50% align:middle -In a coming video, we're going to learn -about how we can animate those on - -00:07:36.130 --> 00:07:40.779 line:100% position:50% align:middle -in with React at CSS Animations, -but for now, that's working really nicely. - -00:07:40.779 --> 00:07:46.740 line:100% position:50% align:middle -What if we take lobster, and make it Sold -Out? Now we see it no longer available, - -00:07:46.740 --> 00:07:50.367 line:100% position:50% align:middle -but the X is still there, and I can -still actually remove it from my item. +WEBVTT + +1 +00:00:00.621 --> 00:00:03.288 +(playful music) + +2 +00:00:06.430 --> 00:00:07.660 +So, if you've ever heard + +3 +00:00:07.660 --> 00:00:10.130 +of the CRUD acronym before it stands + +4 +00:00:10.130 --> 00:00:12.030 +for create, read, update, and delete + +5 +00:00:12.030 --> 00:00:14.500 +and we've pretty much done all of that already. + +6 +00:00:14.500 --> 00:00:16.620 +We've have the ability to create a fish. + +7 +00:00:16.620 --> 00:00:17.910 +We have the ability to read a fish. + +8 +00:00:17.910 --> 00:00:19.480 +We're reading it into here. + +9 +00:00:19.480 --> 00:00:23.400 +We have the ability to update a fish by typing into here, + +10 +00:00:23.400 --> 00:00:26.330 +but we don't have the ability to delete any of our items. + +11 +00:00:26.330 --> 00:00:28.650 +So, in this video, we're gonna go over deleting items + +12 +00:00:28.650 --> 00:00:32.210 +from our inventory as well as deleting items from our order. + +13 +00:00:32.210 --> 00:00:34.790 +So, let's go ahead and open up App.js + +14 +00:00:34.790 --> 00:00:37.190 +'cause that's where our deleting is going to happen + +15 +00:00:37.190 --> 00:00:39.150 +and let's start with the actual + +16 +00:00:39.150 --> 00:00:41.550 +creating a delete fish function. + +17 +00:00:41.550 --> 00:00:44.420 +So, right below update fish, we'll say deleteFish + +18 +00:00:45.860 --> 00:00:47.740 +and that is going to take a key + +19 +00:00:47.740 --> 00:00:49.820 +for which fish we would like to delete + +20 +00:00:49.820 --> 00:00:53.500 +and from there it's pretty simple in what we're going to do. + +21 +00:00:53.500 --> 00:00:55.487 +So, first thing we're gonna do is, + +22 +00:00:55.487 --> 00:00:57.470 +one, and you're gonna get really good + +23 +00:00:57.470 --> 00:00:58.930 +at this whole updating state. + +24 +00:00:58.930 --> 00:01:01.090 +So, take a copy of state. + +25 +00:01:03.950 --> 00:01:07.491 +So, it's a const fishes is equal to + +26 +00:01:07.491 --> 00:01:10.480 +...this.state.fishes. + +27 +00:01:10.480 --> 00:01:13.130 +Then, we are going to, two, update the state. + +28 +00:01:13.130 --> 00:01:17.330 +In our case here, we are going to remove an item from state. + +29 +00:01:17.330 --> 00:01:20.762 +So, if this was an array, all I would do is, + +30 +00:01:20.762 --> 00:01:23.140 +I would just filter. + +31 +00:01:23.140 --> 00:01:24.370 +I would do something like this, + +32 +00:01:24.370 --> 00:01:25.280 +do it in one go. + +33 +00:01:25.280 --> 00:01:28.650 +I would just say, like, this.state.fishes.filter + +34 +00:01:28.650 --> 00:01:30.390 +and then just return the new, + +35 +00:01:30.390 --> 00:01:32.210 +the amount of fishes that I want. + +36 +00:01:32.210 --> 00:01:34.997 +But, because it's an object, we first take a copy of it + +37 +00:01:34.997 --> 00:01:38.140 +and then we are going to set the fish + +38 +00:01:38.140 --> 00:01:40.150 +that we don't want to null + +39 +00:01:40.150 --> 00:01:42.050 +and initially, I thought, like okay, + +40 +00:01:42.050 --> 00:01:45.411 +we just could delete, like, fishes.fish1. + +41 +00:01:45.411 --> 00:01:47.130 +However, there's a little bit of a weird thing + +42 +00:01:47.130 --> 00:01:49.240 +with Firebase where if you want Firebase + +43 +00:01:49.240 --> 00:01:51.930 +to also remove it, you have to set it to null. + +44 +00:01:51.930 --> 00:01:53.570 +So, what we're gonna do is we're gonna say + +45 +00:01:53.570 --> 00:01:55.430 +fishes[Key]. + +46 +00:01:55.430 --> 00:01:57.810 +So, it's like kind of like fishes.fish1, + +47 +00:01:57.810 --> 00:02:00.350 +fishes.fish2 is equal to null. + +48 +00:02:00.350 --> 00:02:03.340 +And then three, we're just going to update state. + +49 +00:02:03.340 --> 00:02:05.020 +So, this.setState + +50 +00:02:07.470 --> 00:02:09.310 +fishes. + +51 +00:02:09.310 --> 00:02:11.640 +It's kind of interesting that it's almost exactly the same + +52 +00:02:11.640 --> 00:02:13.520 +as our update fish except that + +53 +00:02:13.520 --> 00:02:15.840 +in this case we are just setting it to null + +54 +00:02:15.840 --> 00:02:18.840 +rather than updating and overriding a fish. + +55 +00:02:18.840 --> 00:02:20.191 +So, that's good. + +56 +00:02:20.191 --> 00:02:21.120 +Let's actually try to manually do it. + +57 +00:02:21.120 --> 00:02:23.920 +I'll go into our reactive tools. + +58 +00:02:23.920 --> 00:02:25.200 +We'll find app + +59 +00:02:26.860 --> 00:02:28.900 +and we will use a $R. + +60 +00:02:31.135 --> 00:02:34.879 +So, $R. + +61 +00:02:34.879 --> 00:02:35.980 +deleteFish, + +62 +00:02:35.980 --> 00:02:36.813 +there it is. + +63 +00:02:36.813 --> 00:02:38.510 +And, let's just try delete fish one. + +64 +00:02:39.470 --> 00:02:40.303 +Boom. + +65 +00:02:40.303 --> 00:02:41.136 +Removed it. + +66 +00:02:41.136 --> 00:02:41.969 +Let's try + +67 +00:02:43.090 --> 00:02:44.150 +delete, what is it, + +68 +00:02:44.150 --> 00:02:45.190 +fish two. + +69 +00:02:45.190 --> 00:02:47.778 +So, let's try delete fish two. + +70 +00:02:47.778 --> 00:02:48.910 +Boom. + +71 +00:02:48.910 --> 00:02:50.570 +Actually takes it, removes it + +72 +00:02:50.570 --> 00:02:52.576 +from the order entirely which is great. + +73 +00:02:52.576 --> 00:02:55.930 +And now we need to hook that up to a button, + +74 +00:02:55.930 --> 00:03:00.930 +so we're going to go to our edit fish form + +75 +00:03:01.570 --> 00:03:03.690 +and we're going to go all the way to the bottom + +76 +00:03:03.690 --> 00:03:07.750 +and just add a button here that says remove fish. + +77 +00:03:07.750 --> 00:03:08.720 +Good. + +78 +00:03:08.720 --> 00:03:12.757 +And, now we need to somehow get that delete fish function + +79 +00:03:12.757 --> 00:03:15.520 +to, downstream to the edit fish form + +80 +00:03:15.520 --> 00:03:17.030 +and it's gonna work exactly the same + +81 +00:03:17.030 --> 00:03:18.370 +as the rest of them did. + +82 +00:03:18.370 --> 00:03:19.560 +So, this is in our inventory. + +83 +00:03:19.560 --> 00:03:23.270 +We have add fish, update fish, and now we have delete fish. + +84 +00:03:26.280 --> 00:03:27.870 +And then we're gonna go into our inventory + +85 +00:03:27.870 --> 00:03:31.000 +and pass it down one more level deeper. + +86 +00:03:31.000 --> 00:03:32.580 +Delete fish. + +87 +00:03:33.430 --> 00:03:36.750 +And then, when somebody clicks it, we can go here. + +88 +00:03:36.750 --> 00:03:39.830 +We can say onClick equals + +89 +00:03:39.830 --> 00:03:42.587 +and now here's where you're like it's a bit + +90 +00:03:42.587 --> 00:03:44.310 +of a different than what we've had so far + +91 +00:03:44.310 --> 00:03:49.310 +like do we need to have a, another function right here + +92 +00:03:49.890 --> 00:03:51.440 +that we create that just deletes it + +93 +00:03:51.440 --> 00:03:52.700 +or can we do it in line + +94 +00:03:52.700 --> 00:03:54.380 +and the answer is that we can actually just do + +95 +00:03:54.380 --> 00:03:56.254 +an inline function here using an arrow + +96 +00:03:56.254 --> 00:03:59.360 +and we say this.props.deleteFish + +97 +00:04:01.960 --> 00:04:03.810 +and we'll pass it the key + +98 +00:04:03.810 --> 00:04:05.670 +and the key, where's the key? + +99 +00:04:06.540 --> 00:04:08.926 +The key is passed in, I believe, + +100 +00:04:08.926 --> 00:04:11.210 +let's look back. + +101 +00:04:11.210 --> 00:04:13.640 +Passing it in as an index so, + +102 +00:04:13.640 --> 00:04:16.730 +we'll say this.props.index. + +103 +00:04:18.210 --> 00:04:20.009 +Oh, does that work? + +104 +00:04:20.009 --> 00:04:21.170 +Boom. + +105 +00:04:21.170 --> 00:04:22.300 +Boom, boom, boom. + +106 +00:04:22.300 --> 00:04:23.350 +Boom, boom. + +107 +00:04:23.350 --> 00:04:24.819 +Remove it. + +108 +00:04:24.819 --> 00:04:25.917 +It could load a bunch more. + +109 +00:04:25.917 --> 00:04:26.750 +Boom, boom, boom, boom, boom, boom, boom. + +110 +00:04:26.750 --> 00:04:28.080 +Deleting it, really nice. + +111 +00:04:28.080 --> 00:04:32.530 +So, that's all it is to remove an item from state. + +112 +00:04:32.530 --> 00:04:36.126 +Now, we actually need to hook up a remove button + +113 +00:04:36.126 --> 00:04:38.943 +so that when we have something in our order + +114 +00:04:38.943 --> 00:04:41.150 +we're able to delete it. + +115 +00:04:41.150 --> 00:04:42.560 +So, I wanna challenge you right now. + +116 +00:04:42.560 --> 00:04:44.350 +Maybe pause the video and try + +117 +00:04:44.350 --> 00:04:46.210 +to do this little piece on your own + +118 +00:04:46.210 --> 00:04:49.021 +because it's almost exactly the same as deleting the fish, + +119 +00:04:49.021 --> 00:04:51.490 +but we are going to create another method + +120 +00:04:51.490 --> 00:04:53.210 +that deletes something from order. + +121 +00:04:53.210 --> 00:04:55.040 +So, if you feel like you're comfortable enough + +122 +00:04:55.040 --> 00:04:56.670 +with this stuff right now, go ahead and pause it + +123 +00:04:56.670 --> 00:04:57.600 +and try it yourself. + +124 +00:04:57.600 --> 00:04:59.770 +Otherwise, let's go along for the ride. + +125 +00:04:59.770 --> 00:05:01.370 +So, I'm gonna go back to App.js. + +126 +00:05:03.550 --> 00:05:05.530 +And, right below add to order, + +127 +00:05:05.530 --> 00:05:08.060 +we're going to make a removeFromOrder + +128 +00:05:09.017 --> 00:05:10.960 +and that's going to take in a key. + +129 +00:05:12.300 --> 00:05:14.840 +And, we're simply going to (laughs), + +130 +00:05:14.840 --> 00:05:16.097 +let's just copy this. + +131 +00:05:16.097 --> 00:05:17.928 +It's super simple. + +132 +00:05:17.928 --> 00:05:19.540 +Very much the same. + +133 +00:05:19.540 --> 00:05:22.250 +So take a copy of state, either add to, + +134 +00:05:22.250 --> 00:05:23.083 +or I would change that one. + +135 +00:05:23.083 --> 00:05:26.100 +So, it would say remove that item from order. + +136 +00:05:27.890 --> 00:05:30.840 +And, in this case, we simply say order key is equal + +137 +00:05:30.840 --> 00:05:33.740 +to null, or, sorry, actually that's wrong + +138 +00:05:33.740 --> 00:05:36.340 +because in this case since we're not mirroring + +139 +00:05:36.340 --> 00:05:38.750 +to Firebase, we can use delete. + +140 +00:05:38.750 --> 00:05:40.379 +And we can delete the order key. + +141 +00:05:40.379 --> 00:05:45.379 +And then, finally, we reinstate it back into state. + +142 +00:05:45.630 --> 00:05:46.910 +So, that's good. + +143 +00:05:46.910 --> 00:05:51.020 +Let's add some lobster which we know is fish two + +144 +00:05:51.020 --> 00:05:54.150 +and let's try to manually call that ourselves. + +145 +00:05:54.150 --> 00:05:55.010 +Go to react, + +146 +00:05:56.150 --> 00:05:58.470 +under App, click on it. + +147 +00:05:58.470 --> 00:05:59.600 +Now, let's see. + +148 +00:05:59.600 --> 00:06:00.550 +$r.removeFromOrder, + +149 +00:06:02.117 --> 00:06:02.950 +fish2, + +150 +00:06:04.560 --> 00:06:05.393 +boom. + +151 +00:06:05.393 --> 00:06:06.530 +It removed it from order. + +152 +00:06:06.530 --> 00:06:09.510 +Didn't touch it in any other ones that we have. + +153 +00:06:09.510 --> 00:06:10.343 +Good. + +154 +00:06:10.343 --> 00:06:12.480 +So, we can take this remove from order, + +155 +00:06:12.480 --> 00:06:14.420 +pass it down to our order, + +156 +00:06:15.620 --> 00:06:18.100 +removeFromOrder is equal to + +157 +00:06:18.100 --> 00:06:20.900 +this.removeFromOrder. + +158 +00:06:20.900 --> 00:06:21.733 +Good. + +159 +00:06:21.733 --> 00:06:23.560 +And we'll go to our order component, + +160 +00:06:23.560 --> 00:06:25.770 +is we're going to put a button + +161 +00:06:26.750 --> 00:06:27.870 +that has, + +162 +00:06:28.980 --> 00:06:32.350 +I always like to use the &times, + +163 +00:06:32.350 --> 00:06:33.370 +say onClick, + +164 +00:06:34.760 --> 00:06:35.593 +equals, + +165 +00:06:37.610 --> 00:06:40.560 +and we can do just a little arrow function here, + +166 +00:06:40.560 --> 00:06:45.560 +this.props.removeFromOrder and pass the key. + +167 +00:06:46.340 --> 00:06:47.173 +Good. + +168 +00:06:47.173 --> 00:06:48.395 +Go back here. + +169 +00:06:48.395 --> 00:06:49.392 +Now, when you hover over top, + +170 +00:06:49.392 --> 00:06:50.420 +you should see these little X buttons + +171 +00:06:50.420 --> 00:06:51.253 +and you click on it. + +172 +00:06:51.253 --> 00:06:54.340 +It should remove that specific item from the order + +173 +00:06:54.340 --> 00:06:56.759 +and our order state will then be updated. + +174 +00:06:56.759 --> 00:06:57.680 +Great. + +175 +00:06:57.680 --> 00:06:58.610 +In the next video, we're gonna learn + +176 +00:06:58.610 --> 00:07:01.220 +about how we can actually animate these things + +177 +00:07:01.220 --> 00:07:03.200 +so that when you add them to your order + +178 +00:07:03.200 --> 00:07:05.130 +and when you increment the number + +179 +00:07:05.130 --> 00:07:06.530 +and when you remove them from the order + +180 +00:07:06.530 --> 00:07:08.930 +we all get this nice UI interface. + diff --git a/RFB/22 - Animating React Components.vtt b/RFB/22 - Animating React Components.vtt index c140d76..b1405b2 100755 --- a/RFB/22 - Animating React Components.vtt +++ b/RFB/22 - Animating React Components.vtt @@ -1,956 +1,2014 @@ -WEBVTT - -00:00:00.300 --> 00:00:03.300 line:100% position:50% align:middle -♪[music]♪ - -00:00:06.900 --> 00:00:10.880 line:100% position:50% align:middle -- Now let's learn about animation in -React. And this is really nice because - -00:00:10.880 --> 00:00:14.090 line:100% position:50% align:middle -you can just take your existing -application and start to add some really - -00:00:14.090 --> 00:00:18.530 line:100% position:50% align:middle -nice interactive features into it. So -there's three animations really on this - -00:00:18.530 --> 00:00:22.580 line:100% position:50% align:middle -website. First is like this like cheesy -fold button where it folds itself out like - -00:00:22.580 --> 00:00:26.840 line:100% position:50% align:middle -an actual menu. That actually has nothing -to do with React, it's simply just a...if - -00:00:26.840 --> 00:00:34.110 line:100% position:50% align:middle -you look on your index.html, index.html, -there is just a fold checkbox here. - -00:00:34.110 --> 00:00:39.110 line:100% position:50% align:middle -And when that fold checkbox is checked, -if you go into style.style. - -00:00:39.110 --> 00:00:42.810 line:100% position:50% align:middle -By the way, this style, I never said it -earlier, but this is just like SASS or - -00:00:42.810 --> 00:00:46.300 line:100% position:50% align:middle -LESS, or if you've used any other -pre-processor, the really the only - -00:00:46.300 --> 00:00:51.470 line:100% position:50% align:middle -difference is that there's no semi-colons -or colons. Either hate it or you love it, - -00:00:51.470 --> 00:00:55.996 line:100% position:50% align:middle -if you like to put semi-colons and colons -in curly the brackets, you can, but I - -00:00:55.996 --> 00:00:59.414 line:100% position:50% align:middle -prefer to leave them off. So what I'm -doing here is I'm just using some - -00:00:59.414 --> 00:01:04.370 line:100% position:50% align:middle -rotation, rotateY, so that when it's -checked, it's going to rotate itself, - -00:01:04.370 --> 00:01:06.840 line:100% position:50% align:middle -when it's not checked, it's going to -rotate itself on out. - -00:01:06.840 --> 00:01:13.690 line:100% position:50% align:middle -So that's the rotation here, and then when -the input is not checked, - -00:01:13.690 --> 00:01:17.350 line:100% position:50% align:middle -I just take all the transforms off, which -is the flat state. So a little bit cheesy - -00:01:17.350 --> 00:01:21.170 line:100% position:50% align:middle -but kind of fun to take a look at a couple -times if you're a little bit overwhelmed - -00:01:21.170 --> 00:01:28.320 line:100% position:50% align:middle -with some of the state stuff. Then what we -want to do is we are going to be editing - -00:01:28.320 --> 00:01:32.320 line:100% position:50% align:middle -our CSS here and we need to recompile that -CSS every single time. - -00:01:32.320 --> 00:01:37.300 line:100% position:50% align:middle -And if you open up your package.json, -we've just been running NPM start, - -00:01:37.300 --> 00:01:42.230 line:100% position:50% align:middle -which NPM start will run the script -'start' and that will run our web pack and - -00:01:42.230 --> 00:01:44.490 line:100% position:50% align:middle -everything like that. - -00:01:44.490 --> 00:01:50.140 line:100% position:50% align:middle -However, we also need to run one for our -styles as well. So I have a script called - -00:01:50.140 --> 00:01:55.650 line:100% position:50% align:middle -styles here, and that will just run our -style list against...and I'll put it every - -00:01:55.650 --> 00:01:59.810 line:100% position:50% align:middle -single time that it changes. And that's -what this one is, the styles watch, - -00:01:59.810 --> 00:02:04.995 line:100% position:50% align:middle -there's a -w in there. However, I want to -run NPM run start and NPM run styles - -00:02:05.490 --> 00:02:09.556 line:100% position:50% align:middle -watch. And that's two separate NPM scripts -and I what I see a lot of people do is - -00:02:09.556 --> 00:02:14.852 line:100% position:50% align:middle -they just open up two tabs and run both -of them. And that works well but I'm using - -00:02:14.893 --> 00:02:17.040 line:100% position:50% align:middle -a third package here called concurrently. - -00:02:17.040 --> 00:02:22.550 line:100% position:50% align:middle -And what that's going to do is it's going -to run NPM script start and NPM script - -00:02:22.550 --> 00:02:26.800 line:100% position:50% align:middle -styles watch, it's going to run them at -the exact same time. And if one of them - -00:02:26.800 --> 00:02:31.480 line:100% position:50% align:middle -breaks, it's going to kill the other one. -So what we need to do is head back to our - -00:02:31.480 --> 00:02:37.970 line:100% position:50% align:middle -terminal here and we're going to kill it -with Control C. You're going to run NPM - -00:02:37.970 --> 00:02:44.417 line:100% position:50% align:middle -run watch. It's going to start that up for -me, and there we go. It should then open - -00:02:44.417 --> 00:02:51.940 line:100% position:50% align:middle -it up in your browser and it'll refresh, -and I'll load in sample fishes, add them - -00:02:51.940 --> 00:02:55.718 line:100% position:50% align:middle -to my order.Good, so everything is still -working. But if you go back to your - -00:02:55.718 --> 00:03:00.491 line:100% position:50% align:middle -terminal, you'll see that some of them are -from web pack and then if I were to open - -00:03:00.491 --> 00:03:06.130 line:100% position:50% align:middle -up my style.style and make some sort of -change, like background red, - -00:03:06.130 --> 00:03:13.890 line:100% position:50% align:middle -it's going to automatically compile my -SASS and re-kick everything up for me. So - -00:03:13.890 --> 00:03:17.380 line:100% position:50% align:middle -I'm in good shape there, you can close -that down, again, not something you will - -00:03:17.380 --> 00:03:21.900 line:100% position:50% align:middle -need to open up too often unless you have -an error in your style list and you'll see - -00:03:21.900 --> 00:03:23.888 line:100% position:50% align:middle -the error in your console there. - -00:03:23.940 --> 00:03:29.230 line:100% position:50% align:middle -Next up, what we want to do is open up -animations.style. This is where we're - -00:03:29.230 --> 00:03:32.470 line:100% position:50% align:middle -actually going to be writing all of our -animation code. There's nothing in there - -00:03:32.470 --> 00:03:38.120 line:100% position:50% align:middle -yet, but we'll be writing it all inside of -here. And then we want to open up order.js - -00:03:38.120 --> 00:03:46.320 line:100% position:50% align:middle -because I want to animate in this -right here, where it animates in. - -00:03:46.320 --> 00:03:51.070 line:100% position:50% align:middle -When you click X, it's going to animate -itself on out. And then also when we click - -00:03:51.070 --> 00:03:55.221 line:100% position:50% align:middle -five, six, seven, eight, I want that -number to move up and have the next - -00:03:55.221 --> 00:03:59.620 line:100% position:50% align:middle -number replace it. We're going to do -two nice animations there. - -00:03:59.620 --> 00:04:05.570 line:100% position:50% align:middle -So how we do that is you go to the top of -your order.js, we need to import our CSS - -00:04:05.570 --> 00:04:10.910 line:100% position:50% align:middle -TransitionGroup component. So that comes -from import CSS TransitionGroup from...and - -00:04:10.910 --> 00:04:14.540 line:100% position:50% align:middle -this is a separate package, you don't -import it from React. It used to be part - -00:04:14.540 --> 00:04:17.334 line:100% position:50% align:middle -of React core. -However, what they have been doing - -00:04:17.334 --> 00:04:19.768 line:100% position:50% align:middle -with some of the stuff -that not everybody uses. - -00:04:19.900 --> 00:04:22.190 line:100% position:50% align:middle -Like not everybody is going to do -animation in the React app, - -00:04:22.190 --> 00:04:26.950 line:100% position:50% align:middle -the React is still maintaining them as -first class citizens, but they are in - -00:04:26.950 --> 00:04:34.190 line:100% position:50% align:middle -their own packages. So it's -react-dd-ons-css-transition-group. - -00:04:34.190 --> 00:04:35.290 line:100% position:50% align:middle -That's a long one. - -00:04:35.290 --> 00:04:41.350 line:100% position:50% align:middle -Then we've got the CSS TransitionGroup -component. I want you to head down to our - -00:04:41.350 --> 00:04:46.880 line:100% position:50% align:middle -render function. And where we have this -unordered LESS, let me give you some space - -00:04:46.880 --> 00:04:49.129 line:100% position:50% align:middle -here. We have this ul, -the class of order, - -00:04:49.129 --> 00:04:53.980 line:100% position:50% align:middle -I want you to replace -that unordered list with CSS - -00:04:53.980 --> 00:04:58.600 line:100% position:50% align:middle -TransitionGroup. Now, we still want that -to be unordered list when it kicks it out - -00:04:58.600 --> 00:05:05.440 line:100% position:50% align:middle -to HTML. So what we can do is we give it -the property of component equals ul. - -00:05:05.440 --> 00:05:08.390 line:100% position:50% align:middle -So it's still going to kick out on -unordered list. The other things we - -00:05:08.390 --> 00:05:13.000 line:100% position:50% align:middle -need, our transition name is going to be -order, and that's going to be important in - -00:05:13.000 --> 00:05:14.880 line:100% position:50% align:middle -our CSS class naming. - -00:05:14.880 --> 00:05:18.670 line:100% position:50% align:middle -We're going to have transition enter -timeout equals and that's the number here, - -00:05:18.670 --> 00:05:23.430 line:100% position:50% align:middle -so we'll use curly brackets. We want that -animation to be 500 seconds in and then we - -00:05:23.430 --> 00:05:30.600 line:100% position:50% align:middle -also need to provide a transition leave -time out, and that's going to also be 500 - -00:05:30.600 --> 00:05:36.790 line:100% position:50% align:middle -milliseconds, half a second, good. So if I -look at it now, this should still be an - -00:05:36.790 --> 00:05:42.640 line:100% position:50% align:middle -unordered list. Yes, it is. But if I were -to look at that unordered list in my React - -00:05:42.640 --> 00:05:48.270 line:100% position:50% align:middle -dev tools, you see that it's a React -TransitionGroup right here. - -00:05:48.270 --> 00:05:52.330 line:100% position:50% align:middle -And then when I add something to it, it -should still update it, - -00:05:52.330 --> 00:05:55.920 line:100% position:50% align:middle -it should still add a new item, and it -should still remove that item. - -00:05:55.920 --> 00:06:00.950 line:100% position:50% align:middle -You'll notice that, "Oh, look, there's a -bit of a delay there," and I'll show you - -00:06:00.950 --> 00:06:02.250 line:100% position:50% align:middle -why in just a second. - -00:06:02.250 --> 00:06:08.420 line:100% position:50% align:middle -So that is our CSS TransitionGroup. Now, -if you inspect one of these, add a whole - -00:06:08.420 --> 00:06:14.140 line:100% position:50% align:middle -bunch of stuff to your actual order. And I -want to change this 500. - -00:06:14.140 --> 00:06:20.270 line:100% position:50% align:middle -Let's change this to 5,000, that is 5 -seconds. And then I want you to go and - -00:06:20.270 --> 00:06:25.120 line:100% position:50% align:middle -inspect one of these list items, not in -the React dev tool, just in the regular - -00:06:25.120 --> 00:06:30.720 line:100% position:50% align:middle -elements panel here. And when I remove -one, watch the class names on the list - -00:06:30.720 --> 00:06:38.870 line:100% position:50% align:middle -items. Order-leave, order-leave active and -then after five seconds it removes both of - -00:06:38.870 --> 00:06:39.580 line:100% position:50% align:middle -those classes. - -00:06:39.580 --> 00:06:45.370 line:100% position:50% align:middle -And what's happening here, and watch we'll -add a new one, jumble prawns. - -00:06:45.370 --> 00:06:51.560 line:100% position:50% align:middle -And watch the list item down here. -Order-enter, order-enter-active. - -00:06:51.560 --> 00:06:55.860 line:100% position:50% align:middle -And then after five seconds it will -remove those classes. So what's happening - -00:06:55.860 --> 00:07:02.350 line:100% position:50% align:middle -here is that React is giving us some -classes which we can then hook into with - -00:07:02.350 --> 00:07:09.270 line:100% position:50% align:middle -our CSS. So if we go into our -animations.style and we create a class - -00:07:09.270 --> 00:07:15.110 line:100% position:50% align:middle -called order-enter and -order-enter-active, and I'm going to - -00:07:15.110 --> 00:07:24.050 line:100% position:50% align:middle -give this a background of red and this one -is going to have a background yellow. - -00:07:24.050 --> 00:07:28.220 line:100% position:50% align:middle -Not that refreshed. We don't have to -refresh because the CSS should be - -00:07:28.220 --> 00:07:29.190 line:100% position:50% align:middle -refreshed for us. - -00:07:29.190 --> 00:07:33.830 line:100% position:50% align:middle -When I add a new one to our order, it -takes five seconds that will remove it - -00:07:33.830 --> 00:07:38.710 line:100% position:50% align:middle -now. So when I add mussels, see yellow, -yellow, yellow, yellow, - -00:07:38.710 --> 00:07:43.060 line:100% position:50% align:middle -yellow, and then after five seconds it's -going to be nothing. - -00:07:43.060 --> 00:07:47.100 line:100% position:50% align:middle -And what's happening here is that it adds -a class of order-enter and then almost - -00:07:47.100 --> 00:07:51.310 line:100% position:50% align:middle -immediately after it adds a class of -order-enter-active Now, if you've ever - -00:07:51.310 --> 00:07:58.140 line:100% position:50% align:middle -done any CSS transitions, you'll know that -CSS needs an A point and a B point. - -00:07:58.140 --> 00:08:04.630 line:100% position:50% align:middle -So in order for us to transition from -something like red to yellow, - -00:08:04.630 --> 00:08:11.480 line:100% position:50% align:middle -we can pop A transition all 0.5 seconds. -And then what's going to happen is - -00:08:11.480 --> 00:08:17.440 line:100% position:50% align:middle -immediately it's going to have a class of -red on it. And then over five seconds, - -00:08:17.440 --> 00:08:20.866 line:100% position:50% align:middle -it's going to transition it to yellow, -watch. - -00:08:24.175 --> 00:08:26.790 line:100% position:50% align:middle -Hope that will just update it, so I'm -going to remove a couple of these, - -00:08:26.790 --> 00:08:30.630 line:100% position:50% align:middle -they take their five seconds to remove. -We'll talk about that in a second. - -00:08:30.630 --> 00:08:34.050 line:100% position:50% align:middle -There we go. Add a lobster. It's -immediately red and then it will - -00:08:34.050 --> 00:08:39.650 line:100% position:50% align:middle -transition itself to 0.5. So we need an A -point, which is order-enter, and - -00:08:39.650 --> 00:08:44.210 line:100% position:50% align:middle -order-enter-active is our B point, and -it's going to go the opposite way when - -00:08:44.210 --> 00:08:49.160 line:100% position:50% align:middle -we remove it. So what do we need to add -here? We have a transition of all 0.5 - -00:08:49.160 --> 00:08:57.590 line:100% position:50% align:middle -seconds. We are going to put a -transform: translateX(-120%). - -00:08:57.590 --> 00:09:03.040 line:100% position:50% align:middle -And what that will do, is it's going to -put it off screen by default. - -00:09:03.040 --> 00:09:05.770 line:100% position:50% align:middle -It's going to take this unordered list and -we're going to say, - -00:09:05.770 --> 00:09:09.580 line:100% position:50% align:middle -transform:translateX(-100%). - -00:09:09.580 --> 00:09:17.670 line:100% position:50% align:middle -And what I just did there, is I put it off -screen. But if I bump those values up... - -00:09:17.670 --> 00:09:21.600 line:100% position:50% align:middle -Here it comes, that's what's going to -happen, is it's just going to animate - -00:09:21.600 --> 00:09:27.720 line:100% position:50% align:middle -itself on in over that half second. So -that's why we do translateX(-120%). - -00:09:27.800 --> 00:09:36.730 line:100% position:50% align:middle -We give it a max-height of zero and -that's just for some animation stuff. - -00:09:36.730 --> 00:09:41.060 line:100% position:50% align:middle -And a padding of zero in...and we've got a -pop an important tag on there. - -00:09:41.060 --> 00:09:46.120 line:100% position:50% align:middle -Just because of some CSS that I've done in -style, where we have a default and I need - -00:09:46.120 --> 00:09:48.150 line:100% position:50% align:middle -to make sure that we're overwriting that. - -00:09:48.150 --> 00:09:56.220 line:100% position:50% align:middle -Then the active spot is going to be a -max-height of 60 px, and that's why we did - -00:09:56.220 --> 00:09:59.280 line:100% position:50% align:middle -a max-height here so we'll be able to -animate from nothing to 60 px. - -00:09:59.280 --> 00:10:04.560 line:100% position:50% align:middle -We'll do a padding of 2em zero and pop -an important tip there. - -00:10:04.560 --> 00:10:08.330 line:100% position:50% align:middle -Finally, we need to bring it back to its -regular state, so we're going to transform - -00:10:08.330 --> 00:10:13.680 line:100% position:50% align:middle -it. translateX(0), right, because it's -going to start at negative 100. - -00:10:13.680 --> 00:10:17.710 line:100% position:50% align:middle -It's going to start off screen, and then -it will translate it to zero, which is the - -00:10:17.710 --> 00:10:21.270 line:100% position:50% align:middle -ending point. And then eventually both of -these classes will be ticked, - -00:10:21.270 --> 00:10:27.400 line:100% position:50% align:middle -will be gone, and whatever styling is in -our style.style is going to kick in from - -00:10:27.400 --> 00:10:29.250 line:100% position:50% align:middle -there. So give that a save. - -00:10:29.250 --> 00:10:35.440 line:100% position:50% align:middle -Now I try to add some lobster, mahi-mahi, -you see it's moving in. - -00:10:35.440 --> 00:10:39.690 line:100% position:50% align:middle -We can get rid of those classes. I just -wanted to show you how that works from - -00:10:39.690 --> 00:10:43.050 line:100% position:50% align:middle -Red. It's easy to visualize it when you -have that. And then the other thing that - -00:10:43.050 --> 00:10:50.230 line:100% position:50% align:middle -we can do is that we are still taking 5 -seconds, not 500 milliseconds. - -00:10:50.230 --> 00:10:56.030 line:100% position:50% align:middle -So let's move those back to the five -seconds and we should be good to go. - -00:10:56.030 --> 00:10:59.510 line:100% position:50% align:middle -We should be able to remove them, they'll -still take half a second to remove. - -00:10:59.510 --> 00:11:02.510 line:100% position:50% align:middle -Try to add them in again, good. - -00:11:02.510 --> 00:11:06.630 line:100% position:50% align:middle -And you can do anything you could possibly -want with that, you can go crazy. - -00:11:06.630 --> 00:11:16.450 line:100% position:50% align:middle -So I use translate but you can set like a -rotate(0). And then we want to rotate(45) - -00:11:16.450 --> 00:11:28.800 line:100% position:50% align:middle -degrees, let's try that. Or you can do -450 degrees and you want to start - -00:11:28.800 --> 00:11:34.880 line:100% position:50% align:middle -it...actually, you should probably rotate -to 0 and from 1,000 degrees so that - -00:11:34.880 --> 00:11:37.750 line:100% position:50% align:middle -it'll just spin into place like it's -Batman or something like that. - -00:11:37.750 --> 00:11:46.525 line:100% position:50% align:middle -So let me remove these, that's kind of -fun. You can do all kinds crazy stuff with - -00:11:46.525 --> 00:11:49.330 line:100% position:50% align:middle -it but don't make your users vomit -or anything like that. - -00:11:49.330 --> 00:11:53.720 line:100% position:50% align:middle -I'm going to leave mine at translateX and -we're going to look at how do we do the - -00:11:53.720 --> 00:11:58.460 line:100% position:50% align:middle -other way, which is order-leave. Because -you'll notice that when I remove one of - -00:11:58.460 --> 00:12:02.480 line:100% position:50% align:middle -these, it says, "Order-leave and -order-leave-active." So we're going to - -00:12:02.480 --> 00:12:07.320 line:100% position:50% align:middle -give ourselves two more classes. -And when the order is leaving, - -00:12:07.320 --> 00:12:13.150 line:100% position:50% align:middle -we are going to transition all 0.5s, that -you should make sure that that 5 seconds, - -00:12:13.150 --> 00:12:19.610 line:100% position:50% align:middle -or half a second, lines up with whatever -you have right here. And we also want to - -00:12:19.610 --> 00:12:25.140 line:100% position:50% align:middle -transform... We want to start it at -translateX(0), so we want to...the - -00:12:25.140 --> 00:12:28.130 line:100% position:50% align:middle -starting point is just -going to be where it is. - -00:12:28.130 --> 00:12:33.620 line:100% position:50% align:middle -And then the active state is going to be -go to the right. So we're going to say, - -00:12:33.620 --> 00:12:42.240 line:100% position:50% align:middle -transform: translateX(120%). We get a -max-height of zero. We're pretty much - -00:12:42.240 --> 00:12:46.560 line:100% position:50% align:middle -doing the opposite of what we did earlier, -padding is going to be zero. - -00:12:46.560 --> 00:12:52.270 line:100% position:50% align:middle -And that should do it. So I'm going to -remove them, yes. Nice little animation - -00:12:52.270 --> 00:12:57.808 line:100% position:50% align:middle -out. We are transitioning on the -translateX value, the height value as well - -00:12:57.808 --> 00:13:01.450 line:100% position:50% align:middle -as the padding. And if you're wondering -why I'm using max-height and not height, - -00:13:01.450 --> 00:13:07.120 line:100% position:50% align:middle -it's because you cannot transition from -auto height, which is what they are, to a - -00:13:07.120 --> 00:13:10.850 line:100% position:50% align:middle -fixed height, you need to use max-height. -It's a bit of a trick that we do there. - -00:13:10.850 --> 00:13:16.140 line:100% position:50% align:middle -So that is those elements, now let's work -on the secondary animation that we have - -00:13:16.140 --> 00:13:19.830 line:100% position:50% align:middle -here, which is a little bit different, -and we're going to animate this number. - -00:13:19.830 --> 00:13:26.407 line:100% position:50% align:middle -When we add more mussels, the three should -go up and the four should come in from - -00:13:26.407 --> 00:13:31.065 line:100% position:50% align:middle -underneath it. To work with the count, -this is the value that we are going to be - -00:13:31.065 --> 00:13:33.236 line:100% position:50% align:middle -animating. And in order -for it to actually work, - -00:13:33.236 --> 00:13:36.740 line:100% position:50% align:middle -we need multiple ones -of that actual value. - -00:13:36.740 --> 00:13:40.590 line:100% position:50% align:middle -So a couple things we need to do here, -first, put these spans that you have - -00:13:40.590 --> 00:13:44.370 line:100% position:50% align:middle -wrapped around everything, put them on -their own line. Second, - -00:13:44.370 --> 00:13:50.310 line:100% position:50% align:middle -put the LBS fish name and remove button, -put them on their own line. - -00:13:50.310 --> 00:13:56.490 line:100% position:50% align:middle -And then we need to take this count here -and wrap it in a CSS TransitionGroups. - -00:13:56.490 --> 00:14:02.190 line:100% position:50% align:middle -So I'm just going to take the name here, -CSS TransitionGroup, we'll put the count - -00:14:02.190 --> 00:14:07.500 line:100% position:50% align:middle -inside of that. And then finally, we need -to wrap this in another span, and I'm - -00:14:07.500 --> 00:14:11.890 line:100% position:50% align:middle -show you why in just a second. I'm not -crazy, wrap it in a span. - -00:14:11.890 --> 00:14:18.230 line:100% position:50% align:middle -And that span needs to have a key which is -of count. And the reason it's count is - -00:14:18.230 --> 00:14:22.420 line:100% position:50% align:middle -because every time you have a key of two -elements that are beside each other, - -00:14:22.420 --> 00:14:26.100 line:100% position:50% align:middle -they need to have a unique key and they -have to be different than each other. - -00:14:26.100 --> 00:14:29.820 line:100% position:50% align:middle -And the reason is, is if we're going to -have a span with like a five in it, and - -00:14:29.900 --> 00:14:33.710 line:100% position:50% align:middle -then when we increment that by one, we're -going to have a span with a six in it. - -00:14:33.710 --> 00:14:38.570 line:100% position:50% align:middle -And what React is going to do, is it's -going to duplicate the first five span and - -00:14:38.570 --> 00:14:42.600 line:100% position:50% align:middle -update it with the six. But it's not going -to get rid of the original span right - -00:14:42.600 --> 00:14:46.280 line:100% position:50% align:middle -away, it's going to give us 250 -milliseconds, half a second, however long - -00:14:46.280 --> 00:14:52.250 line:100% position:50% align:middle -we ask it to, to animate 5 up and then we -animate 5 into the spot where it was, - -00:14:52.250 --> 00:14:56.620 line:100% position:50% align:middle -right. So that's why we need to have a key -in here is so that React will know which - -00:14:56.620 --> 00:15:01.740 line:100% position:50% align:middle -one to add a class of leaving and which -one to add a class of entering or - -00:15:01.740 --> 00:15:07.060 line:100% position:50% align:middle -order-active...or order-active-leave and -order-active-enter. So that's why we have - -00:15:07.060 --> 00:15:07.650 line:100% position:50% align:middle -that there. - -00:15:07.650 --> 00:15:11.780 line:100% position:50% align:middle -Our TransitionGroup needs a couple more -things, we first need the component, which - -00:15:11.780 --> 00:15:17.730 line:100% position:50% align:middle -is going to be a span in itself. We need a -class name, which is going to be count. - -00:15:17.730 --> 00:15:24.030 line:100% position:50% align:middle -We need a transition name on it, it's -going to be count. And then we need a - -00:15:24.030 --> 00:15:31.300 line:100% position:50% align:middle -transition enter timeout and that is going -to be equal to 250 milliseconds. - -00:15:31.300 --> 00:15:38.310 line:100% position:50% align:middle -And then we also want a leave time out. -Now, if that all worked, - -00:15:38.310 --> 00:15:41.910 line:100% position:50% align:middle -we should see not any animation yet, we've -not written in the CSS, - -00:15:41.910 --> 00:15:46.070 line:100% position:50% align:middle -but we should see this two being -duplicated for...just a second. - -00:15:46.200 --> 00:15:52.720 line:100% position:50% align:middle -So Pacific halibut, so three two, four two -five, four, etc. See how it's like - -00:15:52.720 --> 00:15:56.950 line:100% position:50% align:middle -duplicating it really quickly? We inspect -that and go to the span right here, - -00:15:56.950 --> 00:16:00.100 line:100% position:50% align:middle -I'll push the button, you keep your eyes -down here. And I click it, - -00:16:00.100 --> 00:16:07.600 line:100% position:50% align:middle -you see how it duplicated those values for -us? If we change this to maybe two and a - -00:16:07.600 --> 00:16:12.960 line:100% position:50% align:middle -half seconds, it'll slow down and we'll be -able to understand what's going on here. - -00:16:12.960 --> 00:16:19.810 line:100% position:50% align:middle -So we've got this span of 12. I'm going to -add it again. Thirteen, - -00:16:19.810 --> 00:16:26.050 line:100% position:50% align:middle -see enter-leave. I'll do it again. -Enter-active, leave-active. - -00:16:26.050 --> 00:16:30.460 line:100% position:50% align:middle -So we've got these two spans now because -React is smart enough to duplicate it for - -00:16:30.460 --> 00:16:36.840 line:100% position:50% align:middle -us. And then it's up to us to take that -first one or the one of the 15 and animate - -00:16:36.840 --> 00:16:41.740 line:100% position:50% align:middle -it up. And take the second one, which is a -16 and made it into the place where we had - -00:16:41.740 --> 00:16:41.870 line:100% position:50% align:middle -it. - -00:16:41.870 --> 00:16:47.510 line:100% position:50% align:middle -So we'll head back to our animations here -and we need a whole bunch of selector. - -00:16:47.510 --> 00:16:57.170 line:100% position:50% align:middle -We need a .count-enter and a -.count-enter-active. Here we're going to - -00:16:57.170 --> 00:17:02.140 line:100% position:50% align:middle -transition everything all over 2.5 -seconds. Let's do it really slowly and - -00:17:02.140 --> 00:17:08.680 line:100% position:50% align:middle -we'll move it back to 250 milliseconds. -transform: translateY. - -00:17:08.680 --> 00:17:12.750 line:100% position:50% align:middle -Because we're going to be going on up and -down axis, this time 100%. - -00:17:12.750 --> 00:17:17.380 line:100% position:50% align:middle -So we're going to start it just off the -screen when something is entering. - -00:17:17.380 --> 00:17:26.669 line:100% position:50% align:middle -So we're going to take this, I'm going to -say, transform: translateY(100%). - -00:17:27.179 --> 00:17:31.100 line:100% position:50% align:middle -What that does, see it's gone. You can't -see the four, but it's going to slowly - -00:17:31.100 --> 00:17:36.890 line:100% position:50% align:middle -bring us into the actual field. See, there -it is, that's what's going to happen and - -00:17:36.890 --> 00:17:40.360 line:100% position:50% align:middle -we're going to do the opposite. We're -going to do the opposite with the other - -00:17:40.360 --> 00:17:48.030 line:100% position:50% align:middle -one and made it up. So translateY(100), -start it off screen, and then when it's - -00:17:48.030 --> 00:17:55.030 line:100% position:50% align:middle -active, we're simply just going to -transform zero. That means just put it in - -00:17:55.030 --> 00:18:03.410 line:100% position:50% align:middle -its normal resting spot. All right, so -let's see what we've got here, - -00:18:03.410 --> 00:18:09.360 line:100% position:50% align:middle -we've still got this, transform on it. If -I add another one, you see what's - -00:18:09.360 --> 00:18:13.440 line:100% position:50% align:middle -happening? If I add a whole bunch of them, -they all animate themselves in on out. - -00:18:13.440 --> 00:18:18.880 line:100% position:50% align:middle -And then after two and a half seconds, the -old one will just remove itself. - -00:18:18.880 --> 00:18:21.780 line:100% position:50% align:middle -Because React wants to give us that two -and a half seconds, actually, - -00:18:21.780 --> 00:18:25.090 line:100% position:50% align:middle -animated out, and then behind the scenes -it's going to clean it up and actually - -00:18:25.090 --> 00:18:32.030 line:100% position:50% align:middle -delete that DOM element for us. So that's -when we need to have a count-leave and a - -00:18:32.030 --> 00:18:43.010 line:100% position:50% align:middle -count-leave-active. Then we are going to -say, "Transition all .5...we'll do, - -00:18:43.010 --> 00:18:48.450 line:100% position:50% align:middle -2.5 seconds. We're going to make it -position absolute because you'll notice - -00:18:48.450 --> 00:18:52.380 line:100% position:50% align:middle -that they're just going next to each other -right now and we need to have one of them - -00:18:52.380 --> 00:18:54.310 line:100% position:50% align:middle -overlap the other actual number. - -00:18:54.310 --> 00:19:01.224 line:100% position:50% align:middle -So position absolute, left, 0, bottom, 0 -and transform is going to be - -00:19:01.224 --> 00:19:09.150 line:100% position:50% align:middle -translateY(0). We're going to start it -where it is, right? Just we want to start - -00:19:09.150 --> 00:19:13.400 line:100% position:50% align:middle -it. If we're getting rid of four here, -when we add another one, we want to start - -00:19:13.400 --> 00:19:22.165 line:100% position:50% align:middle -it at 0 and we want to animate it up -100% -so we transform: translateY(100%). - -00:19:23.853 --> 00:19:28.830 line:100% position:50% align:middle -Okay, that was a lot of CSS, -but let's see if I when add it, - -00:19:28.830 --> 00:19:37.180 line:100% position:50% align:middle -pump that right up. You see what's -going on here, 34, 35, 36. - -00:19:37.180 --> 00:19:43.930 line:100% position:50% align:middle -One of them animates itself up, -the other one animates itself on in. - -00:19:43.930 --> 00:19:49.060 line:100% position:50% align:middle -So that's really long, we'll take that 2.5 -seconds and make it .25 seconds. - -00:19:49.060 --> 00:19:55.190 line:100% position:50% align:middle -And then we'll go back to our order here -and make it 250 milliseconds instead. - -00:19:55.190 --> 00:20:02.630 line:100% position:50% align:middle -So that should be nice and quick. Here we -go. So that is the two ways that you do - -00:20:02.630 --> 00:20:08.590 line:100% position:50% align:middle -animations. First of all, when it's coming -in, we can animate it from its original - -00:20:08.590 --> 00:20:13.990 line:100% position:50% align:middle -state, order-enter into the state where we -want it. And then sometimes we'll have the - -00:20:13.990 --> 00:20:18.160 line:100% position:50% align:middle -case where we're just duplicating things, -and that's where React will duplicate that - -00:20:18.160 --> 00:20:23.160 line:100% position:50% align:middle -element, let you animate the old one out -while you're animating the new one in. And - -00:20:23.160 --> 00:20:27.770 line:100% position:50% align:middle -at that point it's just CSS, there's no -real extra stuff that happens in React - -00:20:27.770 --> 00:20:28.000 line:100% position:50% align:middle -there. +WEBVTT + +1 +00:00:00.918 --> 00:00:03.501 +(upbeat music) + +2 +00:00:06.050 --> 00:00:07.990 +Now let's talk about animation in React. + +3 +00:00:07.990 --> 00:00:11.530 +And I really like how this is done because after we put + +4 +00:00:11.530 --> 00:00:14.910 +a couple tags wrapped around our components + +5 +00:00:14.910 --> 00:00:17.600 +then it's just a matter of playing with the CSS + +6 +00:00:17.600 --> 00:00:19.070 +to get everything up and running. + +7 +00:00:19.070 --> 00:00:20.850 +So there's two different kinds of animations + +8 +00:00:20.850 --> 00:00:21.790 +that we've got going on. + +9 +00:00:21.790 --> 00:00:24.629 +The first one is mounting and unmounting + +10 +00:00:24.629 --> 00:00:26.310 +of different components. + +11 +00:00:26.310 --> 00:00:28.710 +So when I add Atlantic Salmon to my order + +12 +00:00:28.710 --> 00:00:32.030 +it slides itself on in and then when I remove it + +13 +00:00:32.030 --> 00:00:33.840 +from my order it will slide itself out. + +14 +00:00:33.840 --> 00:00:37.140 +That's animating the component did mount + +15 +00:00:37.140 --> 00:00:38.650 +and the component will unmount, + +16 +00:00:38.650 --> 00:00:40.000 +those things come in and go out. + +17 +00:00:40.000 --> 00:00:42.770 +And then the other one is is that just when something + +18 +00:00:42.770 --> 00:00:45.945 +changes we wanna be able to animate that up and down. + +19 +00:00:45.945 --> 00:00:48.220 +So once I add Atlantic Salmon + +20 +00:00:48.220 --> 00:00:50.390 +and I add a couple more, you see that it just goes + +21 +00:00:50.390 --> 00:00:52.190 +bong, bong, bong, bong, bong, bong, + +22 +00:00:52.190 --> 00:00:54.740 +it just keeps on climbing. + +23 +00:00:54.740 --> 00:00:57.240 +So that's what we're gonna do is we're going to start + +24 +00:00:57.240 --> 00:01:01.290 +with the animating it in and animating it out + +25 +00:01:01.290 --> 00:01:03.960 +and then we'll look at a little bit more complicated one + +26 +00:01:03.960 --> 00:01:06.470 +which is the bong, bong, bong, + +27 +00:01:06.470 --> 00:01:08.040 +I don't know what you call that, bong, bong, bong, + +28 +00:01:08.040 --> 00:01:09.683 +let's call it that. + +29 +00:01:09.683 --> 00:01:10.684 +(laughter) + +30 +00:01:10.684 --> 00:01:13.220 +So open up your order dot JS and at the very top + +31 +00:01:13.220 --> 00:01:16.870 +we need to import a couple things. + +32 +00:01:16.870 --> 00:01:21.870 +We're going to import transition group and CSS transition + +33 +00:01:25.470 --> 00:01:27.870 +and that's going to be coming from + +34 +00:01:27.870 --> 00:01:31.430 +the React transition group package, + +35 +00:01:31.430 --> 00:01:33.090 +then we have these two new components + +36 +00:01:33.090 --> 00:01:36.030 +called transition group and CSS transition + +37 +00:01:36.030 --> 00:01:39.870 +and let's go down to this unordered list + +38 +00:01:39.870 --> 00:01:42.270 +of our order, that's where we're going to be + +39 +00:01:42.270 --> 00:01:43.910 +mapping through everything. + +40 +00:01:43.910 --> 00:01:45.670 +We're gonna put the each on it's own line. + +41 +00:01:45.670 --> 00:01:48.400 +First thing we're gonna do is replace this unordered list + +42 +00:01:48.400 --> 00:01:52.570 +with the transition group tag and then we still want it + +43 +00:01:52.570 --> 00:01:55.129 +to be an ordered list at the end of the day + +44 +00:01:55.129 --> 00:01:57.190 +so we're going to give it a component property, + +45 +00:01:57.190 --> 00:01:59.950 +and this is the, if you look at docs for transition group, + +46 +00:01:59.950 --> 00:02:01.930 +this tells it what element at the end of the day + +47 +00:02:01.930 --> 00:02:04.760 +to actually render out to the page. + +48 +00:02:04.760 --> 00:02:08.550 +So it's an unordered list, good, give that a save. + +49 +00:02:08.550 --> 00:02:11.560 +And we'll go back to here and make sure + +50 +00:02:11.560 --> 00:02:14.880 +that everything is still working, beautiful. + +51 +00:02:14.880 --> 00:02:17.520 +If I add a new one it'll still add, okay, good. + +52 +00:02:17.520 --> 00:02:19.460 +Then we need to take every single LI + +53 +00:02:19.460 --> 00:02:22.000 +that we're rendering out and wrap it in + +54 +00:02:22.000 --> 00:02:24.930 +that other thing that we imported, the CSS transition tag. + +55 +00:02:24.930 --> 00:02:27.860 +So let's go to, again, remember we kicked it off + +56 +00:02:27.860 --> 00:02:30.160 +to the separate render order function + +57 +00:02:30.160 --> 00:02:33.850 +and now we have this LI for either not finding it + +58 +00:02:33.850 --> 00:02:34.990 +or for finding it. + +59 +00:02:34.990 --> 00:02:37.360 +Now this is a bit tricky because we're returning + +60 +00:02:37.360 --> 00:02:40.390 +three things here and only these two should be wrapped + +61 +00:02:40.390 --> 00:02:43.960 +in CSS transition because null shouldn't be wrapped + +62 +00:02:43.960 --> 00:02:46.240 +in a CSS, in fact it will error out if it is. + +63 +00:02:46.240 --> 00:02:47.870 +So let's get it working on this one + +64 +00:02:47.870 --> 00:02:49.440 +and then I'll show you a little trick we can do + +65 +00:02:49.440 --> 00:02:52.380 +to not double write the same code. + +66 +00:02:52.380 --> 00:02:56.230 +So around here we're going to make a CSS transition tag + +67 +00:02:56.230 --> 00:03:00.470 +and we're going to wrap that LI and then the CSS transition + +68 +00:03:00.470 --> 00:03:03.320 +takes a number of different properties. + +69 +00:03:03.320 --> 00:03:07.580 +First one is class names, with an S, that's not a typo + +70 +00:03:07.580 --> 00:03:10.550 +and I'll show you why it needs that in just a second, + +71 +00:03:10.550 --> 00:03:12.920 +and we're just gonna say order. + +72 +00:03:12.920 --> 00:03:16.530 +Second is it also needs a key, so I'll just say key. + +73 +00:03:16.530 --> 00:03:20.940 +And third it needs a timeout, which is an object + +74 +00:03:20.940 --> 00:03:24.780 +of how fast do they come in and how fast do they go out, + +75 +00:03:24.780 --> 00:03:27.770 +so I'll say enter at 250 milliseconds + +76 +00:03:27.770 --> 00:03:31.470 +and exit at 250 milliseconds. + +77 +00:03:31.470 --> 00:03:34.940 +Good, so now we have this CSS transition group. + +78 +00:03:34.940 --> 00:03:37.470 +Now the weird thing is is that we need to also + +79 +00:03:37.470 --> 00:03:40.950 +copy it and put it on this one as well, + +80 +00:03:40.950 --> 00:03:42.230 +same with the closing tag. + +81 +00:03:42.230 --> 00:03:44.570 +Again, I'll show you a little trick we can do + +82 +00:03:44.570 --> 00:03:46.180 +so that we're not duplicating that + +83 +00:03:46.180 --> 00:03:48.840 +over and over, we can make a reusable + +84 +00:03:48.840 --> 00:03:50.770 +wrapper component for that. + +85 +00:03:50.770 --> 00:03:52.470 +So let's go back to our app and make sure + +86 +00:03:52.470 --> 00:03:54.700 +everything is still working. + +87 +00:03:54.700 --> 00:03:56.940 +Now when I add items to my order and remove them, + +88 +00:03:56.940 --> 00:03:59.210 +ooh, it's already animating for me + +89 +00:03:59.210 --> 00:04:01.570 +and that's because I've shipped you the CSS, + +90 +00:04:01.570 --> 00:04:03.990 +but we're going to delete all the CSS + +91 +00:04:03.990 --> 00:04:05.560 +and write it together so I can show you + +92 +00:04:05.560 --> 00:04:07.460 +exactly how it works. + +93 +00:04:07.460 --> 00:04:10.740 +So what I want you to do is to go back to your application, + +94 +00:04:10.740 --> 00:04:14.120 +open up the CSS folder and inside of that + +95 +00:04:14.120 --> 00:04:16.640 +you're going to see animations dot STYL. + +96 +00:04:17.810 --> 00:04:21.250 +And you see order enter, order exit, count enter + +97 +00:04:21.250 --> 00:04:22.450 +and count exit. + +98 +00:04:22.450 --> 00:04:24.930 +So what we're gonna do is just go ahead and delete + +99 +00:04:24.930 --> 00:04:27.200 +all of that and we're gonna write it together. + +100 +00:04:27.200 --> 00:04:30.580 +Now, a couple things before we even get running + +101 +00:04:30.580 --> 00:04:32.570 +on writing this CSS. + +102 +00:04:32.570 --> 00:04:35.640 +So first of all I'm using a language called Stylus + +103 +00:04:35.640 --> 00:04:39.050 +and Stylus is exactly the same as Sass, it just has + +104 +00:04:39.050 --> 00:04:41.810 +the option of doing it based on indentation + +105 +00:04:41.810 --> 00:04:44.760 +rather than using colons and semicolons. + +106 +00:04:44.760 --> 00:04:47.670 +However, if you are not totally comfortable + +107 +00:04:47.670 --> 00:04:50.287 +with Stylus because it's based on indentation, + +108 +00:04:50.287 --> 00:04:54.090 +then make sure that you put in the colons + +109 +00:04:54.090 --> 00:04:56.360 +and the curly brackets under all of them, + +110 +00:04:56.360 --> 00:05:00.210 +just write it like regular CSS and not like Stylus. + +111 +00:05:00.210 --> 00:05:02.770 +Because I know some people can get tripped up on it, + +112 +00:05:02.770 --> 00:05:06.950 +this is a tab character, sorry, this is two spaces, + +113 +00:05:06.950 --> 00:05:09.260 +not a tab character and I know in Stylus + +114 +00:05:09.260 --> 00:05:11.420 +if you mix tabs and spaces it will break. + +115 +00:05:11.420 --> 00:05:13.190 +So that's just a personal preference, + +116 +00:05:13.190 --> 00:05:16.400 +there's nothing there specifically that you need to use. + +117 +00:05:16.400 --> 00:05:18.800 +Second is, how do we actually compile this? + +118 +00:05:18.800 --> 00:05:20.810 +So if you're using Stylus or Sass + +119 +00:05:20.810 --> 00:05:23.980 +or any of these pre-processors, how do you compile it? + +120 +00:05:23.980 --> 00:05:27.350 +And the downside to using Create React app + +121 +00:05:27.350 --> 00:05:31.340 +is that you cannot use any sort of custom CSS + +122 +00:05:31.340 --> 00:05:33.450 +pre-processor in your web pack build + +123 +00:05:33.450 --> 00:05:35.750 +unless you do something called eject. + +124 +00:05:35.750 --> 00:05:39.410 +So what we need to do is open up our package dot JSON + +125 +00:05:39.410 --> 00:05:42.420 +and you're gonna see that I have two scripts here + +126 +00:05:42.420 --> 00:05:46.170 +that will actually run the Stylus compiling + +127 +00:05:46.170 --> 00:05:48.240 +outside of our Create React app. + +128 +00:05:48.240 --> 00:05:50.820 +The first one just does a single compile + +129 +00:05:50.820 --> 00:05:54.480 +of our Sylus dot style file and compiles it + +130 +00:05:54.480 --> 00:05:58.360 +to a style dot CSS and the second one + +131 +00:05:58.360 --> 00:06:02.240 +watches for changes and then will re-compile + +132 +00:06:02.240 --> 00:06:03.073 +them every single time. + +133 +00:06:03.073 --> 00:06:05.810 +So really the only difference is the dash W flag + +134 +00:06:05.810 --> 00:06:06.700 +which will watch. + +135 +00:06:06.700 --> 00:06:08.670 +So we wanna run styles watch. + +136 +00:06:08.670 --> 00:06:11.410 +So we're gonna go to our terminal and kill + +137 +00:06:11.410 --> 00:06:12.830 +the process that we currently have, + +138 +00:06:12.830 --> 00:06:15.880 +we can hit control, C and now we wanna run NPM + +139 +00:06:15.880 --> 00:06:19.530 +run styles colon watch and what that's gonna do + +140 +00:06:19.530 --> 00:06:21.760 +is it's going to first compile our CSS + +141 +00:06:21.760 --> 00:06:23.870 +and then watch for any future changes. + +142 +00:06:23.870 --> 00:06:26.359 +So that's pretty neat because what I can do + +143 +00:06:26.359 --> 00:06:30.710 +is open up my animations, delete that, + +144 +00:06:30.710 --> 00:06:32.832 +give it a save and you can see + +145 +00:06:32.832 --> 00:06:33.810 +that it will trigger a re-render, + +146 +00:06:33.810 --> 00:06:35.610 +it's that compiled style dot CSS + +147 +00:06:35.610 --> 00:06:40.610 +and then if I were to say, div background red + +148 +00:06:41.160 --> 00:06:43.940 +it will compile a second one and so on and so on. + +149 +00:06:43.940 --> 00:06:46.670 +So that's great, but now what I did + +150 +00:06:46.670 --> 00:06:49.729 +is I actually just broke my local host from running. + +151 +00:06:49.729 --> 00:06:53.870 +So how do you run both the styles and our NPM start + +152 +00:06:53.870 --> 00:06:54.790 +at the same time? + +153 +00:06:54.790 --> 00:06:58.129 +Well, that's what this package concurrently does. + +154 +00:06:58.129 --> 00:07:00.880 +You could just open up two terminal tabs + +155 +00:07:00.880 --> 00:07:03.335 +and run NPM start for your app + +156 +00:07:03.335 --> 00:07:06.478 +and run NPM styles watch for that, + +157 +00:07:06.478 --> 00:07:10.061 +but it's probably easier just to run this watch one + +158 +00:07:10.061 --> 00:07:13.654 +which will concurrently run two things here, + +159 +00:07:13.654 --> 00:07:17.620 +NPM run start and NPM run styles watch. + +160 +00:07:17.620 --> 00:07:20.240 +That's what it does in both ones. + +161 +00:07:20.240 --> 00:07:25.240 +So we're gonna do that, kill it, I'm gonna run NPM run watch + +162 +00:07:25.430 --> 00:07:27.590 +and that runs concurrently two things. + +163 +00:07:27.590 --> 00:07:29.500 +And it's kinda neat, it'll tell you first + +164 +00:07:29.500 --> 00:07:31.860 +what is the web pack output and second + +165 +00:07:31.860 --> 00:07:33.410 +what is the Stylus output. + +166 +00:07:33.410 --> 00:07:35.490 +So if you see console logs anywhere + +167 +00:07:35.490 --> 00:07:37.720 +you see exactly what you're working on. + +168 +00:07:37.720 --> 00:07:42.140 +And, oh (laughter) everything is red, why? + +169 +00:07:42.140 --> 00:07:44.450 +Because I showed you this, I said any div + +170 +00:07:44.450 --> 00:07:47.309 +has a background red, which is hilarious. + +171 +00:07:47.309 --> 00:07:48.810 +So we don't actually need that, give it a save + +172 +00:07:48.810 --> 00:07:51.230 +and it's gonna regenerate all of the styles for us. + +173 +00:07:51.230 --> 00:07:55.300 +Good, so why do we have this animation file anyway? + +174 +00:07:55.300 --> 00:07:57.300 +And I'll show you exactly why. + +175 +00:07:57.300 --> 00:08:01.390 +So first thing we need to do is go to our order. + +176 +00:08:01.390 --> 00:08:04.950 +And remember when we did the CSS transition, + +177 +00:08:04.950 --> 00:08:08.020 +we said enter 250 milliseconds, let's make that + +178 +00:08:08.020 --> 00:08:11.170 +5,000 milliseconds, that means it's gonna be five seconds + +179 +00:08:11.170 --> 00:08:13.940 +to enter and five seconds to leave. + +180 +00:08:13.940 --> 00:08:16.870 +Now what I want you to do is just use your regular dev tools + +181 +00:08:16.870 --> 00:08:21.870 +to inspect one of these LIs and hit the X on it. + +182 +00:08:22.060 --> 00:08:23.080 +See what's happening here? + +183 +00:08:23.080 --> 00:08:26.440 +It gives it a class of order exit in order exit active + +184 +00:08:26.440 --> 00:08:28.620 +and it's still there, but after five seconds + +185 +00:08:28.620 --> 00:08:30.380 +it actually removes the list item. + +186 +00:08:30.380 --> 00:08:33.330 +Same thing when I add, maybe, let's see, + +187 +00:08:34.223 --> 00:08:36.440 +I'm gonna add King Crab, it will automatically add + +188 +00:08:36.440 --> 00:08:38.490 +the LI, give it a class of order enter + +189 +00:08:38.490 --> 00:08:41.884 +and order enter active and then after five seconds + +190 +00:08:41.884 --> 00:08:44.360 +it will remove those classes. + +191 +00:08:44.360 --> 00:08:47.340 +So what's happening here is it's leaving, + +192 +00:08:47.340 --> 00:08:49.600 +it's leaving, it's leaving, it's leaving + +193 +00:08:49.600 --> 00:08:51.860 +and boom, now it's gone. + +194 +00:08:51.860 --> 00:08:53.530 +What's happening is it's giving us + +195 +00:08:53.530 --> 00:08:58.110 +these states as CSS classes and then we can go ahead + +196 +00:08:58.110 --> 00:09:01.390 +and use those CSS classes to add animation to it. + +197 +00:09:01.390 --> 00:09:03.090 +So if we go to our animations here + +198 +00:09:03.090 --> 00:09:06.830 +and we say, we've got two states, we have order enter + +199 +00:09:06.830 --> 00:09:08.190 +and then we also have another selector + +200 +00:09:08.190 --> 00:09:10.424 +is going to be order exit. + +201 +00:09:10.424 --> 00:09:12.342 +So let's just do order enter first. + +202 +00:09:12.342 --> 00:09:14.226 +And when the, has that order enter + +203 +00:09:14.226 --> 00:09:16.036 +let's just give it a background of red + +204 +00:09:16.036 --> 00:09:19.540 +and then when it has a class of also + +205 +00:09:19.540 --> 00:09:23.480 +having a class of order enter active let's give it + +206 +00:09:23.480 --> 00:09:27.010 +a background of yellow, a background-a, + +207 +00:09:27.010 --> 00:09:30.810 +a background of yellow. + +208 +00:09:30.810 --> 00:09:33.302 +So let's see what that looks like. + +209 +00:09:33.302 --> 00:09:35.360 +So I'm just gonna remove this one, remove this one, + +210 +00:09:35.360 --> 00:09:37.777 +takes five seconds to remove now + +211 +00:09:37.777 --> 00:09:40.000 +because we put that five seconds on there + +212 +00:09:40.000 --> 00:09:41.530 +and then it will finally unmount it, + +213 +00:09:41.530 --> 00:09:45.480 +but as I add it in now, you see how it's yellow immediately + +214 +00:09:45.480 --> 00:09:47.280 +and watch what happens now. + +215 +00:09:47.280 --> 00:09:49.940 +If I go to my order enter and I add a transition + +216 +00:09:49.940 --> 00:09:54.940 +of 0.5 seconds, or not, five seconds, watch now. + +217 +00:09:55.000 --> 00:10:00.000 +I'm gonna go to Mussels and you see over five seconds + +218 +00:10:01.710 --> 00:10:03.730 +it's animating because what's happening + +219 +00:10:03.730 --> 00:10:06.850 +is that React gives it a class of order enter immediately + +220 +00:10:06.850 --> 00:10:10.330 +and then 0.1 milliseconds later it's giving it a class + +221 +00:10:10.330 --> 00:10:12.070 +of order enter active. + +222 +00:10:12.070 --> 00:10:14.240 +And because these two things are done + +223 +00:10:14.240 --> 00:10:17.030 +at a different time, then we can then transition + +224 +00:10:17.030 --> 00:10:19.600 +all of the properties from its starting state + +225 +00:10:19.600 --> 00:10:23.030 +to it's finished state, which in this case + +226 +00:10:23.030 --> 00:10:25.051 +is just changing the background + +227 +00:10:25.051 --> 00:10:26.622 +and it's gonna transition + +228 +00:10:26.622 --> 00:10:28.986 +those properties over five seconds. + +229 +00:10:28.986 --> 00:10:30.210 +So that's great and what we can do with that + +230 +00:10:30.210 --> 00:10:34.573 +is we can put a transform on it of a translate X + +231 +00:10:34.573 --> 00:10:39.540 +negative 120% and then when it is active + +232 +00:10:39.540 --> 00:10:43.250 +we can give it a transform, translate X of zero. + +233 +00:10:43.250 --> 00:10:46.710 +So it's gonna go from all the way off to the left + +234 +00:10:46.710 --> 00:10:48.780 +to all the way where it should be. + +235 +00:10:48.780 --> 00:10:49.740 +Let's see here. + +236 +00:10:51.530 --> 00:10:53.530 +Move these suckers and let's find one + +237 +00:10:53.530 --> 00:10:55.870 +that I haven't yet added, Jumbo Prawns, + +238 +00:10:55.870 --> 00:10:58.290 +woop, there it comes. + +239 +00:10:59.405 --> 00:11:03.250 +And add another one, woop, another one, another one. + +240 +00:11:03.250 --> 00:11:06.190 +You see how it immediately gives it that class + +241 +00:11:06.190 --> 00:11:09.910 +and then we have that five seconds to animate itself in. + +242 +00:11:09.910 --> 00:11:12.350 +And then after five seconds it's going to remove + +243 +00:11:12.350 --> 00:11:15.860 +all of these classes and none of these CSS properties + +244 +00:11:15.860 --> 00:11:18.400 +are going to be applied to it. + +245 +00:11:18.400 --> 00:11:21.046 +So same thing can go for order exit. + +246 +00:11:21.046 --> 00:11:26.046 +Order exit, so we're gonna say, background thistle + +247 +00:11:30.200 --> 00:11:34.310 +and when the dot order exit active + +248 +00:11:37.800 --> 00:11:42.150 +let's say, give it a background of pale goldenrod. + +249 +00:11:46.020 --> 00:11:49.110 +And of course we need to, let's just take that transition + +250 +00:11:49.110 --> 00:11:50.850 +and put that on there as well. + +251 +00:11:50.850 --> 00:11:55.850 +So now when I remove it it's going to make it thistle + +252 +00:11:57.770 --> 00:12:00.650 +and then remove it, remove, remove, remove + +253 +00:12:01.720 --> 00:12:05.590 +and then after five seconds it totally removes it. + +254 +00:12:05.590 --> 00:12:07.650 +Oh, that's because I need an ampersand here, + +255 +00:12:07.650 --> 00:12:09.190 +it's not turning pale goldenrod. + +256 +00:12:09.190 --> 00:12:10.640 +So let me try that once more. + +257 +00:12:11.494 --> 00:12:12.444 +Animate them on in. + +258 +00:12:14.460 --> 00:12:19.460 +And then when I remove them they start to fade + +259 +00:12:19.840 --> 00:12:22.010 +themselves out. + +260 +00:12:22.010 --> 00:12:22.843 +Okay, good. + +261 +00:12:22.843 --> 00:12:25.000 +Well what we can do now is the opposite. + +262 +00:12:25.000 --> 00:12:30.000 +So the order exit will be translate X zero, + +263 +00:12:30.930 --> 00:12:33.360 +start where it is, and then when it's active + +264 +00:12:33.360 --> 00:12:36.550 +translate itself all the way to the right-hand side + +265 +00:12:36.550 --> 00:12:39.090 +of plus 120%. + +266 +00:12:39.090 --> 00:12:41.600 +So these should animate themselves in + +267 +00:12:45.810 --> 00:12:48.040 +and then when I click the X they start + +268 +00:12:48.040 --> 00:12:51.320 +to animate themselves on out. + +269 +00:12:51.320 --> 00:12:54.870 +It's so cool because everything is just CSS at this point + +270 +00:12:54.870 --> 00:12:57.000 +and we can do some little neat things. + +271 +00:12:57.000 --> 00:13:01.297 +So we can say, give it a max height of zero + +272 +00:13:01.297 --> 00:13:04.593 +and a padding of zero as well + +273 +00:13:04.593 --> 00:13:09.593 +and active we'll give it a max height of 60 PX + +274 +00:13:10.275 --> 00:13:14.760 +and a padding of two rem zero. + +275 +00:13:14.760 --> 00:13:17.670 +And what that's gonna do is by giving it a max height + +276 +00:13:17.670 --> 00:13:21.170 +you cannot transition from height auto to height + +277 +00:13:21.170 --> 00:13:24.770 +whatever it is, so by doing a max height + +278 +00:13:24.770 --> 00:13:26.380 +it's a bit of a hack that will allow us + +279 +00:13:26.380 --> 00:13:28.240 +to transition from one to another. + +280 +00:13:28.240 --> 00:13:33.240 +So by adding these they will start to grow as we have it + +281 +00:13:35.990 --> 00:13:37.150 +as they come in. + +282 +00:13:37.150 --> 00:13:39.990 +And then of course we can move these transition + +283 +00:13:39.990 --> 00:13:44.725 +to 0.5 seconds and 0.5 seconds + +284 +00:13:44.725 --> 00:13:47.667 +and then transitions are gonna be much quicker. + +285 +00:13:47.667 --> 00:13:50.580 +But the other thing is is that they're not removed + +286 +00:13:50.580 --> 00:13:52.850 +until five seconds later. + +287 +00:13:52.850 --> 00:13:57.430 +So we need to go back into our order and change these + +288 +00:13:57.430 --> 00:14:02.430 +enter and exits to 500 milliseconds or 250 milliseconds + +289 +00:14:02.540 --> 00:14:06.576 +to get these nice animations, woop, I like it. + +290 +00:14:06.576 --> 00:14:07.493 +Zoop, zoop. + +291 +00:14:08.350 --> 00:14:12.293 +It's not doing it just like my answer, + +292 +00:14:12.293 --> 00:14:14.360 +so I think that there's one more thing we need to do here + +293 +00:14:15.365 --> 00:14:17.000 +on the padding in order to overwrite the default padding + +294 +00:14:17.000 --> 00:14:20.010 +that I have in my style dot CSS, + +295 +00:14:20.010 --> 00:14:22.460 +let's just put some important tags + +296 +00:14:22.460 --> 00:14:25.490 +and then on the exit we want to do that as well, + +297 +00:14:25.490 --> 00:14:27.910 +on the adding we'll just say padding zero, + +298 +00:14:27.910 --> 00:14:29.710 +I think that should take care of it. + +299 +00:14:30.630 --> 00:14:31.480 +Beautiful. + +300 +00:14:33.300 --> 00:14:35.390 +That removing and then we're removing. + +301 +00:14:35.390 --> 00:14:38.500 +And let's get rid of all of these colors here. + +302 +00:14:41.160 --> 00:14:43.478 +Everything is nice, oh, there's still red. + +303 +00:14:43.478 --> 00:14:45.060 +There we go. + +304 +00:14:45.060 --> 00:14:48.639 +Cool, so the other one is when you wanna add multiples. + +305 +00:14:48.639 --> 00:14:51.800 +So eight, nine, 10, 11, it's a little bit different + +306 +00:14:51.800 --> 00:14:54.700 +because it's not just unmounting and mounting, + +307 +00:14:54.700 --> 00:14:58.690 +it's actually replacing a old div, like right here + +308 +00:14:58.690 --> 00:15:03.410 +we have, let's open it up, we have this 19, + +309 +00:15:03.410 --> 00:15:07.640 +that's going to be a span, but we are going to add + +310 +00:15:07.640 --> 00:15:09.430 +a second and what's gonna happen + +311 +00:15:09.430 --> 00:15:12.050 +is we're actually gonna have a 19 and a 20 + +312 +00:15:12.050 --> 00:15:15.720 +and we're gonna animate the 19 up and then the 20 + +313 +00:15:15.720 --> 00:15:18.050 +will animate into it's actual spot. + +314 +00:15:18.050 --> 00:15:21.100 +So we need to into our order dot JS + +315 +00:15:21.100 --> 00:15:23.830 +and we need to start wrapping some of this stuff + +316 +00:15:23.830 --> 00:15:26.310 +in some spans so that we have some sort + +317 +00:15:26.310 --> 00:15:28.490 +of elements to grab onto. + +318 +00:15:28.490 --> 00:15:33.490 +So this count here is going to be on its own line. + +319 +00:15:33.620 --> 00:15:35.740 +And we're going to wrap that in a span. + +320 +00:15:35.740 --> 00:15:39.540 +Save, see where we're at, still working, good, woo. + +321 +00:15:39.540 --> 00:15:42.400 +And then we will wrap everything inside of the LI + +322 +00:15:42.400 --> 00:15:45.430 +in another span just because that's how the CSS + +323 +00:15:45.430 --> 00:15:46.400 +is working out. + +324 +00:15:47.440 --> 00:15:49.830 +So we have an LI and we have a span + +325 +00:15:49.830 --> 00:15:52.202 +and then inside of that we have a span + +326 +00:15:52.202 --> 00:15:54.126 +and then the lbs and the button. + +327 +00:15:54.126 --> 00:15:55.780 +So does that give us what we're looking for? + +328 +00:15:55.780 --> 00:15:57.410 +Yes, it does. + +329 +00:15:57.410 --> 00:16:00.220 +Okay, and now we need to give ourselves + +330 +00:16:00.220 --> 00:16:01.440 +another transition group. + +331 +00:16:01.440 --> 00:16:03.300 +So inside of here we're going to wrap + +332 +00:16:03.300 --> 00:16:06.510 +this count here in a transition group. + +333 +00:16:06.510 --> 00:16:08.630 +Put the span inside of that. + +334 +00:16:08.630 --> 00:16:10.940 +And then we're going to wrap that span itself + +335 +00:16:10.940 --> 00:16:14.350 +in a CSS transition component. + +336 +00:16:14.350 --> 00:16:16.966 +Now the CSS transition needs a few options here + +337 +00:16:16.966 --> 00:16:19.200 +and also with the transition group, + +338 +00:16:19.200 --> 00:16:21.454 +so this is going to be a component, + +339 +00:16:21.454 --> 00:16:25.640 +it's going to be a span and the class name + +340 +00:16:27.370 --> 00:16:28.850 +is going to be count. + +341 +00:16:28.850 --> 00:16:32.430 +And the CSS transition the class names + +342 +00:16:32.430 --> 00:16:35.000 +is going to be count, that's going to be count enter + +343 +00:16:35.000 --> 00:16:37.240 +and count enter active, et cetera, et cetera. + +344 +00:16:37.240 --> 00:16:39.820 +The key is not going to be a key, + +345 +00:16:39.820 --> 00:16:42.010 +but the key is going to be the count + +346 +00:16:42.010 --> 00:16:45.530 +and by doing that it will tell the CSS transition group + +347 +00:16:45.530 --> 00:16:48.400 +to make two separate span elements + +348 +00:16:48.400 --> 00:16:50.680 +so that if we're going from 19 to 20 + +349 +00:16:50.680 --> 00:16:52.990 +it's gonna animate the 20 or the 19 out + +350 +00:16:52.990 --> 00:16:56.180 +and the 20 on in and then the timeout + +351 +00:16:56.180 --> 00:16:58.670 +let's do the same thing we did before + +352 +00:16:58.670 --> 00:17:02.620 +which is we'll say, enter is going to be 5,000 milliseconds + +353 +00:17:02.620 --> 00:17:05.830 +and exit is going to be 5,000 as well. + +354 +00:17:05.830 --> 00:17:07.360 +And then my prettier just took care + +355 +00:17:07.360 --> 00:17:08.700 +of some of the formatting there. + +356 +00:17:08.700 --> 00:17:11.590 +I should note that, what is this double curly brackets here? + +357 +00:17:11.590 --> 00:17:13.340 +Well, the first set of curly brackets + +358 +00:17:13.340 --> 00:17:15.350 +is to tell React it's JavaScript + +359 +00:17:15.350 --> 00:17:17.780 +and the seconds is just an object literal. + +360 +00:17:17.780 --> 00:17:21.500 +So you could also make a settings object + +361 +00:17:21.500 --> 00:17:25.900 +and then up here say, const settings is equal to that, + +362 +00:17:25.900 --> 00:17:29.100 +but I'd rather just pass it as an object literal + +363 +00:17:29.100 --> 00:17:30.370 +because it's much... + +364 +00:17:30.370 --> 00:17:32.762 +Alright, nice, now let's go ahead + +365 +00:17:32.762 --> 00:17:34.580 +and inspect just that six. + +366 +00:17:34.580 --> 00:17:37.860 +And click on Pacific Halibut and you see + +367 +00:17:37.860 --> 00:17:40.950 +how it's, we got count enter and so one of them + +368 +00:17:40.950 --> 00:17:42.810 +is entering and the other one is exiting + +369 +00:17:42.810 --> 00:17:45.790 +and then after five seconds it removes all those class. + +370 +00:17:45.790 --> 00:17:48.800 +Let me show you again, count enter, count enter active + +371 +00:17:48.800 --> 00:17:50.720 +and count exit, count exit active. + +372 +00:17:50.720 --> 00:17:53.480 +So we actually have two different, + +373 +00:17:53.480 --> 00:17:55.950 +and if you hit it a couple times, + +374 +00:17:55.950 --> 00:17:59.152 +you see that we actually have all of the different + +375 +00:17:59.152 --> 00:18:02.680 +spans for five seconds, it duplicates them + +376 +00:18:02.680 --> 00:18:05.960 +and then after our timeout that we've specified here + +377 +00:18:05.960 --> 00:18:08.100 +it will actually remove them. + +378 +00:18:08.100 --> 00:18:10.490 +So we can go into our animations here and do the same thing. + +379 +00:18:10.490 --> 00:18:15.320 +So we'll say, dot count enter, background red + +380 +00:18:16.840 --> 00:18:19.900 +and transition five seconds. + +381 +00:18:22.120 --> 00:18:24.929 +And we'll say, and when it has a class of count + +382 +00:18:24.929 --> 00:18:29.040 +enter active background yellow. + +383 +00:18:32.930 --> 00:18:37.930 +So then it transitions itself from red to yellow, + +384 +00:18:38.060 --> 00:18:42.830 +it doesn't look like it, oh, counter, count enter active + +385 +00:18:42.830 --> 00:18:43.880 +that should do it. + +386 +00:18:45.641 --> 00:18:48.180 +You see it transitions itself from red, it's immediately red + +387 +00:18:48.180 --> 00:18:52.950 +and then it goes to yellow and will move itself on up. + +388 +00:18:52.950 --> 00:18:55.200 +So what we want to do with our count enter + +389 +00:18:55.200 --> 00:18:57.270 +is we're going to again transform it, + +390 +00:18:57.270 --> 00:18:59.520 +but this time we're gonna go on the top to bottom, + +391 +00:18:59.520 --> 00:19:03.180 +so we're gonna translate why 100%. + +392 +00:19:03.180 --> 00:19:06.370 +So it's going to start, the new one is gonna start + +393 +00:19:06.370 --> 00:19:10.880 +underneath the 31, it's gonna be 32, it's gonna start + +394 +00:19:10.880 --> 00:19:13.520 +underneath and then when it is active + +395 +00:19:13.520 --> 00:19:17.520 +it's gonna translate itself on up to zero. + +396 +00:19:17.520 --> 00:19:19.070 +Let's see what that looks like. + +397 +00:19:20.967 --> 00:19:24.750 +Woop, woop, you see every time I add a new one + +398 +00:19:24.750 --> 00:19:29.290 +it will animate itself all the way up + +399 +00:19:29.290 --> 00:19:32.270 +and then when it's done it will remove + +400 +00:19:32.270 --> 00:19:34.155 +all of those classes, so that's good. + +401 +00:19:34.155 --> 00:19:37.860 +Now we need to take care of the one that's exiting + +402 +00:19:37.860 --> 00:19:40.580 +so that you can see that it just moves over right now, + +403 +00:19:40.580 --> 00:19:44.260 +that 41 moves over, but we wanna do the same thing, + +404 +00:19:44.260 --> 00:19:48.370 +we wanna overlap it and animate itself all the way up. + +405 +00:19:48.370 --> 00:19:53.270 +So let's go, I'm gonna say dot count exit + +406 +00:19:55.450 --> 00:20:00.450 +background black and count exit active background green. + +407 +00:20:04.840 --> 00:20:06.900 +Let's make sure that this works. + +408 +00:20:08.250 --> 00:20:10.070 +There we go, so it's green. + +409 +00:20:11.050 --> 00:20:14.500 +So we want a transform by default, + +410 +00:20:14.500 --> 00:20:16.440 +actually we can just duplicate it, + +411 +00:20:16.440 --> 00:20:18.810 +we're going to, by default we're gonna start at zero + +412 +00:20:18.810 --> 00:20:22.500 +and then when it is active we're going to go to the top + +413 +00:20:22.500 --> 00:20:24.930 +which is negative 100%, it should animate + +414 +00:20:24.930 --> 00:20:28.070 +itself vertically, and then we also want a transition + +415 +00:20:28.070 --> 00:20:30.460 +of five seconds on that one. + +416 +00:20:32.270 --> 00:20:35.510 +So is this gonna, you see the ones leaving + +417 +00:20:35.510 --> 00:20:38.110 +as the other one comes up and then as soon + +418 +00:20:38.110 --> 00:20:41.320 +as it's offscreen (click) it removes itself. + +419 +00:20:41.320 --> 00:20:44.560 +So again, it moves on up and the other one comes in. + +420 +00:20:44.560 --> 00:20:46.790 +The only problem is that they're not overlapping + +421 +00:20:46.790 --> 00:20:49.310 +each other and that's a pretty quick fix. + +422 +00:20:49.310 --> 00:20:51.720 +We need to put a position absolute in there, + +423 +00:20:51.720 --> 00:20:55.800 +left zero, bottom zero and they should, + +424 +00:20:55.800 --> 00:20:59.700 +since this one is absolute and this one is just static + +425 +00:20:59.700 --> 00:21:01.750 +they should overlap each other + +426 +00:21:01.750 --> 00:21:03.460 +and animate themselves on up. + +427 +00:21:03.460 --> 00:21:06.040 +So there we go. + +428 +00:21:10.740 --> 00:21:14.050 +If you do a whole bunch it gets a little bit crazy, + +429 +00:21:14.050 --> 00:21:16.760 +but it still totally works. + +430 +00:21:16.760 --> 00:21:18.560 +Animate itself on up. + +431 +00:21:18.560 --> 00:21:21.440 +And so you can do some really fun stuff with this + +432 +00:21:21.440 --> 00:21:26.218 +where as it leaves you can scale three. + +433 +00:21:26.218 --> 00:21:29.990 +So the one that's leaving gets much bigger, woo. + +434 +00:21:29.990 --> 00:21:30.850 +Same with this. + +435 +00:21:30.850 --> 00:21:32.250 +We could do some other fun stuff + +436 +00:21:32.250 --> 00:21:34.290 +or a count enter active or maybe, + +437 +00:21:34.290 --> 00:21:36.920 +let's go order enter active. + +438 +00:21:36.920 --> 00:21:40.990 +So we're transforming it, but we also wanna rotate it, + +439 +00:21:40.990 --> 00:21:43.620 +I don't know, 1,000 degrees. + +440 +00:21:44.590 --> 00:21:47.560 +And then it will, woo, oh, that's not in there. + +441 +00:21:48.510 --> 00:21:52.087 +Remove a whole bunch of these and then when I add one. + +442 +00:21:52.087 --> 00:21:53.050 +(laughter) + +443 +00:21:53.050 --> 00:21:55.080 +It'll animate itself in. + +444 +00:21:55.080 --> 00:22:00.080 +So what's 360 degrees times four, let's move it + +445 +00:22:01.260 --> 00:22:02.340 +a full amount. + +446 +00:22:07.000 --> 00:22:09.790 +And it'll Batman itself on in. + +447 +00:22:09.790 --> 00:22:12.160 +It should be Batmaning itself in, I think it's because + +448 +00:22:12.160 --> 00:22:17.160 +we should add a rotate zero to the initial state + +449 +00:22:20.050 --> 00:22:23.370 +and then rotate it 1,440 degrees when you do have it. + +450 +00:22:23.370 --> 00:22:26.040 +So if I get rid of all these. + +451 +00:22:28.545 --> 00:22:29.568 +(laughter) + +452 +00:22:29.568 --> 00:22:32.030 +There we go, boodaloodaloo, sort of Batmans in + +453 +00:22:32.030 --> 00:22:33.010 +as we want it. + +454 +00:22:33.010 --> 00:22:35.210 +And you can do anything you could possibly want + +455 +00:22:35.210 --> 00:22:37.090 +other than just translating the X value + +456 +00:22:37.090 --> 00:22:39.410 +you can change the colors, you can change the font size, + +457 +00:22:39.410 --> 00:22:42.630 +you can rotate it any amount that you could possibly want. + +458 +00:22:42.630 --> 00:22:45.370 +So I find it is a little bit tricky to get + +459 +00:22:45.370 --> 00:22:48.230 +the whole transition group thing up and running, + +460 +00:22:48.230 --> 00:22:50.750 +but once you have those classes being added to it + +461 +00:22:50.750 --> 00:22:53.404 +then it's just a CSS issue from there on out. + +462 +00:22:53.404 --> 00:22:57.360 +Last thing I wanted to show you is this. + +463 +00:22:57.360 --> 00:22:59.760 +Let's go to the top here, we did this twice, + +464 +00:22:59.760 --> 00:23:01.740 +we did the same transition group + +465 +00:23:01.740 --> 00:23:03.950 +and then every single time that we change it. + +466 +00:23:03.950 --> 00:23:05.320 +See, we already are out of sync here, + +467 +00:23:05.320 --> 00:23:09.160 +this one's 500 and this one's 250, so let's change those + +468 +00:23:09.160 --> 00:23:13.940 +to 500 and this one also should be 500 + +469 +00:23:13.940 --> 00:23:18.240 +and our CSS should also be 0.5 seconds. + +470 +00:23:19.220 --> 00:23:23.000 +It's not ideal to have this duplicated twice + +471 +00:23:23.000 --> 00:23:24.870 +because then if you need to update either of them + +472 +00:23:24.870 --> 00:23:26.810 +you need to remember that you update either of them. + +473 +00:23:26.810 --> 00:23:29.450 +So we can actually put all of these in just a variable. + +474 +00:23:29.450 --> 00:23:31.590 +So let's go right above here where we made + +475 +00:23:31.590 --> 00:23:34.063 +the rest of our variables and I'll say, + +476 +00:23:34.063 --> 00:23:36.680 +const transition options is equal to an object + +477 +00:23:41.930 --> 00:23:44.258 +and then inside of that object we're just going to convert + +478 +00:23:44.258 --> 00:23:47.840 +all of these props to properties on the object. + +479 +00:23:47.840 --> 00:23:50.270 +So the class name, this is gonna be order, + +480 +00:23:50.270 --> 00:23:53.870 +the key is going to just be the key + +481 +00:23:53.870 --> 00:23:57.810 +and the timeout is going to be just an object. + +482 +00:23:57.810 --> 00:23:59.510 +And again, we don't even need the colon key + +483 +00:23:59.510 --> 00:24:00.890 +because it's just key. + +484 +00:24:00.890 --> 00:24:02.750 +Now we have those transition options + +485 +00:24:02.750 --> 00:24:06.984 +and we can take all of our options out + +486 +00:24:06.984 --> 00:24:11.150 +and simply just spread them into that object. + +487 +00:24:11.150 --> 00:24:13.640 +And again, we can replace that here as well, + +488 +00:24:15.850 --> 00:24:18.200 +this works very similar to how I showed you + +489 +00:24:18.200 --> 00:24:19.830 +it was spreading the state. + +490 +00:24:19.830 --> 00:24:23.150 +You can just take any object and spread it into a component + +491 +00:24:23.150 --> 00:24:25.950 +and it will apply all of those options to it. + +492 +00:24:25.950 --> 00:24:28.000 +So we'll give it a save and we'll make sure + +493 +00:24:28.000 --> 00:24:29.990 +that actually still works. + +494 +00:24:29.990 --> 00:24:31.920 +Remove them, still works beautifully, + +495 +00:24:31.920 --> 00:24:34.690 +add items to our order and it works beautifully. + +496 +00:24:34.690 --> 00:24:36.740 +If I ever need to make an option change + +497 +00:24:36.740 --> 00:24:38.990 +I just need to pop this in here. + +498 +00:24:38.990 --> 00:24:42.720 +And this neat because if you even wanted to put this + +499 +00:24:42.720 --> 00:24:44.770 +in a separate file because you were using + +500 +00:24:44.770 --> 00:24:47.370 +this specific transition in many components, + +501 +00:24:47.370 --> 00:24:49.240 +that would be totally easy, you just export it + +502 +00:24:49.240 --> 00:24:51.820 +from that file, import it into this file + +503 +00:24:51.820 --> 00:24:53.970 +and you're gonna be in good shape. + diff --git a/RFB/23 - Component Validation with PropTypes.vtt b/RFB/23 - Component Validation with PropTypes.vtt index 84967c0..8880546 100755 --- a/RFB/23 - Component Validation with PropTypes.vtt +++ b/RFB/23 - Component Validation with PropTypes.vtt @@ -1,423 +1,1046 @@ -WEBVTT - -00:00:00.000 --> 00:00:03.000 line:100% position:50% align:middle -♪ [music] ♪ - -00:00:06.200 --> 00:00:10.160 line:100% position:50% align:middle -One of the things that I really like about -React is that it forces you to write well - -00:00:10.160 --> 00:00:13.640 line:100% position:50% align:middle -structured code, and I feel like as I've -learned React over the years I've become a - -00:00:13.640 --> 00:00:18.290 line:100% position:50% align:middle -much better and stronger JavaScript -developer. Sometimes things in React seem - -00:00:18.290 --> 00:00:21.235 line:100% position:50% align:middle -a little bit harder than they actually -have to be, and that's just because React - -00:00:21.235 --> 00:00:25.545 line:100% position:50% align:middle -is forcing us to write really well -structured and modular components. - -00:00:25.545 --> 00:00:28.917 line:100% position:50% align:middle -One of the things that we can use to make -these modular components is something - -00:00:28.917 --> 00:00:32.490 line:100% position:50% align:middle -called PropTypes. Now we're making -these components here and eventually - -00:00:32.490 --> 00:00:35.070 line:100% position:50% align:middle -what's going to happen is that -you're going to want to share them. - -00:00:35.070 --> 00:00:38.720 line:100% position:50% align:middle -You might want to share them with your -coworkers that are working on the same - -00:00:38.720 --> 00:00:41.580 line:100% position:50% align:middle -application as you or just share them at -open source on the internet, - -00:00:41.580 --> 00:00:45.940 line:100% position:50% align:middle -and one thing that we can use is called -PropTypes which will allow us to validate - -00:00:45.940 --> 00:00:51.350 line:100% position:50% align:middle -the data that is coming into our actual -components. So what that means is, - -00:00:51.350 --> 00:00:58.390 line:100% position:50% align:middle -I've got this header here and this header -relies on us taking in a Prop of tagline, - -00:00:58.390 --> 00:01:02.700 line:100% position:50% align:middle -and we need to know that that is a string. -Now we built it so we know that, that is a - -00:01:02.700 --> 00:01:06.370 line:100% position:50% align:middle -string, however, let's say I built this -actual component and then someone else on - -00:01:06.370 --> 00:01:11.200 line:100% position:50% align:middle -my team was using the component. They -need to know what needs to be passed to - -00:01:11.200 --> 00:01:16.052 line:100% position:50% align:middle -that specific component, whether it's a -string of tagline, or a number, or - -00:01:16.052 --> 00:01:21.172 line:100% position:50% align:middle -function, or an object or you get the -point, right? So what I want to then do is - -00:01:21.172 --> 00:01:24.670 line:100% position:50% align:middle -we're going to make our components a -little bit more resilient by going through - -00:01:24.670 --> 00:01:29.120 line:100% position:50% align:middle -everything, all the components that we've -built, and adding PropTypes to them. - -00:01:29.120 --> 00:01:32.620 line:100% position:50% align:middle -So I'm just going to take a look at an -example, I just pulled up a random react - -00:01:32.620 --> 00:01:36.000 line:100% position:50% align:middle -component here, this one's called react- -tabs, and you can see that they have - -00:01:36.000 --> 00:01:40.496 line:100% position:50% align:middle -PropTypes here which are, they have -children, which could be an array, an - -00:01:40.496 --> 00:01:44.875 line:100% position:50% align:middle -object or a string. They have a class name -so they're expecting someone to pass a - -00:01:44.875 --> 00:01:49.611 line:100% position:50% align:middle -class name of string, if they pass an idea -it should be a string, if it's selected it - -00:01:49.611 --> 00:01:55.157 line:100% position:50% align:middle -has to be true or false, nothing else. A -style could be an object and the tabId - -00:01:55.157 --> 00:01:59.435 line:100% position:50% align:middle -needs to be a string. So those are all the -things that this component needs to - -00:01:59.435 --> 00:02:05.621 line:100% position:50% align:middle -actually run and it needs to either be -exactly the one that they pass or one of - -00:02:05.621 --> 00:02:10.827 line:100% position:50% align:middle -an array, an object or a string. So that -just helps me as a user use this component - -00:02:10.827 --> 00:02:14.199 line:100% position:50% align:middle -because it's going to yell at me -if I don't use this properly. - -00:02:14.199 --> 00:02:18.088 line:100% position:50% align:middle -So let's close this down, let's -open up our header js and do a - -00:02:18.088 --> 00:02:23.200 line:100% position:50% align:middle -really simple one here. We've got our -header and we want to go below where we - -00:02:23.200 --> 00:02:27.563 line:100% position:50% align:middle -actually declare this component here and -we're going to say Header.PropTypes equals - -00:02:27.563 --> 00:02:31.788 line:100% position:50% align:middle -and it's going to be an object. Now we -just need to specify every single Prop - -00:02:31.788 --> 00:02:36.011 line:100% position:50% align:middle -that is used in that component. In this -case, it's just tagline, and then we - -00:02:36.011 --> 00:02:41.500 line:100% position:50% align:middle -specify it is going to be a -React.PropTypes, now that's capital P and - -00:02:41.500 --> 00:02:43.818 line:100% position:50% align:middle -then .string. Now there's a -whole bunch of different - -00:02:43.818 --> 00:02:48.450 line:100% position:50% align:middle -types of PropTypes and we can take a look -at them one sec. If you look at the Prop - -00:02:48.450 --> 00:02:53.059 line:100% position:50% align:middle -validation on the React documentation, you -can see that there's examples of all - -00:02:53.059 --> 00:02:56.660 line:100% position:50% align:middle -different kinds of PropTypes that you're -going to be going through as well as the - -00:02:56.660 --> 00:03:00.960 line:100% position:50% align:middle -ability to do custom Prop validation if -you have something that's very specific to - -00:03:00.960 --> 00:03:05.600 line:100% position:50% align:middle -your needs. So here, we have React. -PropTypes.string. If I give that a save - -00:03:05.600 --> 00:03:12.100 line:100% position:50% align:middle -and this thing refreshes, nothing happens. -However, watch if I were then to go into - -00:03:12.100 --> 00:03:17.780 line:100% position:50% align:middle -our app.js where we use header, and let's -say instead of passing it fresh seafood - -00:03:17.780 --> 00:03:25.000 line:100% position:50% align:middle -market, but we pass it a number of 500. It -then yells at us and says, "Failed - -00:03:25.000 --> 00:03:29.694 line:100% position:50% align:middle -PropType, invalid Prop tagline of number -supplied to header expected string," - -00:03:29.694 --> 00:03:32.895 line:100% position:50% align:middle -so these warnings are only shown in -development if you push this to - -00:03:32.895 --> 00:03:36.607 line:100% position:50% align:middle -production it's not going to show you any -of this. But as you're developing, - -00:03:36.607 --> 00:03:41.044 line:100% position:50% align:middle -if I was a user, if I was someone else on -the team I would immediately know that oh, - -00:03:41.044 --> 00:03:45.879 line:100% position:50% align:middle -I didn't pass in the right thing or I -didn't pass in it at all. - -00:03:45.879 --> 00:03:51.043 line:100% position:50% align:middle -So what if I pass nothing at all, I just -do header? Nothing happens but, like, you - -00:03:51.043 --> 00:03:54.085 line:100% position:50% align:middle -can see we have a bit of a broken -component, so what we could do is we go - -00:03:54.085 --> 00:04:01.595 line:100% position:50% align:middle -back to our header and we add .isrequired -to the end, and then it's going to yell - -00:04:01.595 --> 00:04:06.005 line:100% position:50% align:middle -at us for not "Failed PropType, -required PropType tagline was not - -00:04:06.005 --> 00:04:09.845 line:100% position:50% align:middle -specified." So in this case, we didn't -specify anything, in this case, we - -00:04:09.845 --> 00:04:14.700 line:100% position:50% align:middle -specified a number so we need to go all -the way back to when we did a string and - -00:04:14.700 --> 00:04:19.573 line:100% position:50% align:middle -then nothing happens. So sort of the rule -of thumb that you should do is anytime - -00:04:19.573 --> 00:04:24.442 line:100% position:50% align:middle -that you pass a Prop into a component and -you use it, just take a second, pause and - -00:04:24.442 --> 00:04:28.368 line:100% position:50% align:middle -declare that actual PropType at the time -of doing it. So now, we're going to go - -00:04:28.368 --> 00:04:32.360 line:100% position:50% align:middle -through the rest of -them and re-declare them, - -00:04:32.360 --> 00:04:38.932 line:100% position:50% align:middle -so let's go to our components folder here -and let's start with our AddFishForm and - -00:04:38.932 --> 00:04:44.264 line:100% position:50% align:middle -we'll see where did we use Props and we -passed in the addFish anywhere else we - -00:04:44.264 --> 00:04:50.153 line:100% position:50% align:middle -used Props? Nope, that's it, so we'll go -to the bottom here say AddFishForm. - -00:04:50.153 --> 00:04:56.867 line:100% position:50% align:middle -PropTypes equals addFish and we say -React.PropTypes, again make sure - -00:04:56.867 --> 00:04:58.958 line:100% position:50% align:middle -it's a capital P dot in. - -00:04:58.958 --> 00:05:03.370 line:100% position:50% align:middle -what type is it? Well it gets passed in as -a function and if we go to the React - -00:05:03.370 --> 00:05:08.620 line:100% position:50% align:middle -docs here, you'll notice that boolean and -function are not spelled as boolean and - -00:05:08.620 --> 00:05:12.160 line:100% position:50% align:middle -function I guess because they're reserved -words so we have to say func, - -00:05:12.160 --> 00:05:18.860 line:100% position:50% align:middle -which is kind of fun to say, and then is -required. Press save and it should then - -00:05:18.860 --> 00:05:24.880 line:100% position:50% align:middle -work if I change this to object, it's -going to break on us because it is - -00:05:24.880 --> 00:05:30.050 line:100% position:50% align:middle -actually passing a function when we asked -for an object so it should be func. - -00:05:30.050 --> 00:05:35.940 line:100% position:50% align:middle -Let's go to the next one, app and let's -look where did we use Props. - -00:05:35.940 --> 00:05:49.040 line:100% position:50% align:middle -We used it for params and just for params, -good. Go to the bottom here say App. - -00:05:49.040 --> 00:05:58.153 line:100% position:50% align:middle -PropTypes equals params react.PropTypes, -capital P dot...so we're passing in an - -00:05:58.153 --> 00:06:02.975 line:100% position:50% align:middle -object here, so just say the word object -and is required. Good now, let's just go - -00:06:02.975 --> 00:06:07.028 line:100% position:50% align:middle -through all of them right now if you sort -of get the point what I would encourage - -00:06:07.028 --> 00:06:11.900 line:100% position:50% align:middle -you to do is try to do them yourself, -otherwise if you want to come along for - -00:06:11.900 --> 00:06:15.671 line:100% position:50% align:middle -the ride with me we can. So I'm going to -open up fish here, I'm going to look, - -00:06:15.671 --> 00:06:21.560 line:100% position:50% align:middle -we have details, index, add to -order and it's just those three, - -00:06:21.560 --> 00:06:34.860 line:100% position:50% align:middle -good. So fish.PropTypes I'm going to make -them all function right now and then we'll - -00:06:34.860 --> 00:06:43.360 line:100% position:50% align:middle -go through each one so details is an -object, index is a number and add to order - -00:06:43.360 --> 00:06:48.036 line:100% position:50% align:middle -is a function, good. Let's see -if it yells at us for anything, - -00:06:48.036 --> 00:06:54.428 line:100% position:50% align:middle -oh good! Invalid Prop index, oh it should -be not a... We passed it in as a string I - -00:06:54.428 --> 00:07:01.830 line:100% position:50% align:middle -guess not as a number. Good, next one, -header already did it. Inventory, - -00:07:01.830 --> 00:07:14.460 line:100% position:50% align:middle -Props so fishes, updateFish, -removeFish and I think that's it. - -00:07:14.460 --> 00:07:20.360 line:100% position:50% align:middle -Oh, addFish and loadSamples. Good -lots of them here. Inventory. - -00:07:20.360 --> 00:07:32.550 line:100% position:50% align:middle -PropTypes. So fishes is going to be an -object, updateFish is going to be a - -00:07:32.550 --> 00:07:37.158 line:100% position:50% align:middle -function, removeFish is a function, -addFish is a function and loadSamples is a - -00:07:37.158 --> 00:07:41.042 line:100% position:50% align:middle -function, good. See if it yells at us, -nope we're in good shape. - -00:07:41.042 --> 00:07:52.391 line:100% position:50% align:middle -Not found, doesn't take in any Props, -good. Order, fishes, order, - -00:07:52.391 --> 00:07:59.176 line:100% position:50% align:middle -removeFromOrder, fishes, Order -fishes order, got that one. - -00:07:59.176 --> 00:08:02.632 line:100% position:50% align:middle -One cool thing you can do -sometimes is, I'll just grab them all, - -00:08:02.632 --> 00:08:07.349 line:100% position:50% align:middle -anywhere that it says Props I'll just grab -whatever's after it and then I will create - -00:08:07.349 --> 00:08:15.315 line:100% position:50% align:middle -my order.PropTypes here. And then I will -paste them all in and sometimes there's - -00:08:15.315 --> 00:08:19.559 line:100% position:50% align:middle -going to be duplicates here, so I'll just -use sublime text and I'll type in unique, - -00:08:19.559 --> 00:08:24.337 line:100% position:50% align:middle -if you can spell unique it'd be great. I -can't see because there's a microphone in - -00:08:24.337 --> 00:08:28.860 line:100% position:50% align:middle -front of my keyboard, here we go, unique -and that will just make them unique right, - -00:08:28.860 --> 00:08:41.856 line:100% position:50% align:middle -and then we'll grab all of them React. -PropTypes.func.isRequired so fishes in - -00:08:41.856 --> 00:08:47.061 line:100% position:50% align:middle -order is going to be an object and -removeFromOrder is going to be a function. - -00:08:47.061 --> 00:08:56.140 line:100% position:50% align:middle -Good last one, star picker, you notice -that we already have context types and - -00:08:56.140 --> 00:08:59.725 line:100% position:50% align:middle -remember we use PropTypes here, that's -just because we want it to surface the - -00:08:59.725 --> 00:09:04.333 line:100% position:50% align:middle -react-router that would allow us to use -transition too, but it doesn't look like - -00:09:04.333 --> 00:09:08.220 line:100% position:50% align:middle -we used Props in this component at -all. Good, so just doing that is going to - -00:09:08.220 --> 00:09:13.090 line:100% position:50% align:middle -make your component much more resilient -and stop us from either passing the wrong - -00:09:13.090 --> 00:09:17.133 line:100% position:50% align:middle -type of data and getting errors, -or not passing the data at all. +WEBVTT + +1 +00:00:02.212 --> 00:00:03.379 +[Upbeat Music] + +2 +00:00:06.811 --> 00:00:09.073 +One thing I found with after writing it + +3 +00:00:09.073 --> 00:00:11.466 +for maybe two and a half years now is I feel like + +4 +00:00:11.466 --> 00:00:13.617 +it makes me a better job descriptive developer + +5 +00:00:13.617 --> 00:00:16.617 +because sometimes things in react seem a little bit harder + +6 +00:00:16.617 --> 00:00:19.386 +than they should be but I think as a rule of thumb, + +7 +00:00:19.386 --> 00:00:21.481 +there are some weird things in it, but at a rule of thumb + +8 +00:00:21.481 --> 00:00:22.809 +I think that those are forcing me to + +9 +00:00:22.809 --> 00:00:25.137 +become a much better job descript developer. + +10 +00:00:25.137 --> 00:00:26.841 +So what we're going to do right now is talk + +11 +00:00:26.841 --> 00:00:28.682 +about something called PropTypes and now + +12 +00:00:28.682 --> 00:00:31.489 +with prop types every time you have a component, + +13 +00:00:31.489 --> 00:00:35.696 +you are often passing in some sort of data and + +14 +00:00:35.696 --> 00:00:37.516 +how do you pass data into a component? + +15 +00:00:37.516 --> 00:00:38.349 +With props. + +16 +00:00:38.349 --> 00:00:40.485 +Well with PropTypes we can sort of validate the data + +17 +00:00:40.485 --> 00:00:43.420 +that is being passed in to make sure we're passing + +18 +00:00:43.420 --> 00:00:46.846 +the right kind of data that it's looking for and + +19 +00:00:46.846 --> 00:00:49.598 +the data is being passed in that it actually looks + +20 +00:00:49.598 --> 00:00:52.326 +the way that we're expecting it to be passed in. + +21 +00:00:52.326 --> 00:00:54.158 +So what we're going to do is let's open up our + +22 +00:00:54.158 --> 00:00:56.031 +header.js here and you'll notice that + +23 +00:00:56.031 --> 00:00:58.326 +we use props.tagline right here. + +24 +00:00:58.326 --> 00:01:02.077 +Now if I was on a team doing react components and + +25 +00:01:02.077 --> 00:01:04.517 +I built this thing then I handed it off to somebody else + +26 +00:01:04.517 --> 00:01:09.517 +to use it, how do they know that this component called + +27 +00:01:09.897 --> 00:01:13.082 +header takes a prop called tagline then + +28 +00:01:13.082 --> 00:01:15.593 +that prop is a string, right? + +29 +00:01:15.593 --> 00:01:17.449 +Other than the short of opening it up, + +30 +00:01:17.449 --> 00:01:19.761 +they don't really know that unless I have some + +31 +00:01:19.761 --> 00:01:21.081 +sort of documentation. + +32 +00:01:21.081 --> 00:01:24.305 +So what prop types allows us to do is specify ahead of time + +33 +00:01:24.305 --> 00:01:26.937 +what needs to be passed in when it's used and + +34 +00:01:26.937 --> 00:01:29.875 +if someone doesn't pass in the right type of data or + +35 +00:01:29.875 --> 00:01:33.185 +the right amount of data, then we're going to give them + +36 +00:01:33.185 --> 00:01:35.641 +a warning in their console telling them that + +37 +00:01:35.641 --> 00:01:37.161 +they failed their PropType. + +38 +00:01:37.161 --> 00:01:39.834 +So what we're going to do is we're going to go up here + +39 +00:01:39.834 --> 00:01:43.767 +and we're going to import PropTypes capital P capital T + +40 +00:01:43.767 --> 00:01:47.074 +from and this is in a separate package called prop-types. + +41 +00:01:47.074 --> 00:01:49.052 +This used to be built into react, however, + +42 +00:01:49.052 --> 00:01:53.156 +because some users use other ways to do type checking + +43 +00:01:53.156 --> 00:01:55.476 +so some other ways your can do type checking is + +44 +00:01:55.476 --> 00:01:57.884 +you can use a typed language to write your java script + +45 +00:01:57.884 --> 00:02:01.381 +like TypeScript or you can use one of Facebook's utilities + +46 +00:02:01.381 --> 00:02:04.715 +called Flow, which allows you to ahead of time declare + +47 +00:02:04.715 --> 00:02:07.924 +what the props are that are being passed in and then + +48 +00:02:07.924 --> 00:02:10.059 +PropTypes are sort of a third way we can do it. + +49 +00:02:10.059 --> 00:02:12.161 +That's why it's in a separate package because + +50 +00:02:12.161 --> 00:02:16.197 +it's not every project that will be using PropTypes. + +51 +00:02:16.197 --> 00:02:18.804 +So we'll go down here, we'll take our header and + +52 +00:02:18.804 --> 00:02:22.470 +we will add the propTypes, so this is lowercase P, + +53 +00:02:22.470 --> 00:02:24.525 +capital T and that's just going to be an object. + +54 +00:02:24.525 --> 00:02:28.234 +Now all you have to do now is pass at every single prop + +55 +00:02:28.234 --> 00:02:31.275 +that you need and in our case, it's just tagline, and + +56 +00:02:31.275 --> 00:02:33.386 +then you tell it which type you're expecting. + +57 +00:02:33.386 --> 00:02:36.402 +The way that we do that is just say PropTypes., + +58 +00:02:36.402 --> 00:02:38.366 +and then we tell it, this is kind of cool, + +59 +00:02:38.366 --> 00:02:40.487 +my auto complete is showing me, um, + +60 +00:02:40.487 --> 00:02:42.270 +all of the possible option and + +61 +00:02:42.270 --> 00:02:45.943 +this should always be passed in as a string and then you can + +62 +00:02:45.943 --> 00:02:49.535 +also tack in an optional is required onto the end, + +63 +00:02:49.535 --> 00:02:52.279 +which will tell you if it's required or not. + +64 +00:02:52.279 --> 00:02:54.383 +So if I give a save now and I go back and + +65 +00:02:54.383 --> 00:02:57.504 +open up my devtools, you'll see there's nothing showing up + +66 +00:02:57.504 --> 00:03:02.105 +in here but if I were to go into my app.js and take off + +67 +00:03:02.105 --> 00:03:05.772 +the tagline prop, watch what's gonna happen. + +68 +00:03:07.110 --> 00:03:09.819 +Now it starts to yell at us, prop tagline is marked + +69 +00:03:09.819 --> 00:03:12.660 +as required in header but it's value is undefined + +70 +00:03:12.660 --> 00:03:16.078 +so that means you did not pass a tagline prop, good. + +71 +00:03:16.078 --> 00:03:19.625 +Well what if I were to say maybe the tagline + +72 +00:03:19.625 --> 00:03:21.042 +is equal to true? + +73 +00:03:22.499 --> 00:03:24.652 +Like we're passing it as a Boolean, it's going + +74 +00:03:24.652 --> 00:03:26.226 +to start complaining at us. + +75 +00:03:26.226 --> 00:03:29.748 +It got a Boolean but it was expecting a string, right? + +76 +00:03:29.748 --> 00:03:32.629 +Or if I pass in a number, it's going to yell at us + +77 +00:03:32.629 --> 00:03:35.317 +for we got a number but we were expecting you + +78 +00:03:35.317 --> 00:03:36.484 +to give us a string. + +79 +00:03:36.484 --> 00:03:38.021 +You kind of get the point here. + +80 +00:03:38.021 --> 00:03:40.781 +As you use it, before I even have to crack open this file + +81 +00:03:40.781 --> 00:03:43.613 +to see what's wrong, it will give me a really good warning + +82 +00:03:43.613 --> 00:03:44.597 +in the console. + +83 +00:03:44.597 --> 00:03:46.966 +Now, these will not make it to production. + +84 +00:03:46.966 --> 00:03:50.442 +So for whatever reason, if you deploy this to production, + +85 +00:03:50.442 --> 00:03:53.010 +it's not going to give you this error. + +86 +00:03:53.010 --> 00:03:56.241 +It's just sort of a development helper that we have. + +87 +00:03:56.241 --> 00:03:59.555 +So I'm going to bring that tagline back here and + +88 +00:03:59.555 --> 00:04:01.035 +what we're going to do now is go + +89 +00:04:01.035 --> 00:04:03.211 +through all our different components we that have written + +90 +00:04:03.211 --> 00:04:06.754 +in this course so far and start writing props for them. + +91 +00:04:06.754 --> 00:04:09.563 +So there's some documentation here for what the different + +92 +00:04:09.563 --> 00:04:14.066 +types of PropTypes are, obviously, you have all of the types + +93 +00:04:14.066 --> 00:04:15.794 +that come along with react. + +94 +00:04:15.794 --> 00:04:19.583 +So array, bool and func, I guess those are reserved words + +95 +00:04:19.583 --> 00:04:22.759 +in JavaScript so you have to use bool instead of Boolean + +96 +00:04:22.759 --> 00:04:24.207 +and func instead of function. + +97 +00:04:24.207 --> 00:04:26.343 +The rest of them are what you'd expect. + +98 +00:04:26.343 --> 00:04:28.231 +However, you can also expect somebody + +99 +00:04:28.231 --> 00:04:31.865 +to pass you another component, you can expect people + +100 +00:04:31.865 --> 00:04:34.158 +to pass you a note or an element. + +101 +00:04:34.158 --> 00:04:36.625 +You can expect to pass one of the things. + +102 +00:04:36.625 --> 00:04:39.690 +So it could either be a string, number or an instance + +103 +00:04:39.690 --> 00:04:42.993 +of the message component and then there's another one here. + +104 +00:04:42.993 --> 00:04:44.049 +This is the shape. + +105 +00:04:44.049 --> 00:04:45.897 +This is what we're going to use, as well. + +106 +00:04:45.897 --> 00:04:48.602 +Cause I find this one particularly helpful when passing + +107 +00:04:48.602 --> 00:04:50.930 +objects that need to look a certain way. + +108 +00:04:50.930 --> 00:04:53.913 +So let's go, um, let's just go into fish.js and let's just + +109 +00:04:53.913 --> 00:04:55.145 +do that one first. + +110 +00:04:55.145 --> 00:04:58.728 +So at the top of it, we'll import PropTypes + +111 +00:05:00.492 --> 00:05:01.992 +from prop-types + +112 +00:05:04.551 --> 00:05:07.156 +and you notice how I out that above this? + +113 +00:05:07.156 --> 00:05:10.156 +I always like to import my MPM packages first then + +114 +00:05:10.156 --> 00:05:14.713 +import my, uh, relative paths after that and then + +115 +00:05:14.713 --> 00:05:16.722 +they don't have to mix and match them. + +116 +00:05:16.722 --> 00:05:20.081 +Then what we'll do is, since this is not a, like this one, + +117 +00:05:20.081 --> 00:05:22.619 +what's the name for this type of component? + +118 +00:05:22.619 --> 00:05:25.202 +It's a stateless functional component, we need to do it + +119 +00:05:25.202 --> 00:05:26.859 +after the fact, like this. + +120 +00:05:26.859 --> 00:05:30.294 +Now, this one is a regular react component so we can simply + +121 +00:05:30.294 --> 00:05:33.877 +just put a static property called propTypes + +122 +00:05:35.791 --> 00:05:37.495 +and put an object on it. + +123 +00:05:37.495 --> 00:05:40.248 +The reason why that is static is because we're declaring + +124 +00:05:40.248 --> 00:05:43.625 +the PropTypes for all of the fish and every single time + +125 +00:05:43.625 --> 00:05:46.344 +that we make a new fish, it's not necessary + +126 +00:05:46.344 --> 00:05:48.985 +to duplicate those PropTypes to every single one, + +127 +00:05:48.985 --> 00:05:50.857 +if they're going to be exactly the same + +128 +00:05:50.857 --> 00:05:52.448 +for every single component. + +129 +00:05:52.448 --> 00:05:54.224 +So by putting it static, it sort of lives + +130 +00:05:54.224 --> 00:05:59.220 +on the momma fish component and we are unnecessarily + +131 +00:05:59.220 --> 00:06:02.499 +copying the PropTypes to every single instance, + +132 +00:06:02.499 --> 00:06:03.764 +since they're going to be exactly the same. + +133 +00:06:03.764 --> 00:06:06.487 +Now, uh, what are the props that we have here? + +134 +00:06:06.487 --> 00:06:07.320 +Well, + +135 +00:06:07.320 --> 00:06:10.267 +we are passing in and the way you can tell is I was + +136 +00:06:10.267 --> 00:06:13.211 +just like search for this.props and we've got + +137 +00:06:13.211 --> 00:06:16.624 +this.props.details and add to order. + +138 +00:06:16.624 --> 00:06:20.025 +So I'll go up here we'll say details + +139 +00:06:20.025 --> 00:06:23.463 +and we need add to order. + +140 +00:06:23.463 --> 00:06:24.744 +So let's do add to order first, + +141 +00:06:24.744 --> 00:06:26.223 +since that's going to be very simple. + +142 +00:06:26.223 --> 00:06:27.207 +Let's look here. + +143 +00:06:27.207 --> 00:06:29.255 +It's going to be a function. + +144 +00:06:29.255 --> 00:06:33.755 +So we'll take this PropTypes.func and then the details + +145 +00:06:35.823 --> 00:06:38.703 +is going to be, well what is it gonna be? + +146 +00:06:38.703 --> 00:06:42.412 +Details is going to have the image, the name, the price, + +147 +00:06:42.412 --> 00:06:44.476 +the description and the status. + +148 +00:06:44.476 --> 00:06:46.532 +This is a little bit weird. + +149 +00:06:46.532 --> 00:06:51.532 +Of course, we could go and say PropTypes.object + +150 +00:06:53.710 --> 00:06:57.346 +and it would pass with flying colors, see no errors there. + +151 +00:06:57.346 --> 00:07:00.212 +But that's a bit of a cheat because like that's just + +152 +00:07:00.212 --> 00:07:03.631 +saying you pass in any object and this would not work + +153 +00:07:03.631 --> 00:07:06.255 +if I didn't pass in an object that consisted + +154 +00:07:06.255 --> 00:07:08.335 +of these five things. + +155 +00:07:08.335 --> 00:07:11.423 +So what we can do instead of saying an object, + +156 +00:07:11.423 --> 00:07:16.175 +we can give it a PropTypes.shape and a shape is a function + +157 +00:07:16.175 --> 00:07:19.391 +that accepts an object and these are where we're going + +158 +00:07:19.391 --> 00:07:22.439 +to specify what all of the different properties + +159 +00:07:22.439 --> 00:07:26.826 +actually are, so we have an image, name, price, + +160 +00:07:26.826 --> 00:07:30.693 +description and status and I'm going to move price + +161 +00:07:30.693 --> 00:07:32.778 +to the bottom here because all of these are going + +162 +00:07:32.778 --> 00:07:34.187 +to be pretty simple. + +163 +00:07:34.187 --> 00:07:36.937 +It's going to be PropTypes.string + +164 +00:07:38.001 --> 00:07:41.559 +and then price is going to be a number. + +165 +00:07:41.559 --> 00:07:43.256 +I really like this one. + +166 +00:07:43.256 --> 00:07:45.680 +I probably used this one the most out of everything + +167 +00:07:45.680 --> 00:07:48.592 +because when I'm passing values to a component, + +168 +00:07:48.592 --> 00:07:50.840 +it's almost always I'm passing an object an object full + +169 +00:07:50.840 --> 00:07:52.760 +of data that needs to be displayed. + +170 +00:07:52.760 --> 00:07:56.958 +So that's why I like to pass it as a shape and then + +171 +00:07:56.958 --> 00:08:00.855 +it checks that the object you are sending it will have + +172 +00:08:00.855 --> 00:08:04.505 +all of these properties with these being types added in. + +173 +00:08:04.505 --> 00:08:07.105 +Good, so that is fish and if you'd like to pause this video + +174 +00:08:07.105 --> 00:08:10.172 +and just go through and do them yourselves, I think you'd + +175 +00:08:10.172 --> 00:08:11.141 +kind of get the point. + +176 +00:08:11.141 --> 00:08:13.317 +I'll go through them together in case you want to hang on + +177 +00:08:13.317 --> 00:08:14.461 +and listen to the rest. + +178 +00:08:14.461 --> 00:08:17.085 +Otherwise, really the thing that you need to know + +179 +00:08:17.085 --> 00:08:20.173 +is whenever you write this.props.something you should + +180 +00:08:20.173 --> 00:08:22.469 +stop and write a PropType for it really quickly. + +181 +00:08:22.469 --> 00:08:25.355 +The cheesy thing I always say is stop, drop and prop + +182 +00:08:25.355 --> 00:08:27.804 +and [Laughs] you're gonna be in good shape and + +183 +00:08:27.804 --> 00:08:32.043 +probably save yourself a headache somewhere down the road + +184 +00:08:32.043 --> 00:08:35.026 +where you forget to pass in the right amount of data. + +185 +00:08:35.026 --> 00:08:37.771 +So if you are leaving me now, goodbye, I'll see you + +186 +00:08:37.771 --> 00:08:38.604 +in the next video. + +187 +00:08:38.604 --> 00:08:40.556 +Otherwise, let's keep going through the rest of them. + +188 +00:08:40.556 --> 00:08:42.739 +Next up is the add fish form + +189 +00:08:42.739 --> 00:08:46.519 +and we'll say this.props.addFish is one. + +190 +00:08:46.519 --> 00:08:48.936 +It's gonna search for the rest. + +191 +00:08:48.936 --> 00:08:49.769 +That's it. + +192 +00:08:49.769 --> 00:08:51.974 +So addFish is the only one. + +193 +00:08:51.974 --> 00:08:54.517 +We're gonna go up here + +194 +00:08:54.517 --> 00:08:58.434 +say static propTypes. + +195 +00:08:59.777 --> 00:09:02.177 +I always goof up the casing of it. + +196 +00:09:02.177 --> 00:09:04.578 +So it's lowercase P capital case T and + +197 +00:09:04.578 --> 00:09:07.997 +then the package is capital P, capital T. + +198 +00:09:07.997 --> 00:09:09.997 +So import PropTypes from + +199 +00:09:12.837 --> 00:09:13.670 +prop-types + +200 +00:09:14.980 --> 00:09:19.813 +and then we here, we need PropTypes.func. + +201 +00:09:23.568 --> 00:09:25.092 +I always make sure I give it a reload and + +202 +00:09:25.092 --> 00:09:26.609 +it still works just fine, good. + +203 +00:09:26.609 --> 00:09:29.809 +Let's go through the rest of them. + +204 +00:09:29.809 --> 00:09:34.809 +App.js doesn't have any props, you could well this.props + +205 +00:09:37.610 --> 00:09:40.610 +you could assume that the props.match is coming in + +206 +00:09:40.610 --> 00:09:43.106 +from the router, so in that case, we could either + +207 +00:09:43.106 --> 00:09:45.971 +shape it out for the pieces that we need or + +208 +00:09:45.971 --> 00:09:47.290 +just say it's an object. + +209 +00:09:47.290 --> 00:09:51.290 +So in this case, I will just say it's an object. + +210 +00:10:01.893 --> 00:10:05.005 +Good and then make sure you import it + +211 +00:10:05.005 --> 00:10:06.589 +at the top of your file. + +212 +00:10:06.589 --> 00:10:10.756 +I'm gonna put it right underneath importing react. + +213 +00:10:11.762 --> 00:10:15.012 +Good, so it's app EditFishForm is next. + +214 +00:10:16.279 --> 00:10:21.279 +So we've got this.props.fish .updatefish and index. + +215 +00:10:24.554 --> 00:10:25.721 +We'll go here, + +216 +00:10:28.893 --> 00:10:30.810 +make this a bit bigger. + +217 +00:10:36.309 --> 00:10:39.976 +So what did I say, we got fish, we got index + +218 +00:10:41.004 --> 00:10:43.087 +and we've got updateFish. + +219 +00:10:44.117 --> 00:10:44.950 +Good. + +220 +00:10:45.980 --> 00:10:47.647 +Import my prop types + +221 +00:10:48.877 --> 00:10:53.460 +and then for each of these I'm going to have PropTypes. + +222 +00:10:55.268 --> 00:10:57.624 +Dot and then we'll go through each of them. + +223 +00:10:57.624 --> 00:11:01.616 +First one is going to be a shape where the fish will contain + +224 +00:11:01.616 --> 00:11:03.536 +again, this is like kind of the same thing. + +225 +00:11:03.536 --> 00:11:05.920 +So you could even put these in their own file and + +226 +00:11:05.920 --> 00:11:08.016 +import and export them if you find yourself using + +227 +00:11:08.016 --> 00:11:10.160 +it much more often. + +228 +00:11:10.160 --> 00:11:13.629 +So fish.js is where I've used those before just go ahead + +229 +00:11:13.629 --> 00:11:18.212 +and take that entire shape object and paste it in here. + +230 +00:11:22.500 --> 00:11:25.745 +Index is going to be a string and updateFish is + +231 +00:11:25.745 --> 00:11:27.328 +going to be a func. + +232 +00:11:28.504 --> 00:11:30.306 +Good, we still in good shape? + +233 +00:11:30.306 --> 00:11:34.223 +Oop, I got an error on EditFishForm on line 14. + +234 +00:11:36.068 --> 00:11:37.339 +What did I do? + +235 +00:11:37.339 --> 00:11:39.089 +A colon, there we go. + +236 +00:11:41.042 --> 00:11:43.306 +Still working good for me. + +237 +00:11:43.306 --> 00:11:47.306 +With edit we did fish, we did header, inventory. + +238 +00:11:50.484 --> 00:11:53.317 +So this.props.fishes + +239 +00:11:55.564 --> 00:11:58.300 +and so we got fished, updateFish, + +240 +00:11:58.300 --> 00:12:00.967 +deleteFish and loadSampleFishes. + +241 +00:12:26.501 --> 00:12:28.213 +Lowercase P. + +242 +00:12:28.213 --> 00:12:30.957 +So fishes is going to be an array. + +243 +00:12:30.957 --> 00:12:33.540 +The rest of them are functions. + +244 +00:12:35.388 --> 00:12:36.976 +Oop, we got an error. + +245 +00:12:36.976 --> 00:12:41.681 +Invalid, oh, it's not an array, it's an object. + +246 +00:12:41.681 --> 00:12:43.801 +Good and of course you can go a little deeper + +247 +00:12:43.801 --> 00:12:45.905 +and shape those out. + +248 +00:12:45.905 --> 00:12:48.655 +Uh, not found has nothing, order. + +249 +00:12:52.161 --> 00:12:56.854 +Let's take the PropTypes package, import that right away. + +250 +00:12:56.854 --> 00:13:00.437 +This.props, so we got fishes, we got order, + +251 +00:13:02.794 --> 00:13:07.794 +we got removeFromOrder and that's it. + +252 +00:13:12.430 --> 00:13:15.347 +So fishes is going to be an object. + +253 +00:13:16.590 --> 00:13:18.366 +Order is going to be an object and + +254 +00:13:18.366 --> 00:13:20.533 +removeFromOrder is a func. + +255 +00:13:22.176 --> 00:13:23.759 +Still looking good. + +256 +00:13:25.562 --> 00:13:27.459 +Router doesn't have any props and + +257 +00:13:27.459 --> 00:13:32.209 +store picker needs history. + +258 +00:13:35.874 --> 00:13:39.241 +Beautiful, got all my prop types now being pulled in + +259 +00:13:39.241 --> 00:13:42.161 +and, uh, I made my application a little but more resilient + +260 +00:13:42.161 --> 00:13:45.764 +so I know that I'm passing in both the right data + +261 +00:13:45.764 --> 00:13:47.524 +as well as in the right type of data. + From 80adb8a687e238d80abc4c05a28af488af36f2bc Mon Sep 17 00:00:00 2001 From: Jonathan Dahan Date: Thu, 31 Jan 2019 19:00:37 -0500 Subject: [PATCH 3/3] 24, 25 --- RFB/24 - Authentication.vtt | 2181 ++++++++++---------- RFB/25 - Building React for Production.vtt | 486 +++-- 2 files changed, 1380 insertions(+), 1287 deletions(-) diff --git a/RFB/24 - Authentication.vtt b/RFB/24 - Authentication.vtt index 44d20a0..8880546 100755 --- a/RFB/24 - Authentication.vtt +++ b/RFB/24 - Authentication.vtt @@ -1,1135 +1,1046 @@ -WEBVTT - -00:00:00.329 --> 00:00:03.329 line:100% position:50% align:middle -♪ [music] ♪ - -00:00:06.977 --> 00:00:09.326 line:100% position:50% align:middle -Up until now, pretty much -anyone can just - -00:00:09.326 --> 00:00:13.450 line:100% position:50% align:middle -edit or create a store and that's not -ideal if you actually want to have a real - -00:00:13.450 --> 00:00:18.050 line:100% position:50% align:middle -world application where you have owners of -a store and only the owner of that store - -00:00:18.050 --> 00:00:21.090 line:100% position:50% align:middle -would be able to edit it. So, this is the -finished application here. - -00:00:21.090 --> 00:00:23.640 line:100% position:50% align:middle -This is how it's going to work. We're -going to go to one of the stores that we - -00:00:23.640 --> 00:00:28.110 line:100% position:50% align:middle -have here and, by default, it's going to -show you nothing. You need to log in with - -00:00:28.110 --> 00:00:33.090 line:100% position:50% align:middle -GitHub, Facebook or Twitter. So, I'm going -to go ahead and log in with GitHub, - -00:00:33.090 --> 00:00:38.820 line:100% position:50% align:middle -and once I've logged in, the first person -to log in to that store with either one is - -00:00:38.820 --> 00:00:42.940 line:100% position:50% align:middle -going to be the owner of that actual -store, then I can go ahead and load some - -00:00:42.940 --> 00:00:47.950 line:100% position:50% align:middle -samples and add some stuff to my order. -However, if I were then to log out of - -00:00:47.950 --> 00:00:52.120 line:100% position:50% align:middle -here, I wouldn't be able to actually -manage that inventory. If I were then to - -00:00:52.120 --> 00:00:58.740 line:100% position:50% align:middle -log in with Twitter and authorize that -application, you're going to see, - -00:00:58.740 --> 00:01:01.440 line:100% position:50% align:middle -"Sorry, you aren't the owner of the -store," because I logged in as a different - -00:01:01.440 --> 00:01:08.590 line:100% position:50% align:middle -person. I can log out again, log in with -GitHub, and I'm back to being able to edit - -00:01:08.590 --> 00:01:13.090 line:100% position:50% align:middle -the actual store. So, we are doing -everything client-side, so how do you do - -00:01:13.090 --> 00:01:17.210 line:100% position:50% align:middle -authentication when it's only client-side? -That's really where Firebase comes in. - -00:01:17.210 --> 00:01:19.620 line:100% position:50% align:middle -We're going to split this into two parts. -First, we're going to, - -00:01:19.620 --> 00:01:23.640 line:100% position:50% align:middle -like, lock it down or pseudo lock it down -on the client side where people just won't - -00:01:23.640 --> 00:01:28.550 line:100% position:50% align:middle -be able to see this actual form to edit -it, and then we're going to actually go on - -00:01:28.550 --> 00:01:33.490 line:100% position:50% align:middle -the back end of Firebase and make sure -that if anyone were to sneakily be able to - -00:01:33.490 --> 00:01:36.850 line:100% position:50% align:middle -get this editing form to show, even if -they weren't the store owner, - -00:01:36.850 --> 00:01:39.770 line:100% position:50% align:middle -then Firebase would just reject them -because they aren't the actual store - -00:01:39.770 --> 00:01:41.730 line:100% position:50% align:middle -owner. So, that's what we want to do here. - -00:01:41.730 --> 00:01:46.320 line:100% position:50% align:middle -I'm going to close it down, and we want to -go to our Firebase here, - -00:01:46.320 --> 00:01:53.530 line:100% position:50% align:middle -and go to the Authentication tab, "Auth." -Then we want to add a couple different - -00:01:53.530 --> 00:01:57.580 line:100% position:50% align:middle -sign-up methods, so we're going to set up -a sign-up method, and in this tutorial, - -00:01:57.580 --> 00:01:59.080 line:100% position:50% align:middle -I'm going to show you how to do Facebook, -Twitter, and GitHub. - -00:01:59.080 --> 00:02:02.660 line:100% position:50% align:middle -Those are the most popular. However, you -can use email and password, - -00:02:02.660 --> 00:02:06.910 line:100% position:50% align:middle -and Google, and all kinds of other stuff -here. So, I'm going to turn on Facebook - -00:02:06.910 --> 00:02:12.270 line:100% position:50% align:middle -first. Now, what you need to do is go to -Facebook and create an application. - -00:02:12.270 --> 00:02:19.050 line:100% position:50% align:middle -So it's developers.facebook.com/apps and -we want to create an app called Catch of - -00:02:19.050 --> 00:02:23.670 line:100% position:50% align:middle -the Day, and we're going to put it in, how -about the Business, - -00:02:23.670 --> 00:02:28.130 line:100% position:50% align:middle -the fish business, and create an -application...oh, "Please select all - -00:02:28.130 --> 00:02:32.760 line:100% position:50% align:middle -photos which show a wristwatch." Wrist, -wrist, wrist, wrist, wristwatch. - -00:02:32.760 --> 00:02:40.810 line:100% position:50% align:middle -That is a waterfall. Facebook login, so -I'll click "Get Started Here," and we want - -00:02:40.810 --> 00:02:47.950 line:100% position:50% align:middle -to first, "Valid OAuth redirect URLs." So, -what we want to do is take this URL that - -00:02:47.950 --> 00:02:53.440 line:100% position:50% align:middle -they've given us, and then you need to -make sure that you actually hit enter so - -00:02:53.440 --> 00:02:56.530 line:100% position:50% align:middle -that it looks like a blue bubble. -Sometimes I always forget to do that and - -00:02:56.530 --> 00:02:59.970 line:100% position:50% align:middle -it does it. And, finally, "Embedded -Browser OAuth Login," you need to make - -00:02:59.970 --> 00:03:05.980 line:100% position:50% align:middle -sure that is checked on, scroll to the -bottom and click "Save Changes," then go - -00:03:05.980 --> 00:03:11.110 line:100% position:50% align:middle -to the Dashboard, and we need the -application ID, which is this right here, - -00:03:11.110 --> 00:03:14.740 line:100% position:50% align:middle -so I'm going to paste that into my "App -ID" here. I'm going to enable it, - -00:03:14.740 --> 00:03:19.360 line:100% position:50% align:middle -I guess. And, then, the Secret you also -need is...you can show it here, - -00:03:19.360 --> 00:03:23.850 line:100% position:50% align:middle -you can grab it. Don't ever put this in -any client-side code just because now that - -00:03:23.850 --> 00:03:26.550 line:100% position:50% align:middle -I've shown you this, I'm going to have to -reset them after this video. - -00:03:26.550 --> 00:03:29.850 line:100% position:50% align:middle -That's not something anyone should ever -see. So, I'm going to paste it in there, - -00:03:29.850 --> 00:03:35.040 line:100% position:50% align:middle -click "Save." Good, I've set that one up. -Now, Twitter, I want to turn on as well. - -00:03:35.040 --> 00:03:40.690 line:100% position:50% align:middle -I'm going to go to Twitter. I've already -created an application with Twitter, - -00:03:40.690 --> 00:03:46.080 line:100% position:50% align:middle -and then you can see that if I go to -Twitter, it's going to ask me for this - -00:03:46.080 --> 00:03:50.440 line:100% position:50% align:middle -callback URL. This callback URLs is really -important. This is not local host or - -00:03:50.440 --> 00:03:54.780 line:100% position:50% align:middle -anything like that. This is the actual URL -that Firebase gives you. - -00:03:54.780 --> 00:04:03.370 line:100% position:50% align:middle -And I'm going to update that, then I'm -going to go to Details. - -00:04:03.370 --> 00:04:08.030 line:100% position:50% align:middle -I'm going to grab...actually, no, back to -Settings, or Keys and Access Tokens. - -00:04:08.030 --> 00:04:17.810 line:100% position:50% align:middle -Going to grab the API Key, I'm going to -grab the Secret...save that. - -00:04:17.810 --> 00:04:22.130 line:100% position:50% align:middle -Then, finally, GitHub, we want to turn on. -I'm going to go to GitHub and create one - -00:04:22.130 --> 00:04:29.450 line:100% position:50% align:middle -called "Catch of the Day," and it's going -to be wesbos.com, it's going to be "cool - -00:04:29.450 --> 00:04:37.210 line:100% position:50% align:middle -app," and then, again the URL, very -important here...going to grab that from - -00:04:37.210 --> 00:04:42.450 line:100% position:50% align:middle -Firebase here, paste that in, make sure -you don't actually copy the "CANCEL SAVE" - -00:04:42.450 --> 00:04:51.210 line:100% position:50% align:middle -button, register it. Good, it's going to -give us a Client ID and the Secret. - -00:04:51.210 --> 00:04:54.750 line:100% position:50% align:middle -So you see how we have to put all this -info into Firebase and not our app, - -00:04:54.750 --> 00:04:58.520 line:100% position:50% align:middle -and that's just because we can't put the -sensitive information in an application - -00:04:58.520 --> 00:05:02.490 line:100% position:50% align:middle -that's entirely client-side because anyone -would be able to crack it open and find - -00:05:02.490 --> 00:05:07.230 line:100% position:50% align:middle -that info. So, save that. Good, so I've -enabled Facebook, Twitter, - -00:05:07.230 --> 00:05:07.780 line:100% position:50% align:middle -and GitHub. - -00:05:07.780 --> 00:05:12.270 line:100% position:50% align:middle -Now we need to actually write some code. -So we're going to open up our inventory - -00:05:12.270 --> 00:05:17.410 line:100% position:50% align:middle -component and first what we want to do is -create a method that's going to render out - -00:05:17.410 --> 00:05:22.690 line:100% position:50% align:middle -the buttons GitHub, Facebook, and Twitter. -So, I'm going to create a method called - -00:05:22.690 --> 00:05:34.150 line:100% position:50% align:middle -"renderLogin," and, then, from that, I'm -just going to return some jsx, - -00:05:34.150 --> 00:05:37.040 line:100% position:50% align:middle -which I'm going to paste in here and just -go over it with you real quick. - -00:05:37.040 --> 00:05:41.510 line:100% position:50% align:middle -So, H2 of Inventory, "Sign in to manage -your... ," we've got a button with a - -00:05:41.510 --> 00:05:45.110 line:100% position:50% align:middle -className of github. It's just going to -style it to be GitHub colors. - -00:05:45.110 --> 00:05:49.590 line:100% position:50% align:middle -Really, the only important thing here is -that "onClick" of one of these buttons, - -00:05:49.590 --> 00:05:52.610 line:100% position:50% align:middle -we are running a function called -"this.authenticate," which we're going to - -00:05:52.610 --> 00:05:56.410 line:100% position:50% align:middle -create next. That's a method. And, then, -we pass it, the method that we'd like to - -00:05:56.410 --> 00:06:00.620 line:100% position:50% align:middle -authenticate. It's either going to be -GitHub, Facebook, or Twitter. - -00:06:00.620 --> 00:06:06.810 line:100% position:50% align:middle -Then what we want to do is go down to our -render function, and we need to do a - -00:06:06.810 --> 00:06:12.410 line:100% position:50% align:middle -couple different returns here. So, above -this return, we're going to say if their - -00:06:12.410 --> 00:06:17.160 line:100% position:50% align:middle -"!this.state.uid"...so, we are going to -store both the user ID, - -00:06:17.160 --> 00:06:23.030 line:100% position:50% align:middle -which is the currently logged in person, -and we are also going to store in state - -00:06:23.030 --> 00:06:28.240 line:100% position:50% align:middle -our application owner. So, we want to -check if the currently logged in user, - -00:06:28.240 --> 00:06:33.450 line:100% position:50% align:middle -which is "uid," and the current store's -owner are the same people. - -00:06:33.450 --> 00:06:37.400 line:100% position:50% align:middle -So, first we just want to check if there's -anyone logged in. If they're not, - -00:06:37.400 --> 00:06:43.970 line:100% position:50% align:middle -maybe we'll put a comment above that, -"check if they are logged in...or, - -00:06:43.970 --> 00:06:48.870 line:100% position:50% align:middle -check if they are not logged in at all," -and if that is true, what we are going to - -00:06:48.870 --> 00:06:53.840 line:100% position:50% align:middle -do is we will return simply just a div. -Inside of that div we'll say, - -00:06:53.840 --> 00:07:01.980 line:100% position:50% align:middle -"this.renderLogin." Good. And we also want -to go to our constructor here and make - -00:07:01.980 --> 00:07:09.360 line:100% position:50% align:middle -sure that we bind "renderLogin" so that we -can use this inside of our renderLogin - -00:07:09.360 --> 00:07:14.130 line:100% position:50% align:middle -function. Good, no problem there. Let's -see where we're at right now. - -00:07:14.130 --> 00:07:20.270 line:100% position:50% align:middle -So, we've got a bit of an error popping up -here. Cannot read property user ID of - -00:07:20.270 --> 00:07:24.950 line:100% position:50% align:middle -null. Oh, yeah, so by default, what we -also need to do in our constructor is set - -00:07:24.950 --> 00:07:34.170 line:100% position:50% align:middle -a user ID and a store owner to be nothing. -So we say, "this.state =" and the user ID - -00:07:34.170 --> 00:07:41.150 line:100% position:50% align:middle -is going to be null and the owner is going -to also be null. So, - -00:07:41.150 --> 00:07:47.160 line:100% position:50% align:middle -explicitly nothing by default. Good, and -then, what happens here is we've got "log - -00:07:47.160 --> 00:07:50.680 line:100% position:50% align:middle -in GitHub, log in Facebook, log in -Twitter." If I click that, it's going to - -00:07:50.680 --> 00:07:53.680 line:100% position:50% align:middle -error. It's going to say that that -authentication method is not defined. - -00:07:53.680 --> 00:07:59.200 line:100% position:50% align:middle -Good. "this.authenticate" is not a -function. That makes sense because we have - -00:07:59.200 --> 00:08:03.840 line:100% position:50% align:middle -bound it to run authenticate on click, but -we have not yet actually made that - -00:08:03.840 --> 00:08:07.450 line:100% position:50% align:middle -authenticate method. That's fine. We'll go -over that in a second. - -00:08:07.450 --> 00:08:12.200 line:100% position:50% align:middle -Then the next thing we need to do is check -if they are the owner of the current - -00:08:12.200 --> 00:08:18.480 line:100% position:50% align:middle -store, So, "if this.state.uid" so we're -going to be storing the user's ID and - -00:08:18.480 --> 00:08:26.790 line:100% position:50% align:middle -state once they log in...is not equal to -this.state.owner, then we're going to just - -00:08:26.790 --> 00:08:37.300 line:100% position:50% align:middle -return some sorry div. Div, this is p, -"Sorry you aren't the owner of this - -00:08:37.300 --> 00:08:42.830 line:100% position:50% align:middle -store!" Then we also need that log out -button, so I'm going to go right above - -00:08:42.830 --> 00:08:52.510 line:100% position:50% align:middle -this render here and say "const logout =" -and that is simply just a button that says - -00:08:52.510 --> 00:08:58.760 line:100% position:50% align:middle -"Log Out!" And, then, when someone clicks -that, we're actually going to hook it up - -00:08:58.760 --> 00:09:02.540 line:100% position:50% align:middle -to our log out button, but we won't do -that just yet because we haven't created - -00:09:02.540 --> 00:09:07.380 line:100% position:50% align:middle -this log out method. But, we can then take -that log out and put it right here. - -00:09:07.380 --> 00:09:11.350 line:100% position:50% align:middle -Maybe someone logged in with the wrong -account, so we can put "logout" there. - -00:09:11.350 --> 00:09:15.550 line:100% position:50% align:middle -And then we also probably want to put the -log out right in our inventory, - -00:09:15.550 --> 00:09:18.650 line:100% position:50% align:middle -as well, because if they are logged in, -maybe they're on a shared computer, - -00:09:18.650 --> 00:09:21.950 line:100% position:50% align:middle -you want to allow them to log out, as -well. So, save, let's see how we're doing - -00:09:21.950 --> 00:09:28.190 line:100% position:50% align:middle -here. Good, no errors. Now, let's actually -hook up some of this work. - -00:09:28.190 --> 00:09:34.100 line:100% position:50% align:middle -So, we've got that authenticate method -running so we can go ahead and code it in - -00:09:34.100 --> 00:09:38.120 line:100% position:50% align:middle -ourselves, so we're going to say, -"authenticate" and that will take in a - -00:09:38.120 --> 00:09:45.560 line:100% position:50% align:middle -provider, and, then when someone clicks -it, the log, "Trying to log in with - -00:09:45.560 --> 00:09:50.590 line:100% position:50% align:middle -$provider." So, we made this authenticate -method. Make sure we bind it again up - -00:09:50.590 --> 00:09:54.920 line:100% position:50% align:middle -here. Look, GitHub, trying to log in with -GitHub, trying to log in with Facebook, - -00:09:54.920 --> 00:09:57.880 line:100% position:50% align:middle -trying to log in with Twitter. Good. So, -these buttons are working. - -00:09:57.880 --> 00:10:02.710 line:100% position:50% align:middle -Now we actually have to run the code that -will pop it up and try to interface with - -00:10:02.710 --> 00:10:04.434 line:100% position:50% align:middle -GitHub. So, for that, - -00:10:04.434 --> 00:10:09.120 line:100% position:50% align:middle -we need to import our base. -Remember, we made this "base.js," which - -00:10:09.120 --> 00:10:14.190 line:100% position:50% align:middle -connected to Firebase for us? We need to -import this. So, we say, - -00:10:14.190 --> 00:10:22.960 line:100% position:50% align:middle -"import base from '.. /base'." Then, when -we authenticate, we're going run "base. - -00:10:22.960 --> 00:10:30.070 line:100% position:50% align:middle -AuthWithOAuthPopup." -Triple check you've got all your capitals - -00:10:30.070 --> 00:10:35.070 line:100% position:50% align:middle -ready there, that's a bit of a jumble, and -then we are going to pass it. - -00:10:35.070 --> 00:10:38.960 line:100% position:50% align:middle -First, what provider. So, you normally -would pass it, like, "'twitter'" or - -00:10:38.960 --> 00:10:42.990 line:100% position:50% align:middle -"'facebook'" or "'github'" here, but -because we just want to make one - -00:10:42.990 --> 00:10:48.700 line:100% position:50% align:middle -authenticate method here, we have popped -that into a variable called "provider." - -00:10:48.700 --> 00:10:53.260 line:100% position:50% align:middle -Good. And, then, the next thing that we -want to do is, when the person - -00:10:53.260 --> 00:10:57.210 line:100% position:50% align:middle -successfully or unsuccessfully -authenticates, we need a callback - -00:10:57.210 --> 00:11:00.660 line:100% position:50% align:middle -function. So, what is going to run as soon -as they click allow access? - -00:11:00.660 --> 00:11:04.220 line:100% position:50% align:middle -And that's going to be what's called an -"authHandler," which we're going to build. - -00:11:04.220 --> 00:11:09.140 line:100% position:50% align:middle -We'll say, "this.authHandler," and then -that's the next step, what we need to do, - -00:11:09.140 --> 00:11:13.310 line:100% position:50% align:middle -"authHandler" and that is going to give us -an error if there is one, - -00:11:13.310 --> 00:11:17.710 line:100% position:50% align:middle -and then like a payload, which I like to -call "authData." It's full of all the - -00:11:17.710 --> 00:11:22.220 line:100% position:50% align:middle -information in it. And then we just, -"console.logauthData," and see where we're - -00:11:22.220 --> 00:11:28.270 line:100% position:50% align:middle -at here. Let's go back up to our -constructor and we also want to duplicate, - -00:11:28.270 --> 00:11:33.410 line:100% position:50% align:middle -"authenticate" is going to be -"authHandler," so you need to bind all of - -00:11:33.410 --> 00:11:37.550 line:100% position:50% align:middle -these methods to that instance of the -component. Right now, click "LOG IN WITH - -00:11:37.550 --> 00:11:41.790 line:100% position:50% align:middle -GITHUB," it's going to pop it open, and -it's going to ask me...the first time it's - -00:11:41.790 --> 00:11:44.670 line:100% position:50% align:middle -going to ask me, the next time it's just -going to pop up and close immediately - -00:11:44.670 --> 00:11:48.250 line:100% position:50% align:middle -because I've already authenticated it. Two -pictures of myself. - -00:11:48.250 --> 00:11:52.310 line:100% position:50% align:middle -Authorize application, and then, oh, look -what comes back. So, - -00:11:52.310 --> 00:11:58.480 line:100% position:50% align:middle -I just authenticated, which is right here. -We authenticated with GitHub, - -00:11:58.480 --> 00:12:03.230 line:100% position:50% align:middle -and then when that successfully worked , -we ran authHandler, which, - -00:12:03.230 --> 00:12:07.910 line:100% position:50% align:middle -let's go to the authHandler function here, -and then let's look in here...error and - -00:12:07.910 --> 00:12:12.290 line:100% position:50% align:middle -authData, this is what we're seeing right -here. The console logging the authData, - -00:12:12.290 --> 00:12:16.790 line:100% position:50% align:middle -and inside of there you're going to see -information about the actual user. - -00:12:16.790 --> 00:12:21.350 line:100% position:50% align:middle -You can see my email address, and any -other good information, as well as some - -00:12:21.350 --> 00:12:22.310 line:100% position:50% align:middle -credentials. - -00:12:22.310 --> 00:12:26.720 line:100% position:50% align:middle -Good, but what we actually need to do with -this data is then store it in state so - -00:12:26.720 --> 00:12:32.740 line:100% position:50% align:middle -that we can re-render the inventory -component and show those boxes to edit. - -00:12:32.740 --> 00:12:37.310 line:100% position:50% align:middle -So, we're going to go to our authHandler -function. If there's an error, - -00:12:37.310 --> 00:12:44.080 line:100% position:50% align:middle -then we'll "console.errorerr" the actual -error itself and "return." Otherwise, - -00:12:44.080 --> 00:12:50.220 line:100% position:50% align:middle -what we're going to do is "// grab the -store info." So, essentially what we need - -00:12:50.220 --> 00:12:54.940 line:100% position:50% align:middle -to do is, if they've authenticated here, -we need to grab the reference to our - -00:12:54.940 --> 00:12:59.490 line:100% position:50% align:middle -actual store. In this case, "Sparkling -Plain Leaves," and we're going to do a - -00:12:59.490 --> 00:13:04.350 line:100% position:50% align:middle -couple things. We're going to claim it as -our own, as well as update our state. - -00:13:04.350 --> 00:13:08.190 line:100% position:50% align:middle -So, we're going to connect directly to -Firebase. We're going to grab sort of a - -00:13:08.190 --> 00:13:13.000 line:100% position:50% align:middle -copy of all the information about the -current store, and then when that info - -00:13:13.000 --> 00:13:17.140 line:100% position:50% align:middle -comes back from Firebase, we're going to -say, "Okay, we've got all the information - -00:13:17.140 --> 00:13:23.730 line:100% position:50% align:middle -about Sparkling Plain Leaves, we've got -this person, Wes, who's signed in. - -00:13:23.730 --> 00:13:30.890 line:100% position:50% align:middle -Now, first of all, does Wes own this -store? If not, the question is, - -00:13:30.890 --> 00:13:34.390 line:100% position:50% align:middle -"Is someone else the owner?" If that's not -true, then, finally, - -00:13:34.390 --> 00:13:37.740 line:100% position:50% align:middle -we're going to set them as the actual -owner. Otherwise, we're not going to set - -00:13:37.740 --> 00:13:40.640 line:100% position:50% align:middle -them as an owner. So, we've got to grab -the store info and we're going to connect - -00:13:40.640 --> 00:13:47.350 line:100% position:50% align:middle -directly to Firebase for this. So we say, -"const storeRef = base.database," and what - -00:13:47.350 --> 00:13:50.260 line:100% position:50% align:middle -that's going to do is connect us directly -with our Firebase database, - -00:13:50.260 --> 00:13:52.950 line:100% position:50% align:middle -which will allow us to use any of the -existing Firebase APIs. So, - -00:13:52.950 --> 00:13:58.150 line:100% position:50% align:middle -if you go to any of the Firebase -documentation, you can also use any of the - -00:13:58.150 --> 00:14:01.670 line:100% position:50% align:middle -API that you have there if some of the -stuff in Rebase doesn't cut it for you. - -00:14:01.670 --> 00:14:05.750 line:100% position:50% align:middle -And then we're going to say, "ref" -because, what a "ref" will do is it will - -00:14:05.750 --> 00:14:08.680 line:100% position:50% align:middle -allow us to get just a piece of our -database. We don't want the entire - -00:14:08.680 --> 00:14:12.820 line:100% position:50% align:middle -database with every single store that's -ever happened, we just want Sparkling - -00:14:12.820 --> 00:14:16.390 line:100% position:50% align:middle -Plain Leaves. So we would normally just -type that in here, like, - -00:14:16.390 --> 00:14:20.270 line:100% position:50% align:middle -"'sparkling... '"blah, blah, blah, but we -can't. We need to make it dynamic. - -00:14:20.270 --> 00:14:26.310 line:100% position:50% align:middle -So we need to pass down the store again. -So we'll go to app, go to the bottom here, - -00:14:26.310 --> 00:14:33.430 line:100% position:50% align:middle -go to our inventory, and we'll say, -"storeID=this.props.storeID." Good. - -00:14:33.430 --> 00:14:36.600 line:100% position:50% align:middle -Then we will go to inventory. - -00:14:36.600 --> 00:14:42.750 line:100% position:50% align:middle -What do you do when you add a new prop? -You go down here and you add it, - -00:14:42.750 --> 00:14:48.950 line:100% position:50% align:middle -"storeId" is going to be a string, and -that's required that we pass it. - -00:14:48.950 --> 00:14:53.680 line:100% position:50% align:middle -Okay. Oh, we got a bit of an error here. -Required prop storeId was not specified, - -00:14:53.680 --> 00:14:57.200 line:100% position:50% align:middle -so, right away, it's catching an error. I -don't know what the error is, - -00:14:57.200 --> 00:15:01.040 line:100% position:50% align:middle -but obviously I did something wrong.and -our prop types are kicking in to tell me - -00:15:01.040 --> 00:15:05.270 line:100% position:50% align:middle -something went wrong. So, let me take a -quick look at when we passed it. - -00:15:05.270 --> 00:15:11.390 line:100% position:50% align:middle -So, we passed the data here and, oh, it's -"this.props.params.storeId." So, - -00:15:11.390 --> 00:15:15.860 line:100% position:50% align:middle -that was just a silly mistake that I made -and it caught it immediately. - -00:15:15.860 --> 00:15:21.010 line:100% position:50% align:middle -See, there we go. Then we go back to our -inventory, back up to the function we were - -00:15:21.010 --> 00:15:30.200 line:100% position:50% align:middle -just writing, "refthis.props.storeId." -Good. Then we want to get the data once, - -00:15:30.200 --> 00:15:41.950 line:100% position:50% align:middle -so we'll say, "query the firebase once for -the store data." "storeRef.once'value'," - -00:15:41.950 --> 00:15:47.640 line:100% position:50% align:middle -and then that returns to us. I call that a -"snapshot," which with Firebase is sort of - -00:15:47.640 --> 00:15:55.200 line:100% position:50% align:middle -object of all the data. And then we can -say, "const data = snapshot.val." You have - -00:15:55.200 --> 00:15:58.190 line:100% position:50% align:middle -to call "val" on it to get the actual data -out of it, otherwise, - -00:15:58.190 --> 00:16:00.390 line:100% position:50% align:middle -it's going to be a blank object. - -00:16:00.390 --> 00:16:08.240 line:100% position:50% align:middle -Then we claim it as our own if there's no -owner already. And the way that we claim - -00:16:08.240 --> 00:16:15.130 line:100% position:50% align:middle -it as our own is we simply just set -"storeRef.set" and we are going to set the - -00:16:15.130 --> 00:16:19.540 line:100% position:50% align:middle -owner to be...now we go back to this -authData dump that we have, - -00:16:19.540 --> 00:16:26.950 line:100% position:50% align:middle -we say "authData.user.uid." And that UID -is going to be unique coming from GitHub. - -00:16:26.950 --> 00:16:33.320 line:100% position:50% align:middle -Good. Now let's see how it is here. Let -this refresh. I'm going to open up my - -00:16:33.320 --> 00:16:37.270 line:100% position:50% align:middle -Firebase, I'm going to go to the database, -so I'm going to open up Sparkling Plain - -00:16:37.270 --> 00:16:46.990 line:100% position:50% align:middle -Leaves. See, we only have "fishes" here -right now, but if I log in with GitHub, - -00:16:46.990 --> 00:16:54.130 line:100% position:50% align:middle -I go back, I see my owner now is opened on -up and that user ID is there. - -00:16:54.130 --> 00:16:57.080 line:100% position:50% align:middle -Good, but we still can't see any of the -fishes, we can't load them, - -00:16:57.080 --> 00:16:58.850 line:100% position:50% align:middle -we can't actually work with any of it -right now. - -00:16:58.850 --> 00:17:03.480 line:100% position:50% align:middle -So what we need to do is set the state -locally in our application, - -00:17:03.480 --> 00:17:11.392 line:100% position:50% align:middle -as well. So, we'll say, "this.setState," -say the user ID is going to be the same - -00:17:11.392 --> 00:17:20.714 line:100% position:50% align:middle -thing, "authData.user.uid," and then the -"owner:" is going to be either, - -00:17:20.714 --> 00:17:27.263 line:100% position:50% align:middle -"data"...what's data? Data is the actual -"store.owner" or it's going to be - -00:17:27.263 --> 00:17:36.050 line:100% position:50% align:middle -"authData.user.uid." Good. That was a lot. -It's a little bit confusing having to jump - -00:17:36.050 --> 00:17:40.460 line:100% position:50% align:middle -between the two, so maybe take a second to -just read over that a couple times to see - -00:17:40.460 --> 00:17:47.040 line:100% position:50% align:middle -if you know what's going on here, but now -I think when I log in with GitHub...aha, - -00:17:47.040 --> 00:17:50.910 line:100% position:50% align:middle -look what happens. When I log in with -GitHub, it comes back and now gives me the - -00:17:50.910 --> 00:17:55.540 line:100% position:50% align:middle -fish. I can load in a whole bunch of -sample fishes, I can remove those fishes, - -00:17:55.540 --> 00:17:57.540 line:100% position:50% align:middle -and be able to update my Firebase. - -00:17:57.540 --> 00:18:03.550 line:100% position:50% align:middle -Now, there is a problem in that, when I -refresh, I have to log in again. - -00:18:03.550 --> 00:18:07.700 line:100% position:50% align:middle -Every single time I refresh, I have to log -in again, and then I'll be able to - -00:18:07.700 --> 00:18:12.020 line:100% position:50% align:middle -actually edit it. So, when would we do -that? Well, hopefully, you're thinking - -00:18:12.020 --> 00:18:16.650 line:100% position:50% align:middle -back to when we've previously done that -and we can use one of the React lifecycle - -00:18:16.650 --> 00:18:20.020 line:100% position:50% align:middle -hooks to hook into it, and the one that -we're going to be using is called, - -00:18:20.020 --> 00:18:25.060 line:100% position:50% align:middle -"component did mount." I;m going to go up -to the top here, right underneath - -00:18:25.060 --> 00:18:28.130 line:100% position:50% align:middle -constructor, and we're going to use -"componentDidMount." I sort of like to - -00:18:28.130 --> 00:18:32.150 line:100% position:50% align:middle -always put all of my lifecycle and -constructor stuff above all of my custom - -00:18:32.150 --> 00:18:35.870 line:100% position:50% align:middle -stuff, and then I like to put my render -right at the bottom, but that's just a - -00:18:35.870 --> 00:18:40.060 line:100% position:50% align:middle -personal preference. So we say, -"base.onAuth" and that is going to - -00:18:40.060 --> 00:18:45.660 line:100% position:50% align:middle -listen...this is sort of like base is our -database, and then onAuth is sort of like - -00:18:45.660 --> 00:18:49.730 line:100% position:50% align:middle -if you've done jQuery, you could say, -"on'auth'" or "on'click'," so "onAuth" is - -00:18:49.730 --> 00:18:54.010 line:100% position:50% align:middle -going to listen for when we load the page, -Firebase is going to immediately try to - -00:18:54.010 --> 00:18:59.500 line:100% position:50% align:middle -authenticate myself again. And, when that -happens, we're going to run this user - -00:18:59.500 --> 00:19:10.290 line:100% position:50% align:middle -here, and we are going to check if there's -a user, and then, if there is, - -00:19:10.290 --> 00:19:13.990 line:100% position:50% align:middle -we're just going to call -"this.authHandler" again. We're not going - -00:19:13.990 --> 00:19:18.960 line:100% position:50% align:middle -to pass anything there, and then we'll -pass the user along with it. - -00:19:18.960 --> 00:19:27.140 line:100% position:50% align:middle -So, we're using this authHandler callback -both once for when the actual user gets - -00:19:27.140 --> 00:19:31.390 line:100% position:50% align:middle -signed in the first time, and then -subsequently every single time that we - -00:19:31.390 --> 00:19:35.340 line:100% position:50% align:middle -reload the page, we're going to call this -authHandler again, and then that should, - -00:19:35.340 --> 00:19:39.400 line:100% position:50% align:middle -in turn, do all the checking and the -setting of state and all that hard stuff. - -00:19:39.400 --> 00:19:42.930 line:100% position:50% align:middle -And so now I save. Hopefully, when it -refreshes...yes, you see, - -00:19:42.930 --> 00:19:45.990 line:100% position:50% align:middle -like, for a split second there, we do see -the log in buttons, and, - -00:19:45.990 --> 00:19:51.540 line:100% position:50% align:middle -again, you could use your lifecycle hooks -to prevent that, but as soon as it loads, - -00:19:51.540 --> 00:19:57.360 line:100% position:50% align:middle -as soon as it did mount, then it's up and -running. So, that is our authentication on - -00:19:57.360 --> 00:20:00.810 line:100% position:50% align:middle -the client side. We just need to hook up -this "LOG OUT" button. - -00:20:00.810 --> 00:20:05.350 line:100% position:50% align:middle -So, I'm going to go right underneath our -authenticate, and we're going to make a, - -00:20:05.350 --> 00:20:12.800 line:100% position:50% align:middle -"logout" method, that doesn't take any -arguments in, and then inside of that, - -00:20:12.800 --> 00:20:16.660 line:100% position:50% align:middle -we do a couple things. First, we need to -just run "base.unauth," it's really easy, - -00:20:16.660 --> 00:20:20.710 line:100% position:50% align:middle -it's going to connect, or we already -connected to it, and run unauth. - -00:20:20.710 --> 00:20:25.450 line:100% position:50% align:middle -That'll log us out and sever any ties we -have with Firebase. And then we simply say - -00:20:25.450 --> 00:20:29.910 line:100% position:50% align:middle -"this.setState" and we are going to set -the user ID of the currently logged in - -00:20:29.910 --> 00:20:34.900 line:100% position:50% align:middle -person to be nothing because we need to -delete that as well. Then, - -00:20:34.900 --> 00:20:39.780 line:100% position:50% align:middle -of course, we'll do our whole song and -dance where we go to the top here and bind - -00:20:39.780 --> 00:20:45.550 line:100% position:50% align:middle -logout, and then we go to our button where -we created the logout button. - -00:20:45.550 --> 00:20:53.940 line:100% position:50% align:middle -Here we go. And then "onClick= => -this.logout." Actually, in this case, - -00:20:53.940 --> 00:21:00.170 line:100% position:50% align:middle -because we are not passing any arguments, -we can simply just pass it like this, - -00:21:00.170 --> 00:21:05.280 line:100% position:50% align:middle -"this.logout" You only need to do that -song and dance here for when you need to - -00:21:05.280 --> 00:21:10.720 line:100% position:50% align:middle -pass an argument, so we'll say, -"this.logout" and when I click it, - -00:21:10.720 --> 00:21:15.300 line:100% position:50% align:middle -it will just sign me on out. And then I -can go ahead and sign in again with - -00:21:15.300 --> 00:21:17.820 line:100% position:50% align:middle -GitHub, should I want that. - -00:21:17.820 --> 00:21:22.160 line:100% position:50% align:middle -Now we actually need to head on to the -other side, which is secure things at - -00:21:22.160 --> 00:21:27.000 line:100% position:50% align:middle -Firebase's end because, like, I visually -can't edit these fish, - -00:21:27.000 --> 00:21:31.360 line:100% position:50% align:middle -but anybody with a little bit of know-how -as to how Firebase works would be able to - -00:21:31.360 --> 00:21:37.050 line:100% position:50% align:middle -figure out how to query and edit all the -different fishes if they knew how Firebase - -00:21:37.050 --> 00:21:40.700 line:100% position:50% align:middle -works. So, we need to go to Firebase, our -security rules. So, click on Database, - -00:21:40.700 --> 00:21:43.640 line:100% position:50% align:middle -go to your database and click on rules, -and way earlier, like, - -00:21:43.640 --> 00:21:49.140 line:100% position:50% align:middle -many videos ago, we set "read" and "write" -to be true. Now what we need to do is - -00:21:49.140 --> 00:21:52.820 line:100% position:50% align:middle -change those security rules, and I've -provided you a file called - -00:21:52.820 --> 00:21:57.520 line:100% position:50% align:middle -"Security-rules. JSON." I'm just going to -paste them in here, and then I'll explain - -00:21:57.520 --> 00:22:01.620 line:100% position:50% align:middle -them.for you. So, I'm just going to paste -it in here, and I'm going to go through it - -00:22:01.620 --> 00:22:02.924 line:100% position:50% align:middle -with you. -So, the rules. - -00:22:02.924 --> 00:22:07.110 line:100% position:50% align:middle -Reading. Anybody can read -it, right? True. Write. - -00:22:07.110 --> 00:22:12.000 line:100% position:50% align:middle -You can only write to it if the data -doesn't exist. So, this let's people not - -00:22:12.000 --> 00:22:16.600 line:100% position:50% align:middle -being able to delete an existing room. -Otherwise, you could call Firebase.delete. - -00:22:16.600 --> 00:22:21.700 line:100% position:50% align:middle -And then on each individual room, and -that's just like sort of one level down, - -00:22:21.700 --> 00:22:26.970 line:100% position:50% align:middle -that's what I did with "$r," only the -store owner can edit the data. - -00:22:26.970 --> 00:22:32.220 line:100% position:50% align:middle -So, in order to...anybody can read. Right? -No problem. Anybody can read all of that - -00:22:32.220 --> 00:22:37.340 line:100% position:50% align:middle -data, but to write to that individual room -or to write to that individual - -00:22:37.340 --> 00:22:42.710 line:100% position:50% align:middle -store...maybe that would be better to be -called...we have to say that when new data - -00:22:42.710 --> 00:22:48.240 line:100% position:50% align:middle -comes into Firebase, if the owner is not -equal to the currently authenticated user - -00:22:48.240 --> 00:22:52.870 line:100% position:50% align:middle -ID, then don't allow them. So, that's how -Firebase works. You have to set these - -00:22:52.870 --> 00:22:58.260 line:100% position:50% align:middle -rules for reading and writing. And, in -this case, we will not let anybody write - -00:22:58.260 --> 00:23:05.030 line:100% position:50% align:middle -to it unless the owner...again, I can show -you the owner ID is equal to whatever the - -00:23:05.030 --> 00:23:09.690 line:100% position:50% align:middle -owner, the user's ID when they are -actually logged in. And that will lock it - -00:23:09.690 --> 00:23:14.050 line:100% position:50% align:middle -down so that no one can monkey around with -it up behind the scenes. - -00:23:14.050 --> 00:23:16.910 line:100% position:50% align:middle -So, let's save that, make sure that your -rules are in there... - -00:23:16.910 --> 00:23:21.820 line:100% position:50% align:middle -I forgot to save it...and I'm going to -publish them. Good. Then I'm just going to - -00:23:21.820 --> 00:23:26.320 line:100% position:50% align:middle -go ahead and refresh this. Good, and I -should still be able to say, - -00:23:26.320 --> 00:23:33.080 line:100% position:50% align:middle -"Hey Ho," refresh and it still says "Hey -Ho." I log out, and I'm not able to - -00:23:33.080 --> 00:23:34.800 line:100% position:50% align:middle -actually edit it. Good. +WEBVTT + +1 +00:00:02.212 --> 00:00:03.379 +[Upbeat Music] + +2 +00:00:06.811 --> 00:00:09.073 +One thing I found with after writing it + +3 +00:00:09.073 --> 00:00:11.466 +for maybe two and a half years now is I feel like + +4 +00:00:11.466 --> 00:00:13.617 +it makes me a better job descriptive developer + +5 +00:00:13.617 --> 00:00:16.617 +because sometimes things in react seem a little bit harder + +6 +00:00:16.617 --> 00:00:19.386 +than they should be but I think as a rule of thumb, + +7 +00:00:19.386 --> 00:00:21.481 +there are some weird things in it, but at a rule of thumb + +8 +00:00:21.481 --> 00:00:22.809 +I think that those are forcing me to + +9 +00:00:22.809 --> 00:00:25.137 +become a much better job descript developer. + +10 +00:00:25.137 --> 00:00:26.841 +So what we're going to do right now is talk + +11 +00:00:26.841 --> 00:00:28.682 +about something called PropTypes and now + +12 +00:00:28.682 --> 00:00:31.489 +with prop types every time you have a component, + +13 +00:00:31.489 --> 00:00:35.696 +you are often passing in some sort of data and + +14 +00:00:35.696 --> 00:00:37.516 +how do you pass data into a component? + +15 +00:00:37.516 --> 00:00:38.349 +With props. + +16 +00:00:38.349 --> 00:00:40.485 +Well with PropTypes we can sort of validate the data + +17 +00:00:40.485 --> 00:00:43.420 +that is being passed in to make sure we're passing + +18 +00:00:43.420 --> 00:00:46.846 +the right kind of data that it's looking for and + +19 +00:00:46.846 --> 00:00:49.598 +the data is being passed in that it actually looks + +20 +00:00:49.598 --> 00:00:52.326 +the way that we're expecting it to be passed in. + +21 +00:00:52.326 --> 00:00:54.158 +So what we're going to do is let's open up our + +22 +00:00:54.158 --> 00:00:56.031 +header.js here and you'll notice that + +23 +00:00:56.031 --> 00:00:58.326 +we use props.tagline right here. + +24 +00:00:58.326 --> 00:01:02.077 +Now if I was on a team doing react components and + +25 +00:01:02.077 --> 00:01:04.517 +I built this thing then I handed it off to somebody else + +26 +00:01:04.517 --> 00:01:09.517 +to use it, how do they know that this component called + +27 +00:01:09.897 --> 00:01:13.082 +header takes a prop called tagline then + +28 +00:01:13.082 --> 00:01:15.593 +that prop is a string, right? + +29 +00:01:15.593 --> 00:01:17.449 +Other than the short of opening it up, + +30 +00:01:17.449 --> 00:01:19.761 +they don't really know that unless I have some + +31 +00:01:19.761 --> 00:01:21.081 +sort of documentation. + +32 +00:01:21.081 --> 00:01:24.305 +So what prop types allows us to do is specify ahead of time + +33 +00:01:24.305 --> 00:01:26.937 +what needs to be passed in when it's used and + +34 +00:01:26.937 --> 00:01:29.875 +if someone doesn't pass in the right type of data or + +35 +00:01:29.875 --> 00:01:33.185 +the right amount of data, then we're going to give them + +36 +00:01:33.185 --> 00:01:35.641 +a warning in their console telling them that + +37 +00:01:35.641 --> 00:01:37.161 +they failed their PropType. + +38 +00:01:37.161 --> 00:01:39.834 +So what we're going to do is we're going to go up here + +39 +00:01:39.834 --> 00:01:43.767 +and we're going to import PropTypes capital P capital T + +40 +00:01:43.767 --> 00:01:47.074 +from and this is in a separate package called prop-types. + +41 +00:01:47.074 --> 00:01:49.052 +This used to be built into react, however, + +42 +00:01:49.052 --> 00:01:53.156 +because some users use other ways to do type checking + +43 +00:01:53.156 --> 00:01:55.476 +so some other ways your can do type checking is + +44 +00:01:55.476 --> 00:01:57.884 +you can use a typed language to write your java script + +45 +00:01:57.884 --> 00:02:01.381 +like TypeScript or you can use one of Facebook's utilities + +46 +00:02:01.381 --> 00:02:04.715 +called Flow, which allows you to ahead of time declare + +47 +00:02:04.715 --> 00:02:07.924 +what the props are that are being passed in and then + +48 +00:02:07.924 --> 00:02:10.059 +PropTypes are sort of a third way we can do it. + +49 +00:02:10.059 --> 00:02:12.161 +That's why it's in a separate package because + +50 +00:02:12.161 --> 00:02:16.197 +it's not every project that will be using PropTypes. + +51 +00:02:16.197 --> 00:02:18.804 +So we'll go down here, we'll take our header and + +52 +00:02:18.804 --> 00:02:22.470 +we will add the propTypes, so this is lowercase P, + +53 +00:02:22.470 --> 00:02:24.525 +capital T and that's just going to be an object. + +54 +00:02:24.525 --> 00:02:28.234 +Now all you have to do now is pass at every single prop + +55 +00:02:28.234 --> 00:02:31.275 +that you need and in our case, it's just tagline, and + +56 +00:02:31.275 --> 00:02:33.386 +then you tell it which type you're expecting. + +57 +00:02:33.386 --> 00:02:36.402 +The way that we do that is just say PropTypes., + +58 +00:02:36.402 --> 00:02:38.366 +and then we tell it, this is kind of cool, + +59 +00:02:38.366 --> 00:02:40.487 +my auto complete is showing me, um, + +60 +00:02:40.487 --> 00:02:42.270 +all of the possible option and + +61 +00:02:42.270 --> 00:02:45.943 +this should always be passed in as a string and then you can + +62 +00:02:45.943 --> 00:02:49.535 +also tack in an optional is required onto the end, + +63 +00:02:49.535 --> 00:02:52.279 +which will tell you if it's required or not. + +64 +00:02:52.279 --> 00:02:54.383 +So if I give a save now and I go back and + +65 +00:02:54.383 --> 00:02:57.504 +open up my devtools, you'll see there's nothing showing up + +66 +00:02:57.504 --> 00:03:02.105 +in here but if I were to go into my app.js and take off + +67 +00:03:02.105 --> 00:03:05.772 +the tagline prop, watch what's gonna happen. + +68 +00:03:07.110 --> 00:03:09.819 +Now it starts to yell at us, prop tagline is marked + +69 +00:03:09.819 --> 00:03:12.660 +as required in header but it's value is undefined + +70 +00:03:12.660 --> 00:03:16.078 +so that means you did not pass a tagline prop, good. + +71 +00:03:16.078 --> 00:03:19.625 +Well what if I were to say maybe the tagline + +72 +00:03:19.625 --> 00:03:21.042 +is equal to true? + +73 +00:03:22.499 --> 00:03:24.652 +Like we're passing it as a Boolean, it's going + +74 +00:03:24.652 --> 00:03:26.226 +to start complaining at us. + +75 +00:03:26.226 --> 00:03:29.748 +It got a Boolean but it was expecting a string, right? + +76 +00:03:29.748 --> 00:03:32.629 +Or if I pass in a number, it's going to yell at us + +77 +00:03:32.629 --> 00:03:35.317 +for we got a number but we were expecting you + +78 +00:03:35.317 --> 00:03:36.484 +to give us a string. + +79 +00:03:36.484 --> 00:03:38.021 +You kind of get the point here. + +80 +00:03:38.021 --> 00:03:40.781 +As you use it, before I even have to crack open this file + +81 +00:03:40.781 --> 00:03:43.613 +to see what's wrong, it will give me a really good warning + +82 +00:03:43.613 --> 00:03:44.597 +in the console. + +83 +00:03:44.597 --> 00:03:46.966 +Now, these will not make it to production. + +84 +00:03:46.966 --> 00:03:50.442 +So for whatever reason, if you deploy this to production, + +85 +00:03:50.442 --> 00:03:53.010 +it's not going to give you this error. + +86 +00:03:53.010 --> 00:03:56.241 +It's just sort of a development helper that we have. + +87 +00:03:56.241 --> 00:03:59.555 +So I'm going to bring that tagline back here and + +88 +00:03:59.555 --> 00:04:01.035 +what we're going to do now is go + +89 +00:04:01.035 --> 00:04:03.211 +through all our different components we that have written + +90 +00:04:03.211 --> 00:04:06.754 +in this course so far and start writing props for them. + +91 +00:04:06.754 --> 00:04:09.563 +So there's some documentation here for what the different + +92 +00:04:09.563 --> 00:04:14.066 +types of PropTypes are, obviously, you have all of the types + +93 +00:04:14.066 --> 00:04:15.794 +that come along with react. + +94 +00:04:15.794 --> 00:04:19.583 +So array, bool and func, I guess those are reserved words + +95 +00:04:19.583 --> 00:04:22.759 +in JavaScript so you have to use bool instead of Boolean + +96 +00:04:22.759 --> 00:04:24.207 +and func instead of function. + +97 +00:04:24.207 --> 00:04:26.343 +The rest of them are what you'd expect. + +98 +00:04:26.343 --> 00:04:28.231 +However, you can also expect somebody + +99 +00:04:28.231 --> 00:04:31.865 +to pass you another component, you can expect people + +100 +00:04:31.865 --> 00:04:34.158 +to pass you a note or an element. + +101 +00:04:34.158 --> 00:04:36.625 +You can expect to pass one of the things. + +102 +00:04:36.625 --> 00:04:39.690 +So it could either be a string, number or an instance + +103 +00:04:39.690 --> 00:04:42.993 +of the message component and then there's another one here. + +104 +00:04:42.993 --> 00:04:44.049 +This is the shape. + +105 +00:04:44.049 --> 00:04:45.897 +This is what we're going to use, as well. + +106 +00:04:45.897 --> 00:04:48.602 +Cause I find this one particularly helpful when passing + +107 +00:04:48.602 --> 00:04:50.930 +objects that need to look a certain way. + +108 +00:04:50.930 --> 00:04:53.913 +So let's go, um, let's just go into fish.js and let's just + +109 +00:04:53.913 --> 00:04:55.145 +do that one first. + +110 +00:04:55.145 --> 00:04:58.728 +So at the top of it, we'll import PropTypes + +111 +00:05:00.492 --> 00:05:01.992 +from prop-types + +112 +00:05:04.551 --> 00:05:07.156 +and you notice how I out that above this? + +113 +00:05:07.156 --> 00:05:10.156 +I always like to import my MPM packages first then + +114 +00:05:10.156 --> 00:05:14.713 +import my, uh, relative paths after that and then + +115 +00:05:14.713 --> 00:05:16.722 +they don't have to mix and match them. + +116 +00:05:16.722 --> 00:05:20.081 +Then what we'll do is, since this is not a, like this one, + +117 +00:05:20.081 --> 00:05:22.619 +what's the name for this type of component? + +118 +00:05:22.619 --> 00:05:25.202 +It's a stateless functional component, we need to do it + +119 +00:05:25.202 --> 00:05:26.859 +after the fact, like this. + +120 +00:05:26.859 --> 00:05:30.294 +Now, this one is a regular react component so we can simply + +121 +00:05:30.294 --> 00:05:33.877 +just put a static property called propTypes + +122 +00:05:35.791 --> 00:05:37.495 +and put an object on it. + +123 +00:05:37.495 --> 00:05:40.248 +The reason why that is static is because we're declaring + +124 +00:05:40.248 --> 00:05:43.625 +the PropTypes for all of the fish and every single time + +125 +00:05:43.625 --> 00:05:46.344 +that we make a new fish, it's not necessary + +126 +00:05:46.344 --> 00:05:48.985 +to duplicate those PropTypes to every single one, + +127 +00:05:48.985 --> 00:05:50.857 +if they're going to be exactly the same + +128 +00:05:50.857 --> 00:05:52.448 +for every single component. + +129 +00:05:52.448 --> 00:05:54.224 +So by putting it static, it sort of lives + +130 +00:05:54.224 --> 00:05:59.220 +on the momma fish component and we are unnecessarily + +131 +00:05:59.220 --> 00:06:02.499 +copying the PropTypes to every single instance, + +132 +00:06:02.499 --> 00:06:03.764 +since they're going to be exactly the same. + +133 +00:06:03.764 --> 00:06:06.487 +Now, uh, what are the props that we have here? + +134 +00:06:06.487 --> 00:06:07.320 +Well, + +135 +00:06:07.320 --> 00:06:10.267 +we are passing in and the way you can tell is I was + +136 +00:06:10.267 --> 00:06:13.211 +just like search for this.props and we've got + +137 +00:06:13.211 --> 00:06:16.624 +this.props.details and add to order. + +138 +00:06:16.624 --> 00:06:20.025 +So I'll go up here we'll say details + +139 +00:06:20.025 --> 00:06:23.463 +and we need add to order. + +140 +00:06:23.463 --> 00:06:24.744 +So let's do add to order first, + +141 +00:06:24.744 --> 00:06:26.223 +since that's going to be very simple. + +142 +00:06:26.223 --> 00:06:27.207 +Let's look here. + +143 +00:06:27.207 --> 00:06:29.255 +It's going to be a function. + +144 +00:06:29.255 --> 00:06:33.755 +So we'll take this PropTypes.func and then the details + +145 +00:06:35.823 --> 00:06:38.703 +is going to be, well what is it gonna be? + +146 +00:06:38.703 --> 00:06:42.412 +Details is going to have the image, the name, the price, + +147 +00:06:42.412 --> 00:06:44.476 +the description and the status. + +148 +00:06:44.476 --> 00:06:46.532 +This is a little bit weird. + +149 +00:06:46.532 --> 00:06:51.532 +Of course, we could go and say PropTypes.object + +150 +00:06:53.710 --> 00:06:57.346 +and it would pass with flying colors, see no errors there. + +151 +00:06:57.346 --> 00:07:00.212 +But that's a bit of a cheat because like that's just + +152 +00:07:00.212 --> 00:07:03.631 +saying you pass in any object and this would not work + +153 +00:07:03.631 --> 00:07:06.255 +if I didn't pass in an object that consisted + +154 +00:07:06.255 --> 00:07:08.335 +of these five things. + +155 +00:07:08.335 --> 00:07:11.423 +So what we can do instead of saying an object, + +156 +00:07:11.423 --> 00:07:16.175 +we can give it a PropTypes.shape and a shape is a function + +157 +00:07:16.175 --> 00:07:19.391 +that accepts an object and these are where we're going + +158 +00:07:19.391 --> 00:07:22.439 +to specify what all of the different properties + +159 +00:07:22.439 --> 00:07:26.826 +actually are, so we have an image, name, price, + +160 +00:07:26.826 --> 00:07:30.693 +description and status and I'm going to move price + +161 +00:07:30.693 --> 00:07:32.778 +to the bottom here because all of these are going + +162 +00:07:32.778 --> 00:07:34.187 +to be pretty simple. + +163 +00:07:34.187 --> 00:07:36.937 +It's going to be PropTypes.string + +164 +00:07:38.001 --> 00:07:41.559 +and then price is going to be a number. + +165 +00:07:41.559 --> 00:07:43.256 +I really like this one. + +166 +00:07:43.256 --> 00:07:45.680 +I probably used this one the most out of everything + +167 +00:07:45.680 --> 00:07:48.592 +because when I'm passing values to a component, + +168 +00:07:48.592 --> 00:07:50.840 +it's almost always I'm passing an object an object full + +169 +00:07:50.840 --> 00:07:52.760 +of data that needs to be displayed. + +170 +00:07:52.760 --> 00:07:56.958 +So that's why I like to pass it as a shape and then + +171 +00:07:56.958 --> 00:08:00.855 +it checks that the object you are sending it will have + +172 +00:08:00.855 --> 00:08:04.505 +all of these properties with these being types added in. + +173 +00:08:04.505 --> 00:08:07.105 +Good, so that is fish and if you'd like to pause this video + +174 +00:08:07.105 --> 00:08:10.172 +and just go through and do them yourselves, I think you'd + +175 +00:08:10.172 --> 00:08:11.141 +kind of get the point. + +176 +00:08:11.141 --> 00:08:13.317 +I'll go through them together in case you want to hang on + +177 +00:08:13.317 --> 00:08:14.461 +and listen to the rest. + +178 +00:08:14.461 --> 00:08:17.085 +Otherwise, really the thing that you need to know + +179 +00:08:17.085 --> 00:08:20.173 +is whenever you write this.props.something you should + +180 +00:08:20.173 --> 00:08:22.469 +stop and write a PropType for it really quickly. + +181 +00:08:22.469 --> 00:08:25.355 +The cheesy thing I always say is stop, drop and prop + +182 +00:08:25.355 --> 00:08:27.804 +and [Laughs] you're gonna be in good shape and + +183 +00:08:27.804 --> 00:08:32.043 +probably save yourself a headache somewhere down the road + +184 +00:08:32.043 --> 00:08:35.026 +where you forget to pass in the right amount of data. + +185 +00:08:35.026 --> 00:08:37.771 +So if you are leaving me now, goodbye, I'll see you + +186 +00:08:37.771 --> 00:08:38.604 +in the next video. + +187 +00:08:38.604 --> 00:08:40.556 +Otherwise, let's keep going through the rest of them. + +188 +00:08:40.556 --> 00:08:42.739 +Next up is the add fish form + +189 +00:08:42.739 --> 00:08:46.519 +and we'll say this.props.addFish is one. + +190 +00:08:46.519 --> 00:08:48.936 +It's gonna search for the rest. + +191 +00:08:48.936 --> 00:08:49.769 +That's it. + +192 +00:08:49.769 --> 00:08:51.974 +So addFish is the only one. + +193 +00:08:51.974 --> 00:08:54.517 +We're gonna go up here + +194 +00:08:54.517 --> 00:08:58.434 +say static propTypes. + +195 +00:08:59.777 --> 00:09:02.177 +I always goof up the casing of it. + +196 +00:09:02.177 --> 00:09:04.578 +So it's lowercase P capital case T and + +197 +00:09:04.578 --> 00:09:07.997 +then the package is capital P, capital T. + +198 +00:09:07.997 --> 00:09:09.997 +So import PropTypes from + +199 +00:09:12.837 --> 00:09:13.670 +prop-types + +200 +00:09:14.980 --> 00:09:19.813 +and then we here, we need PropTypes.func. + +201 +00:09:23.568 --> 00:09:25.092 +I always make sure I give it a reload and + +202 +00:09:25.092 --> 00:09:26.609 +it still works just fine, good. + +203 +00:09:26.609 --> 00:09:29.809 +Let's go through the rest of them. + +204 +00:09:29.809 --> 00:09:34.809 +App.js doesn't have any props, you could well this.props + +205 +00:09:37.610 --> 00:09:40.610 +you could assume that the props.match is coming in + +206 +00:09:40.610 --> 00:09:43.106 +from the router, so in that case, we could either + +207 +00:09:43.106 --> 00:09:45.971 +shape it out for the pieces that we need or + +208 +00:09:45.971 --> 00:09:47.290 +just say it's an object. + +209 +00:09:47.290 --> 00:09:51.290 +So in this case, I will just say it's an object. + +210 +00:10:01.893 --> 00:10:05.005 +Good and then make sure you import it + +211 +00:10:05.005 --> 00:10:06.589 +at the top of your file. + +212 +00:10:06.589 --> 00:10:10.756 +I'm gonna put it right underneath importing react. + +213 +00:10:11.762 --> 00:10:15.012 +Good, so it's app EditFishForm is next. + +214 +00:10:16.279 --> 00:10:21.279 +So we've got this.props.fish .updatefish and index. + +215 +00:10:24.554 --> 00:10:25.721 +We'll go here, + +216 +00:10:28.893 --> 00:10:30.810 +make this a bit bigger. + +217 +00:10:36.309 --> 00:10:39.976 +So what did I say, we got fish, we got index + +218 +00:10:41.004 --> 00:10:43.087 +and we've got updateFish. + +219 +00:10:44.117 --> 00:10:44.950 +Good. + +220 +00:10:45.980 --> 00:10:47.647 +Import my prop types + +221 +00:10:48.877 --> 00:10:53.460 +and then for each of these I'm going to have PropTypes. + +222 +00:10:55.268 --> 00:10:57.624 +Dot and then we'll go through each of them. + +223 +00:10:57.624 --> 00:11:01.616 +First one is going to be a shape where the fish will contain + +224 +00:11:01.616 --> 00:11:03.536 +again, this is like kind of the same thing. + +225 +00:11:03.536 --> 00:11:05.920 +So you could even put these in their own file and + +226 +00:11:05.920 --> 00:11:08.016 +import and export them if you find yourself using + +227 +00:11:08.016 --> 00:11:10.160 +it much more often. + +228 +00:11:10.160 --> 00:11:13.629 +So fish.js is where I've used those before just go ahead + +229 +00:11:13.629 --> 00:11:18.212 +and take that entire shape object and paste it in here. + +230 +00:11:22.500 --> 00:11:25.745 +Index is going to be a string and updateFish is + +231 +00:11:25.745 --> 00:11:27.328 +going to be a func. + +232 +00:11:28.504 --> 00:11:30.306 +Good, we still in good shape? + +233 +00:11:30.306 --> 00:11:34.223 +Oop, I got an error on EditFishForm on line 14. + +234 +00:11:36.068 --> 00:11:37.339 +What did I do? + +235 +00:11:37.339 --> 00:11:39.089 +A colon, there we go. + +236 +00:11:41.042 --> 00:11:43.306 +Still working good for me. + +237 +00:11:43.306 --> 00:11:47.306 +With edit we did fish, we did header, inventory. + +238 +00:11:50.484 --> 00:11:53.317 +So this.props.fishes + +239 +00:11:55.564 --> 00:11:58.300 +and so we got fished, updateFish, + +240 +00:11:58.300 --> 00:12:00.967 +deleteFish and loadSampleFishes. + +241 +00:12:26.501 --> 00:12:28.213 +Lowercase P. + +242 +00:12:28.213 --> 00:12:30.957 +So fishes is going to be an array. + +243 +00:12:30.957 --> 00:12:33.540 +The rest of them are functions. + +244 +00:12:35.388 --> 00:12:36.976 +Oop, we got an error. + +245 +00:12:36.976 --> 00:12:41.681 +Invalid, oh, it's not an array, it's an object. + +246 +00:12:41.681 --> 00:12:43.801 +Good and of course you can go a little deeper + +247 +00:12:43.801 --> 00:12:45.905 +and shape those out. + +248 +00:12:45.905 --> 00:12:48.655 +Uh, not found has nothing, order. + +249 +00:12:52.161 --> 00:12:56.854 +Let's take the PropTypes package, import that right away. + +250 +00:12:56.854 --> 00:13:00.437 +This.props, so we got fishes, we got order, + +251 +00:13:02.794 --> 00:13:07.794 +we got removeFromOrder and that's it. + +252 +00:13:12.430 --> 00:13:15.347 +So fishes is going to be an object. + +253 +00:13:16.590 --> 00:13:18.366 +Order is going to be an object and + +254 +00:13:18.366 --> 00:13:20.533 +removeFromOrder is a func. + +255 +00:13:22.176 --> 00:13:23.759 +Still looking good. + +256 +00:13:25.562 --> 00:13:27.459 +Router doesn't have any props and + +257 +00:13:27.459 --> 00:13:32.209 +store picker needs history. + +258 +00:13:35.874 --> 00:13:39.241 +Beautiful, got all my prop types now being pulled in + +259 +00:13:39.241 --> 00:13:42.161 +and, uh, I made my application a little but more resilient + +260 +00:13:42.161 --> 00:13:45.764 +so I know that I'm passing in both the right data + +261 +00:13:45.764 --> 00:13:47.524 +as well as in the right type of data. + diff --git a/RFB/25 - Building React for Production.vtt b/RFB/25 - Building React for Production.vtt index 290972f..a50b669 100755 --- a/RFB/25 - Building React for Production.vtt +++ b/RFB/25 - Building React for Production.vtt @@ -1,152 +1,334 @@ -WEBVTT - -00:00:03.570 --> 00:00:05.712 line:100% position:50% align:middle -♪ [music] ♪ - -00:00:07.150 --> 00:00:10.640 line:100% position:50% align:middle -Now we've pretty much finished up building -our application, but there's a lot more - -00:00:10.640 --> 00:00:15.080 line:100% position:50% align:middle -in terms of how do we actually deploy -this application and get it running in - -00:00:15.080 --> 00:00:19.370 line:100% position:50% align:middle -production? So, luckily for us Create -React App, which is what we have used so - -00:00:19.370 --> 00:00:24.260 line:100% position:50% align:middle -far, has a build step. If you open up your -package.json, you will see there is a - -00:00:24.260 --> 00:00:29.260 line:100% position:50% align:middle -script called build and we simply just -have to run. If you open up your terminal - -00:00:29.260 --> 00:00:34.880 line:100% position:50% align:middle -here, npm run build, and what that's going -to do is it's going to compress it, - -00:00:34.880 --> 00:00:38.940 line:100% position:50% align:middle -it's going to remove all the stuff out of -React that we don't necessarily need. - -00:00:38.940 --> 00:00:44.250 line:100% position:50% align:middle -It's going to minify it and uglify it, all -of that good stuff that we're used to and - -00:00:44.250 --> 00:00:48.720 line:100% position:50% align:middle -make us a tiny little JavaScript file, as -well as take our CSS out and put it into - -00:00:48.720 --> 00:00:54.410 line:100% position:50% align:middle -its own file. So, there we have it. It ran -npm run build and after that we've got a - -00:00:54.410 --> 00:00:59.150 line:100% position:50% align:middle -couple little tiny...a CSS file, -a JavaScript file, and an index.html. - -00:00:59.150 --> 00:01:02.200 line:100% position:50% align:middle -Then it also gives us some information -here on how to serve it. - -00:01:02.200 --> 00:01:05.510 line:100% position:50% align:middle -And, I'm going to go over the next couple -videos with you, show you how to get that - -00:01:05.510 --> 00:01:10.000 line:100% position:50% align:middle -online. But, let's just take a quick look -at that build folder here. - -00:01:10.000 --> 00:01:15.130 line:100% position:50% align:middle -You'll see inside of it is the index.html, -which is very small and then inside of our - -00:01:15.130 --> 00:01:20.550 line:100% position:50% align:middle -static, we've got our CSS. And then, we -also have a css.map, and that's the source - -00:01:20.550 --> 00:01:25.310 line:100% position:50% align:middle -map, so that if there's ever an issue with -our CSS, we can see where we actually - -00:01:25.310 --> 00:01:29.800 line:100% position:50% align:middle -authored it, like in our animations.style -file. Same goes for our javascript file, - -00:01:29.800 --> 00:01:36.000 line:100% position:50% align:middle -it's one big file, however, if you look -inside of that, the map file's going to - -00:01:36.000 --> 00:01:39.510 line:100% position:50% align:middle -point you towards the actual components -where we wrote it. And then, - -00:01:39.510 --> 00:01:42.940 line:100% position:50% align:middle -in the media, I've got just a couple fonts -that we need here, and then the anchor - -00:01:42.940 --> 00:01:48.120 line:100% position:50% align:middle -that we used in our main file. So, that's -pretty much all we need, - -00:01:48.120 --> 00:01:54.010 line:100% position:50% align:middle -it's just an index.html and stack, there's -no server that comes along with it. - -00:01:54.010 --> 00:01:59.580 line:100% position:50% align:middle -If I were to open that up in my browser -here, you'll notice that it doesn't work. - -00:01:59.580 --> 00:02:05.420 line:100% position:50% align:middle -Right? There's some errors and everything. -And, even if you were to push that up to - -00:02:05.420 --> 00:02:12.550 line:100% position:50% align:middle -some server and surf to index.html, what -happens is that when you're on index.html - -00:02:12.550 --> 00:02:17.070 line:100% position:50% align:middle -it's actually fine, but when you go to a -secondary page, like - -00:02:17.070 --> 00:02:22.520 line:100% position:50% align:middle -store/defeatedobnoxiouschildren, the -browser thinks you're in a folder called - -00:02:22.520 --> 00:02:26.600 line:100% position:50% align:middle -store and a folder called defeated -obnoxious children. And, if you were then - -00:02:26.600 --> 00:02:30.370 line:100% position:50% align:middle -to refresh that, there's no index.html -inside of that folder. - -00:02:30.370 --> 00:02:36.630 line:100% position:50% align:middle -So, we need some sort of server that is -essentially going to serve this index.html - -00:02:36.630 --> 00:02:42.600 line:100% position:50% align:middle -up, regardless of what URL the user -requested and we'll say, don't worry about - -00:02:42.600 --> 00:02:46.050 line:100% position:50% align:middle -it, we're going to let the browser -figure out all of our routing. - -00:02:46.050 --> 00:02:49.310 line:100% position:50% align:middle -So, I'm going to show you a few different -methods to actually do that. - -00:02:49.310 --> 00:02:54.250 line:100% position:50% align:middle -The first one is now.sh, the second one is -going to be Github pages, and then the - -00:02:54.250 --> 00:02:59.252 line:100% position:50% align:middle -third one, I'm going to just show you how -to just throw it up on any existing server - -00:02:59.252 --> 00:03:03.000 line:100% position:50% align:middle -that you might have, like a PHP server, -that's a couple bucks a month. +WEBVTT + +1 +00:00:00.429 --> 00:00:03.012 +(upbeat music) + +2 +00:00:07.580 --> 00:00:08.413 +Alright, + +3 +00:00:08.413 --> 00:00:09.500 +we're pretty much done with our application. + +4 +00:00:09.500 --> 00:00:11.440 +Now let's talk about how we actually build this sucker + +5 +00:00:11.440 --> 00:00:13.410 +for production, and how you can get it + +6 +00:00:13.410 --> 00:00:16.050 +on a number of different hosting platforms. + +7 +00:00:16.050 --> 00:00:18.160 +So the way to build it is actually pretty simple, + +8 +00:00:18.160 --> 00:00:20.270 +you just wanna kill what you currently are running, + +9 +00:00:20.270 --> 00:00:23.160 +so control-C, and let's actually show you real quick. + +10 +00:00:23.160 --> 00:00:25.240 +If we open up our package.json, + +11 +00:00:25.240 --> 00:00:27.620 +remember we have this build command here. + +12 +00:00:27.620 --> 00:00:30.240 +And it just runs react-scripts build. + +13 +00:00:30.240 --> 00:00:32.860 +I'm gonna show you what eject is in a minute as well. + +14 +00:00:32.860 --> 00:00:35.800 +So just run npm run build, + +15 +00:00:35.800 --> 00:00:39.000 +and if we open up the folder that we are currently in, + +16 +00:00:39.000 --> 00:00:41.570 +it's going to make a folder called build and, + +17 +00:00:41.570 --> 00:00:42.530 +what this is doing, + +18 +00:00:42.530 --> 00:00:44.300 +I'll explain it while it's actually building, is, + +19 +00:00:44.300 --> 00:00:48.620 +it's going to take all of our files, all of our CSS, + +20 +00:00:48.620 --> 00:00:51.560 +and all of the JavaScript we have written and compile it + +21 +00:00:51.560 --> 00:00:55.210 +into one tiny little JavaScript file + +22 +00:00:55.210 --> 00:00:57.210 +that has stripped out any of the, + +23 +00:00:57.210 --> 00:00:58.490 +it strips out all the warnings, + +24 +00:00:58.490 --> 00:01:00.900 +it strips out all the prop type stuff. + +25 +00:01:00.900 --> 00:01:02.690 +That was all just for development, + +26 +00:01:02.690 --> 00:01:04.540 +and then, when we deploy to production, + +27 +00:01:04.540 --> 00:01:07.730 +we want a very small .js file. + +28 +00:01:07.730 --> 00:01:11.080 +So if I open this sucker up right now, + +29 +00:01:11.080 --> 00:01:13.490 +you'll see that we have a build folder. + +30 +00:01:13.490 --> 00:01:17.250 +And inside of that build folder, you are seeing that + +31 +00:01:17.250 --> 00:01:21.170 +we've got an images folder, an index.html, + +32 +00:01:21.170 --> 00:01:22.490 +it by default will give you + +33 +00:01:22.490 --> 00:01:24.750 +a whole bunch of servers worker stuff, which is great. + +34 +00:01:24.750 --> 00:01:27.690 +It'll try to make it work offline, which I really like. + +35 +00:01:27.690 --> 00:01:32.180 +And then, inside of our static file, there is a js file, + +36 +00:01:32.180 --> 00:01:35.160 +which, that is our entire application here. + +37 +00:01:35.160 --> 00:01:37.070 +And then there is a map file, + +38 +00:01:37.070 --> 00:01:38.440 +and that's what's called a source map. + +39 +00:01:38.440 --> 00:01:40.930 +So if there are any actual errors, + +40 +00:01:40.930 --> 00:01:44.230 +then that will point back to where the errors are. + +41 +00:01:44.230 --> 00:01:45.890 +And that is a fairly large file, + +42 +00:01:45.890 --> 00:01:48.170 +but your users do not load that, + +43 +00:01:48.170 --> 00:01:50.370 +only developers will load that. + +44 +00:01:50.370 --> 00:01:53.140 +It looks like it's about 4.1 megs for me right now. + +45 +00:01:53.140 --> 00:01:55.620 +And some services won't allow you to upload a file that big, + +46 +00:01:55.620 --> 00:01:56.453 +and that's totally fine, + +47 +00:01:56.453 --> 00:01:58.030 +you don't necessarily need that for production. + +48 +00:01:58.030 --> 00:01:59.250 +That's more of a development thing. + +49 +00:01:59.250 --> 00:02:02.599 +But if you do have errors in production, + +50 +00:02:02.599 --> 00:02:07.530 +it's nice to be able to know that the error is not in this + +51 +00:02:07.530 --> 00:02:10.130 +mumbled, jumbled, uglified thing. + +52 +00:02:10.130 --> 00:02:12.810 +It's in, this will tell you exactly where + +53 +00:02:12.810 --> 00:02:15.260 +the errors are coming from in your source files. + +54 +00:02:15.260 --> 00:02:16.900 +And it's going to give us a media folder, + +55 +00:02:16.900 --> 00:02:18.029 +and inside of that media folder, + +56 +00:02:18.029 --> 00:02:20.330 +we've got our anchor that we use, + +57 +00:02:20.330 --> 00:02:22.600 +we've got the font that it used, + +58 +00:02:22.600 --> 00:02:24.740 +and that's pretty much it. + +59 +00:02:24.740 --> 00:02:28.780 +And then in our CSS, it will kick out the .css file. + +60 +00:02:28.780 --> 00:02:32.110 +And again, that's Webpack taking in that imported CSS + +61 +00:02:32.110 --> 00:02:35.520 +and kicking it out to an external .css file. + +62 +00:02:35.520 --> 00:02:38.020 +And then this index.html is going to point + +63 +00:02:38.020 --> 00:02:40.130 +to all of these things, good. + +64 +00:02:40.130 --> 00:02:43.670 +So, this is a, almost, a static site. + +65 +00:02:43.670 --> 00:02:46.250 +And that will allow us to drag and drop that sucker + +66 +00:02:46.250 --> 00:02:50.060 +up on any of the different hosting services we have. + +67 +00:02:50.060 --> 00:02:51.900 +The only thing that we need to know is, + +68 +00:02:51.900 --> 00:02:53.870 +if I were to try to open that up, + +69 +00:02:53.870 --> 00:02:55.349 +you'll see that it doesn't work + +70 +00:02:55.349 --> 00:02:57.720 +and it gives us some errors. + +71 +00:02:57.720 --> 00:02:59.900 +And that's because this still needs to be run + +72 +00:02:59.900 --> 00:03:02.820 +through a server, and the most important part is that, + +73 +00:03:02.820 --> 00:03:05.440 +because when I'm on these URLs right here, + +74 +00:03:05.440 --> 00:03:07.430 +the server needs to be smart enough + +75 +00:03:07.430 --> 00:03:10.410 +to not look into a folder called store + +76 +00:03:10.410 --> 00:03:13.580 +and a folder called elegant thoughtless diagnoses. + +77 +00:03:13.580 --> 00:03:18.330 +It should tell us, okay, regardless of what the URL is, + +78 +00:03:18.330 --> 00:03:23.330 +send everybody right back to this index.html file. + +79 +00:03:23.420 --> 00:03:26.370 +And then we're going to have to figure out the routing + +80 +00:03:26.370 --> 00:03:28.550 +on the client side, via React router. + +81 +00:03:28.550 --> 00:03:30.110 +So over the next couple of videos, + +82 +00:03:30.110 --> 00:03:31.080 +I'm gonna show you how to deploy it + +83 +00:03:31.080 --> 00:03:33.880 +to some of the more popular hosting platforms right now. +