1
00:00:02,210 --> 00:00:03,440
So what's React?

2
00:00:03,440 --> 00:00:07,340
It's a Javascript library for building user interfaces in the end.

3
00:00:07,340 --> 00:00:12,930
Now as I mentioned, library because technically it focuses on that user interface building part but

4
00:00:12,980 --> 00:00:17,830
enriched by everything else the ecosystem that it spawned offers,

5
00:00:17,990 --> 00:00:19,630
it's basically like a framework

6
00:00:19,640 --> 00:00:20,220
you could say.

7
00:00:20,330 --> 00:00:26,780
Now the user interface part is important though, React's all about building user interfaces that look

8
00:00:26,780 --> 00:00:33,770
good but more importantly than that, that update reactively, so that you for example can define if this

9
00:00:33,770 --> 00:00:34,670
button is pressed,

10
00:00:34,670 --> 00:00:40,610
this data should change and if that data changed, instead of outputting this text down there, I want to

11
00:00:40,610 --> 00:00:42,320
output that text.

12
00:00:42,380 --> 00:00:49,790
So you basically define different kind of scenarios and results you could say and React will then do

13
00:00:49,790 --> 00:00:56,750
the heavy lifting of reaching out to the DOM, adding elements, removing elements, adding CSS classes,

14
00:00:56,750 --> 00:01:02,270
removing CSS classes so that you don't have to manually write all these instructions,

15
00:01:02,270 --> 00:01:10,100
instead you just manage the state as it's called of your application and React will then update the UI based

16
00:01:10,100 --> 00:01:11,200
on what changed.

17
00:01:11,210 --> 00:01:17,570
This is called a declarative approach because you declare the goal, you declare what you want to see

18
00:01:17,570 --> 00:01:25,520
on the screen in different scenarios and React will then handle the way of getting there. The opposite

19
00:01:25,520 --> 00:01:30,530
of that would be an imperative approach and that's basically what we did thus far in the course where

20
00:01:30,530 --> 00:01:32,120
we manually had to say

21
00:01:32,240 --> 00:01:39,140
now add this button, add this element, add this event listener. Now doing that in bigger projects quickly

22
00:01:39,140 --> 00:01:44,900
can become cumbersome and difficult to manage and such a declarative approach definitely has certain

23
00:01:44,900 --> 00:01:50,630
advantages over this because it allows you to focus on the result and the state instead of the way of

24
00:01:50,630 --> 00:01:58,070
getting there and this is less error prone and gives you more power. In React and also in Angular and

25
00:01:58,070 --> 00:02:06,520
Vue, you do that by defining so-called components which are reusable UI elements, now not HTML elements,

26
00:02:06,590 --> 00:02:09,150
these are not elements the browser would understand,

27
00:02:09,240 --> 00:02:11,340
in the end these are just components,

28
00:02:11,510 --> 00:02:18,740
basically Javascript classes you could say which you define in your code which then at runtime when

29
00:02:18,740 --> 00:02:26,390
your code and React's code executes on the page are interpreted by React so that React then knows what

30
00:02:26,390 --> 00:02:29,450
to touch in the DOM and what to render where.

31
00:02:29,450 --> 00:02:35,270
So you don't render real HTML elements, in the end you just use something which React then understands

32
00:02:35,420 --> 00:02:41,900
and which then in the end tells React what it should render on the screen under which circumstances.

33
00:02:41,900 --> 00:02:43,070
So let's have a look at that,

34
00:02:43,070 --> 00:02:44,240
this should make it clearer.