1
00:00:01,070 --> 00:00:04,770
All right my friends in this video we're going to start talking about the next couple of topics that

2
00:00:04,770 --> 00:00:09,570
we're going to cover in react and the application we're going to build to better understand those topics.

3
00:00:09,600 --> 00:00:11,080
So let's get to it.

4
00:00:11,370 --> 00:00:15,750
First want to begin by telling you about a couple things we still need to figure out around the world

5
00:00:15,750 --> 00:00:16,670
of react.

6
00:00:16,730 --> 00:00:22,200
First off we still don't have a lot of experience handling user events like a user clicking on something

7
00:00:22,230 --> 00:00:26,240
or typing on something or dragging something around on the screen.

8
00:00:26,250 --> 00:00:30,390
So one of the big focuses that we're going to have on the application that we're going to build is how

9
00:00:30,390 --> 00:00:33,300
to react or deal with user events.

10
00:00:34,230 --> 00:00:39,720
Next up drew out all the applications we've put together so far we've been making use of either static

11
00:00:39,720 --> 00:00:46,770
data or randomly generated data but in a real re-act application we very very frequently need to attempt

12
00:00:46,770 --> 00:00:52,990
to fetch some data from some outside API or from some server and pull data out of some database.

13
00:00:53,280 --> 00:00:58,640
So we're going to have a big focus on learning how we can correctly fetch data inside the reactor application.

14
00:00:59,620 --> 00:01:02,830
And then finally this is kind of a very basic thing to understand as well.

15
00:01:02,920 --> 00:01:05,110
How are we going to show a list of records.

16
00:01:05,260 --> 00:01:08,820
So far we haven't really been building any lists of data.

17
00:01:08,860 --> 00:01:13,540
We've been just showing kind of individual elements one at a time but we haven't been rendering a list

18
00:01:14,170 --> 00:01:19,870
at its absolute core just about every web application that you're ever going to work on at some point

19
00:01:19,870 --> 00:01:22,540
in time is going to need to show a list of data.

20
00:01:22,750 --> 00:01:28,300
And I would be kind of hard pressed to think of just about any web app any very popular web app that

21
00:01:28,300 --> 00:01:30,110
doesn't show a list of records.

22
00:01:30,160 --> 00:01:33,810
So we're going to get a really good idea of how to show a list of records.

23
00:01:34,180 --> 00:01:34,480
All right.

24
00:01:34,480 --> 00:01:41,130
So with these kind of goals are these topics in mind user events fetching data and showing lists.

25
00:01:41,200 --> 00:01:44,210
Well let's take a quick peek at a mockup of the application.

26
00:01:44,230 --> 00:01:46,350
We're going to build.

27
00:01:46,470 --> 00:01:47,310
All right.

28
00:01:47,460 --> 00:01:52,950
So we're going to split the implementation of the project we're going to work on into two separate kind

29
00:01:52,950 --> 00:01:57,780
of implementations I guess we're going to build it up to one certain point and then we're going to kind

30
00:01:57,780 --> 00:02:03,760
of take a break right there and then go for a second and jump into it and develop it a little bit further.

31
00:02:03,780 --> 00:02:08,370
So for the initial implementation of the app that we're going to work on it's going to be a pretty simple

32
00:02:08,400 --> 00:02:11,790
and straightforward app but it will be pretty fun and interesting.

33
00:02:11,790 --> 00:02:12,990
Trust me.

34
00:02:12,990 --> 00:02:15,450
So you can't really tell what's going on from just the mockup here.

35
00:02:15,450 --> 00:02:20,530
Essentially what we want to do is show a text input at the very top center of the screen.

36
00:02:20,670 --> 00:02:23,440
A user should then be able to type in some text here.

37
00:02:23,580 --> 00:02:32,340
So like they go to type in cars or plants flowers or buildings any term you could possibly imagine after

38
00:02:32,340 --> 00:02:35,030
they type in that term and then press enter.

39
00:02:35,190 --> 00:02:41,910
We're going to do a search or a request to an outside API that is going to find images or basically

40
00:02:41,910 --> 00:02:46,470
just simple pictures that match whatever term that user just entered.

41
00:02:46,470 --> 00:02:52,590
So if a user enters and cars and then presses enter I would want to somehow get a list of images of

42
00:02:52,590 --> 00:02:55,870
cars and show them on the screen to the user.

43
00:02:55,950 --> 00:02:58,700
So that's pretty much it for the V-1 implementation.

44
00:02:58,710 --> 00:03:03,060
We're going to get all these different images that we're going to find and then just show them one at

45
00:03:03,060 --> 00:03:05,240
a time going down the screen.

46
00:03:05,340 --> 00:03:11,400
Not a lot of styling just kind of want to get stuff up there and focus on handling user typing something

47
00:03:11,400 --> 00:03:16,790
in handling showing a list of data and handling somehow searching for images.

48
00:03:16,840 --> 00:03:19,570
I guess that's the one what's out talk about V-2.

49
00:03:19,710 --> 00:03:24,880
So like I said the V-2 version of this app is going to be you know a little bit more complicated.

50
00:03:24,930 --> 00:03:28,970
And that's what we're going to break it into like two separate distinct phases.

51
00:03:29,060 --> 00:03:33,930
So in the V-2 implementation we're going to do all the same stuff we're going to build off the same

52
00:03:33,930 --> 00:03:38,760
project and we're still going to be having user type in a search term fetching a list of images and

53
00:03:38,760 --> 00:03:40,240
then showing them on the screen.

54
00:03:41,180 --> 00:03:46,410
But the difference is going to be how we show these images to the user in V-1.

55
00:03:46,520 --> 00:03:49,140
We were just listing them straight down and chips.

56
00:03:49,160 --> 00:03:54,480
The user would have to continue scrolling to see all the images we fetch in the V-2 implementation.

57
00:03:54,500 --> 00:03:58,350
I want to kind of tile the images across the screen.

58
00:03:58,370 --> 00:04:01,820
Remember that in general images tend to not be identical sizes.

59
00:04:01,820 --> 00:04:06,360
They very frequently tend to be very different in sizes different heights different widths.

60
00:04:06,560 --> 00:04:11,870
So I want to figure out some really clever way in which we can make sure that we have these different

61
00:04:11,870 --> 00:04:17,330
sized images inside of here and still kind of tile them to all line up very nicely.

62
00:04:17,360 --> 00:04:23,150
So that's going to be the V-2 portion this V-2 portion is going to be a little bit more on these VSS

63
00:04:23,240 --> 00:04:24,300
and styling side.

64
00:04:24,380 --> 00:04:28,850
But don't worry it's still going to have a lot of Riak specific topics and you're going to get a better

65
00:04:28,850 --> 00:04:33,620
idea of how to integrate react with nonreactive code essentially.

66
00:04:33,650 --> 00:04:35,150
All right so that's the idea.

67
00:04:35,150 --> 00:04:41,870
Now let's before we take a pause let's generate a new application to house our code for this project.

68
00:04:41,960 --> 00:04:49,460
So I stopped my season's project by adding control C or then go up one directory to my workspace folder

69
00:04:49,580 --> 00:04:50,450
and back over here.

70
00:04:50,480 --> 00:04:55,160
I'm going to use create re-act app to generate my new project and I'm going to call this thing simply

71
00:04:55,220 --> 00:04:56,600
pick's like so.

72
00:04:56,950 --> 00:04:57,170
OK.

73
00:04:57,170 --> 00:04:58,420
So it's going to install stuff.

74
00:04:58,430 --> 00:05:02,510
So let's take a quick pause right here we'll come back the next section and start working on this project.