Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,480 --> 00:00:04,920
So in the first course section,
2
00:00:04,920 --> 00:00:08,200
we learned what React is and what it's about.
3
00:00:08,200 --> 00:00:11,690
We had a first general overview of React
4
00:00:11,690 --> 00:00:13,930
and why we might wanna use it.
5
00:00:13,930 --> 00:00:15,680
In this course section,
6
00:00:15,680 --> 00:00:19,080
we are now going to dive into all the basics
7
00:00:19,080 --> 00:00:22,940
you need to know to build any kind of React app.
8
00:00:22,940 --> 00:00:25,680
We're going to explore all the base features
9
00:00:25,680 --> 00:00:28,300
and most importantly, we are going to learn
10
00:00:28,300 --> 00:00:32,030
how to build component-driven user interfaces.
11
00:00:32,030 --> 00:00:34,510
So how to build user interfaces
12
00:00:34,510 --> 00:00:39,510
by embracing a concept called components which turns out
13
00:00:39,670 --> 00:00:42,300
is actually embraced by React.
14
00:00:42,300 --> 00:00:44,550
And of course, I will explain what exactly
15
00:00:44,550 --> 00:00:48,020
these components are and why React embrace system
16
00:00:48,020 --> 00:00:50,440
in this course section as well.
17
00:00:50,440 --> 00:00:53,480
Now specifically for that, as I said,
18
00:00:53,480 --> 00:00:55,870
we're going to learn about all the base features
19
00:00:55,870 --> 00:00:58,860
that make up React, all the core syntax,
20
00:00:58,860 --> 00:01:01,130
we're specifically also going to learn
21
00:01:01,130 --> 00:01:06,130
about a feature called JSX or a special syntax called JSX,
22
00:01:06,930 --> 00:01:09,860
what that is and why we use it.
23
00:01:09,860 --> 00:01:12,590
Then as I also mentioned, we're also going to learn
24
00:01:12,590 --> 00:01:16,210
what these components are, but most importantly also,
25
00:01:16,210 --> 00:01:19,420
how we can build our own components with React
26
00:01:19,420 --> 00:01:22,540
and how we can use them and how we can work with them.
27
00:01:22,540 --> 00:01:24,310
And we're going to learn how we can work
28
00:01:24,310 --> 00:01:29,310
with data in React apps, because most web applications
29
00:01:29,520 --> 00:01:32,400
are not just about showing some static text,
30
00:01:32,400 --> 00:01:36,660
but about outputting some data or updating some data
31
00:01:36,660 --> 00:01:38,530
when things change on the screen.
32
00:01:38,530 --> 00:01:40,660
And that's therefore, all is what we're going to learn
33
00:01:40,660 --> 00:01:42,170
in this course section
34
00:01:42,170 --> 00:01:46,200
but also in the next course sections in general.
35
00:01:46,200 --> 00:01:50,060
Now, of course, I don't want to teach these things
36
00:01:50,060 --> 00:01:53,540
by just using some boring theory or slides.
37
00:01:53,540 --> 00:01:55,930
We will have all the required theory
38
00:01:55,930 --> 00:01:57,850
that hopefully it's not boring,
39
00:01:57,850 --> 00:02:02,330
but we will also build this first example project year,
40
00:02:02,330 --> 00:02:04,800
this example web application.
41
00:02:04,800 --> 00:02:07,450
This here it's entirely built with a React
42
00:02:07,450 --> 00:02:09,669
and we are going to build it together
43
00:02:09,669 --> 00:02:13,300
for this and the next course sections.
44
00:02:13,300 --> 00:02:17,150
And I'm saying, and the next course sections,
45
00:02:17,150 --> 00:02:21,100
because it turns out that React is a bunch of core features
46
00:02:21,100 --> 00:02:24,250
and we will need a lot of these features
47
00:02:24,250 --> 00:02:25,660
in this application.
48
00:02:25,660 --> 00:02:29,210
It might look fairly trivial, but it actually isn't.
49
00:02:29,210 --> 00:02:32,700
Once we finish this first application
50
00:02:32,700 --> 00:02:35,180
which also is not the only one in the course,
51
00:02:35,180 --> 00:02:37,170
you will have learned about basically
52
00:02:37,170 --> 00:02:39,530
all important key concepts
53
00:02:39,530 --> 00:02:41,640
which you need over and over again
54
00:02:41,640 --> 00:02:44,450
in any React app you're going to build.
55
00:02:44,450 --> 00:02:46,430
Now what is that though?
56
00:02:46,430 --> 00:02:47,950
It's an expense tracker.
57
00:02:47,950 --> 00:02:52,240
We can see our expenses also by year here,
58
00:02:52,240 --> 00:02:55,210
we can filter, and you see as I filter,
59
00:02:55,210 --> 00:02:58,760
does user interface automatically updates.
60
00:02:58,760 --> 00:03:01,100
it updates and with a nice animation,
61
00:03:01,100 --> 00:03:05,010
and it shows us the expenses for a selected year.
62
00:03:05,010 --> 00:03:07,650
And of course we can also add a new expense
63
00:03:07,650 --> 00:03:12,650
for example, maybe I bought some books for $39 in 2020,
64
00:03:14,680 --> 00:03:19,680
let's say on December 16th, and if I add this expense here,
65
00:03:19,880 --> 00:03:23,020
you see it shows up here the chart updates
66
00:03:23,020 --> 00:03:26,470
and the data is also there if I switch to another year
67
00:03:26,470 --> 00:03:29,800
and then back to 2020.
68
00:03:29,800 --> 00:03:31,360
So this expense tracker
69
00:03:31,360 --> 00:03:33,350
is what we're going to get started with.
70
00:03:33,350 --> 00:03:36,040
And as we're going to build it step-by-step,
71
00:03:36,040 --> 00:03:38,910
we are going to learn about all the key concepts
72
00:03:38,910 --> 00:03:41,673
you gotta know when working with React.
5756
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.