Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,070 --> 00:00:04,400
In this course section,
2
00:00:04,400 --> 00:00:06,939
we are going to dive into animating
3
00:00:06,939 --> 00:00:09,260
react apps and components.
4
00:00:09,260 --> 00:00:13,790
We are going to learn how to move from static styles
5
00:00:13,790 --> 00:00:17,290
and components to animate it thousand components
6
00:00:17,290 --> 00:00:22,010
with smooth transitions and simply animations that look good
7
00:00:22,010 --> 00:00:24,743
and lead to a better user experience.
8
00:00:25,699 --> 00:00:28,960
For this we're going to explore CSS, transitions,
9
00:00:28,960 --> 00:00:30,030
and animations
10
00:00:30,030 --> 00:00:32,890
and we'll see when those are enough
11
00:00:32,890 --> 00:00:36,270
and why they sometimes are not enough.
12
00:00:36,270 --> 00:00:38,720
Why just CSS, animations
13
00:00:38,720 --> 00:00:41,140
sometimes don't do the trick.
14
00:00:41,140 --> 00:00:44,090
And then therefore, we're also going to dive
15
00:00:44,090 --> 00:00:46,870
into some third party libraries
16
00:00:46,870 --> 00:00:49,908
which we can use one specific third party library
17
00:00:49,908 --> 00:00:52,630
to be precise that helps us
18
00:00:52,630 --> 00:00:56,850
with providing animations to react components.
19
00:00:56,850 --> 00:01:00,070
That's what we're going to do in this course module.
20
00:01:00,070 --> 00:01:02,570
Now for this course module
21
00:01:02,570 --> 00:01:07,220
I prepared a demo project and this demo project
22
00:01:07,220 --> 00:01:10,740
actually uses class-based components instead
23
00:01:10,740 --> 00:01:13,920
of functional components and hooks simply
24
00:01:13,920 --> 00:01:17,100
because I created this project here already
25
00:01:17,100 --> 00:01:19,640
for the older version of this course
26
00:01:19,640 --> 00:01:22,600
which used class-based components only
27
00:01:22,600 --> 00:01:24,490
but it should be fairly easy to get
28
00:01:24,490 --> 00:01:26,360
into this project as well.
29
00:01:26,360 --> 00:01:29,280
And definitely check out the course section
30
00:01:29,280 --> 00:01:31,973
in this course on class-based components.
31
00:01:31,973 --> 00:01:34,630
If you're struggling to understand
32
00:01:34,630 --> 00:01:36,990
this attached to demo project.
33
00:01:36,990 --> 00:01:40,240
In the end, it is a regular react project though
34
00:01:40,240 --> 00:01:42,590
with some react components.
35
00:01:42,590 --> 00:01:44,710
And specifically in this project
36
00:01:44,710 --> 00:01:46,960
we got three react components
37
00:01:46,960 --> 00:01:49,520
a backdrop, a list and a modal component.
38
00:01:49,520 --> 00:01:53,070
And if we install all the dependencies in this project
39
00:01:53,070 --> 00:01:57,990
with NPM install and we then start the development server
40
00:01:57,990 --> 00:02:00,160
then we see a site
41
00:02:00,160 --> 00:02:04,376
a website where we always have to modal overlay.
42
00:02:04,376 --> 00:02:08,610
And if we then go back to our code and the app component
43
00:02:08,610 --> 00:02:11,810
and comment out this modal and backdrop
44
00:02:11,810 --> 00:02:14,350
and we then save this and then go back
45
00:02:14,350 --> 00:02:18,880
to our site, then we see this demo application
46
00:02:18,880 --> 00:02:23,820
where we got a list where we can add list items like this.
47
00:02:23,820 --> 00:02:27,090
And you see the code that runs behind the scenes
48
00:02:27,090 --> 00:02:30,420
for adding the list items in the list component.
49
00:02:30,420 --> 00:02:34,880
And throughout this course section, we now want to make sure
50
00:02:34,880 --> 00:02:38,490
that we animate both the modal, the appearance
51
00:02:38,490 --> 00:02:43,490
and disappearance of the modal, and also the list here.
52
00:02:43,570 --> 00:02:46,890
And for this we're actually, first of all, going to start
53
00:02:46,890 --> 00:02:50,172
with a non animation topic, we want to make sure
54
00:02:50,172 --> 00:02:54,243
that this modal is showing up conditionally.
55
00:02:55,190 --> 00:02:56,593
So let's start with that.
4361
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.