All right. 1
So now that we've got most of our functionality down, the next step is to tidy things up and try to make 2
the appearance of our app look a little bit better. Now 3
the end result that we're aiming for after all of our styling etc. is something like this. 4
We've got icons in place, 5
we've got expanding features for our inputs, 6
notice how this button also has a hover effect and also in our background we've got a little pattern 7
going on as well. 8
And in order to create these effects, we're going to be using some pre-built components by adding some 9
dependencies. 10
And even if you're working on your own local copy or on a previous version of the app, I recommend to 11
use this starting project or to download a fresh copy if you're working on your local environment. 12
And the reason being is that in the styles.css we've got a couple of changes and in the create 13
Area I've added a class name to our form. 14
So if you don't have the same one you might end up with weird looking UI that doesn't look the same 15
as the video. 16
So I recommend starting with the same sandbox and just forking a copy of it. 17
So go ahead and fork 18
the starting project. And the first thing that we're going to add is something called material UI. 19
So go ahead and click on the ad dependency button and search for material UI 20
and we're going to need the core component as well as the icons component. 21
So let's click on both of these, 22
material-ui/icons and material-ui/core. 23
Now if you're doing this locally then you can install both of these using npm. 24
And if you go over to the documentation for these pages you'll see how to do that 25
exactly. 26
Now material-ui are basically React components that have been pre-built so that we can simply just customize 27
and get hold of some of the functionality as well as modify some of the appearance so that we can create 28
our own apps much faster using Google's design concept which is called Material Design. 29
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
So remember how we already installed material-ui/icons and also material-ui/core then we 31
can simply just import the icons and go ahead and use them. 32
So if you take a look at the code here, it's as simple as importing an icon say for example the delete 33
forever icon from material-ui/icons/DeleteForever and then you get to simply use it as just 34
any other React component. 35
So let's try that out on our site. 36
The first thing I want to do is to simply change the delete button here from just the words delete which 37
is added inside this button to use an actual delete icon that comes from this material UI library. 38
We can find the full list of icons in their search page and I'm going to search for something to do 39
with delete. 40
So I think this will trash bin looks pretty good. 41
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
Now going back over to my note.jsx I can paste in this import statement and I can now use it 43
instead of my hardcoded text. 44
So I'm going to add a delete icon which is a self closing tag. 45
And now if I create a new note, you'll see that it has a little trash bin. 46
This is just how easy it is to actually use these components. And the benefit of using React Components 47
over other things such as bootstrap or fav icons is that in React we have our Javascript, 48
CSS and HTML pretty much all combined into one in each of these components. 49
So we can even add components that actually have functionality that we didn't even have to code up. 50
For example I want to change this Add button so that instead of saying the word add I want to use a 51
add icon from material icons. 52
See if you can pause the video and find an appropriate add icon that you can replace this word add with. 53
Pause the video now and give that a go. 54
All right. 55
So let's try and search for something. 56
Now I'm just going to choose this very simple add icon here and I'm going to copy the import statement 57
and add it to my createarea. 58
So now instead of this word add I'm going to use the add icon component. 59
And now when this refreshes, you can see we've got a big add sign in here. 60
Now if I had just used the plus sign you can see how it's very very tiny. 61
But instead I'm using the icon which should scale up. 62
Now notice how in the final version this add is a lot fancier, namely when I roll over it 63
it actually changes color but also when I actually click to expand this area it actually pops up with 64
a little animation. 65
So how can we do this? Well instead of using our own button which is a standard HTML button, we can 66
use it something called a floating aaction button that comes from the material UI package. 67
So if you go ahead and look through the inputs and buttons section you can see there's lots of different 68
types of buttons. 69
And the one that we want are these circular floating action buttons. 70
And in order to use it all we have to do is to import the floating action button which is called a fab 71
and let's go ahead and drop it into our create area component. And now instead of using a button I'm 72
simply going to change this component to a Fab. 73
So it was lowercase a and b an uppercase F which we imported here. 74
And you'll notice that there shouldn't be all that much change here other than the fact that when you 75
hover over it it's only changing color. 76
And this is because now instead of using our own buttons we're using a fab component from the material 77
UI library. 78
Now if in your case you don't actually see a yellow icon that's positioned here 79
then it might be that you've actually got a different stylesheet to me. 80
Remember in the beginning of the lesson I recommended to actually fork the starting version of this 81
project and it's because there were a couple of changes in the style sheets and in the create app where 82
I added a class name to the form. 83
So if you're seeing a grey button instead and it's positioned out of place then just simply go ahead and 84
copy this style sheet from these starting project and then go into the create area and update the form 85
so that you apply the class name to the form. 86
And this way we can actually apply the same styling to everything inside the form just as before. 87
But if you started out with the starting project then you shouldn't have any problems at all with the 88
styling. Go down on the material UI component. 89
You'll see a section which talks about the floating action button animating onto the screen as an expanding 90
piece of material. 91
And we can do this, 92
they say, using a zoom transition. 93
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
a zoom component. 95
So if we search for a zoom component, 96
then we can learn how to use it. 97
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
it with this in prop. 99
And this is a true or false boolean. 100
So if it's true the component will transition in, if it's false then it won't. 101
So let's go ahead and apply our zoom component here. 102
And place the closing tag around our fab and then we'll add that prop in to make it true. 103
Now whenever you refresh the app you can see that the fab actually will zoom in and in an animated way. 104
But it would be so much better if we can actually change our app so that we have the content input showing 105
by default 106
but when we click in the content input then do we actually show our title input and also let the button 107
zoom in. So this is something that we could do with conditional rendering and you already have enough 108
skills to be able to create this effect where the title input only shows if a particular state is set 109
to true and the button also only zooms in when that state is set to true. 110
So there's a couple of things that you have to think about in order to complete this challenge. 111
Firstly is that our content area is a text area and to begin with we want it to be a little bit smaller 112
than it is. So we can set this depending on the number of rows. 113
So we start out with a single row 114
then it becomes very small, but once it's expanded we wanted to take up three rows. 115
Now the other thing to think about is we want to get rid of this input area when this create area is 116
not expanded. 117
And only when it should expand do we actually insert the input back in. 118
So you'll have to conditionally check for some sort of state and render this input depending on that. 119
The final thing is we're going to also make this zoom in conditionally. 120
So to start off we won't have the fab and then only when it's zoomed in 121
do we set this to true 122
and we actually render the fab. So have to think about some of those things and take a look at this 123
behavior of expansion. 124
So starting out with just the text area, a single line and then when you click on it, it shows the title 125
input and the fab zooms in. Pause the video and see if you can complete this challenge using what you know 126
about conditional rendering. 127
All right. 128
So to solve this challenge the first thing we need to do is something that holds the state of whether 129
if I create area is expanded. 130
So let's create a constant and I'll call it isExpanded and I'll provide a function called set 131
Expanded and set that to use state. 132
Now to begin with 133
I want my isExpanded constant to be set to false because I don't want it to be expanded and it's only 134
when the textArea gets clicked on, 135
so let's add an onClick here, 136
then do we actually want to expand that area. 137
So I'll call a method called expand and I'll define that method just below here. 138
Now when this method is called, we're going to set the expanded too true. 139
So let's call set 140
Expanded and pass in true as the value. 141
Now when we click on the textArea isExpanded becomes true and we can now listen for that in order 142
to render the input. 143
So let's cut this out and add a set of curly braces. 144
If the isExpanded is true then we'll render the input, 145
otherwise we'll render nothing. 146
Now alternatively, you can use the syntax where we just have the double Ampersand and it does exactly 147
the same thing showing the input only when we click on this textArea. 148
Now the second thing we mentioned is that we want to change this rows to one to start off with and only 149
turn it to three when it's expanded. so let's check for is expanded. 150
If it's true then we'll render three rows 151
and if it's false will render one row. 152
So now it starts out being very compact 153
and when we click on it it expands. 154
The final thing to address is our fab button. 155
We only want it to show up and zoom in when it shows up only when it's expanded. 156
So instead of hard coding this is true, we're going to again use that isExpanded property. 157
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
the section on rendering components conditionally. Now at the very last icon 159
I want to add is to my keeper title up here. 160
So I want to use the highlight component that looks like this. 161
And so I'm just going to copy that and paste it into my header and use it inside this . 162
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
alongside our title like so. The very final thing that you might notice that's different between this 164
version and our version is it's actually got a background image. To achieve this effect 165
you can use a website called transparenttextures.com and you can scroll through all of these textures to 166
find one that you like. And the one that I decided upon was this sort of boxy looking one that looks 167
like this. 168
It's called cubes and it's made by Sander Ottens. 169
And in order to use it, we can simply click on it and now we have that pattern saved as a URL. 170
If we go ahead and copy this entire URL where we set our background image then we can go into the 171
CSS and go ahead and add it to the body. 172
So in addition to having a background, it's also got a background image with a particular URL 173
and then let's just make sure we cap the end with a semicolon. 174
And once we hit save on our styles.css and refresh then you'll see that background image show up. 175
So now we have functionality as well as style. Now 176
you might notice that if you add a couple of notes and you go ahead and refresh the page, your notes 177
will disappear. 178
And the reason is because React as we mentioned is a front-end library. 179
It's responsible for creating these components, creating the functionality and the styling but it's not 180
responsible for saving your data. 181
So if you do want these things to be persisted then you'll have to review what you learned in our backend 182
modules with Node and with MongoDB if you wanted to be able to have a backend to your frontend 183
application. I hope you enjoyed building this project with me and you'll use what you've learned about 184
React in order to build even more awesome projects of your own. 185
I would love to see whatever it is that you build and congratulate you on your work. 186
So if you create something 187
be sure to let me know either via Twitter @yu_angela or in the Q/A section of the 188
lessons.