Learn With Me: Ruby on Rails + React! Development Environment Setup

hey guys so today i'm creating a new video series it's called learn with me and we'll be focusing on ruby on rails and react framework this is a little bit different outtake on my series i'm very new to ruby on rails i've probably not written any code yet except for little things here and there so what this video series will do is give you a beginner's outlook on how it is to learn ruby on rails i'll be trying to create this series throughout the week yeah if you if you're i guess a disclaimer is if you're looking for a an expert on ruby this is probably not the video series for you uh you should go look for another video series on youtube where it's an expert overview but if you're looking for a beginner you know sometimes people say that you learn best from a beginner because you can really see their process or their you know what they have trouble with so this will give you a nice overview of that i am not new to react i i'm very familiar with the react front-end framework one thing that i don't have to learn in this video series but ruby will be very new for me so this diagram just kind of shows you what we're trying to build uh what the ruby on rails framework will come with some commands that we can generate our application which we'll do just in a bit uh and the ruby part of it will be just the rest apis and then we'll create a javascript folder inside of our ruby app to create our front-end code the front-end code will just end up in one index.html which is just a single-page application and inside of this single-page application we'll call our ruby apis so it's a very simple architecture we're not going to look at anything outside of this diagram because you know if you look at a application that needs to be in production you need a lot more things different parts of the system but we'll just be focusing on the api the front end that's all let's move to our terminal and then we'll start creating our application so here you can see in my terminal we can already see a ruby version so this is item and it shows me what version that we're running so currently it's 3.0 and we can confirm that with ruby dashby and also rails-v so these are the versions that i'm running right now if you want to compare with your versions the first thing we need to do is maybe just look at the help text for the ruby command line so we have one command called rails new and it looks like there's a lot of different options that we can provide we'll just start with rails new and i believe it's the application name we'll call this book reviews and dash d will be for database yep so d d is database and we'll be using postgres so so postgresql and then dash t and we're going to be using react so this is one one command that we do have to use called webpack and then there's another thing called skip coffee to not have coffee script that's not something we need right now in this application anyway and that should be all so it's going to create a bunch of new files for us now let's get our vs code up while that happens all right so there's probably some extensions to install let's start directory here look we have a new folder called book review so we'll go inside of that folder and now what we need to do is actually set up the database ruby will have a migration system for you so first thing we need to do is probably create the database so we have the rails command line again there will be some new commands for us so here you can see db drop db create so we'll be using this command right here so it'll be rails db create so it says it created book reviews development and book reviews test now to confirm that what we can do is go into our any kind of database management app and then here we can see two new uh databases here so let's just open the development database and see what's in there no tables that sounds good because we haven't really created any models or data or tables yet and let's just see if the server runs so we'll do rails i believe s for server so it says it's listening let's open our browser here and go to localhost 3000 yep looks like rails is up and running and we can kill that just for a test but this here is not react.js so what we need to do is actually set up our react folder so that we can start using that and that will be in our app and javascript folder so this is all our javascript here now it says jsx we want to use typescript for this application so that's what we'll set up here and also load the javascript app instead of this rails mvc framework so the first thing we need to do is basically create a controller to serve our index file so the index file is where our react app will live and that will be the only index i mean html file that we will have in our application so we can use the rails command line again for creating a new controller so this will be the controller name and this will be the path that we want and it creates a bunch of new files for us so let's see what those files look like we have a sas file for css we have a home controller with the index route we have some kind of helper module and then we have the actual home html erb file which is their mvc framework file and we have a routes file so from all of these now what we actually want to do is update our root routes so that'll be in config and we have our routes rb file so this is something that's already created for us but we we have a get request here which in all of our ruby application we just have one get request right now but what we do want to do is make sure that the root root of our application so just the slash not the home uh we want just the slash to be home and then the index route and we're going to delete this get request because we don't really need that and then if we open the home.html the erb file we have this kind of controller now what we want to confirm here is that when we run the rails server when we run the rail server we have the new home page being served instead of this this one here looks like it's compiling and yep so if we compare compare this find me in it looks exactly the same and that's what that's what we're looking for so now that we've added updated our index file what we do actually want is to use the javascript files right so we do want to create or use our jsx files which are in this javascript folder so we'll open this jsx file and let's just rename it so that it doesn't look like hello react we'll just call it uh index dot jsx and then in the app js we we have some certain rails certain rails packages that i don't we don't really need to look at right now let's just focus on the index file so this is just some uh hello world type of code here one thing we do want to do is we want to find our root index file that that is being used by ruby so if we notice in our in our index html that we just created with the command line we don't have things like the head tag body you know there's no no tags other than just the content so this is what goes inside of the body but we don't have the opening html tag we don't have the opening body tag head tag so we need to find that so that'll be in another html file which are called you know layouts so this will be a layout that ruby uses and that should be in our views layouts and applications so here we can see all of our html head body tag so yield is where our actual uh home you know other content goes and this is our entire app so since we created a new javascript file so this is the index jsx file we want to add our javascript file into the application that which will be our which is going to be our react application so we have to do a little bit similar to what is being done here in the in line 10 which is pre-generated i did not add this so what we'll do is add another javascript pack tag and this one will be called index because that's what we named our file here so this is the pack tag and that's in the packs folder that's where we get the index name here so i believe that's all we have to do here and we could also just add one more sort of boilerplate code here for our meta tag so this will be our viewport now this just i got from a different application and it just sets our content width and scale so we don't get any funny sizes so now that we've added this index pack tag here i don't believe we need any other javascript pack tag because we won't be using anything else stylesheet we can keep in case we we add some style sheets there and the next thing we should do is probably remove this boilerplate h1 stuff because we don't really care about what came with rails and that file can be empty so we can focus out on our react application and what we should do is create a new folder called components like we usually do in any other react application and what we can do is create a new file called app.jsx so what we can do in here is import react and we'll create an app constant function component so this will take props and return a div just for now hello from react and we'll just export that default or have a default export for that and in our index file we will just let's remove all this stuff here we don't need any of it or we do need react on actually and we'll import app from from our components folder or that'll be one level up and we'll just display the app here that'll take no arguments okay so let's go back to our html or to our browser and refresh okay looks like ruby comes with a profiler that kind of gives you how much time it took i have not seen that before interesting we'll keep that but everything seems to be normal and working because we can see it says hello from react and that's what we have in our app.jsx file so the next thing will be to convert this into typescript now to add typescript to our react and rails app we do need to run one more command called bundle exec rails and this will also include webpacker so we'll install via webpacker called typescript okay so now let's go and change our index and app files to typescript now once we change it to tsx it does complain that so we need to allow synthetic default imports here so looks like we need a ts config file or update rts config file so let's let's add that to true here and let's see if that goes away yep there we go let's go ahead and change our app file as well and let's run our rail server and see what happens okay let's go to our browser and everything still works fine so we have our typescript code running with rails okay so that's all that i will do in this video and in the next video we'll start creating the database models the apis and also some of the front end again there will probably be different ways of doing what i'm doing this is you know i'm very new to rails and this may not be the best way of doing something but i'm trying to follow the best practices that i can find online and create this application so if you have any tips or you know different ways of doing what i'm trying to do here which might be better do leave a comment below maybe it helps you know i'll try to learn whatever that you have to say and maybe include it in the next video that's all thank you

Channel: AmanScripts

Views: 1,504

Keywords: React, Javascript, ruby, rails, ror, react js, react, reactjs, typescript, UX, user experience, interactions, input box, learn react js, create an application, web developer, frontend development, programming questions, javascript basics, useContext, React Hooks, web development, context api, API Response, REST API, JSON, Parsing, Weather App, CSS3 tutorial, react tutorial, sidebar, m1, mac os, macbook

Id: YKl17U_tzE8

Length: 13min 50sec (830 seconds)

Published: Sun Mar 07 2021