Build a React App with Ruby on Rails

it is Saturday morning and I thought I'd do a little quick video on something that I've been playing around with lately which is building react apps with Ruby on Rails so generally speaking there's kind of two main ways to do this and one of the ways which is more I think common way up until recently and might still be is basically to create two completely separate applications so you have your react front-end application and then you have this back-end rails API and then what you can do is make requests from your react app to the rails API and that's kind of how the two would interact and then how that might look from a production standpoint is you might deploy the rails API portion of your app to you know Heroku or similar and then you can deploy let's say the react portion to something like search on Sh and basically just make API requests from your react app to the rails API you've set up and that's kind of how the two would interact so now there's a second way that you can also do this as of I think around rails 5.1 ish and what we can do now is we can actually build everything housed in a single directory which is what we're gonna focus on in this video so let's just jump into it you can see I've got my terminal pulled up over here so I'm gonna go ahead and create a brand new rails app but what we're gonna do right out of the gate is we're actually going to set this up with react and it's really easy to do so what we're gonna do that you might be familiar with is you can do rails new and then the name of your acts so let's just do react app but where this changes for our purposes is I'm gonna add dash dash web pack and then I'm gonna set it equal to react so now when I run this it's gonna build out our new rails app but it's gonna set us up to actually use react so I'm gonna go ahead and hit enter and you can see now it's building out our rails app but what's going to happen is it's gonna run a couple of additional commands after it goes through the basic rails app setup so you can see it's running through that now so we'll just give that a minute so now that that's done running you can see we've built out our new rails app but we can see right here is that we set up a web Packer to support react so let's go ahead and CD into our new app so you can see now I'm inside of the new app that we just created so I'm actually just gonna go ahead and open that up and sublime so we can take a look at it really quickly okay so now we're inside of our new rails app and everything here should look pretty standard for the most part but there's one new thing that I want to highlight as of I think rails 5.1 if we jump over in an app what you have now is a JavaScript folder and this is where all of our react is gonna live so if we look in here you'll see some default files that they've already added for us so you can see as hello react JSX file so if we look at this you can see there's this hello Const you can see it's basically doing hello and then prompts name and then they're passing in the name react down here so it's basically just a simple little hello world that they put in as a demo for you right out of the gate so now I think what would be helpful is to kind of work through how this actually gets rendered into the view files of your rails application because as of right now if we were to fire up you know our rails server this isn't going to show yet for a couple of reasons one we haven't actually set up a root path and two this isn't getting rendered into any of our view files yet so they kind of explained how to do this up here but let's just run through a quick example so what we're gonna do is I'm gonna create a new page as a controller and set up an index for us and then I'm gonna set up the root of our app to go to that pages index and then what we can do is inject our react into that new file so let's jump back into the terminal and I'm gonna go ahead and create a pages controller using a generator so let's do rails g controller pages and then I want to set up an index method so I'm gonna hit enter and that'll generate a new controller for us cool so now if we jump back into our app if we look at our controllers we should have a new pages controller with an index method we do so I'm gonna jump in and config and I want to set up our route path so I'm just gonna get rid of this new route pages index and now if we fire up our rails server using rails s and our terminal when we navigate to local 3000 the default root page of our app will be our pages index so what we can do then is we can jump into our views and we can jump into pages and index here and what we want to do is basically inject that react from our JavaScript folder into our index file here so in order to do that if you look back in this file they give you an example here of the JavaScript pack tag so what you want to do is just copy that and over in our index file we can just inject that here so now let's see we're running our server so we should be all good so now if I jump into Chrome and go to localhost 3000 cool so we can see just like that we are now loading our react components into our index of you file okay so now let's expand on this a little bit more so I'm going to create a components folder inside of our JavaScript folder in our app here and then what we can do is start creating our own components to expand on this so I'm gonna do a new folder and I'm just gonna call it components and inside of that let's create a new file and I'm going to call that app a s and now what we want to do is in this file we're going to import react from react and then we want to create a new class and call it app and our class is gonna extend react component and then inside of this will do render and then we'll do return and then inside of this we'll add some custom code so let's do our own just quick little hello world just so we're comfortable with creating a components folder creating our own components and then injecting them back into our page so inside of this I'm just gonna do you know div hello world and then let me fix the formatting here and then down here I'm just gonna do export default app so now what we can do is back in our main page and I'm actually I'm just gonna rename this to index J s so now we actually don't need a lot of this so we can go ahead and delete pretty much all of that clear that out and what we want to do is I can delete this too we want to import our app component from the components folder that which created some we do import app from components slash app and then what we can do is we can just get rid of this and replace it with app and then back in our index we're putting in the JavaScript pack tag we want to change this to index just because I changed the naming from hello reacts to index Jess for that file so now if we go back in here and we refresh our page we can see we now have our customized hello world message that we created in our app component there cool so now we have our components folder and we've built a custom component and brought it back into our application

Channel: zayne

Views: 51,534

Keywords: react, react.js, ruby on rails, ruby, react apps with ruby on rails, react.js with ruby on rails, rails react, react.js tutorial, ruby on rails tutorial, react rails tutorial

Id: 5F_JUvPq410

Length: 7min 4sec (424 seconds)

Published: Sat Jul 07 2018