REACT JS TUTORIAL #2 - Reactjs Components & Rendering Video Lecture | Learn React JS: Fundamentals for Front-End Developers - Front-End Programming

okay now my workspace is running so we
can focus on building the react
application again everything in react is
a component and components return
exactly one Dom element just like an
HTML everything has to have one parent
Dom element they can't have two parent
Dom elements so if I want to return a
pair of h1s this will not work I'm going
to get the nasty error that JSX elements
must be wrapped in an enclosing tag so
if I want to return multiple I just have
to wrap them in a div like so now it
will work again and I'll have two H ones
of course I don't need to do that so in
this case I'll go back and revert
another thing is you can import dynamic
information very easily I could create a
constant my name my name is will and
then anything in curly braces in the JSX
portion of your file that's very
important it won't work outside of there
but anything in curly braces will just
execute as normal JavaScript so in this
case it's going to evaluate name which
is the value of will there you go it's
will I could also do three plus two it's
five and then I could also do a
self-executing anonymous function and
that returns the value of three of
course that's a terrible idea I don't
know why you'd ever want to do that but
you can see it executes the function
returns the value of three and then sets
the value of three in there if you do
need logic this is not the proper place
to do it generally if you need basic
logic you can do it in the render method
so say ver Val equals I could do some
sort of self executing anonymous
function here say maybe get Val
something like that is totally fine and
then I could print Val or if you have a
little bit more logic and you want to
keep your render method clean which is
always a good idea you could do get Val
you could create a method on your class
and then I could do this get Val
and then whatever get Val returns will
be printed out into the template so I'm
going to return will again and UB its
will again you can also pass that a
value I could pass that a value now I
can return will plus Val and you get the
point
it basically is class methods and you
can invoke them last but not least I can
actually use a constructor method since
it is a JavaScript class I can do a
constructor method the only thing you
have to do is you must call super as the
first line of a react component
constructor so we call super on the
first line and then we could do this dot
name equals will and then we can simply
just access this dot name it's will so
there you go that's your basic component
introduction in the next video we're
going to look about how to take multiple
components and create a full app layout
from react components