Transcripts
1. Introduction: Hi, I'm lunch and I'm a Software Engineer with for years of experience with React. In this course,
we'll be building a simple React application which allows you to enter
a task added to your list. And then once you're done, you can complete it by clicking the button over here will
be going through the HTML, CSS, and JavaScript of
the code from scratch. So it's the perfect
project if you just learn, react and you want to get your feet wet with a
real life project. Knowledge of HTML, CSS, and JavaScript is required and a basic knowledge of
reactants preferred. But don't worry, we'll
be reviewing everything. By the end of this,
you will have built your first React project
and you will have learned how to apply react concepts to real life projects
without any further ado. Let's get started.
2. The Project: In this course, you
will be learning how to build a to-do
list application. By the end of it,
you should have a working application
in which you can add items and you can delete them by pressing
the button over here. Now your project
will be to build upon this by adding
more features. Some examples of
features could be a button which clears
all of the items. Maybe instead of removing
the item month it's done, you can show it as
grayed-out across doubt. This will teach you how to create a component on your own, how to pass props to weld, and how to manipulate the state. To get started,
try to think about the components that you need and the state that
they'll manipulate. Once you're done, make sure
to post a video or a link to your project down
in the projects and resources section below. I'd love to see
what you've made.
3. Planning our components and states: Before you start any
new React project, you should plan out how
you will be making it. And when you plan, think about two things, the components and the
states that you will need. Here we have two components which are the form
and the text field. Inside the form, we
have two elements, which is the text field and the button on the
right-hand side. On the other hand, the to-do lists can have many
subcomponents, which are the list items. And each list item has text and a button on
the right-hand side. We will be needing
to different states. The first stage will
keep track of the texts that's entered inside the
text field by the user. Secondly, we will have a list
which will keep track of all of the items we have already
added to our to-do list. In summary, before we
start our project, we plan on what it will
look like based on the components and the
states that it will have. The next lesson,
we'll take a look at the development environment
that we'll be using.
4. Our development environment: In this lesson, we'll
be taking a look at the tools we'll be using
to create our project. We'll be making a project on a website called
code sandbox.io. This is a free website which lets you create
React projects remotely without requiring to install anything on
your local machine. If you're just getting
started out with React, this is the perfect platform
for you to get started. You can login either by your GitHub account
or Google account. You can click on either one
of those to get started. Once you're logged in, you will see a page
similar to this. Now what you have to do
is you have to go to this button which says new
sandbox and click on it. What this will allow you to do is to create a new project. You can see that we can
create projects from multiple frameworks like
Vue, Angular and React. But since this is a DIY project, we'll go over here
and then click on React to get started. Once your project is set up, you will see a page
similar to this. On the left-hand
side, you can see the files in your project, any dependencies that you use, and any external resources that we're using, such as fonts. In the middle you can
see the code that you're writing and any files
that you have open. And on the right-hand
side you can see what your React project looks
like in the browser. Now the great thing about code sandbox is that any
change that you make to your code appears almost immediately on the browser,
on the right-hand side. Let's change the
text over here from hello code sandbox
to hello world. When we save that, you'll see on the
right-hand side that it updates almost automatically. In this lesson, we
learned how to setup code sandbox dot IO
for our project. In the next lesson, we'll
be taking a look at the different files will be using and how to
structure a project.
5. Setting up and file structure: Welcome back. In this lesson, we'll
be taking a look at the file and folder
structure of our project. And we'll also be adding some basic styling
to our project. If you take a look at
the left-hand side, we have mainly five files. So firstly, we have
packaged or JSON. This file contains the
configuration for your projects such as any
dependencies that you have and any scripts
that you have. Then we have indexed on HTML. This is the first five that's rendered when somebody
visits your website. It doesn't really have a
lot of content inside it. But that's mainly because
all of the content of your website will be injected
into it by index.js. Index.js is basically a JavaScript
file which takes all of the React code which
you have inside your app component and
injects it into index.html. All of the React
components that you make by reside inside app.js, any companies that you
make will be put inside this development which has
the class name of App. It will be sent to index.js, which will inject it into
the index.html file. Lastly, we have styles.css. This is a style sheet
which apply styles to our app component and
therefore the entire project. When you're starting with
a new React project, you should always go into
the source folder and create a folder inside
it, IT components. Now whenever you make
a new component, you can add the
JavaScript and CSS files for that component
inside this folder. To get started, we'll
create the files for our first component which
will be working on, which will be the
formed component. What you have to do is you
have to click on this icon over here and you have to
write down formed or JS. You can create the corresponding
style sheet by creating a new file and naming
it form dot CSS. We won't be coding
it out right now, but this is the basic
structure you should follow when creating
any new component. Lastly, we'll be going into styles.css and adding some
basic styling for our project, which is a good
practice when you're starting out with a new project. So what we'll do is firstly, we'll give it a background
color of slightly gray. What we can do is say
background dash color and set the value to hash F4, F6, FDI. Now you can see on the
right-hand side that our app doesn't cover the entire
width and height of the page. What we can do is we can say
that the width of our app should be equal to 100%
of the viewport width. And the height of our
app should be equal to a 100% of the
viewport height. Lastly, we can see that the contents of an
application start directly from the top and we want to leave some
space on the top. What we can do is we can
add some padding to the top of our application and give
it a value of two REM. And once we save it, we can see that the contents of an application starts
slightly below the top. In this lesson, we
took a look at some of the files that are already
present in our React project. We created the file and
folder structure and we added some basic styling
to our application. In the next lesson, we'll be starting with our
first component, which is the form component.
6. Our first component - The Form: Welcome back. In this lesson, we'll be
creating our first component, which is the form component, will be going over the HTML and the CSS
for this component, and the logic will be
added in the next lesson. So let's get started by
going into form dot js. We will start by creating our functional
component by writing export const form equal to B. Won't take any
parameters as of now. And we'll create the
functional component, then we have to return the HTML, in our case, will be
returning a form. So we'll add the
form tags over here. And then on the inside
we'll be adding two inputs. Firstly, there'll be
an input of type text. And secondly there will be
an input of type submit. We'll go ahead and save that. Now we need to add
this to our app.js so that we can see it will go into app.js and read the
two header tags over here and add in our
form component. Now we have to
import it as well. So we'll go over your
head and say Import form, which is the name
of the component from then the path to where
the form component is, dot slash components slash form. We'll go ahead and save that. And now we can see a text field and a button on the
right-hand side. Now it doesn't look that great. So what we have to do is
go back into form dot js and add some class
names and some styling. What we'll do is we'll add some class names to our
different elements. We will start by
adding a class name of form to our form element. We will add a class name of
TextField to our text field. Lastly, we'll add a
class name of submit, dash and btn to our
submit button over here. And then since we want the styles to apply
to this component, will import the style sheet
by going to the top and saying import dot
slash form dot CSS. And we'll go ahead
and save that. Now we have to
define the styles. So we'll go into form dot
CSS and get started on that. Firstly, we add the style to
our entire form component. We'll say display flex. We want to justify the contents. To the center. We wanted to have a
height of two REM. We wanted to have
a width of 80% of the page and we'll
give it a margin auto, centered it across the page. Then we'll add some styling
to our text fields. So we'll say dot txt field. We'll give it a background
color of slightly agree. So we'll say
background-color hash will remove any
borders that it has. We'll give it a slightly
rounded border by saying border dash radius and giving
it a value of 0.5 rem, we'll give it a height
of 100% of its parent. We get rid of margin on the right-hand side
of ten pixels, so it's not stuck to the button. We'll give it some padding of
five pixels and ten pixels. So that when you're
typing there's some space between the
text and the border. Then we'll give it a
font size of one rem. And we also give
it a box-shadow, will make sure that the shadow
is 0 pixels horizontally. Five pixels vertically
has a ten pixel blur. And we'll give it
an RGB value of 218 for red, green, and blue. And we'll also give it
a box-sizing border-box so that when
calculating the size, the pixels into border are
also taken into consideration. Now our text field
looks perfect, but once we focus on it, we don't want the
outline to appear and we also want the shadow
to change slightly. We'll get started on that by
using the focus selector. So we'll say dot text field. When it's in focus. We will set it to have
an outline of none. And we will set that
as an important style. And we will also change
the box-shadow slightly. So we'll say 0
pixels horizontally, three pixels vertically,
a five pixel blur. And we will give it an RGB
value of 218 for the red, green, and blue values. Now when you click on it, it looks a lot better. Finally, we'll get started
on the submit button. So we'll say dot submit, btn. We'll give it a height
of 100% of its parent. We give it a background color
of slightly blue by saying background color and giving
it a value of 1993 and do 55. Then we'll say that the
forms should be white. And we will remove any
borders that it has. We will give it a border
radius of 0.5 rem. We will give it a font size of one rem so that the text
is slightly larger. We will give it a box
shadow of 0 pixels, five pixels, and ten pixels, and give it a color of B1 Ff. We will also add some
padding of 01 rem. When we hover over the button, we want it to appear
slightly different so that we can tell we
are hovering over it. So we'll write dot,
submit, dash, btn, and on hover will change
the shadow slightly. So we'll say box
shadow 0 pixels, three pixels, and five pixels, and give it a hash value of 789. Easier. Go ahead and save that. And lastly, inside formed or JS, we will change the text of the Submit button so
that it says Add. And we'll go ahead
and save that. There we have our
form component. We learned how to create a
new functional component. We learned how to add the HTML, and then we learned
how to add the CSS. In the next lesson,
we'll be working on adding the functionality
using JavaScript.
7. Adding state to our form: Welcome back. In our previous lesson, we learned how to create a new functional component
using HTML and CSS. Now if we go into the text
field and write something, we see that it's
shown on the screen. But the issue is that we
do not have access to the value that the user has entered inside the text field. For it to be useful, we need to store it in
some kind of variable which we can send to
our other components. So to do this, we can use a
React feature called state. The state is any variable
which you keep track of, which influences how the
component is rendered. What we can do is go to the
top over here and import a function called US
state from React. The US state function will let us create a
new variable which will keep a track
of the state of the text which the
user has entered. To do this, we can go
down here and say const, add some square brackets, and we'll name the
variable text. And the function we
can use to modify this variable will
be called setText. Will say US state, so that it's a stateful variable and we'll give it a
default value of empty. Now what we want to
do is to connect this variable to the
value that's entered by the user in the text field will go to the
TextField HTML element. And we'll say that
the value inside this should be equal
to the text variable. Secondly, whenever the user changes the value
inside the text field, we want to take
in this event and set the text variable
to the latest value. We'll do that using set
text dot target dot value. And we'll go ahead
and save that. Now if we go to
the text field on the right-hand side and
write down something. It's the same as it was
when we started out. Now to see the value
inside the text variable, Let's print it out. Once we press the Add
button over here. To do that, we'll create a new function
called const handle submit will take in the event of pressing the
button as a parameter, and we'll say E dot
prevent default. This should stop the
page from refreshing whenever we press the button
as it does right now. We'll go ahead into
the form and say whenever the onsubmit
function is called, call the handle submit method. Then we'll go
inside the function and console.log the value inside the text variable and
will also reset it to empty. So we'll say set text and we'll put an empty
string over there. Now, if we go to
the right-hand side and write down something
and click on Add. You can see that the value has been printed to the console. So in this lesson, we learned how to convert a component which was
uncontrolled and did not have stayed into
a component that was controlled by us
and they'd have state. The next lesson we'll be
learning how to add state to our entire application
and how to keep a track of
all of our tasks.
8. Adding state to our app and using props: In this lesson, we'll
be learning how to keep a track of all of our
tasks using state. And we'll also be
taking a look at how we can pass down functions as props so we can add our latest
item to our to-do list using the phone component will begin
by going back into app.js. What we want to do is keep track of all of our to-do list items. To do that we can use US
state as we did before. We can go to the top over
here and write down import. You state from React. We can go inside that
app component and say const to do's and set to do's, which is our variable and are functioning to change
that variable. And we can give it a
value of an empty list. Now, we have our variable
which has been declared. Now we need a function
which when given an item, updates the list so that it
contains the newest item, will create a new function
called const add to do, which will add a new to-do
to our existing list. The spirit taken a parameter
which will be new todo, which will be just some texts. Then we'll create
the arrow function. Then we'll say set to do's. Since we want to update
the value of to-dos, we'll add some square brackets
and then we'll say use the existing to-dos by
using the spread operator, but also add the new todo
that we are getting. Now this function should append the latest item to
our to do list. Now what we want to do
is run this function and pass in the new value whenever
the Add button is pressed. And to do this,
we'll need to pass this function as a prop
to this component, which is the form component. Props allow us to
pass variables and functions from a parent
component to a child component. We can pass in a prop
called Add to do, and we can set its
value to the Add to do function which
we just created. Now, we'll go inside the
form component and we'll accept this prop and use it whenever the Add
button is clicked. Let's go back to form dot js. Over here in the parameter, we'll add some curly braces and we'll accept the Add to do prop. Instead of doing a
console.log over here. We'll delete that and
instead we'll say Add to do. And we'll pass in
the latest value inside the text variable, since this will
contain whatever it takes we want to add
to our to-do list. Now to see the latest
value of our to-do list, what we'll do is we'll just
console.log it out over here. And we'll go ahead
and save that. Now we can go down here
and open up the console. And we can see that it starts
out with an empty list. Let's write down item one. And when we click on Add, we see that it's been
added to our list. Let's add item two as well. We can see that item
has been added. In this lesson, we
learned how to keep a track of our
entire to-do list. And we also learned
how to pass in functions as props
to child components.
9. List UI using reusable components: Welcome back. In the previous lesson,
we learned how to keep a track of our
entire to-do list. In this lesson,
we'll be creating the to-do list and the
list item Components. And we'd also be seeing how
components can be reused, which is what makes
them so great. We'll begin by removing
this console.log over here. And then we'll create some
JavaScript and CSS files. Let's make the files for
the to-do list component. So we'll say to-do list dot js. We also want to make the
stylesheet for that. So we'll go and say
To Do list dot CSS. Then we want to make
list item dot js. We want to make
list item dot css. Inside list item dot js will create a
functional component. So we'll say const
list item is equal to, we won't take in any
parameters as of now. And we'll just return
a div for now. And we'll also export
that. For the list item. We'll take an
approach of the text which we want to show
in the list item. And inside the div we'll add some paragraph tags to show
the texts that we want. We also want the feature of being able to complete a task. So for that, we'll add
a button over here. Now what we want to
do is we want to go into the to-do list
dot js component. Over here will be importing
the list item component because we'll be rendering the list item through our
to-do list component. We'll say import list item from dot slash list item dot js. Then we'll go ahead and create the component will say export, const to do list. We won't take any
props as of now. We will just return a new div. And inside the div, we'll add a few list items. We'll create a new instance
of a list item component. Closer down. Then for the text
we'll just say item one will be connecting this to our state
in the next lesson. But for now, we'll just be
using some dummy values. We made one. Let's add a few more. So we'll say item
two, item three. Now that we have the
to-do list component, all we have to do is go into app.js imported and render it. So we'll say import to-do list from dot slash
components slash to-do list. We'll go ahead and render
it below our form. Once we save that, we can see that the entire
list has been rendered. So we saw that we had it to
do list component and we had multiple nested list item
components inside of that, which we're rendering
the list items. Now what we'll do is we'll add some styling to our components. Let's begin by adding some
styling to our to do list. We'll start by importing
our style sheets. So at the top we'll
say import dot slash, to-do list note CSS. Save that. Go into to-do list dot CSS. For the class of to-do list
will be adding the styles. Before that we need to add the class name to
the development. We'll say div,
class name is equal to two do dash list. Save that. And now let's add the styles. We want to display
it as a column. So we'll say display flex and flexor direction
will be column. We want to align the items
to the center horizontally. So we'll say align items center. We also wanted to do list to be at the center of the page. So we'll say width of 60% and we'll give it a margin of one rem
and auto horizontally. We'll save that. Now it doesn't look
too different, but let's add some styling
to our list item as well. So firstly, we'll import
list item dot css. Then we'll add the class names. So we'll call this a list item. Will give the button a
class name of checkbox. Now let's go ahead and
add the styles for this inside list item dot CSS. To begin with, let's add the styles for the
list item itself. We'll say list item. We want to display it as a row. So we'll begin by saying flex will set the flex
direction to row. We want to align the
items vertically, so we'll say align items center. We want to justify the
content space between so that the text is on the left and the button is on the right. So we'll say justify content and set that
to space between. Then we'll add a
margin vertically so that all the cards
on stock together. So we'll put that as five pixels vertically and 0
pixels horizontally. We'll add some padding
to the horizontal edges. So we'd say 02 EM. We'll give it a width of 90% and a background color of white so that
it's easily visible. We give it a rounded border. So we can say
border dash radius. We'll give it a value
of 0.5 of them. And lastly, we'll
give it a shadow. So 0 pixels, five
pixels, ten pixels. And we'll give it an
RGB value of 10992 out. We will save that. Now once we hovered
over the card, we want it to look
slightly different. So we'll say dot list item
and use the hover selector. We'll change the
box-shadow slightly. We'll say box shadow. We'll say 0 pixels,
three pixels, seven pixels, and give it an
RGB value of 205 throughout. Then we will save that. Now if we hover over the items, we can see that they
look slightly different. Now finally, let's give some styling to the
checkbox as well. So we'll say dot checkbox, which is the button on
the right-hand side. We'll give it a background
color of white, will also give it a border. So we'll make it 3.5 pixels. It will be solid, and we want it to be blue. So we will say RGB 1993255
will remove any shadow it has. So we'll say box-shadow none. We'll give it a height of 20 pixels and a
width of 20 pixels. Then we want it to be
completely circular, so we'll say body radius and
put that as a 100 per cent. Lastly, when we hover over it, we want the cursor
to be a pointer. So we'll say dot
checkbox on hover, turn the cursor into a pointer. There we go. We have our list items inside
our to-do list, and they have the checkboxes
and then as well. So in this lesson we learned about nested components and we saw how to reuse competence as we did with the list items. Now in this lesson
we use dummy values, but in the next lesson we'll
be taking a look at how to render the competence
based on the actual data.
10. Mapping state to components: Welcome back everyone. In the previous lesson, we use dummy values to
represent our to-do list. In this lesson, we'll be
taking a look at how we can map our data to the
list item components. To get started,
we will go inside the to-do list component and we'll remove the dummy
values we have over here. Now what we want to
do is we want to render our to-dos variable, which we have in
our app.js file. What we'll do is we'll pass on this variable to our
to-do list component as a prop will save
two dues and we'll assign the to-dos state
variable to this. Now since we're passing
it as a problem, we can go to the to-do list
component and accepted by putting some curly braces and taking in the to-dos prop. Now we have to find
a way of mapping this list of text into
a list of components. Thankfully, ES6 has the
perfect function for this, which is called
the map function. If you want to use some
JavaScript inside our HTML, will put some curly braces. What we say is take this
to-dos list of texts and map it to a list of
list item components. For each value inside, take the text value,
which is the to-do, and the current index, which were then using
an arrow function. We say, return me for each item, a list item component and the
text should be the To-do, will give each list
item a unique key, which will be the index, since that's just
good characters. And we will go ahead
and save that. Now you'll see that it's empty. But once we go ahead
and add an item, we can see that it's added down here and we can keep going. So we can say item two, item three, and it keeps
getting added to our list. In this lesson, we learned
how we can map a list of variables to a
list of components. This shows us the power of components and the reusability. And this is the
reason why React is so popular and so powerful. In the next lesson,
we'll be adding the Complete Task functionality, and we'll take a
look at how to pass props along multiple levels. And a more complex
use case of US state.
11. Adding the delete task feature: Welcome back everyone. Now we have the
functionality of being able to add a new
item to our list. In this lesson, we'll be adding the feature to mark
an item has complete. What we'll be doing
in this lesson is learning how to create a function which takes in an item's index and
removes it from our list. To get started, we'll
create a new function and we'll call it
const, remove to do. And it will take in the index of the item which we want to remove and we'll make it
into an arrow function. What do we need to
do is to create a copy of our to-dos state. So what we'll do is say
const to do is copy. And we'll use the spread
operator to create a copy. So we'll just write
dot, dot, dot to-dos. Then to remove the
item will write to-dos copy dot splice, and then right down to
do index comma one. Now we have a variable
which contains the updated list without the item which we
wanted to remove. Now we'll save
this by saying set to-dos and passing
in the to-dos copy. Now that we have a
function which can remove an item from the list, we need to pass it
down as a prop to the list item so that once
the button is pressed, it can invoke this function and remove itself from the list. So we'll pass it in into our
to-do list by saying remove two du is equal to the Remove to do function,
which we just mean. Then we'll go inside the
to-do list component. Will take in this
prop over here. We will write down remove to do. Then since we already know the index based on the
variable over here, we can pass in a function
to the list item, which will be a modified version of the removed to do function. We'll pass down a prop called removed to do to the list item. And whenever the list
item calls this prop, we will call the remove to do function which we
got from app.js. We'll pass in the index
of the current list item. We need to do now is we have to go inside the list
item component. We need to take in the
Remove to do function. We need to write
down that whenever onclick is called over here, we should just invoke
the remove to do prop. Because the to-do list
component will take care of the index at which
it has to be deleted. So now that we've saved that, if we click on the button, it deletes the item. Let's add a few more items that we can see that the
correct one is being deleted. And if we try to delete
item number three by clicking the button,
it gets removed. In this lesson, we added the functionality
to delete a task. We learned how to pass props
through multiple levels. And we also saw a
more complex use case of the US state function.
12. Conclusion: Congratulations, you just made an entire React
project from scratch. It's no small feat. So pat yourself on the back. While working on this project, we learned how to
create new competence. Us state, pass props to
different components, reuse components, and render
components based on state. Now it's not over yet. Do check out the projects
and resources section down below and work on adding more
features to our to-do list. Make sure to post your project
in the project gallery. I'd love to check it out. If you've reached this
far in the course, please consider leaving a review and giving me a
follow on skillshare. That's all for now folks, best of luck with
your react journey.
Laksh Dwivedee, Software Engineer
