All language subtitles for 002 Adding a _User_ Component_en

Attached you'll find

a simple starting project

basically a pretty empty React application

with an empty app component.

And once you've downloaded and extracted the attached file,

you just need to run npm-install to install all dependencies

like the React library and thereafter,

once you ran npm-install

which I already did here you run npm start

to start this application

and you'll be greeted by such an empty screen

because currently there is nothing inside of AppJS,

nothing inside of our app component.

Now in the application, which you saw in the last lecture,

I wanna have a couple of different areas,

a couple of different components.

We had that component where we could enter our name

and our age.

We had that error modal,

that error overlay component.

We had a button to submit this and to confirm

that we saw the error in that error modal,

and we, of course. also had that list of users.

Therefore, I'll start by roughly planning

out the components we'll have.

And for that I'll add a new components folder

in which I wanna store those components.

And I'll add a UI folder for general UI components

which will have like the button.

And in components,

I'll also add a second folder

and that will be my users folder

for all the user related components.

And now in there we can start adding component files

and I'll start with that component

that allows us to add a new user.

Hence here in the user's folder,

I'll add a new AddUser.js file

which should hold the logic for us to add a new user.

Now in there I wanna have a React component.

So, of course, we have to import React

from React as you learnt

because we're going to use some JSX code here.

I'll then add my AddUser component

using this function syntax which we can use in JavaScript,

an arrow function stored in a constant.

Of course, as I mentioned before,

you can also add a function like this

nothing wrong with that

but I'll go for this approach

and I'll export this as my default

so that we can import that component,

that function into another file and use it there.

Now, instead of AddUser in the end,

we wanna render something on the screen

which allows the user to enter a name and an age

and have a button to confirm all of that.

Therefore, in here, I will add a form let's say,

and inside of that form I wanna have a label

where I say username

and of course that should all be returned

so let's wrap it into brackets

and then put a return statement in front of it.

So there, I wanna have a label

and I wanna have an input where the user then

is actually to type that username.

And that input will be of type text because well,

expect some text there.

Now for accessibility,

we can also add an ID here username.

And then on the label

we would add the for attribute normally.

Now for just like class is not a name that is available

in JSX because these would be reserved JavaScript names

and therefore it's htmlFor actually,

that's the prop name for assigning

that for attribute to a label.

And with that we connect it to that input,

and that's important for screen readers and so on

so that they understand which label belongs

to which input.

So we got that.

Now, I also need another pair of label and input

for the age in years let's say.

And here the type will be number

because I expect to get a number here.

Something like 31, 18, 25, and so on.

Now I'll name this age,

I'll give it an ID of age and therefore

the htmlFor prop here also has a value of age.

And with that I got these two inputs.

Now, below those I want to have a button of type submit

which will basically submit that form.

And here I have AddUser as my text.

So that's a straightforward form.

Now, on the form here,

I'll add the onSubmit prop to specify a function

that should be executed when that form is submitted

and therefore here I will actually add a new function

inside of the AddUser component function.

Let's say AddUserHandler function.

Now here, I expect to get my event object

and I will call event.preventDefault

to prevent that default which for the submission event

is that a request is sent.

I don't want that default hence I prevent it here.

And now can connect on submit here to AddUserHandler

by passing AddUserHandler like this to onSubmit.

Important as I explained before,

don't add parentheses here.

This would immediately execute AddUserHandler

when this line is parsed.

Instead, I just want to pass a pointer

to that function to the onSubmit prop

so that the form component internally

can use that function when it needs to use it,

i.e when that form is getting submitted.

So with that we get this AddUserHandler here.

Now let's go over to AppJS and let's import it here.

So I import AddUser from ./components/Users/AddUser.

And here in the div we can then add AddUser like that.

That's how we can add this component here.

And if we now save that

and go back we should see this relatively ugly,

but working component.

I can click AddUser and the page is not reloading,

which proves that this forms submission

is effectively handled and the default is prevented.

So that's the start.

Now, some styling would be nice

because that doesn't really look the way I want it to look.

Now, I'll start an index CSS there.

You got some basic styling.

I'll go to the HTML element here

and add a background styling of 1F, 1F, 1F like this

and this will give us a nice dark grayish background.

Now, I also want to wrap this username

and age into a card you could say,

into a container with rounded corners

and with a white background

and that's therefore something we'll build

in the next lecture.

Of course, feel free to try this on your own.

Build such a wrapper and container

maybe already with the right styles on your own.

And in the next lecture, we'll build it together.