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
+<v ->Hello everybody, Wes Bos here thanks so much for</v>
+
+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
+<v Narrator>Alright so let's get up and running</v>
+
+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
+<v Wes>If you've ever tried to write HTML</v>
+
+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
+<v ->CSS in React can be approached</v>
+
+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
+<v Speaker>Next up we need to make our App component</v>
+
+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
+<v Wes>Two fundamental concepts that we're going to cover</v>
+
+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.
+
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
+<v Instructor>Now that we've successfully got</v>
+
+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
+<v Narrator>So far, when we add any data here,</v>
+
+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
+<v Wes>Now that our menu of fish is being persisted</v>
+
+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.&amp;&amp;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
+<v Instructor>Next up we need to work</v>
+
+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
-&amp;times; 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
+<v Instructor>So, if you've ever heard</v>
+
+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 &amp;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
+<v Wes>Now let's talk about animation in React.</v>
+
+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
+<v Narrator>One thing I found with after writing it</v>
+
+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/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
+<v Narrator>One thing I found with after writing it</v>
+
+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
+<v Wes>Alright,</v>
+
+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.
+