1
00:00:02,270 --> 00:00:05,120
React is all about components,

2
00:00:05,140 --> 00:00:07,500
now what does this mean? This here,

3
00:00:07,520 --> 00:00:13,980
this function here is of course a regular Javascript function but it's also a React component.

4
00:00:14,000 --> 00:00:18,180
What makes up a React component? A React component can be one of two things,

5
00:00:18,230 --> 00:00:27,050
it can be a function which returns jsx or returns React create element calls or it can be a Javascript

6
00:00:27,050 --> 00:00:29,760
class that has a render method.

7
00:00:29,840 --> 00:00:38,420
So this here, if I change this would also be a React component, class app extends React.component,

8
00:00:38,430 --> 00:00:39,190
that's important,

9
00:00:39,190 --> 00:00:44,960
you have to extend React component and then you have to add a render method and in that render method,

10
00:00:45,110 --> 00:00:47,060
you return jsx.

11
00:00:47,090 --> 00:00:53,810
This is a regular React component as well and if I save this, you therefore see the same output as before,

12
00:00:53,840 --> 00:00:56,250
it works in basically the same way.

13
00:00:56,360 --> 00:01:02,160
There are some technical differences which I discuss in detail in my React - The Complete Guide course, here

14
00:01:02,330 --> 00:01:09,320
it doesn't really matter, in modern React, you can use functional components only, so function based components

15
00:01:09,680 --> 00:01:13,920
and that's therefore what we'll do in this course, we'll write every component as a function,

16
00:01:13,940 --> 00:01:18,950
it's not a must do and as I mentioned in my React The Complete Guide, you'll learn about both types and

17
00:01:18,950 --> 00:01:24,530
how they differ but using function components only definitely is a modern way of using React and it

18
00:01:24,530 --> 00:01:30,750
is therefore the way we will use but always keep in mind that this is just a regular Javascript function,

19
00:01:30,830 --> 00:01:39,380
what makes it a React component is that it returns this jsx or this React create element logic in

20
00:01:39,380 --> 00:01:40,500
the end here.

21
00:01:40,730 --> 00:01:46,810
If we return let's say an object instead, this would not be a React component and hence you get an error

22
00:01:46,820 --> 00:01:47,860
if you save this,

23
00:01:47,990 --> 00:01:54,310
it really has to be jsx code, something which can be interpreted as jsx like this here,

24
00:01:54,350 --> 00:02:01,790
this is how React works and therefore here I am exporting my own component because this is treated as

25
00:02:01,790 --> 00:02:05,570
a component and your own components can be used in jsx as well,

26
00:02:05,570 --> 00:02:10,910
the only important thing there is that they should start with a capital character in the file where

27
00:02:10,910 --> 00:02:18,770
you use them in jsx because this tells React that it's not a built-in HTML tag, app wouldn't

28
00:02:18,770 --> 00:02:24,500
be a built-in tag but that it's a custom component and this information is important to React and therefore

29
00:02:24,650 --> 00:02:26,570
start with an uppercase character

30
00:02:26,570 --> 00:02:33,530
but then you can use any custom component in jsx and the cool thing now is that we can build up our

31
00:02:33,530 --> 00:02:41,360
application from small reusable components and compose our user interface with the help of such components

32
00:02:42,020 --> 00:02:47,570
and with that, why don't we do that? Why don't we build a simple first React application and see how things

33
00:02:47,570 --> 00:02:48,850
work together there?