React is all about components,
now what does this mean? This here,
this function here is of course a regular Javascript function but it's also a React component.
What makes up a React component? A React component can be one of two things,
it can be a function which returns jsx or returns React create element calls or it can be a Javascript
class that has a render method.
So this here, if I change this would also be a React component, class app extends React.component,
that's important,
you have to extend React component and then you have to add a render method and in that render method,
you return jsx.
This is a regular React component as well and if I save this, you therefore see the same output as before,
it works in basically the same way.
There are some technical differences which I discuss in detail in my React - The Complete Guide course, here
it doesn't really matter, in modern React, you can use functional components only, so function based components
and that's therefore what we'll do in this course, we'll write every component as a function,
it's not a must do and as I mentioned in my React The Complete Guide, you'll learn about both types and
how they differ but using function components only definitely is a modern way of using React and it
is therefore the way we will use but always keep in mind that this is just a regular Javascript function,
what makes it a React component is that it returns this jsx or this React create element logic in
the end here.
If we return let's say an object instead, this would not be a React component and hence you get an error
if you save this,
it really has to be jsx code, something which can be interpreted as jsx like this here,
this is how React works and therefore here I am exporting my own component because this is treated as
a component and your own components can be used in jsx as well,
the only important thing there is that they should start with a capital character in the file where
you use them in jsx because this tells React that it's not a built-in HTML tag, app wouldn't
be a built-in tag but that it's a custom component and this information is important to React and therefore
start with an uppercase character
but then you can use any custom component in jsx and the cool thing now is that we can build up our
application from small reusable components and compose our user interface with the help of such components
and with that, why don't we do that? Why don't we build a simple first React application and see how things
work together there?