1
00:00:02,190 --> 00:00:04,530
So what exactly is React.js?

2
00:00:04,530 --> 00:00:09,860
It's a Javascript library for building user interfaces

3
00:00:09,960 --> 00:00:14,620
and as such, it's all about running Javascript in the browser,

4
00:00:14,640 --> 00:00:18,660
it's a Javascript library for browser side Javascript code,

5
00:00:18,660 --> 00:00:23,920
it's not a Node.js library, it's a browser side Javascript library.

6
00:00:23,970 --> 00:00:30,720
Now to be precise, React.js itself is referred to as a library because it's very focused on that

7
00:00:30,720 --> 00:00:38,310
user interface thing but it actually started a huge ecosystem with other third-party packages that for

8
00:00:38,310 --> 00:00:46,350
example help us with app wide state management or with routing, frontend routing and therefore effectively

9
00:00:46,350 --> 00:00:47,880
you could also call it a framework

10
00:00:47,880 --> 00:00:51,780
I would argue but these are semantics, not too important right now,

11
00:00:52,130 --> 00:00:59,160
let's instead understand how React works and how we use it. React helps us build user interfaces that

12
00:00:59,460 --> 00:01:05,550
are shown in the browser, that run in the browser and therefore we use it to build the frontend of web

13
00:01:05,550 --> 00:01:12,630
applications, what the user sees, React does not run on a server, React does not communicate with databases,

14
00:01:12,930 --> 00:01:20,640
we use it to build highly reactive modern user interfaces and we do so by following a declarative approach,

15
00:01:20,850 --> 00:01:28,320
which means that in React we rather define the result and maybe different states of the result and under

16
00:01:28,320 --> 00:01:34,290
which state we want to render what and want to show what on the screen instead of the steps that lead

17
00:01:34,320 --> 00:01:35,520
to the result,

18
00:01:35,700 --> 00:01:39,420
that would be an imperative approach which is basically what we have

19
00:01:39,450 --> 00:01:46,950
if we use vanilla Javascript, where we have to define every step - add this element, add this CSS

20
00:01:46,950 --> 00:01:49,710
class to an element, remove this element -

21
00:01:49,770 --> 00:01:51,810
this is what we do in vanilla Javascript and

22
00:01:51,810 --> 00:01:55,480
this can be very cumbersome and very complex user interfaces,

23
00:01:55,530 --> 00:02:01,380
we typically don't want to do that if we're building bigger applications because managing and orchestrating

24
00:02:01,380 --> 00:02:08,490
all these steps and ensuring that when something changes, we execute the right steps is very error prone

25
00:02:08,760 --> 00:02:16,140
and takes a lot of effort and work away from our actual business logic and from building nice user interfaces

26
00:02:16,410 --> 00:02:22,950
and instead forces us to spend a lot of work on Javascript primitives, on reinventing the wheel and so

27
00:02:22,950 --> 00:02:24,870
on and we don't want to do that.

28
00:02:24,930 --> 00:02:33,180
So in React.js, we instead focus on the result and we do so by using components. Components is a concept

29
00:02:33,240 --> 00:02:34,660
introduced by React,

30
00:02:34,680 --> 00:02:40,160
basically these are UI building blocks which we define and you will learn how you do that

31
00:02:40,170 --> 00:02:46,710
in this module of course, which we define and then we compose our user interface from these components

32
00:02:46,740 --> 00:02:52,890
and every component can also define what it should render, under which circumstance and React will then

33
00:02:52,890 --> 00:03:00,450
magically wire up everything behind the scenes and implement all these steps in a gray box here for

34
00:03:00,450 --> 00:03:05,250
us so that we don't have to write the steps, we just define the results.

35
00:03:05,250 --> 00:03:06,650
This is React.js

36
00:03:06,670 --> 00:03:07,830
in a nutshell,

37
00:03:07,830 --> 00:03:11,400
now let's have a look at how it actually works when we write some code.