WEBVTT 0 00:00.120 --> 00:00.460 All right. 1 00:00.490 --> 00:07.140 So now that we've got most of our functionality down, the next step is to tidy things up and try to make 2 00:07.140 --> 00:10.570 the appearance of our app look a little bit better. Now 3 00:10.590 --> 00:15.900 the end result that we're aiming for after all of our styling etc. is something like this. 4 00:15.900 --> 00:17.880 We've got icons in place, 5 00:17.880 --> 00:22.050 we've got expanding features for our inputs, 6 00:22.050 --> 00:28.830 notice how this button also has a hover effect and also in our background we've got a little pattern 7 00:28.830 --> 00:30.320 going on as well. 8 00:30.470 --> 00:36.540 And in order to create these effects, we're going to be using some pre-built components by adding some 9 00:36.540 --> 00:38.070 dependencies. 10 00:38.220 --> 00:44.250 And even if you're working on your own local copy or on a previous version of the app, I recommend to 11 00:44.250 --> 00:51.430 use this starting project or to download a fresh copy if you're working on your local environment. 12 00:51.510 --> 00:57.570 And the reason being is that in the styles.css we've got a couple of changes and in the create 13 00:57.630 --> 01:00.870 Area I've added a class name to our form. 14 01:00.990 --> 01:06.420 So if you don't have the same one you might end up with weird looking UI that doesn't look the same 15 01:06.420 --> 01:07.320 as the video. 16 01:07.380 --> 01:12.860 So I recommend starting with the same sandbox and just forking a copy of it. 17 01:12.900 --> 01:14.460 So go ahead and fork 18 01:14.460 --> 01:22.030 the starting project. And the first thing that we're going to add is something called material UI. 19 01:22.080 --> 01:27.330 So go ahead and click on the ad dependency button and search for material UI 20 01:27.690 --> 01:31.630 and we're going to need the core component as well as the icons component. 21 01:31.650 --> 01:33.810 So let's click on both of these, 22 01:36.420 --> 01:41.100 material-ui/icons and material-ui/core. 23 01:41.100 --> 01:46.160 Now if you're doing this locally then you can install both of these using npm. 24 01:46.320 --> 01:51.100 And if you go over to the documentation for these pages you'll see how to do that 25 01:51.120 --> 01:52.380 exactly. 26 01:52.380 --> 01:59.790 Now material-ui are basically React components that have been pre-built so that we can simply just customize 27 02:00.150 --> 02:06.210 and get hold of some of the functionality as well as modify some of the appearance so that we can create 28 02:06.240 --> 02:12.880 our own apps much faster using Google's design concept which is called Material Design. 29 02:13.020 --> 02:21.390 Now to start with let's go ahead and go to the components list and we're going to get hold of some icons. 30 02:21.390 --> 02:28.260 So remember how we already installed material-ui/icons and also material-ui/core then we 31 02:28.260 --> 02:34.520 can simply just import the icons and go ahead and use them. 32 02:34.530 --> 02:41.640 So if you take a look at the code here, it's as simple as importing an icon say for example the delete 33 02:41.640 --> 02:50.010 forever icon from material-ui/icons/DeleteForever and then you get to simply use it as just 34 02:50.100 --> 02:52.110 any other React component. 35 02:52.110 --> 02:55.620 So let's try that out on our site. 36 02:55.900 --> 03:04.900 The first thing I want to do is to simply change the delete button here from just the words delete which 37 03:04.900 --> 03:12.820 is added inside this button to use an actual delete icon that comes from this material UI library. 38 03:12.820 --> 03:19.420 We can find the full list of icons in their search page and I'm going to search for something to do 39 03:19.420 --> 03:20.750 with delete. 40 03:20.770 --> 03:23.280 So I think this will trash bin looks pretty good. 41 03:23.290 --> 03:29.670 So that's the one that I want to use and I'm going to go ahead and just copy this line of code. 42 03:29.890 --> 03:37.720 Now going back over to my note.jsx I can paste in this import statement and I can now use it 43 03:37.990 --> 03:40.410 instead of my hardcoded text. 44 03:40.480 --> 03:46.650 So I'm going to add a delete icon which is a self closing tag. 45 03:46.750 --> 03:52.380 And now if I create a new note, you'll see that it has a little trash bin. 46 03:52.420 --> 04:00.280 This is just how easy it is to actually use these components. And the benefit of using React Components 47 04:00.370 --> 04:08.070 over other things such as bootstrap or fav icons is that in React we have our Javascript, 48 04:08.120 --> 04:13.170 CSS and HTML pretty much all combined into one in each of these components. 49 04:13.600 --> 04:19.950 So we can even add components that actually have functionality that we didn't even have to code up. 50 04:20.230 --> 04:27.640 For example I want to change this Add button so that instead of saying the word add I want to use a 51 04:27.760 --> 04:30.370 add icon from material icons. 52 04:30.520 --> 04:38.860 See if you can pause the video and find an appropriate add icon that you can replace this word add with. 53 04:39.200 --> 04:44.480 Pause the video now and give that a go. 54 04:44.530 --> 04:44.870 All right. 55 04:44.890 --> 04:47.360 So let's try and search for something. 56 04:48.340 --> 04:55.120 Now I'm just going to choose this very simple add icon here and I'm going to copy the import statement 57 04:55.210 --> 04:58.220 and add it to my createarea. 58 04:58.240 --> 05:05.260 So now instead of this word add I'm going to use the add icon component. 59 05:05.530 --> 05:11.520 And now when this refreshes, you can see we've got a big add sign in here. 60 05:11.560 --> 05:16.320 Now if I had just used the plus sign you can see how it's very very tiny. 61 05:16.480 --> 05:21.460 But instead I'm using the icon which should scale up. 62 05:21.460 --> 05:27.570 Now notice how in the final version this add is a lot fancier, namely when I roll over it 63 05:27.610 --> 05:35.740 it actually changes color but also when I actually click to expand this area it actually pops up with 64 05:35.740 --> 05:37.490 a little animation. 65 05:37.630 --> 05:47.580 So how can we do this? Well instead of using our own button which is a standard HTML button, we can 66 05:47.580 --> 05:54.930 use it something called a floating aaction button that comes from the material UI package. 67 05:54.930 --> 06:00.900 So if you go ahead and look through the inputs and buttons section you can see there's lots of different 68 06:00.900 --> 06:02.260 types of buttons. 69 06:02.490 --> 06:08.130 And the one that we want are these circular floating action buttons. 70 06:08.130 --> 06:15.810 And in order to use it all we have to do is to import the floating action button which is called a fab 71 06:16.560 --> 06:25.610 and let's go ahead and drop it into our create area component. And now instead of using a button I'm 72 06:25.620 --> 06:28.710 simply going to change this component to a Fab. 73 06:28.740 --> 06:34.250 So it was lowercase a and b an uppercase F which we imported here. 74 06:34.560 --> 06:40.170 And you'll notice that there shouldn't be all that much change here other than the fact that when you 75 06:40.170 --> 06:43.110 hover over it it's only changing color. 76 06:43.320 --> 06:50.430 And this is because now instead of using our own buttons we're using a fab component from the material 77 06:50.430 --> 06:52.350 UI library. 78 06:52.350 --> 06:59.720 Now if in your case you don't actually see a yellow icon that's positioned here 79 06:59.910 --> 07:03.330 then it might be that you've actually got a different stylesheet to me. 80 07:03.570 --> 07:10.020 Remember in the beginning of the lesson I recommended to actually fork the starting version of this 81 07:10.080 --> 07:16.750 project and it's because there were a couple of changes in the style sheets and in the create app where 82 07:16.770 --> 07:19.410 I added a class name to the form. 83 07:19.410 --> 07:25.200 So if you're seeing a grey button instead and it's positioned out of place then just simply go ahead and 84 07:25.200 --> 07:32.340 copy this style sheet from these starting project and then go into the create area and update the form 85 07:32.400 --> 07:35.490 so that you apply the class name to the form. 86 07:35.490 --> 07:40.980 And this way we can actually apply the same styling to everything inside the form just as before. 87 07:41.520 --> 07:45.630 But if you started out with the starting project then you shouldn't have any problems at all with the 88 07:45.630 --> 07:50.460 styling. Go down on the material UI component. 89 07:50.460 --> 07:57.210 You'll see a section which talks about the floating action button animating onto the screen as an expanding 90 07:57.210 --> 07:58.920 piece of material. 91 07:58.920 --> 08:00.270 And we can do this, 92 08:00.270 --> 08:02.790 they say, using a zoom transition. 93 08:02.790 --> 08:09.900 So if we take a peek at the code you can see that all that they've done is just wrapped that fab inside 94 08:09.960 --> 08:11.300 a zoom component. 95 08:12.540 --> 08:15.270 So if we search for a zoom component, 96 08:18.440 --> 08:20.450 then we can learn how to use it. 97 08:20.450 --> 08:29.630 So first let's go ahead and import it and put it at the top. And then we can go ahead and simply use 98 08:29.630 --> 08:32.350 it with this in prop. 99 08:32.450 --> 08:34.840 And this is a true or false boolean. 100 08:34.880 --> 08:39.490 So if it's true the component will transition in, if it's false then it won't. 101 08:39.500 --> 08:43.250 So let's go ahead and apply our zoom component here. 102 08:47.390 --> 08:56.830 And place the closing tag around our fab and then we'll add that prop in to make it true. 103 08:56.900 --> 09:05.330 Now whenever you refresh the app you can see that the fab actually will zoom in and in an animated way. 104 09:05.930 --> 09:12.320 But it would be so much better if we can actually change our app so that we have the content input showing 105 09:12.320 --> 09:13.370 by default 106 09:13.430 --> 09:22.250 but when we click in the content input then do we actually show our title input and also let the button 107 09:22.280 --> 09:29.380 zoom in. So this is something that we could do with conditional rendering and you already have enough 108 09:29.380 --> 09:37.510 skills to be able to create this effect where the title input only shows if a particular state is set 109 09:37.510 --> 09:43.880 to true and the button also only zooms in when that state is set to true. 110 09:43.900 --> 09:48.970 So there's a couple of things that you have to think about in order to complete this challenge. 111 09:48.970 --> 09:58.630 Firstly is that our content area is a text area and to begin with we want it to be a little bit smaller 112 09:58.630 --> 10:03.270 than it is. So we can set this depending on the number of rows. 113 10:03.310 --> 10:05.650 So we start out with a single row 114 10:05.650 --> 10:12.030 then it becomes very small, but once it's expanded we wanted to take up three rows. 115 10:12.040 --> 10:18.010 Now the other thing to think about is we want to get rid of this input area when this create area is 116 10:18.010 --> 10:19.370 not expanded. 117 10:19.570 --> 10:23.880 And only when it should expand do we actually insert the input back in. 118 10:24.550 --> 10:31.240 So you'll have to conditionally check for some sort of state and render this input depending on that. 119 10:31.270 --> 10:37.450 The final thing is we're going to also make this zoom in conditionally. 120 10:37.450 --> 10:42.620 So to start off we won't have the fab and then only when it's zoomed in 121 10:42.670 --> 10:44.130 do we set this to true 122 10:44.350 --> 10:51.220 and we actually render the fab. So have to think about some of those things and take a look at this 123 10:51.280 --> 10:54.240 behavior of expansion. 124 10:54.280 --> 11:00.910 So starting out with just the text area, a single line and then when you click on it, it shows the title 125 11:00.910 --> 11:07.210 input and the fab zooms in. Pause the video and see if you can complete this challenge using what you know 126 11:07.270 --> 11:12.410 about conditional rendering. 127 11:12.610 --> 11:13.100 All right. 128 11:13.140 --> 11:19.170 So to solve this challenge the first thing we need to do is something that holds the state of whether 129 11:19.170 --> 11:21.390 if I create area is expanded. 130 11:21.570 --> 11:27.600 So let's create a constant and I'll call it isExpanded and I'll provide a function called set 131 11:27.600 --> 11:31.920 Expanded and set that to use state. 132 11:31.950 --> 11:33.060 Now to begin with 133 11:33.090 --> 11:40.440 I want my isExpanded constant to be set to false because I don't want it to be expanded and it's only 134 11:40.770 --> 11:43.370 when the textArea gets clicked on, 135 11:43.410 --> 11:45.810 so let's add an onClick here, 136 11:46.050 --> 11:50.310 then do we actually want to expand that area. 137 11:50.310 --> 11:59.480 So I'll call a method called expand and I'll define that method just below here. 138 11:59.490 --> 12:06.250 Now when this method is called, we're going to set the expanded too true. 139 12:06.440 --> 12:07.490 So let's call set 140 12:07.490 --> 12:12.260 Expanded and pass in true as the value. 141 12:12.380 --> 12:19.460 Now when we click on the textArea isExpanded becomes true and we can now listen for that in order 142 12:19.460 --> 12:20.890 to render the input. 143 12:20.930 --> 12:24.380 So let's cut this out and add a set of curly braces. 144 12:24.680 --> 12:29.260 If the isExpanded is true then we'll render the input, 145 12:29.720 --> 12:31.370 otherwise we'll render nothing. 146 12:31.820 --> 12:38.150 Now alternatively, you can use the syntax where we just have the double Ampersand and it does exactly 147 12:38.150 --> 12:44.370 the same thing showing the input only when we click on this textArea. 148 12:44.390 --> 12:51.260 Now the second thing we mentioned is that we want to change this rows to one to start off with and only 149 12:51.260 --> 12:56.450 turn it to three when it's expanded. so let's check for is expanded. 150 12:56.450 --> 12:59.330 If it's true then we'll render three rows 151 12:59.330 --> 13:01.310 and if it's false will render one row. 152 13:01.760 --> 13:04.040 So now it starts out being very compact 153 13:04.040 --> 13:06.650 and when we click on it it expands. 154 13:06.650 --> 13:09.770 The final thing to address is our fab button. 155 13:09.770 --> 13:15.600 We only want it to show up and zoom in when it shows up only when it's expanded. 156 13:15.770 --> 13:21.380 So instead of hard coding this is true, we're going to again use that isExpanded property. 157 13:21.530 --> 13:30.180 So now we click on it and everything shows up like so. Did you manage to get that? If not be sure to review 158 13:30.180 --> 13:36.880 the section on rendering components conditionally. Now at the very last icon 159 13:36.900 --> 13:40.560 I want to add is to my keeper title up here. 160 13:41.160 --> 13:45.990 So I want to use the highlight component that looks like this. 161 13:46.080 --> 13:55.240 And so I'm just going to copy that and paste it into my header and use it inside this

. 162 13:55.290 --> 14:05.520 So let's go ahead and add it in here as a highlight icon and now we should be able to see the icon 163 14:05.700 --> 14:13.320 alongside our title like so. The very final thing that you might notice that's different between this 164 14:13.320 --> 14:21.270 version and our version is it's actually got a background image. To achieve this effect 165 14:21.270 --> 14:29.550 you can use a website called transparenttextures.com and you can scroll through all of these textures to 166 14:29.550 --> 14:37.710 find one that you like. And the one that I decided upon was this sort of boxy looking one that looks 167 14:37.710 --> 14:38.880 like this. 168 14:38.940 --> 14:42.430 It's called cubes and it's made by Sander Ottens. 169 14:42.690 --> 14:51.040 And in order to use it, we can simply click on it and now we have that pattern saved as a URL. 170 14:51.390 --> 14:59.550 If we go ahead and copy this entire URL where we set our background image then we can go into the 171 14:59.660 --> 15:04.630 CSS and go ahead and add it to the body. 172 15:04.690 --> 15:12.470 So in addition to having a background, it's also got a background image with a particular URL 173 15:12.550 --> 15:16.540 and then let's just make sure we cap the end with a semicolon. 174 15:16.540 --> 15:22.990 And once we hit save on our styles.css and refresh then you'll see that background image show up. 175 15:23.830 --> 15:30.190 So now we have functionality as well as style. Now 176 15:30.240 --> 15:38.940 you might notice that if you add a couple of notes and you go ahead and refresh the page, your notes 177 15:39.000 --> 15:40.440 will disappear. 178 15:40.440 --> 15:46.090 And the reason is because React as we mentioned is a front-end library. 179 15:46.230 --> 15:52.830 It's responsible for creating these components, creating the functionality and the styling but it's not 180 15:52.890 --> 15:55.180 responsible for saving your data. 181 15:55.200 --> 16:01.810 So if you do want these things to be persisted then you'll have to review what you learned in our backend 182 16:01.880 --> 16:09.600 modules with Node and with MongoDB if you wanted to be able to have a backend to your frontend 183 16:09.630 --> 16:17.120 application. I hope you enjoyed building this project with me and you'll use what you've learned about 184 16:17.120 --> 16:22.350 React in order to build even more awesome projects of your own. 185 16:22.370 --> 16:27.290 I would love to see whatever it is that you build and congratulate you on your work. 186 16:27.800 --> 16:29.640 So if you create something 187 16:29.780 --> 16:36.530 be sure to let me know either via Twitter @yu_angela or in the Q/A section of the 188 16:36.530 --> 16:37.100 lessons.