1
00:00:02,000 --> 00:00:04,000
So let's get started with React, then.

2
00:00:04,000 --> 00:00:07,000
And to get started, we first of all

3
00:00:07,000 --> 00:00:09,000
must create a React project.

4
00:00:09,000 --> 00:00:12,000
Now, when working with Vanilla JavaScript

5
00:00:12,000 --> 00:00:15,000
creating a project is as simple

6
00:00:15,000 --> 00:00:18,000
as creating a new folder, and adding a bunch of HTML,

7
00:00:18,000 --> 00:00:21,000
JavaScript, and CSS files in there.

8
00:00:21,000 --> 00:00:25,000
Now, when building a React web application, a React website,

9
00:00:25,000 --> 00:00:28,000
it's not that simple.

10
00:00:28,000 --> 00:00:30,000
Instead, you need a project that performs

11
00:00:30,000 --> 00:00:32,000
various behind the scenes

12
00:00:32,000 --> 00:00:35,000
code transformations automatically.

13
00:00:35,000 --> 00:00:37,000
And, you typically also want to have

14
00:00:37,000 --> 00:00:38,000
a nice developer experience

15
00:00:38,000 --> 00:00:41,000
where the React app you're working on

16
00:00:41,000 --> 00:00:44,000
is previewed and automatically updated

17
00:00:44,000 --> 00:00:47,000
whenever you change the React code.

18
00:00:47,000 --> 00:00:50,000
Now, the behind the scenes code transformations are needed

19
00:00:50,000 --> 00:00:52,000
because, as I mentioned before already,

20
00:00:52,000 --> 00:00:55,000
when building React apps

21
00:00:55,000 --> 00:00:59,000
you typically blend HTML and JavaScript code

22
00:00:59,000 --> 00:01:02,000
in one of the same JavaScript file.

23
00:01:02,000 --> 00:01:06,000
Now, technically this is not valid JavaScript code, though.

24
00:01:06,000 --> 00:01:09,000
The browser would not be able to execute this code,

25
00:01:09,000 --> 00:01:11,000
and we will of course learn

26
00:01:11,000 --> 00:01:14,000
why we're blending the code like this in just a second.

27
00:01:14,000 --> 00:01:17,000
But it is important to understand right now already

28
00:01:17,000 --> 00:01:21,000
that this code would not run like this in the browser.

29
00:01:21,000 --> 00:01:24,000
That's why it must be transformed, compiled, you could say,

30
00:01:24,000 --> 00:01:28,000
to some valid client side JavaScript code that's

31
00:01:28,000 --> 00:01:31,000
supported by the browser first,

32
00:01:31,000 --> 00:01:33,000
so that we as a developer have the convenience

33
00:01:33,000 --> 00:01:36,000
of mixing HTML and JavaScript code.

34
00:01:36,000 --> 00:01:38,000
And as an output, we still get code

35
00:01:38,000 --> 00:01:41,000
that's supported by the browser.

36
00:01:41,000 --> 00:01:42,000
And that's why we need a project set-up

37
00:01:42,000 --> 00:01:44,000
that comes with some built-in tools

38
00:01:44,000 --> 00:01:48,000
that give us this live preview

39
00:01:48,000 --> 00:01:50,000
with the order reloading up on code changes,

40
00:01:50,000 --> 00:01:54,000
and where we also get our code transformed under the hood,

41
00:01:54,000 --> 00:01:57,000
so that once we're done building our reactive

42
00:01:57,000 --> 00:01:59,000
we get a website that can be deployed

43
00:01:59,000 --> 00:02:03,000
on some hosting providers, and that can then be visited

44
00:02:03,000 --> 00:02:07,000
and be viewed correctly by visitors from all over the world.