Section 10 (React Intermediate): Lesson 1 - Start contact application

Описание: Hey you and welcome.

In this video we will start building a new project with Create React app to start working with the components

that we have already learned to solidify some of that learning and also learn a bit more about navigation

and form validation.

So that's what this project is going to be about.

And in this video we're going to start that project.

So let's dive right into it In order to start the project, remember we were using Create React app.

I'm going to continue using that.

And in the get started or in the Hamburger Icon docs, I can search for TypeScript and that's the template

I want to work with.

So that's the command.

I'm going to copy and paste it in my terminal.

In my current terminal.

The present working directory for me is the home directory and the code directory inside the home directory.

So that's where I'm going to run this command.

You can of course run it in a different area if you'd like, or follow along instead of my app, I will

call that contact app and run that.

So that should install the dependencies that we need to get the Create React app working.

Great.

Create React app is ready.

I will go CD into contact app and run npm start that will start the server for me and I will open another

terminal to run other commands in.

So in this case I will do code space dot.

Remember I'm in the contact app so that's where I'm going to do code dot and that should start the code

vs code for me.

And I will do command shift P to open the simple browser and take that to HTTP colon slash slash localhost

3000.

That's where my app is working.

And there we go.

App is working just fine.

I will split the screen between index dot TSX, which is the root of our application and the simple

browser and hide my file explorer.

So that's our environment up and running.

Let's add chakra UI to our app.

So in order to do that, I have the chakra UI documentation open.

I'll click on Get Started and copy over the first command that it provides us and go over to my terminal

in the contact app.

I will paste that in and that should install chakra UI for me with chakra UI installed, let's make

sure we follow the second step of installation where we have to wrap our app into chakra provider.

So I'll copy the first line and the other one I will just type it myself.

So I'll go back to VS code and on line number two, under line number two.

I'll paste that and wrap the whole app in Docker provider like so.

Done perfect So that's chocolate provider integrated with our app.

Of course, nothing really changes because we haven't styled anything using chakra components.

So let's do that.

Next I will introduce you to Chakra templates.

That's another website.

It's a community managed website, and here you can find different templates and that may be useful

to create a website.

And in this case, templates for navigation is the one I'm looking for.

So that's the one I'm going to click on.

And in the navigation there are two options.

On the left hand side, there's a nav bar, which is the one at the top usually, and the sidebar which

is on the side like a drawer.

And that's the one I want to work with the sidebar.

So I'll click on sidebar.

There's two options.

There's a sidebar with nav bar at the bottom and a sidebar.

I'll work with the sidebar only.

I don't need the nav bar.

So in order for me to work with this and copy paste the code, I can click on code button on the top

right and I will copy over all of this code.

So let's go all the way down to right here.

Copy everything.

And then in my VS code in the file Explorer, I will start a folder called Components.

And inside that I'll create a file called Routes.

So this will be the root of my application.

I'll paste all the code, hide my file explorer, save and notice there's a few error messages.

One of them is related to the React icons library missing, so I'll copy that.

React icons.

Not the slash fi, just the react icons and I'll install that.

So npm install react icons.

Oops, it didn't do that properly.

Clear that out.

Copy.

All right, let me copy it from here.

Maybe it's not copying properly, so I'll do that manually.

NPM install react icons that should install react icons and get rid of that error message.

Now the server needs to be restarted because a new library has been installed and it doesn't really

catch that.

So I'll just close my server control C and then NPM start again.

That should start my server and with the server restarted I'll go back to VS code, refresh my page

and it's rendering just fine.

Of course the chakra component is not mounted, so we have to mount that as well.

So I'll do that next.