1 00:00:00,900 --> 00:00:05,170 In the last section we generated a new project now we called Songs. 2 00:00:05,250 --> 00:00:09,870 So not going to change into that project directory like so now I'm not going to start up my project 3 00:00:09,870 --> 00:00:13,830 here just yet because I want to show you one or two quick things that we're going to have to do before 4 00:00:13,830 --> 00:00:15,690 we actually start the project up. 5 00:00:15,690 --> 00:00:16,070 All right. 6 00:00:16,080 --> 00:00:18,450 So back over here a couple of quick diagrams. 7 00:00:18,480 --> 00:00:22,710 First I want to show you how we're going to break out this application into separate components. 8 00:00:22,710 --> 00:00:25,200 So we're going to make one component for the right hand side. 9 00:00:25,260 --> 00:00:27,330 We're going to call it a song list. 10 00:00:27,360 --> 00:00:32,670 It's going to take a list of songs as you might guess those will be an array of objects for each object 11 00:00:32,670 --> 00:00:36,850 has maybe the title of the song and maybe the length as well. 12 00:00:36,990 --> 00:00:42,030 We will then render out a list of all those different songs and then for the right hand side we'll have 13 00:00:42,060 --> 00:00:48,210 a very simple song detail if it is given a song object it will display the title and the length of the 14 00:00:48,210 --> 00:00:48,970 given song. 15 00:00:49,110 --> 00:00:50,400 And that's pretty much it. 16 00:00:50,400 --> 00:00:52,720 So without a doubt the Riak side of this application. 17 00:00:52,740 --> 00:00:54,750 Simple straightforward. 18 00:00:54,760 --> 00:00:55,570 All right. 19 00:00:55,710 --> 00:00:59,940 Now when I tell you something a little bit more interesting that's going to help you understand how 20 00:00:59,940 --> 00:01:02,170 we put react in redux together. 21 00:01:02,220 --> 00:01:06,670 So at this point we've made use of the re-act library by itself quite a bit. 22 00:01:06,690 --> 00:01:12,480 We also have seen an example of redux inside of Copan and you even saw me and you probably went through 23 00:01:12,480 --> 00:01:18,060 the same process as well at redux to that code instance as a dependency. 24 00:01:18,060 --> 00:01:21,960 Now we're going to flip back over toward terminal's here and just a second and we're going to install 25 00:01:21,960 --> 00:01:28,080 redux but at the same time we're going to install a second library called re-act redux. 26 00:01:28,230 --> 00:01:31,470 That's literally it's name it's re-act dash redux. 27 00:01:31,500 --> 00:01:37,240 This is a third library that we're going to use to make sure that react in redux can talk to each other. 28 00:01:37,410 --> 00:01:44,010 Remember redux was not necessarily designed to work only with react so the re-act redux library has 29 00:01:44,040 --> 00:01:50,700 a bunch of helper functions inside of it to get redux to work nicely with you guessed it react we're 30 00:01:50,700 --> 00:01:55,590 going to really be learning a lot about re-act redux at this point and moving forward because we already 31 00:01:55,590 --> 00:02:01,230 know how re-act works pretty well and he's got a reasonable idea of exactly what redux is doing. 32 00:02:01,230 --> 00:02:06,600 So in this app what we're really learning at the end of the day is how re-act redux works as opposed 33 00:02:06,600 --> 00:02:08,920 to just react or redux. 34 00:02:09,220 --> 00:02:11,870 OK so we're going to flip back over toward terminal. 35 00:02:12,180 --> 00:02:17,010 I'm going to make sure I'm inside that Sung's project directory and I'll do an NPM install dash dash 36 00:02:17,010 --> 00:02:21,930 save redux and re-act dash redux like so. 37 00:02:22,000 --> 00:02:25,820 All right now this is just going to take a second or two to install so I'm just going to let it do its 38 00:02:25,820 --> 00:02:26,380 thing. 39 00:02:26,630 --> 00:02:31,020 And then when it's done I'm going to start up NPM start inside this project directory. 40 00:02:31,040 --> 00:02:31,660 There we go. 41 00:02:31,730 --> 00:02:41,740 It's all run NPM start and it will see our browser open up and here we go localhost 3000 like so. 42 00:02:41,810 --> 00:02:46,410 Next up I'm going to start up my code editor inside of our project directory. 43 00:02:47,660 --> 00:02:49,900 And as you are very well used to doing. 44 00:02:49,940 --> 00:02:54,380 We're going to find that SIRC folder and we're going to delete everything inside there. 45 00:02:57,480 --> 00:03:04,620 And then inside the US RC folder will go back in and we're going to create our root index js file. 46 00:03:04,660 --> 00:03:10,060 I'm going to put together a little bit of the plate inside of your soul say import re-act from react 47 00:03:10,720 --> 00:03:19,090 or do import re-act Dom from re-act dash Dom and then we don't have a app component or a app file yet 48 00:03:19,150 --> 00:03:22,900 but we're going to make it in just a second so I'm going to imagine that already exists and I'll say 49 00:03:22,900 --> 00:03:30,700 import app from components slash app like so and then at the bottom we'll do the classic re-act render 50 00:03:31,420 --> 00:03:39,260 with our app and document query selector with root like so. 51 00:03:39,340 --> 00:03:39,580 All right. 52 00:03:39,580 --> 00:03:43,330 So remember at this point we don't have our app component put together so if you flip back over to the 53 00:03:43,330 --> 00:03:46,270 browser you're probably going to see an error message. 54 00:03:46,270 --> 00:03:48,860 So let's now very quickly create our app component. 55 00:03:49,110 --> 00:03:55,480 So going to find my or directory make a new folder inside they're called components and inside of that 56 00:03:55,480 --> 00:03:57,960 folder I'm going to make a new file called. 57 00:03:57,970 --> 00:03:59,430 J.S.. 58 00:03:59,580 --> 00:04:02,870 And then inside of here we will import re-act from react. 59 00:04:03,420 --> 00:04:14,100 We'll create a functional component this time old app and inside of it or turn a simple div with a text 60 00:04:14,160 --> 00:04:19,320 app and then export default app at the bottom like so that's it. 61 00:04:19,350 --> 00:04:20,530 That's all we do. 62 00:04:20,850 --> 00:04:25,640 So let's do a quick check inside the browser and I should now see the text app appear on the screen. 63 00:04:25,650 --> 00:04:26,790 Perfect. 64 00:04:26,790 --> 00:04:31,080 Now one last little bit of setup that I want to do as long as we are going through all this kind of 65 00:04:31,110 --> 00:04:32,010 repetitive stuff. 66 00:04:32,010 --> 00:04:36,940 I want to make sure that I hook up semantic UI just the CSSA file to our project as well. 67 00:04:37,190 --> 00:04:38,860 So I'm sure you remember how to do this. 68 00:04:38,880 --> 00:04:43,550 We're going to do a quick search for semantic UI CDN. 69 00:04:44,570 --> 00:04:45,890 I'll find the Cdn. 70 00:04:45,980 --> 00:04:47,020 Dot com link. 71 00:04:48,120 --> 00:04:51,860 And then I'll do a search for semantic men CSA. 72 00:04:51,910 --> 00:04:53,110 Siri go right there. 73 00:04:54,860 --> 00:04:56,480 So I'm going to copy that thing. 74 00:04:56,510 --> 00:04:59,690 I will flip flip back over to my public index. 75 00:04:59,720 --> 00:05:00,920 HS e-mail file. 76 00:05:00,920 --> 00:05:09,140 And then just as before I'll put in my link with the rel style sheets and my eight's ref to the link 77 00:05:09,140 --> 00:05:10,280 that I just copied. 78 00:05:10,310 --> 00:05:18,230 Like so and I'll save the file and I'll just make sure that I see the updated font for my app text that 79 00:05:18,230 --> 00:05:19,960 appears appear on the screen. 80 00:05:19,970 --> 00:05:21,260 All right that's it. 81 00:05:21,260 --> 00:05:25,940 So we're now ready to start putting together our actual app and learning how to get react in redux to 82 00:05:25,940 --> 00:05:29,000 work together with that re-act dash redux library. 83 00:05:29,000 --> 00:05:32,780 I know that's so repetitive but let's take a break and we're going to figure out how that thing works 84 00:05:32,840 --> 00:05:33,820 in the next section.