hello everyone and welcome back to the react on Rails tutorial series and this one we're going to be setting up our Veet app but first we want to sort of change how our rails apis routes are working because as we go into the V app we're going to be communicating with the rails API we're going to want this to be versioned so that if we do any future modifications we have a bit of an easier time to do this though we're going to start in our GitHub issues so to do this so we're going to start in our GitHub app so that we can actually to do this though we're going to want to start in our GitHub repository reason why is we want to create like an issue that just says we're going to be working on those because we're trying to do this properly so you get a better idea of what this workflow is like so we'll come over to our code or to our repo we'll go over to issues click create new issue and then here we'll say like I don't know uh setup set up Veet react app and then in here we can add a checkbox list of things we want to accomplish they'll say like create a Veet app and then refactor API routes to use slash API V1 routing type stuff and then we can just click submit new issue so it's not like the best issue that's ever been written but this allows us to create a branch for it by clicking on this button under development over here you can go ahead and create this click create Branch it'll then give us this code that we can copy and then we can come over into our terminal in the root of our rails app and paste this in and this should move us over to a different branch we can now do a git status or we hopefully have no changes and then we can go ahead and get started so let's start by taking a look at our rails app as it is right now we'll come over to localhost Port 3000 you can see we're adding Ruby on Rails we can then go over to slash posts which has our posts in it with the newest one at the top so that's fine but there's a couple things we want to deal with here if you haven't used extensions before for your like development there's one called the Json formatter you can probably find it if you Google for it if you enable that one and then you come over here to your applications you can actually see the Json in a much better format for the parse you can still look at it raw but in the parsed version it's just a lot easier to read it's a lot better for videos as well the next thing you want to do is let's change this from going to slash post to like slash API V1 so we'll come in here we'll create a comment first say uh I don't know like API routes should be in slash BPI slash V1 the reason why we do this again if you decide that you want to let's say rename your tweets to posts you don't want to break the API for everyone else that would make you a questionable developer so you can just say okay now we have a V2 over API and then we common out the resources for the posts and then we put in one for the tweets for example but we want to do something like a namespace right for API and then we want to do a namespace for our V1 we can then tab over the posts and we can do an end and an end right here so let's save this and then let's try to go to slash post for example that's not going to work what we have to do now is go to slash API V1 posts this also isn't going to work though because it has an uninitialized constant API the reason for that is up here in our app we have our controllers we have our post controller but we have to actually create a new folder here call it API and then in our API folder we have to create a new one call it V1 and then in there we want to drag in our post controller if we do this and we refresh you'll see we still get this issue the reason is although we've moved this into the proper folder structure we still only have a class of post controller here we actually need to do a API colon colon V1 colon colon for the Post controller and that's actually going to allow us to visit our posts again this is a little bit deceptive because usually when you do this you're going to run into an issue with like trying to redirect to the post after you create them you can get some wonky Behavior so you are going to want to be careful with how some of these things are handled but I think for right now this should be good enough we can go to like post slash one everything should work out of the box so let's go ahead and let's create our V app but before we do that let's do a git status we can see we've changed a couple of things here let's go get add dot get commit and then you can either do a dash M with your message right here or we can just do it like this and we just have to name give this commit a title so we'll say like uh change routes to use the slash API V1 uh this fix probably breaks stuff though again write better commit messages than I do but what you can do now is hit Ctrl o enter and then control X and you can exit out of there so now you have that commit you can do get push push this up and then at any point you can come over to GitHub if you need to go over to your code or whatever repository you're using and then we can see we have some changes here for this Branch so this branch is now up and running super cool stuff let's go ahead and let's create this vdap to do that we're going to do an npm npm create uh Veet at latest this is going to allow us to create our actual project I'm going to name my entire front end just the client you can name it like front end you can name it V you can name it react you can name it you know if it's a dog app you can name it the kennel I don't know go ahead create client come down here we'll do a react app although you have other options and then I'm gonna go with JavaScript you can go with typescript but you're going to have to convert all of the JS that I use into TS which can be kind of a pain so I'm just going to go with JavaScript for now and then the last thing I want to do here is run a rails s to start this specific server and then over here I'm going to go ahead and CD out of here and we're just going to do a from our the root of our application I'm going to CD into the client directory and then in here I'm going to run a npm install because there's going to be some initial dependencies that get installed and then we can come over here to our side panel and we can see that we now have a client directory this comes with its own git ignore which should add the node modules to the git ignore list by default so that we don't add all of our node modules into our GitHub repo but there's a couple things we have to set up in here and the whole reason why we did the API routing in this video is because I want to do a npm install for DOT EnV because I want to actually create a DOT EnV file here in the root of our client app so I'm going to say this is a DOT env.development for example and in here because we're using Veet I want to do a v to underscore as the prefix for this environment variable and I just want to call this the API URL and then in here I want to say localhost Port 3000 slash API V1 slash posts so now anytime that I need to access the API in our application here in our client I can need to talk to the rails app I'm just going to grab this environment variable so that I only have to change this in one place and then in the future I can create like a DOT env.production for example and then I can just put in the production URL in there so that it works just fine in the production environments if you need to you can come in your dot get ignore at the bottom here say like uh don't push up uh EnV uh files you dummy right and then in here we can just do a DOT EnV and we can add a DOT env.development for example and after we save this we'll see that this dot EnV file becomes great in our vs code because it's no longer being tracked by git of course right now we only have our DOT slash because our entire client directory isn't being tracked this should be good enough for now let's go ahead and let's do an npm run Dev to start our server and we can go over to this URL in our browser here and we can see at Port 5173 we are running Veet plus react so let's just start this this video by creating like our our post index page for example to do that we can come over to client SRC and then in our SRC we have this app.jsx if you're not familiar this is like your your main app file right here so we can get rid of all this and we'll just leave it as a as a blank thing for right now with this this fragment in it go ahead and save this refresh and now you won't see anything on the page if we put the word test in here though you'll see test immediately appears we have that cool hot reloading that comes with react you'll love to see it let's get rid of both of these Imports here because we're not using them and we're also not using this count so we can get rid of that as well now for how we're going to be doing this there's a couple things we have to do actually uh the first one is we probably want to create like our uh our router or maybe our nav bar I think a good place to start though is to just uh create this post index page and then we can worry about how we want to structure the rest of the react app so to do this I'm just going to say this has an H1 or this is like the react on Rails blog and then we can do a P tag below that that just says find this and or find this application layout in client slash SRC slash app.jsx just so if you need to when you're looking at like the the GitHub repo you can realize sort of where this stuff is coming from that gives us the the basics here let's give her this used State and now we can see this is being displayed on the page so let's go ahead after we do all of this and let's render our first component what I want to call this component is uh I mean it's kind of just a post list so let's just go with that we'll say this is the posts list like that we can save this you'll see that nothing happens now and the reason is we don't have this post list in our app yet right like we haven't created this so we're getting a not defined error so let's start by defining it now there's a couple ways you can do this in your SRC if you have ever used react before there's a couple different ways people structure this one might be you have like a components directory and you create all of your components in here another way people like to do this is you have like a features directory and then in your features you might have like your post feature you might have like a car feature etc etc and then you put like your your posts list in there uh and like the test for that post list so I think that kind of makes sense so we're going to go with that I'll go into the post and I'll say we have a posts or a post list yeah it's plural posts list dot jsx I think it's list though is how I had this and let's come over here and let's just say this is our posts plural list singular good God what a name now with this we want to import it right so in our app.jsx we have to actually say Hey you have this thing you need to use it to do that we can come in here and we can say import and then whatever we want to call this so this is going to be like our posts list and this is going to come from our DOT slash features slash post slash posts list that'll work we can now use it here we won't hopefully get that error anymore but now we're getting a different one which says it doesn't provide an export name default so let's come over to the component now let's actually create this component the export default is just saying like at the bottom of our page we have to export something like this but if we just export that that's still not defined right so we can leave this down here but we actually have to tell it look you have a function it's called posts list and it does some stuff and then you're going to export this now right now it's really not showing anything but we can come in here and we can do a return and in our return we can do some parentheses and then in here we can do our fragments just like before and then in here we can say uh posts list right and now we can see that's being displayed on the page so we just have to replace this with the ability to talk to the API grab all the posts iterate through all the posts list them all off and cool and unique way etc etc kind of a lot to deal with we could make it a little bit easier uh by you know abstracting some of this logic but for right now I think it's cool if we just go through and we we set this up in kind of a inefficient way that we can later clean up so to do that we're going to need to fetch some posts whenever we need to so in our post list we're going to have to do something like I don't know fetch posts from the API right and to do that we're going to need to oops we're going to need to have access to our API URL comes from the dot env.development file right so we have to import that we also have to import react but we want to right now grab this dot env.development file how are we going to access it though well uh in the root of our source right here we're going to right click new file we're going to call this like constance.js and in our constants.js we want to export a const called API URL which is going to be equal to a quick little check that says what is our environment right now if it's equal to let's say like test then we want to have a mocked URL so we'll say this is like HTTP colon slash mocked API URL so it's not real right if we're testing we're not using a real URL if we're in uh if we're not in test we're probably in development or production in which case we want to grab the import.meta.env.vite API URL just like this which will depend based on which environment we're running in so we can come over here we can stop our server we can run our server again we can refresh our server and that should be working fine we can come in here and we can import this API URL to wherever we need to use it in so this might be imported into like your services for example to do that we have to use some braces we'll say this is our API URL and then we're going to say we're importing this from uh I think it's dot dot slash constants or maybe it's double dot dot slash I think something like that which should now import it it's going to give me an error saying this isn't used but that should be fine hopefully now let's go ahead and let's do some of this logic so in our posts list here we're going to need to have a posts and set post which is using use state which means besides importing react we also need to import use State and I mean I'll just spoil it right now we're also using use effect so we can grab both of those we have our posts here this is where we're going to be storing them additionally if you want to you can set a loading or an error state if you need to just make sure that your loading is set to True initially and your air state is set to null and then in here we can say all right we have a return let's go ahead and let's get rid of this and let's uh reformat this a bit instead of just using these fragments I want to use a div and then I'm going to close it in this div I want to do a quick little posts which is coming from this post right here dot map and then we want to map each post the reason why we do this map is think of it like a for each Loop if you want to basically we're going to iterate through each of the posts and for each of the posts we're going to do something in here so we're going to start with a div which has a key equal to the Post dot ID and then we'll give it a class name equal to post Dash container so this is going to be our overall container div right so around each of our posts we're going to have a container that wraps around it and then in there we'll have a H2 and then in this H2 for now we'll just do a post title we'll clean this up later and then after the post dot title we want to have another one that is like the uh we can just do the post dot body if we need to we'll do that down here in like a P tag right not that we'll do that and then we can oops we can move this up like that save all this now by doing this uh you'll notice that nothing really happens right so the reason why is our posts are currently empty it's just an empty array which means this map isn't actually doing anything so the first thing we have to actually do here is we have to say all right let's grab these posts from our our API so we're going to do a use effect which has a bit of a weird syntax if you've never used it before but effectively what this does is it's going to run on your initial load it'll probably do a double render you'll probably get a whole bunch of headaches here to eventually find a way to only run this function once and the easiest way to do that is going to be some kind of like async function that you're going to to run now this async function doesn't need to do a lot effectively all you need to do is say this is your async function it's going to be called I think I called it like load posts and then for this load posts you're going to do a try and a catch block and this is something we're going to abstract out into a post service in the future but for right now really the only thing I want to do is say this is a constant response which is going to go to a weight Fetch and then this is just going to be API URL we don't need the rest of this now so we're just going to the API URL right here after the API URL we check if the response is okay if it is we set some Json and we set the post to be that Json if the response isn't okay we'll throw the response or you can you know cancel that warn it do something with it it really depends on how you want to handle this I'm not going to be covering error handling right now so for right now I'll just go with GitHub copilot suggested if there's an error during the try catch it'll say hey an error occurred uh console log it and then finally it'll set loading to false because we finished with this initial load so this is all fine and dandy we have this this function here but we do need to actually use this so how do we use it well right here we can just call load posts after we've defined it so we Define it and then we use it we can save this come over here and refresh and now if we come over to our rails app every time we refresh you can see here it started get post does some processing does the get for slash API slash V1 whatever so all that's working just fine the issue is nothing seems to be happening in our application it's because of this return right here this actually needs to be a parenthesis instead of this brace I went with the the old double brace there which is unfortunately not the correct syntax and then if we do this we should be good to come over here and refresh and now we should see all of our posts being iterated through now of course we don't have any links right now but we are just grabbing these through our rails API so if we stop our rail server go to a rail C and do a post.create we can do a title of hello world and a body of it's me and then we can go ahead and close this hit enter this will create it and now we can hit Ctrl D to exit out and run a rails s again to restart our server now if we refresh our react app we'll see that first little hello world appearing so we can see that that's working but I think this is a good place to stop for this video because we have something here and it gives us a lot of like increased flexibility for what we want to refactor later so let's go ahead and let's do a get status to see what we've changed which is we've added our client app so let's do a git add dot get commit Dash M I'll just do a commit message assignment I'll say added the V to react Client app we can go ahead and check our list here you can see there's nothing too incriminating that was added so let's go ahead and let's do a uh get push to push this up and now we can come over to our GitHub repo here refresh the page we can see we have these changes here so let's go ahead and let's compare and pull request we have this and we'll just say this needs to address or we'll say this addresses a previous issue which is issue number one set up the Veet react app so let's go ahead and let's create this and then after we've done this we can come over to the actual issue we can see we have both of these options here to check these off if we want to there is a way to automate this but for right now I'll just leave it like this and then we'll say let's go ahead and let's merge this pull request because I think it's addressed all the things we want it to and as soon as we merge this pull request that we say address is number one if we come over here we can now see that our issue has also been closed which we covered in the get tutorial the other day but I thought it'd be cool to just touch on this again so yeah that's gonna do it for this video in the next one we'll hopefully go ahead and add some of the other functionality and maybe think about how we want to refactor this because adding these API calls into each of our components will of course be cumbersome to say the least as the application scales but that's going to do it for now thank you so much for watching and hopefully I will see you in the next video