Section 9 (React): Lesson 2 - Files and folder structure

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

And welcome.

In this video, we will look at file structure and the folder structure for the Reactjs app that we

had created in the previous video.

So let's dive right into it.

So remember in the previous video when we created the Reactjs app, it was called my app and I opened

that in VS code.

So let me just zoom in a little bit.

Yeah, that's good enough.

And that's the folder structure on the left hand side.

Remember, the node modules will always be the area where you have all the NPM packages that are required

to run your projects.

So I'm not going to go over too much into that.

There is now a public folder and the public folder is what gets served to the internet.

So Internet is going to receive a fab icon.

Fab icon is just an icon that the browser uses to show you that tiny little icon that you see on every

browser at the top left hand corner you see, in this case, there is a black with a green black circle

with a green triangle or the react icon for the other browser.

So those are fab icons.

Go back to my VS code.

Then we have the index.html.

That's the HTML file.

As soon as somebody goes to the project.

In this case when we went to localhost 3000 index.html got served and this is what the index.html looks

like.

We're not going to be writing too much html XHTML, we'll be using JSX so we won't really be making

any changes to this file.

But one thing to note in here is if I scroll down there is a root div this comes in to play when we

start looking at the JS folder of this, this structure.

But for now just know that there is a div in the index index.html that has the id of root.

All right, I'll go ahead and close this.

That's just an html file.

Get served.

It's an empty html file.

And I'll go to Logo 182 and 512.

Those are just logos that are being served up.

This is just an image asset.

Nothing much to it.

182 pixel versus 512 pixels.

That's why they're named accordingly, a manifest in JSON.

We're not going to be working too much into it, but for progressive web apps, you go into this file

to make changes so that you can make it look a certain way on mobile or certain assets can be uploaded.

In this case, there's a there's already some information uploaded for me.

I don't think I need to change that.

So I'll go ahead and close this out and robots.txt.

That's the file that needs to be served for the Google robot or any search engine robot to go to the

website and see what the what the website is about so we can have good SEO search engine optimization.

All right.

With that done, I'll close the public folder.

So remember, public folder is the one that gets served to the web.

Our code for reactjs lives in the SRC folder.

So if I open that up, there's a bunch of files in here.

Let's go step by step so I will combo these up together.

So there is an index dot TSX.

Remember we're working with TypeScript template here.

So TS was the type TypeScript file.

TSX is a typescript file with JSX allowed in that we will be looking at JSX in depth later on.

So let's take a look at index dot TSX first because that's the entry point here in the index TSX file.

That's where the first render happens.

So in React JS Render is when the empty HTML that we just looked at render would go into that HTML and

just make an append or add add a component to it using JSX element that we provided.

In this case, we are providing on line number ten and line number 14.

We're doing route render route is something that's coming from Create route, which is from the React

Dom library.

So React DOM Library would give us a create route and then we will provide it which element to work

with.

Remember in the HTML file we had a route div, so that's the one it's targeting and the saying for that

route.

Div That's the one that I want to target and create a React JS route element and assign that to a constant

for route.

And then using that constant, I will say route dot render and then you can render anything in there

you'd like.

This is the syntax for JSX.

Of course we'll look more into that in a bit, but this is the syntax for JSX where we now it looks

pretty much like HTML.

However, it has none of those elements that HTML has by default like div tag or p tag any of those.

It has custom names.

In this case react strict mode and app and app is coming from slash app dot slash app.

That means it's a relative path from my SRC folder.

There is an app which right here I can see there's an app dot TSX.

That's the one I was referring to and it's rendering that out.

So let's dive into that next.

So in app dot tsx I am importing react.

We have logo coming in.

It's an SVG file on the web.

We would serve images using different formats, lighter formats, not just JPEG or gif that you may

be seeing in other places.

We work with Svgs or PNGs.