React Elements

#02-React Fundamentals/React Elements
Transcript:
What you're seeing right now is the boilerplate that greed racked up provides us.
Let's open up the.
Go there and see what's inside.
I'll be using them but any other idea will work just fine.
Go for your app lives inside the SHC folder.
So we will be spending the majority of our time here in Folles index.
Let's open that up and we can find find find the imports.
Let's talk about each and every one of them.
The first one is the library itself.
Without it you won't be able to create the elements.
The second important is reacted them which initially was Sparling free library but was split into its
own eventually it works as glue between re-act elements and the.
And usually you will just use it to render your app.
As we're doing here the import is an index that CSSA file.
So nothing interesting going on here just a simple CSSA file.
Fourth important is the app component which we're currently rendering.
You can open it up.
Don't worry if you don't understand what's going on here.
Eventually you will after a couple of lessons and the last import is a service worker which will let
the app load faster on subsequent visits in production.
We won't be looking into it as it's out of the scope of discourse but I will provide a link below and
you can read about it if you like.
So let's talk about yardarm random method.
It can take up to two arguments.
The first one is the object element that you want to render.
The second one is the DOM container in which you want to run there are Gackt element and the third one
is an optional argument.
You can provide a callback function to it won't be doing that but you can store whatever logic you want
and if you're wondering where this root element lefse is under the Public Folder index that DML file.
I've already change the title to the TV series app.
It can do that if you like.
And here you can find the root element.
I mean the development with the ID of what it's less close in the start.
IMO let's try to create our own re-act element and render it to the DOM.
So I'll create a variable with the name of greeting
and I'll assign a key element to it.
And also this method takes up three arguments.
The first one is the tag that you want to use.
I will be using an H1 tag.
Whoops.
The second argument is the prop's that you want you provide to your element.
Therefore if you don't know what prop's mean you will find out in later lessons.
But for now I'll only provide an empty object and I will work just fine.
And the third argument is the string that you want to use inside our H-1 tax and all.
Say hello world.
Take the greeting variable.
Pass it into the render method save index dodginess and overseeing our newly created yakked elementwith hello world reading attached.