Build a Mini-Course Website with React, Ruby on Rails, Webpacker, and Bootstrap

all right so right now we're gonna build just a really simple website using react and Ruby on Rails and I thought it'd be fun to do something kind of meta so basically the idea is to build a mini course website that will then host the videos that show you how to build the website we're going to be making so if you look here you can see we have this sort of top Jumbotron section that kind of explains to you what this website is and if we scroll down you can see we have a breakdown of the video modules and then what's kind of cool that we're gonna do is for each of the modules you can actually click in to expand it and then watch that video so you can see I can scroll down to the next one and I can expand this one and that will actually collapse all the other modules and make this the active item it's a pretty simple concept so we're going to be using react we're gonna be using Ruby on Rails we're gonna use web Packer we're gonna use bootstrap so let's get started okay so the first thing that we want to do is we need to create a new rails app from scratch but what we're gonna do is we're going to configure our app to use react right out of the gate using web Packer so what we can do is in my terminal I'm gonna do rails new to create a new rails app and I'm gonna call this react for rails developers and then what we can do to set this up with web Packer to use react is we can just add dash dash web pack equals react and then I'm also actually going to set the database to Postgres and that's basically all that we need to do to configure this to build our initial rails app with react setup so with that we can go ahead and hit enter and that will start to build our app so you can see it's building our app now and it's installing web Packer and then we'll see that it's going to configure web Packer to use react cool so you can see web Packer successfully installed and we can see that it ran web Packer install react awesome so now that's finished building and if you look we have this message that says web Packer now supports react [Music] so now that we have our new app set up let's go ahead and CD into that and then what I'm gonna do is I'm just going to open that up in my code editor and if you're familiar with rails the most of this will probably look familiar to you but if we jump over into our app folder here you can see that we actually have now this JavaScript folder and inside of that we have this packs folder so by default we're gonna have these two files inside of our packs folder so we have the application J's file and this basically just has comments on how to use this in your rails app so it tells you about for example the JavaScript pack tag and then it just console logs out hello world from web Packer and if we jump over into the hello react JSX file and in here you can see they give us just like a really simple hello world example as you can see we're importing react here and there's this hello Const and it takes him props name and then down here they're passing in react for that name value so it's just a really simple hello world example to get you started so we've set up our app to use web Packer and react but by default nothing's actually gonna happen yet if we try to fire up our server so we can actually test this out if we go over here and do rails s then what we can do is navigate over to localhost 3000 and we'll see just the default yeah your own rails message that you get when you started a new rails app up so there's two reasons for this one is we actually haven't set up anything for our route path yet and the second thing is we actually need to inject our react from our JavaScript folder into our rails views so let's go ahead and do that so over in my code in config we want to set up our route path and our routes so what I'm gonna do is I'm gonna create a new controller for my app so I'm gonna create a pages controller with an index method and then we could just make pages index at the root path of this app so I'm gonna do rails G controller to generate a new controller and we'll just call this pages and we'll give that an index method so now what we can do is we can actually set up our route path for our app so I'm just going to clear that out and then what we can do is route is index and if we look over here we can see that should have generated a new pages controller in our controllers that has an index method and then in our views we should have a pages folder now with index so what we can do then is we can take the JavaScript pack tag from our JavaScript packs folder you can see an example of it up here and what we can do is we can paste that into either our application HTML or RB file which we can find in our layouts folder here if we want it to render across basically our entire website or if we only want it for this one page then we can go ahead and put it into this new index.html RB file so for me in this case I'm just going to put it into my route path here so it's only on this page but if you want to render your react across your entire site then you can just throw it into the application HTML RB file as well so over in here what I'm going to do is paste in our JavaScript pack tag for the hello react file I'm gonna save that and now if we go back and we fire up our server and then we go and navigate again to localhost 3000 then once that loads what we should see now is that should actually render our react into our view so let's reload that okay so that works we can see that we're now loading our react into our view files so with that we are ready to start building out our react app I just want to jump back into my code editor here and the first thing that I'm gonna do is inside of my JavaScript folder I'm gonna create a new folder and I'm gonna call this components and inside of this folder I'm going to just add basically everything that I want for what is gonna be kind of our homepage for this website so actually let's go ahead and inside of components I'm gonna create another folder and I'm just gonna call this home and then inside of that I'm gonna create a file and I'm gonna call this home jas okay so let's lay out just like a loose kind of battle plan here so we have this home JS file so inside of this we're gonna have like a Jumbotron for the kind of top section of the home page and then underneath that I'm gonna have a sort of table of contents so we can basically think of the table of contents as a list and then inside of that we're gonna have a bunch of items so we'll have a list of items so each items going to be a different module of what will be this sort of mini course that the website is can be created for and then basically at any given time there can be one active item so that'll be the expanded video that a user clicks on to watch so we'll have a list of items inside of our table of contents which is gonna be our list and any of those items can be selected and become the active item so in the inactive items we want to have a sort of like preview thumbnail component within that and then for the active item we want like the expanded like video for when that expands it actually shows you the video that you can watch so this is just the loose breakdown of what I think we want to have for this website so I'll the jumbotron up top then we'll have this sort of table contents that'll have this list of our different video modules so for each of these components I'm going to go ahead and just create a file in the structure that I think that we're going to have it so I think all this is going to exist inside of this home folder that I've created here and so we want to have a jumbotron JS file and then we also going to create a table of contents folder and I'm just gonna call that table and then inside of that we'll have a table J's file and then we will also have an item for all of our items and then we're also going to create we want to have like an active item for the selected item and then for the inactive items we want to have a preview or I think I'm gonna call this like thumbnail for the like thumbnail video and then for the active item that's selected we want to have like an actual expanded like video component so we have our home component and we're gonna do is pull in our Jumbotron for this we're gonna bring in our table and then our table is gonna have a bunch of items and possibly at any given time one active item for our items will have this thumbnail component and for our active items we'll have this video component [Music] all right so before we start writing react code I want to do just a few quick little housekeeping things so the first thing I want to do is I want to really quickly just bring in bootstrap to help us out with some of the styling so what I'm gonna do for that is in my terminal I'm gonna kill the server here and what I'm going to do is yarn add bootstrap to install bootstrap into our app and then what we can do is we can come over here and I'm actually I'm going to rename this hello react JSX file and I'm going to make this into index J s and if you're following along and you do this just make sure that you also update the Java Script pack tag to match what you change that to so in my case I'm going to make this into index and then what we can go ahead and do though inside of this new index file is we can actually import we can actually import bootstrap I think it's dist CSS and then bootstrap dot CSS and what that will do is basically just give us access to bootstraps that we can use that to style our components as we're building this out and with that I think we're ready to start building out this website so first things first I'm gonna jump back over into our home component I'm gonna get rid of this little road map that we've laid out here and let's actually go ahead now and import react into our file here and if you're using vs code there's this nice little shortcut you can get that just imports react and component from react for you so I'm gonna go ahead and do that and then we can go ahead and do class home extends component create a home component here and inside of this we do render and then inside that all do return and then inside of here we can start to add some JSX but before that let's actually let's go ahead and add a constructor to this class and what I'm gonna do is I'm gonna set our initial state here so what I actually want to do is I want to create like modules array inside of our state that holds all the objects that are gonna represent the different sort of course items what we're going to build and eventually what we'll do is will actually create a table in our database that can hold this data and then we'll make a get request when this component mounts to get that data and render it into our react but for now we can kind of mock that by just adding an array of objects into our state so what I'm gonna do is I'm gonna do this dot state and what I want to do inside of that is I want to create modules and I'm gonna set that to be an array and then what we can do is basically just set up all the default data that we want to add here to represent those different course items so for each object in my module we want to have an ID that'll later map to a database ID and then we also want to have like a title for the video and then we want to have a description for the video and then we're also gonna give it like a status or going to call this may be active for now and this will basically just be a boolean it'll be true or false on whether or not the video is currently active and this will dictate whether it's that sort of collapse preview view or if it's that expanded video view for the user to watch the video and by default we'll make all of them false so that's the basic layout for the modules I want to create so let's go ahead and create like four of those and then I'm just gonna update them accordingly so each won't have a different ID so we'll do one two three four for that and then I'm just gonna give each one of these a title in the description so for the first one I'm gonna do one setting up a new Ruby on Rails app with react the second one will do two will do adding react to an existing rails app four three will do building a hello world app and then four four will do adding react router Dom to your app so that'll be all the titles and then for descriptions for now I'm just going to do like lorem ipsum and we can just fill that in later so we'll have four modules inside of our modules array here each one's gonna have an ID a title a description and an active status that's true or false you know what I think that modules is actually probably not a very good name for this so it's actually called something more descriptive so we can call it like course modules or video modules I think I'm just gonna call this course modules so we've set our state we have an array of objects in our state I think that that's all that we need for that for now so it's actually let's just jump down and let's put something as a placeholder into our render method here so I'm just going to do a new div and I'm just going to do this is our home component inside of that so what we can do now is we can export default home and then what we can do now is over in my index.js file we can actually I'm going to get rid of this what we can do is we can import home from we're do dot dot slash components slash home slash home and then we can get rid of this and we can change that to our home component we can get rid of this boilerplate code and we actually let's see okay so we need to in our constructor we need to add super and I think that that should be everything that we need to do for our home component for now so if we go over here now and if we fire our server back up we should see this is our home component rendered out into the page now because we brought our home component into our index file and now we're rendering that inside of react on render so let's go over here and let's reload this cool so it looks like that's working and now we can see this is our home component getting rendered out into the page so let's start building out our jumbotron so what we can do is we can import react and component from react and then we can go down here and we can do class jumbotron extends component or you know we can actually we can probably just make this into a dumb component and just do Kant's jumbotron equals and then inside of this we can just return some GSX and then we can export default jumbotron so in this let's go ahead and just build out the top section of the website so I'm gonna create like a new section we can give this a class so we'll use class name and we'll just set this equal to like home section - - one just so we can style that in a minute and then inside of this I can actually start now to pull in our bootstrap classes and we can use that to style this component so I can create a new div and then inside of this we can give that a class name of container and then inside of that I can create another div give that class name of row and then what I want to do is I want to create like a tube home layout so instead of a row I'm gonna do two different divs that each have like Cole Cole SM 12 cool MD I want to make this one 5 and I'll create another one and I'll make that 7 so those both add up to 12 so what we're gonna do is create like a two column layout where we have kind of like our headline and subhead on the left and then we'll have like a video up top on the right so in our left section we can go ahead and create another div and we can use some of bootstraps padding and margin classes so we can do like PT 4 empty for so it's like padding top 4 margin top 4 and then inside of this we can add the h1 for our website so I could say react for rails developers and then we can add like a subhead so we do a paragraph and we can say I like supercharge your ruby on rails apps with react j/s so that'll be the header and sub header on the left side for our Jumbotron and then on the right we want to do we can do like another wrapping div we give this class name again we can do like PT for mt4 so adding part like padding and margin on top we can also do like text center to center this and then inside of this I just want to put like I just want to put like a placeholder video [Music] okay so I just copied an embed code from YouTube so I'm just gonna paste that in here so we have an iframe now for YouTube video and I think that that should work for the most part I think we have to change a couple of things probably in here so we need to camelcase this I think to make that work and otherwise I think that that should work we can test that out in a second so we have our jumbotron now we have some bootstrap classes pulled in so we have a container we have ro we have these two columns so this content on the Left we have the content on the right so it's actually let's go ahead we've exported our Jumbotron so let's bring that into our home now so if we come up to the top of our home component we can import Jumbotron from dot slash Jumbotron and let's actually go ahead and instead of our div here get rid of this and let's pull in our Jumbotron component so let's go ahead and check out if that works so I'm gonna refresh this and it looks like that works so it doesn't look great yet but we have our two column layout we have our content on the Left we have our video on the right it looks like a few of the properties from that iframe are having some issues so we can actually probably fix that really quick so we jump back into our Jumbotron it looks like it wants a frame border to be camelcase as well so let's do that we refresh this cool so that clears up that error close this out and see we have the basics for our two column layout here [Music] and one thing that we can do is we can if I jump over my terminal here we can actually open this up in another tab we can run dot slash bin slash foot pack dev server and what this will do is this will basically set up real time reloading when we make changes to our website so we don't have to manually keep reloading the page so let's just to be safe I'm going to restart my rails servers to make sure everything is working but now when we go and make changes in our react code we should see this update in real time so we can go ahead and test this out so if we jump back into vs code if we pull this into we can see the page let's go ahead and let's just get rid of our title for a second so I'm going to save that you can see in the background there it's actually updating the page now in real time to reflect our changes so I can jump back in here and we can undo that you can see it's bringing back in that content so now we're at the pages reloading in real time and we don't have to manually keep reloading it okay so the next thing that I want to do is I want to style this up and actually make it look a little bit better so I'm gonna import a library called styled components that we can use to actually add some styling to this so every rhyme gonna kill these servers and I'm going to yarn add styled components okay so now we can start our servers back up and now what I want to do is I want to bring style components into my Jumbotron so in here we can import styled from styled components and now you've stopped components you can actually start to style out our different elements within our JSX here and the way that style components works is pretty straightforward so what we can do for example is I can create a Const and I can call this section and I want this to represent basically this top section here that's wrapping all of our content inside of our Jumbotron and what I can do is I can say this is equal to style I'm not going to set it to the element so I can new style dot section and then use back ticks and then inside of that we can actually set all of our CSS styling for the section so I'm going to do is I'm gonna set of background color and I've got this nice red color I want to use so it's d7 four two three four and then I want to set like a min height for this we'll do like a min height like 550 pixels and I wanna give this some padding so let's do like padding 250 pixels the top and bottom and zero for right and left and then I want to set the color for this to be white so we can do now is we can take this cones and we can actually just replace the section there inside of our Jumbotron and if you look you can actually see in the back right now has set the background color to that red that I just set it's changed the text to white so now it's taking all the styling that I just added to that eye so it's pretty cool so actually it looks like that's a little bit too much padding let's go back in here let's just drop that down like a hundred pixels refresh that that looks more like the jumbotron that I'm trying to make so let's go ahead and let's sell this up a little bit more so I'm going to we want to style this h1 so let's do Const and also create a Collins called h1 and we'll do styled dot h1 and I want that to be color white I'm going to give that a font weight it's a little bit thicker so we'll do like 700 for that I'm gonna go to font size of like 40 pixels we'll do a line height maybe like 52 pixels and then we need to actually apply this to our h1 so I can go over here and I just replaced that with the new columns we've created and if you look back here we can see now that's beefed up our h1 and added those changes so similarly I want to come over and I want to add some style for our sub header so you just call this like just sub head I guess and with that equal to sal dot p because it's a paragraph and inside of that I'm gonna do I'll give that a font size of like 18 pixels it'll be that a font weight of like 500 and that's probably good for now so I'll just set this to replace that and actually I don't want to call that h1 let's actually change that to be like a header and we'll replace that here we'll take a look and it looks like that all looks good so far [Music] man you know what we totally need is we need a CTA button right here so let's go ahead and add that so inside of this in our Jumbotron in our left column we want to under our header and sub header let's go ahead and add another div and we'll make this into like a wrapper for our call to action button so we can say like CTA wrapper and then inside of this I'm just gonna add a new anchor tag do you like class name will say like button and then we'll do call us like our fancy button and style that a second and then inside of this let's just do like get started as the call to action so now using styled components let's go ahead and let's create a new Const and we'll call this like our button I wouldn't call it do style to do a because it's an anchor tag and then we'll do back ticks and then inside of this we can do the styling for our button so I'm going to add some styling for this I'm going to display:inline-block we can do text-decoration:none then I want to do like I have your font way for this to do font way we can just make this bold for the cursor we want it to be that little clicky hand when you hover it with your cursor:pointer I want this just to be a nice thick square so I'll do border radius zero on that and then I also want to give this a background I'm gonna make that white and then I want to give this a box shadow I'm gonna add this box shadow effect that I've came across the other day that I just really dig in I've been playing around with lately so I'm just gonna paste that in here sort of this funky box shadow so let's go ahead and let's add this to our CTA button so come down to our anchor tag and we'll replace that with button and now let's go ahead and take a look at that oh let's fix the text on that and make that a darker pillar cool okay so we have our button there actually I'm gonna make that a little bit bigger let's go ahead and add adding to that we'll do like tentacles 20 pixels make the font size like 18 pixels for that and we'll give the width actually have like a hundred percent now let's take a look at that well too big too big let's not do that and you know what that's actually probably fine for now we can just tweak that later but with that we now have our Jumbotron component and it's actually starting to look pretty good so now we can move on to do our table component [Music] so now for our table component we're basically going to create a sort of wrapper or container that we can use to bring in all of our items and our active item and display them inside of that so let's go ahead and let's import react and component from react I don't do class table extends component and this side that will do render and we'll do return and then inside of that we can add our JSX and for this we want to add a constructor and we'll pass props into this because we're going to pass props down to our table and then inside that will call super with props and now we can build out the basic wrapper with our JSX for our table so initially this is just going to be really simple so we can just add like a div here we can give this class let's just add like some padding to so we'll you like padding top five will do padding bottom five and then inside of this I'm going to add a container class from bootstrap and then inside of that let's add another div and we'll just give this we'll Center this will do text center which is another class we have from bootstrap and then let's just add like a header for our table of contents we'll do like an h2 for this and again let's just I love throwing in these little like buffers of the padding top padding bottom so with your PT 4p before I'm also give this a title for this section until do like react for rails developers like videos or like table of contents or something so that's all that we really need for the table for now and then once we create our items we can actually bring those in and we'll display those through our table but for now what we can do is we just export this we'll do export default table and then back over in our home now we're importing our jumbotron now we can also import table from and this is actually inside of a table folder that we created if you remember so if you don't slash table to get into the folder and then table again to get the actual component but then what we can do is we can just bring that in after our jumbotron so let's see what that looks like cool so you can see up here we have our jumbotron component and then down here we have the start of what will be the sort of table of contents for our video course modules okay so now that we have the basic layout for our table let's go ahead and create the items that will then insert into our table so let's jump back into the code here and over here we have our item j/s so inside of this we can again import react component from react and then start to build out our items from your class item actually you know what I think this can also just be like a dumb component so we can get const item we're going to pass down props to this let's make this into an arrow function so inside of this we can then do return etc return we'll have our JSX and then let's go ahead and just add our bootstrap classes to this so we can do class name I'm gonna make this a row and then inside of that what I'm gonna do is this might get a little weird I'm gonna do another div and basically I'm gonna make this I'm gonna use columns what I'm going to do coal and b10 and then we can use an offset to sort of fill in on the left and right of this so I can do offset MD one so that'll still add up to 12 because I'm gonna add an offset of one on each side of this so we're still working within bootstraps twelve column layout but this will basically sort of squeeze in our content to the center so inside of that let's do another div I'm just gonna do text center here to Center this and then we'll make another div inside of that and we can pull in a card class from bootstrap so Duke card I'm will add just like some random Patten to that again just cuz I'd love to do that and then I'm gonna do something kind of weird to get the ideal layout that I want it's probably better would do this if anyone is a bootstrap expert it knows a better way format this feel free to drop a comment below and let me know but I'm actually going to add another row inside the row and then inside of that I'm again going to use bootstrap columns to sort of format this the way that I want but basically what I want to do is I want to create a left-right column layout where on the Left we have our thumbnail of the video and then on the right we have the content so like the title and description of that video basically and you know what let's actually let's create our thumbnail component just because I want to pull that in here so that we can bring that into our items [Music] and then this is just gonna be a dump component so we can do Kant's thumbnail I'll make this into an arrow function this is just gonna return a div and inside of that div what's actually let's go back over to the Jumbotron and I'm just gonna copy the iframe from that over into my thumbnail so inside of this we'll use this as just like a temporary placeholder will make the thumbnail just a miniature version of the actual video itself and I'm gonna set the width and height of this to be like a hundred percent and that's all that we're gonna do for the thumbnail for now I think so lets you export default thumbnail and so now what we can do is in our item we can actually import thumbnail from thumbnail and now we can put that into our Left column in here so we thumbnail here so now we'll have this left right layout what we have the thumbnail of the video on the left and we have the headline and description of the video on the right so for that on the right here now let's add another div and again I'm just gonna kind of sprinkle padding all over the place so we'll do class name equals PT for PV 4 so it's padding top for padding bottom for and then inside the base let's add for our header on this we'll do like an h4 and then under this we'll add a paragraph tag and now what we'll do is this is where we're gonna end up passing down the title and description from our state for those models that were created back in our home component so at this points to be prop so end up doing is props title and props dot description and then additionally we want to add like a CTA button in here that's gonna be the thing that you click to make this into the active item so we'll give this class name of just like our CTA wrapper and then inside of that we're gonna have an anchor tag and we'll add basically a method to that shortly that's going to let this turn each item into the active item so for now we can just do like class name equals CTA button and we'll just do I've watch this video okay so that should be good for now so let's go ahead and export that so we're export default item and now what we can do is back in our table this store we can actually start to have some fun so it's actually in our home component we have this thought state thought course modules here so we're gonna actually pass that down now to our table so we're going to say course modules equals this thought state dot corresponds so then now what we can do is back in our table we can actually now we can import item from table / item and now we can inside of our render method create a new variable so we can call this Const items basically what we want to do is we want to take our course modules so now we can access that as this stop prompt stock course modules inside of our table here basically for each item in our array we want to map over that and for each item is data we're gonna create an arrow function we basically want to take each item and we want to create a new instance of our item component for the data from each object in that array so for each object in the array we want to basically create a new instance of our item component so we can do inside of this is we just return our item component and then inside of this we can pass in a key and we could do a couple things here so we could either also pass in the index of the item in our array and make that the key or we can just pass in the ID on each item in our course modules and then additionally I want to pass down the title so title equals data title and then we want to also pass down a description so we're in the description equals data description so now what that's going to do is that's going to pass down the title and description into our item and that'll get rendered out for a prop subtitle and prompt description that we added here so now we have this items variable what we can do is we can inside of our JSX here after the header for our table of contents we can actually render out our items here so going to add that it looks like that through an error so let's just take a look here if we inspect this we can see it looks like the air is actually at our thumbnail component so if we go over here I feel get thumbnail it looks like the issue is because we have not actually imported react for our thumbnail components let's save that come back over here and now it looks like we can actually see that it's rendering out we can see it looks like everything's working and now it's rendering out our items into our table of contents onto the page all right so it looks like everything's working now but actually I want to add I want to add a little more padding around this so let's actually go back in here and pour a thumbnail let's do class name and we'll sprinkle on some more of those magical bootstrap classes so we'll do padding top four would be padding bottom four and then back over in our item itself on the row before we actually hit the card that's adding the board around this add again adding top four and padding bottom for around that and let's see what that looks like man way better and then I also I don't really like that that's centered so let's go back into our item and for this can we just get rid of this class actually let's see yep okay that looks way better and then we actually we need to style this button so let's do that as well so that is our CTA button here with watches video so it's actually it's a good opportunity to import style from styled components and then let's style up our button to Const button equals styled dot a because it's an anchor tag and then inside of this we can add all of our CSS you know let's actually let's just copy over the style that we added into our Jumbotron button so I'll just copy this back over into our item and we'll just paste that in here and then we can just replace our anchor tag down here with button and let's see what that looks like cool pretty funky but not a bad start so now we have our Jumbotron up top and now we have this sort of table of contents and we're rendering in each of our items with the preview thumbnail and a description and title on the right here okay so now we've created our home component we've created our table we've created our items for our table we've created our thumbnails sort of preview component that goes inside of our items so now the last thing that we need to do is we need to create our active item and then we need to create the expanded video component that goes inside of the active item so let's go ahead and do that so I'm going to jump back in the editor and we have this active item file over here so honestly the active item is gonna be basically the same thing as the item we're just gonna kind of switch around and the bootstrap classes for what happens when the item is active so I'm gonna change this to be active item will change this down here to match so we'll have active item now and honestly all that I'm going to change is I'm gonna get rid of the two column layout here so instead of having : before on the left and column d 8 on the right I'm just gonna go ahead and do like Colombia 10 will do another offset MD 1 so we'll do an offset on each side of that and then basically we can just get rid of this other column and we can bring this up and then let's move this down so we'll wrap everything inside of our coal MD 10 and honestly I think that's all that we need to do for the active item so it's gonna be really similar to the item but we're dropping that to column layout and it's just gonna be one big item and then we're gonna get rid of thumbnail here and actually add in video instead so it's actually let's create our video component then so inside the video we can import react from react and then we'll do Const video I will make this into an arrow function I will make that return it's gonna be really similar to our in fact actually this could probably be identical to our thumbnail component so also we could actually probably just have one component for this for now if we wanted but eventually I'm gonna want to be able to do different things with each of these so it's good that we have these broken out as two separate components so it's export default video and now inside of our active item instead of thumbnail we'll import video and then down here we will pass in video so now we want to import our active item into our table that's one important item and we'll import active item dot slash active item so now we want to do with our active item is if we look back inside of our items variable that we created down here so right now we're just iterating over our array of objects and we're passing each one into a new instance of our item component so we want to tweak this slightly so what I want to do is inside of this I'm just gonna make this multi-line wrap this with parentheses so what I want to do so we have data representing each object in our array and what I want to do is if you remember on each object we have that active state that's going to be true or false so what we can do is we can actually say if data dot active is true then we want to instead of rendering the item we actually want to render the active item we can pass in all the same values for that especially if the item is active then we want to use the active item component otherwise use the item component so now if we look that shouldn't change anything yet see everything's still rendering fine nothing exploded and everything looks like it's just a standard item but we should be able to do now is if we go into our home if we go into our state here if we for example in the second video switch the active state to true and save that if we look we can see the check for item or active item is actually working so that's pretty cool let's fix that really quick some video instead of height 1 percent I'm gonna do height like that 400 I will keep with that 100% so let's go back here it looks like that's all working so if we check now we have our items and we have our active item we can see that instead of using the collapsed item component we have our expanded active item all right so now comes the fun part so what we need to do is we need to create a method inside of our home component that we can pass down to our items so that when we click on the watch this video button we can toggle the active status for an item between active and active basically so let's jump back into our code and let's go into our home component and let's create a new method so inside of this I'm going to create a method and I'm gonna just call this handle video change let's call it I don't know that's the most descriptive thing but that should probably work from now so then inside of our handle video change method I'm gonna pass into argument so on a pass in item and that's gonna be the item that we've selected to be modified and now I want to pass in the event itself so inside of here I'm gonna do event dot prevent default so let's actually let's just throw a debugger in here and then let's take this method and let's pass that down into our table so we'll say handle video change equals this dot handle video change then we need to bind this so now we'll have access to that from our props inside the table so if we go in a table now for basically our active item in our item we can pass that in as well so we can do handle video change equals this props handle video change and we can do the same thing for item and actually I want to do something here that's gonna seem a little bit weird but basically what I want to do is before we do return here I want to create another variable and I'm just gonna actually call this handle video change and what I want to do is assign this to this stop props dot handle video change but then I want to rebind this but also pass in data and what this will do if this works is this will basically let us see which item out of that array of items is the selected item that needs to be modified certain create that variable and then we can actually just pass in that variable now when we pass this down to active item and the individual item so now what we should be able to do inside of item is when somebody clicks on this button do button on click and we can just do props dot handle video change and then we the same thing for active item I so now if everything is working when somebody clicks on one of these buttons then what should happen is we should hit our method we hit our handle video change method here and then we should hit our debugger and then once we do that we can take a look at what item and event are at that point so let's open up the console here and now let's see what happens when I click this button perfect so we hit our debugger let's open this up let's jump to the console I'll check item we can see perfect so that's passing through the actual selected item so out of that array of the four different items that we have getting passed down as the course modules from our state this is telling us which of those is the actual selected item when we do this on click action and if we check event we can see that we have our event so we see we are hitting that anchor tag so that's all just business as usual so that's perfect so now we have everything that we need to modify this so we can close that out and nothing's gonna happen yet because all it's happening in our method is we are preventing default and then we're hitting that debugger so let's change that so the first thing that I'm going to do here is I'm gonna get rid of the debugger and I'm gonna create a new variable and I'm just gonna set this equal to the course modules in our state so we can do like course modules he's the spread operator we said that equal to this state course modules let's just go ahead and console.log that out to make sure that that works that's what pumps a lot of course modules go back over here we refresh the page and let's clear that out and let's do that once if I click the button it cool so you can see that that's console logging out all of our course modules so the next thing I want to do now is actually want to take all of our course modules and I want to initially just map over them and for each item it's data we'll do an arrow function and what I want to do is I want to set the active status to false for all of our course modules and the reason that I want to do that is basically I want to make sure that at any given time there can only be one active open item so this will just be a simple way for now for us to make sure that everything else is set to false before we then set the active item so we're gonna do it here is just do data dot active so that equal to false so now we want to take the actual selected item if we have is that passed an argument that we saw a second ago we want to actually update active on that and we just want to make that the opposite of whatever its previous boolean value was and the reason that we want to do that instead of just hard coding this is true is we want to make it so that if a user clicks the button and expands the video they can also then click the button on the same video to collapse it again without having to go open another separate video to do that so all that I'm gonna do for this is I'm gonna say item not active equals I'm gonna use a bang and just say the opposite of whatever item that active currently is and then now all that we have to do is we need to update that item within our course modules and then we need to update that in our state so we can do is we can find that item inside of our course modules by basically passing in the item ID and subtracting one so right now we have IDs that increment by one starting at one so basically if we subtract one from the item ID we'll find the specific selected items index in our course modules array so this will let us select the specific item and reassign it so we can say course modules we'll get that specific item within the array and say that equals item so if that's working then if we console.log out course modules now we should be able to see what everything looks like before we then set this to our state so let's take a look again I'm gonna clear that out let's see what happens when we click that button it's now it should be console logging course modules after everything has been modified so if we look at this I feel look at the first item we can see active is set to true now and for everything else it's set to false so if we try to click in here we can see so that's number two but it's the third item in our array we can see that has an active status of true now and the first one's false now so everything's working the reason that we're not seeing the change here is because we haven't actually set our state to the new value yet so let's go ahead and do that so now all we have to do inside our handle video change is instead of console logging this out let's go do that and we'll do this dot set state and we can just pass in course modules for that there so that should be everything that we need to do so if we go back and check out this page again we can see that the second video is actually open by default because we gave that a status of true so let's switch that to false so now let's come back here see everything is collapsed by default but now if we click on the first video we can see that switches from the collapsed item now to the active item and now if we click on the second video we can see now the second video becomes our active item and the first video is actually collapsed so it looks like everything for that is now working all right so now everything is working on the react side of things what would be super cool as if we could set this up now so that all this data that's getting passed in for these course module items was actually getting fetched from our rails back-end so let's see if we can set that up so I'm gonna jump back into our code here and I'm going to pull up our terminal and what we want to do now is we need to create some models in our rails app so the way that I'm thinking about this right now might be overkill for what we need but it would be nice if we could set this up so that we have the ability to create multiple courses and each course had multiple sections in each section and multiple like modules or videos I think modules is probably a terrible name for this especially in rails so I think I'm going to call this episodes for that so of courses courses will have many sections and each section will have many episodes so let's go ahead and set this up so I'm gonna use a generator to create a new model and I'm gonna call that course and this is gonna have a title which is gonna be a string and a description which is gonna be a string so let's go ahead and run that cool and then we can go ahead and I'm just gonna do real CV migrate to migrate that and create that table cool okay so that creates our course table salads to will do another generator and we'll create another model I'm gonna call this section I'm just gonna also have a title in the description we also want to add it belongs to so we'll do course belongs to to create that relationship for the section and the course so let's set up let's go ahead and just also run the migration for that and then finally we need to run a generator to create our episodes model and this is gonna have a title a description we also wanted to have a URL it's gonna be like the URL for each unique video and then we also want to create a relationship so that it belongs to the sections table as we'll do section belongs to cool and then let's actually let's run the migration for that as well okay so let's go take a peek now at our schema so we're got a DB will go to schema we can see now that we have we have a new course it's table with the title description we have our episodes table with title description URL and it's added now the section ID with an index and then same thing for section with its relationship to a course so it looks like that's all good and if we jump up into our models we should see the belongs to relationship set up for us so if we look at section and we can see that that belongs to course and if you look at episodes we can see that belongs to section and then in our courses model we can actually set this up and say has many sections and then we say has many episodes through sections ok so now we need to actually add some seed data so let's say the course equals course creates and we want to create a new course in its title hello world and a description of create a react app with Ruby on Rails so I'll create our course and then what we want to do is we're gonna create a new section so we'll do a section dot create this will also have title make chapter 1 we don't really need to worry about the description for this I guess and then we actually would need to add course we'll set equal to course to create the relationship there and now we want to create our episodes will do episode dot create and then we actually want to make this an array so we can add multiple episodes and then we can actually let's jump back over into our react code here and let's just copy over the episodes that we added to our state initially let's just paste that into our seed file here and then let's get rid of this and let's get rid of this and then what we want to do is want to add a URL and we can actually just grab the URL here from our Jumbotron and we can just paste that in as a placeholder for now so for each episode we have a title we have a description we have a URL and then we actually need to set the relationships we need to give it a section ID that will set equal to this section that we're creating up here so we'll say section ID equals actually going to do section and so that equal to section and that should work so let's add that for each episode and now let's see if this works so in here I'm just going to run rails DPC cool nothing exploded which is a usually good sign so let's see real see will jump into our column we'll just make sure that we have that data now so maybe of course start first it looks like we have our course we'll do section not first let's make sure if we have the relationships with your course at first on sections see if we had the section side to that and now we want to check and see if we have our episode so the episode dot like limit for cool so we have all of our episodes I don't know why I did limit because just an all huh but it's also let's make sure that we have the relationship from course to episodes will do before I stop first on episodes okay that's not working so let's see if we go back over into our models we see we have course has many sections has many episodes through sections section doesn't have the has many relationships so we need add that's has many episodes back here let's close that go back in our rails console and again we'll do course stop first dot episodes cool okay so now all of our relationships are working on that end so now let's actually let's create okay so in my controllers I'm gonna create a new route inside of my pages controller I'm just going to call this like episodes I guess we can change that later if we want and inside of this we're going to say episodes equals course for now we just wanna always grab the first course and there just want to grab all of its episodes and then we can do render JSON and we can say data and so that equal to episodes okay so now inside of our config we need to add a new route for this so config routes some RB this will add get episodes to Paige's episodes [Music] okay so now what we want to do is we need to add Axios to our project so we can use that to make the get request from our react components out to our rails back-end so when it had access here and now we can jump back over into our home component we can actually import Axios from Axios here what we can do inside of our home component now is we can do component did mount and inside of this we can do Axio stock yet when we get request to slash episode it's JSON and then we want to add a dot then we'll do data with an arrow function and we'll throw a debugger in here and we'll do the same thing for our catch case so do catch same thing so let's see what happens now if we fire up our servers and we try this again so long rails s here and when we do dot slash bin slash web pack dev server here and actually back in our controller let's just throw a bye bug in here so we can see what happens so I'm going to go over here and we should open this up and if everything works out we should hit our by bug on the back end and then we should end up hitting one of our debuggers on the front end summary reload this and if we check this now we can see if we hit the by bug in our episodes path so let's see what the value for this is cool so we have all of our episodes that we just created so I should get rendered out as JSON we should now see that so we should hit a debugger now on our front end so let's go ahead and continue through that and we hit our debugger we're in our dot then which is looking good and then we have this data so let's see we've got data and inside of that we have data again and then we have data again we have data again inside of that we have our array as you probably should rename that somewhere along the way but for now it's probably fine so let's cool though so now we're getting back our data from the server from the rail side of things it's pulling those episodes out of our database so what that means is that we can actually use those to fill our state and pass that down into the items here so let's see if we can set this up so I'm gonna jump back in here and I'm just gonna get rid of that by bug and then back over in home KS so what we want to do is to see we're gonna get rid of this so by default let's make course modules just an empty array so the first thing we could do is we can basically take this response data that we're gonna get from the server which is gonna be data updated that data we can map over that and we can make the placeholder for that data everyone do an arrow function and what we could do is we could well so let's start small so let's say first things first let's say I do let result equal an empty array then what we can do is basically say for each item that we're getting back from the server we can do res dot push and then we can kind of set this out the way that we need to so we could say like ID goals data dot ID we can do title equals data title description data dot description and then we can set all these to have active false as the defaults and then what we can do is we could say this not set States and we could make course modules equal res basically and I think that that would work let's take a look and see what happens if we do that so yeah that's that's working so that's a starting point where we're basically now getting the data from the server and we are setting it into our state and our react app and now we're rendering out each item based off that data so now let's see what happens if we add a new episode to this so I'm gonna kill the rails server for a second we go into our console what happens if we do a new episode new episode that title I don't I'm doing this way will do episode title equals five getting data from your rails server and will do episode dot section ID equals one will check to make sure that's valid it is we'll save that and now let's see what happens if we fire our server back up and rerender that page what we're here reload that cool now we can see that it's pulling the next record out of the database and so now just like that we have an additional episode in our sort of table of contents of different course modules [Music]

Channel: zayne

Views: 24,944

Keywords: ruby on rails, react, react.js, webpacker, react-on-rails, styled-components, bootstrap, ruby, javascript, rails 5, rails 6, course, mini course, webpack, webpacker gem, react on rails, react-rails

Id: B0SxxHAImhc

Length: 62min 0sec (3720 seconds)

Published: Sun Sep 29 2019