All language subtitles for 006 Analyzing a Standard React Project_en

So, let's now have a look at this src folder

because that is where we will spend

the majority of our time,

that is where we will write our React code.

And the first thing you'll notice here,

in this starting project

which I provided in the last lecture

that we have two JavaScript and one CSS file.

And the most important takeaway here

which I really wanna emphasize right away

is that React code is just JavaScript code.

We are just going to write some JavaScript code

throughout the entire course.

We're going to use React features

and some special Syntax introduced by React,

but ultimately it'll all be just JavaScript.

Now let's start with the index.js file.

You don't see it anywhere, but I can tell you

that this is actually the first code file

which will be executed whenever this page is loaded.

So whenever you visit local host free thousand here

at the moment, this index JavaScript file holds to code

which is executed initially.

Though I will also say right away

that it's not exactly that code

but a transform the word version of that code.

Remember when I said

that our project set up here involves some scripts

which transform and optimize the code,

yeah, that is happening behind the scenes.

Basically we will write to code,

in a easy to read developer friendly way

with some syntactic sugar, which makes our life

as a developer easier, but we'll write code

which wouldn't run like this in the browser,

and especially not in all supported browsers.

Therefore the npm start process, which we started here,

which started this development server,

which is watching our code,

this process will not just watch our code

and then take it and deliver it to the browser,

but before it delivers it, it will transform it.

So that certain extra features work in the browser,

even though they wouldn't work,

if just this code would be taken.

For example, this import here

where we import a CSS file into a JavaScript file.

That's not something which would work

in regular JavaScript, that would be an invalid syntax.

You can't import CSS into JavaScript.

Well, here in this project set up, it does work.

Here in the end, it tells this npm start process

we could say, that we simply want to include

this index CSS file

into our overall application.

That the CSS code in there

should be considered and should be injected

into this page, which is shown here on the screen.

And that's why the style is defined in there

like the fun family, but also the background color

of the body, are picked up here on the screen

on the page that we see.

Another example for a syntax,

which is not regular JavaScript syntax, would be this here.

It looks like some kind of

HTML code inside of a JavaScript file.

And normally this also wouldn't work.

Well again, here it does work,

but only because this is transformed

before it's delivered to the browser.

And for the moment, you just need to be aware of that.

That those transformations happen,

and that the idea of that simply is that

we can write code in a nice way, in an easy way.

And then still we have code in the end

which runs in all browsers.

Now the fact that the index.js file

is the first file to be executed,

is just something you have to know.

I'm telling you that this is the case because indeed it is

and it's one of the few things you need to remember.

Index.js here is the first file to execute.

Now what's that file doing though?

What's happening here?

Well, we are importing ReactDom from 'react-dom'

which that means we're importing something

some ReactDOM object from the 'react-dom'

third party library, which is one of our dependencies.

Which is downloaded and installed locally.

Now, in the package.js file, you actually see

two React dependencies, React just like that.

And then this a ReactDOM thing.

And whilst this indeed

technically are two separate packages,

you can think of that as React the library.

It's split across two packages

with different responsibilities

but in the end, ReactDOM and React these two dependencies

together form the React library

which we're going to learn all about in this course.

So whenever we import something from React or from ReactDOM

it's basically both all about React

and we're using React features.

As we're doing it here in index.js,

where we are importing from ReactDOM.

This simply makes a feature exposed

by the library a variable inside of this index.js file.

because that's how modern JavaScript works in general.

If you define a feature, let's say a function

in file A and you wanna use it

in file B to split your code across multiple files,

to keep every file small and manageable,

then you have to export the feature which you wanna use

in file B, in file A and then import it in file B.

And that's what we're doing here.

ReactDOM, this package is exporting some ReactDOM object

and we're importing it here into index.js.

And we are importing it to then call a method,

the render method on that imported object.

The render methods takes two arguments here,

two parameters.

The second argument is a default JavaScript DOM API

which we're calling on the global document object,

which is a way to blend JavaScript in browser site

JavaScript, I should say.

We have a get element by ID method

to select a certain DOM HTML element by its ID.

Now you might wonder which element we have no HTML code

besides this strange thing here.

Well, there also is a public folder

which I haven't talked about this far.

This folder is a folder in which we will rarely work,

but it holds one important file.

This index.html file.

This is the single HTML file,

which is in the end loaded by the browser here

because with the React

we build a so-called single page application

at least typically.

And I talked about that in the first core section.

It basically means that only one HTML file is delivered

to the browser and hosted

by the browser day or for rendered by the browser.

But on this single file,

we import the finished React application code

and it's start code

which then updates what we see on the screen.

So we have one HTML file,

but what we see on the screen constantly changes

because of React.

Now in this HTML file, does index.html file.

We have this div here though.

It's basically the only HTML element in the entire body

except for it is no script element.

And this div has an id of a root.

Now actually, it's this div

which is selected by this code snippet here,

we target that div with the id of root.

And we're in the end telling ReactDOM

that we want to render something.

We'll have a look at that in a second in this place.

So that basically the content of this div

and as you can tell, there is no content.

So what's inside of this div, should be replaced with that.

So of course, that brings up another question.

What is that App thing here?

Well, first of all, it's also something which

we're importing.

We're importing App from the App file.

And that's this App.js file,

you just may omit and you should omit

dot js as an extension in your imports here.

If it's another file, like a CSS file, you have to add it.

But if it's a third-party library,

or one of your JS files, you emit the dot JS.

Now we can tell that it's one of our files

because we have our relative import path here

starting with dot slash which means please look

in the same folder, asked is index.js file is in

and then use the App.js file, so this file here.

And from that file we import App

and then we do something with it.

But that is definitely not regular JavaScript syntax here.

Indeed, it isn't.

This is a Syntax called a JSX

and I'll come back to it in a second.

But before I come back to that

there's one key thing you got to know about App.

App in the end is a component.

And you might remember components are important.

Here we see our first component inaction

it's this App component, which being the end to render

in the place of that element with an id of root.

So in place of that div or inside of that div to be precise.

So therefore let's not have a look at this App.js file.

And this is a fairly trivial file.

It holds a function named App

and we then export this function

because as I mentioned in modern Java script,

if you have something like a function

or a class or an object defined in one file

and you want to use it in another file

you have to export and import it.

So here, in App.js where dysfunction is defined,

we export it, and then we imported in index.js.

And that's how these two files are connected

and how we can use a feature in this case

a function to find an App.js inside of index.js.

Now what's this actually has function doing though,

not much as you can tell.

It's a function named App,

starting with a capital character might be a bit strange,

but it's valid, JavaScript syntax.

And then all we do in here is we return something.

But what we return again is strange.

It's HTML code inside of a JavaScript file.

And again, that's not something you regularly see

it's also not something we're used to.

And it's also not a valid JavaScript code, normally.

Yet here, everything seems to work.

And the reason for that is

that this is a feature called JSX.

It's a special Syntax invented

and introduced by the React team.

And it works in these JavaScript files

because of our overall project set up.

And again, because of these transformation steps

which are running behind the scenes.

But let's take a closer look at JSX

and what it is and how it works in the next lecture.