Build A TodoList Fast with Ruby on Rails and React | React JS Beginners Project (2022).

in this to do series we'll be using a framework called react which is a javascript framework as well as ruby on rails to make a full stacked to-do application you'll be able to look at the active to-do's those that are completed as well as delete them and make modifications to them such as marking them as completed you can then add them to your list and this will go straight to the database and you'll be able to view them directly within the application this is a disclaimer before watching this video so this is going to go over a specific rest api framework with a specific front-end framework so if this is not what you're looking for then maybe this is not the video for you so remember that everything described in this video is not only in the title but also in the description of this course so if we're not using the framework that you want or is if this is information that you've already watched before then we ask that maybe this is a video that you should avoid now if this is something that you want to learn such as building a to-do list with these technologies then go right ahead because we're welcome to all of our students but just remember that everything about this course is in the title and the description so from there let's continue on to building our restful api and building our front-end application in this video we're going to talk about installing ruby on windows so right now i'm using windows 11 but this same process can be done for windows 10 windows 7 but for future proofing this video i'm doing it on windows 11 so you can do a download and install the latest version of ruby with the dev kit so you can download that and this may take a while i already have it installed but once you click on the installation you can go to your command prompt and test your version of ruby so right now i have version of ruby three now that we have ruby installed we'll actually check that our ruby installation is working so we have ruby version and our version is 2.7 we'll also want to globally install rails this can be done with the rails command gem install rails now it's already installed on my computer but what you'll do is you'll type gem install rails next you want to do is a rails installation rails new to do list you'll do dash dash api and you'll set the database to postgres so rails new to-do list api database postgresql this will create a new rails project for you this may take a few minutes it's fetching all of the gems and dependencies and now it's done it's ls cd into your to-do list and open it in visual studio code to make sure that it's working we'll do braille's server and we'll have the port set to 8 000. this also might take a few minutes so just be patient and it will run the server you'll see that the application is starting in development let's do control click and our application is currently running now one of the biggest issues that you'll run into is it tried to connect to a database but we'll focus on that later don't worry about this for right now now that we have our application running there are a few things that i want to set up first first we're going to create a model for our to-do's so we'll run rails generate model to do and we'll set the properties of our model we'll have title and set it as a string and completed and let's set that as a boolean this will generate a model class for us as well as a database migration we'll also want to create another migration rails generate migration and let's do feet to do's and actually let's just check that our migrations are already there so we'll go here config go to db migrate and look at our migration so we don't actually have to manually create our migration that's another cool thing of rails so we have our string and our boolean next we'll want to go to our configuration and configure our database so inside of your database.yaml file you'll have a development database and in my database i have a rails database so i'll set the database name to rails to do i'll set the username to postgres the password mine is code brains my host is localhost and my port number locally on my computer i'm actually running on a different port number all of this will be specific to your machine so don't focus too much on this having the same username and password as me just make sure that your postgres has the right information you should already know how to have postgres installed and the database name username and password i'll save this now what i'll do is i'll run a rails db migrate this will migrate this information to my database once i go here i'm going to go to schemas public look at my tables let's say my columns my id title completed now let's try to do rails server port number and then 8 000. now we don't have any routes but we will get rid of the issue with the database so this works perfectly fine we have our rails version now that we have our database connection set up we're going to create the controller file this can be done with rails generate controller seduce this command will allow for us to create our controllers and we'll be able to send requests to each of the routes inside of that controller we'll also have to add a route or list of routes to our configuration routes dot ruby 5 so what we can do is resources and to do's save this and do rails or else this will also take a while but you'll be able to see the list of routes that you can connect to and these are the routes that you're looking for to use you have your get post and your other get for an individual id patch put and delete in this video we're going to create a do so first we'll actually go to our consoler file and this is our to use controller inside of this you might see any methods or functions but we'll first have to create them do private and these methods can only be accessed inside of this controller and do a method called set to do inside of this method we'll do a to do equals to do dot find and we'll have the params here after that we'll do method to do programs and we'll set the allowed correct so params dot required or require to do and we will permit id title and completed to be set this is extremely important so what this basically does is this will get a to do based on the program of its id and if you're creating it to do you can send id title and completed another thing that we want to do is we'll have want an action called before we hit each of these routes so we'll do a before action and we'll call set to do and you'll only do this before a set of specific methods so we'll do show update and destroy we'll go over these methods and some of our next videos but for now just understand that set to do is only called in show update and destroy also you have to fix this as well so let's start off by creating a create method so def create then we'll set our to do equals a new to do and this will be ours to do ramps so this is the information that we're getting here and the allowed parameters will be id title and completed so we'll also call if to do dot save we'll render json and we'll render the json of the to-do now what will we do if there's an issue for an error well i actually call else we do render we're doing json we'll do the errors that display and we'll have a status of let's see i think a good status for this would be on entity so let's make sure that we spell that and we'll do end so let's save that and let's try running our server to make sure this works because we don't want to throw any errors let's also make sure that we at least define the other methods and let's say show we have update and we also have destroyed so let's save those and go back to running on server rails server port 8000 let's see what this error is so we have our before action and we actually forgot to place this this is very important if we go back and run our server again we've created our to do now let's check the database now that we have our to do created let's actually start off by creating a few more to do's do anything let's say do something else and let's say do everything perfect or do you do everything so we'll actually fix that later on and do everything so if we want to show all of these what would we do let's go back to our controller and we'll do at to do's equals to do all and then we will render the json of to do's now in our show method we'll do something else we'll just render the json of to do now what you're wondering why don't i already clear declare to do the reason why is because set to do is already called so anytime i pass a parameter in here it's accessible to show update and delete so i don't have to continuously declare this if i run my server again and i get my to-do's i get a list of the two to these now if i just want one of them i can get them by my d see you have the id here i have the id here and i have the id say for instance i made a mistake with some of my to-do's or if i want to change them from completed or not completed to complete i can actually do this inside of controller i can go to update and i can do if to do update and i can call to do grams let's make sure i do an x i just like to close these up first what i'll do is i'll render and i'll do the json at to do otherwise i'll do render json to do dot errors and i'll have the same status here so let's check that out i'll restart my server and let's say i want to update this it's true and send it so now it's true if i get all the to-do's this is now true now here i have a duplicate they have the same information the same title now even even though i could change this say for instance i want to delete it i can actually call the destroy method on the to do and because we already set the to do in our set to do method we don't have to set it again let's save this to do dot destroy let's restart the server and let's go back here let's check out our to-do's so i have one two four now that we have our rest api running one of the key things that we're going to want to do is create a new react application so let's do this here we'll do npx create react app and let's name this react to dues so this will take a few minutes to install depending on your network speed and npm is notoriously slow um this will download the packages but i guess it seems for me that this installed fairly fast now while that is installed let's take a look at the ui framework that will be used we'll be using ant design and design is a really cool ui framework and it integrates really well with create react app and it has some awesome components that you can use so it has everything from buttons to pagination to date pickers forms and input and we'll be using some of these common features so let's check on our application it's still installing after the several minutes of the initially long install of react what we'll do is we'll cd into it cd react after that we'll actually install ant so let's go here and you can do this with and yeah so install and i hate that they recommend that you install vr but you can use yarn add or you can just do this npm install ant d save and you really don't have to use dash save that's just to carry over from older versions of npm but now um it automatically saves it to your package.json file this will also take a few minutes but after this we don't have to worry about installing any more dependencies and now that we have ant design installed let's actually add it to our project so one of the key things that we'll want to do is we'll import it so in our app.cs file we'll do this we will open this in visual studio go to the source file and let me remove all of this add this file and test it out by removing all of these and importing let's see we'll import a button from ant design we'll do npm start run this app on port 3000 the initial build always takes a while so this may take a few seconds but trust me this is literally the longest part of this tutorial because you're building everything pulling everything down so don't be concerned if things take you a few minutes for you your first setup of this project react applications are notoriously slow for their initial build and we have a button which works great let's inspect it and it's a button tag with a span in the middle awesome so we have ant design installed in the next video we can start um building out this now that we've created our react application let's actually set out the file structure so i'll actually create two folders called services and another folder called components so both of these will be in the source folder inside of our services folder we'll create a new js file and let's name this to to do service dot js awesome now in our components we'll have all the need for our application and i just started the react application but i go back here we have our new file let's name this to to do form dot js x i want this to be a jsx file another one will be let's name this to do item dot jsx another one will be to do list dot jsx and let's have a cs file accompany that so to do list dot css and let's have one more we'll add some tabs to this so let's do to do tab dot jsx so that's going to be the basic structure of our application in the next few videos we'll start creating each of these files so for part one of building out this service we're going to have our base url so let's start off with a constant of base url and recently i just changed the um endpoint for this um rest api so i'm going to set this to localhost and change this to port 8 000 and to do's so but you can change this to whatever you want so it doesn't necessarily have to be this um you can also use process.emv variables which is pretty awesome um if you go to let's say for instance if you create a dot emv file you don't have to do this but sometimes this is easier especially when deploying dot emv you can actually set this in your emv file so i think it's like react underscore app underscore api underscore url and you can change this to something like http localhost and 8000 save that and if you go back your services you can create a template string and just do something like let's see here it's i think it's process dot env dot react let's just go here and copy this just to make sure that you don't misspell this to do's that way we can always change this in one spot and if we deploy this we just have to set the environment variable awesome let's create um a method for getting our to-do's const equals load to do's or it's actually const load to-do's and we'll do return fetch base url then response and we'll return the response dot in json let's do another one const get to do and we'll pass in an id let's do a return fetch let's say base url slash id then we'll do the same thing so we'll get our response and do response.json awesome so we created two methods that allow for us to get our to-do's all of them and also get them now that we have our services for getting our to-do's we're actually going to create a service for creating our to-do's so let's do an export const create to do and in this service we're going to use our to do as a parameter awesome next we're going to return fetch and we're going to have our base url we're going to have the method as post we're going to have headers let's set type we'll set this to an application json and we'll have our body so let's have that to a body will have that as json dot stringify in our json.string5 method we'll have a title put it to to do dot title and will have completed to to do dot completed so we have all these properties next what we'll do is then response response.js and there goes our method for creating our to-do's now the same method could be used for updating our to-do's all we have to do is copy and paste and let's say update to do and this time we're going to have a template string let's have a base url as well as our to-do dot id perfect we're going to change this method to put and we're also going to add the property of id so that's our update method awesome one last method we'll have is our delete to do so enhanced delete to do and all we want is our id let's just return fetch we'll have the base url and to do id let's just do method delete then response response.json so we have our servers created and so let's start off by creating a portion of our to-do form so this will be part one of this video so let's start off by importing react from react also we'll also be using some components for ant design um let's do from ant d i'll be using the form component row column button and input awesome then i will also be using the hit design icons plus circle field so you don't have to install this package this is already installed inside of and design also next what i'll do is create a component to do form equals let's have this parameter here export default to do form now because i want my on form submit to be specifically for this form submit so i'm going to pass this in as a prop on form submit this actually created in another file but for now we'll just worry about this here and we have a on finish function const on finish we'll have on form submit what we'll do is we'll pass in the title let's go to form dot get field value i'll have this as title and also completed will be false so this will always default to false and i just want to console.log the form get field value and that'll be title and form dot reset fields so let's go over what we're doing here so from another component we're going to pass in the function of on form submit and we're going to create the use form get the form from the use form hook and on this we have our title that's being sent and completed value being set to false by default and this would be the first portion of our component now the next thing that we'll do is create a form and the next couple videos we'll go over the layout of okay so we're going to finish up our form and i made a mistake here this is actually supposed to be returned okay so let's see a few things here we're going to want to set the form property of form the next property of on finish we'll set this to on finish layout this will be horizontal and let's give a class name to this form and set that to to do form awesome and let's format this the next thing we're going to want to do is have a world and we're going to use the property of gutter and set this to 20. we'll have two columns and let's see we want to choose some sizes based on the screen but we'll set extra small to 24. we'll set small also to 24. we'll set medium to 17 set large to 19 and we'll just set extra-large to 20. this just changes some css properties on this column let's copy and paste this but we'll have the numbers changed based on the size let's do 2424 we'll set this to 7 five and four you also create a button and put the text of add to do let's also have the plus circle field in there as well let's put the button type primary html type and put this as submit we'll also have this as a block element cool in the next video we'll finish up our form item and um then we'll move on to our next couple components in this video we'll create our form item so let's do form dot item and let's see here we'll have the name let's set this to title and let's have some rules let's say required equals true and let's have a message this message can be this field is required let's save that and also we'll have an input it's a placeholder let's come up with what needs to be done so let's look over this we have our form item we have our button everything looks good so our c form is in this next video we're going to create a to-do item so in our to do item file we're going to do react and also use state also going to import from aunt d again let's do a tool tip a tag list button pop from and a switch also more icons we'll have this let's do a close outlined as well as a check not one awesome we'll create our component and we have our component where we'll have some props of let's say you pass in the to do we pass in on to do removal and on to do toggle so we're going to pass in the data of our to-do we're going to pass in um a method for removing to the to-do as well as changing properties in the city so making it complete or making it not complete let's also return and what would we like to return let's say list item i think this is a good type to have a list item and what else i'll say let's have some actions so inside these actions will have a tooltip okay let's move this here and let's format this this can get kind of tricky so just to get rid of some of the errors let's actually just have the information with the dude first and then start working worrying about our actions let's just put a div here just get this out of the way let's have the class name as to do item and have a tag where we will display the to-do title inside of the tag we'll have the color if the to do is completed we'll have it as cyan otherwise we'll have it as red and have the class name to do tag awesome in the next video we'll worry about the actions that appear um what will happen is we'll have a pop-up that allows for us to confirm now that we have our tags created let's actually hop back to creating our actions so inside of actions inside of this prop we have an array so this array actually takes two values one will be our tooltip awesome and the next one will be a pop confirm so let's switch over to our tool tip really quick let's have title if it's to do not completed as completed awesome so inside of that we'll also have a switch have a few properties check check children and let's have this as our next property unchecks children our next property on change let's have this function want to do toggle and we will pass in our to-do and default checked and that will be to do dot completed awesome so now we have our switch and our tool tip now in our pop confirm we'll have a few more properties let's have title let's say something like r you sure you want to delete and on confirm so what should we do with this on confirm we'll have a function and this function will be on to do removal and we'll pass in our to do great now one last thing inside of here we'll have a button i have an x i have a class name let's set this class name to remove to do button of the type as is this primary and danger awesome is there anything else we need i think so so remember we'll actually be moving over these inside of our to-do list let's have a class name of list item and also have a key so there we go for our to-do item next we'll start going into our so in this video we'll actually start creating our to-do tab so let's do import react and also use effect nope from react we'll also want to import some components from aunt d let's do from ant d layout row column and list and also import from let's say to do items so this is being aliased even though we called this um to do this is being alien state of study so const to do tab equals we have our component export and default to do tab there now we'll also take in some properties let's say to do's on to do removal and on to do tom awesome we'll also return this okay save and let's have a list actually we don't have to have this list like that we can just have something like this let's have a property of locale inside of this property we'll have empty text let's set this text to there's nothing to do now after our locale we want to have a data source now our data source will be our to do's we want to render the items so let's have our to-do's and for each one of these cities we'll have our 2 items that works in crop equals the to-do on todd and also on to do removal okay so we have our to do are onto the toggle and onto the removable perfect one last thing pagination we'll have this as let's say position bottom and also have page size i'll set this to 10. cool so that should be perfect for our to-do tab um we have our locale so this is going to be one of the longest most complicated components that we're going to make so far so let's start off by doing import from react and we're going to say well first of all we want to import react use effect next use state and use callback so all three of these we're going to use also we're going to import ant d like usual from ant d and let's say tabs layout row column input and message cool we're going to also import the to-do list dot css file so right here i'm going to import this import to do tab import to doing form let's say import from think to do delete to do load to do's and updates awesome so we have those if there's anything else we need to import let's do const we're going to want to take this tab pane tap in full tabs and construct get the content awesome so we're not done yet we're going to have our to-do list okay export default to-do list there after that we're going to worry about our state const you state you can do this four times going to have the properties of refreshing set refreshing and the default property is false the next one we'll use is to do's and set to do's we'll set this to an empty array let's say we have active to do's and set active videos walls have completed today's set completed to damage let's make sure we have this set fitted to news and awesome next we'll have a handle submit function handle let's make sure that this is a const handle form submit and we'll pass in a to do do console.log and [Music] we have our to do to create today over to new and then we're going to call this method that we are going to create called on refresh i'm going to do a message dot success to do added awesome so let's do um two more and then we'll move this to another video we'll do handle remove to do to do let's say let's just without console logging it we'll do delete to do do.id then on refresh message dot warn let's say to do removed and let's do one more const handle to do let's do this handle toggle to do status that's a better name we'll also pass enough to do like usual and let's say to do dot completed okay so to do dot completed is going to be the opposite let's do update to do and have this to do then on refresh call that method message dot info to do status updated okay so there we go so these are these are our methods for making changes to that to do in the next vid in this video we're going to create our methods for refreshing our screen so sometimes refreshing state in a react can be complicated um so i'm going to create two methods const refresh and another one called const refresh and i'll actually have this as a callback so use callback cool so let's save this um for our refresh method let's do this we'll call load to do's dot fin we'll have our json set to do and pass in that json then we'll have set active to do's and let's say json.filter to do to do dot completed equals false and let's do set completed to do's we'll do something similar json.filter where each of our to-do's will be do dot completed equals true then i'm just going to log the fact that my fetch has been completed you can remove these later once you've tested these next our callback now this is going to be asynchronous callback and also so we're going to check that it's refreshing and we're also going to use effect that monitors on refresh so let's just do refresh our use effect only has to worry about our refresh and let's do set refreshing to true let data equals weight load to do's set to do's equals the data set active to do's equals data dot filter where we have the to do equals well each of these are looped through and you've completed false set completed to do's data dot filter and we'll set our refreshing to false let's say refresh state and refresh it let's check this out one one more time so anytime this is called it will just refresh everything cool okay now that we have all those methods set up let's actually go to building our ui let's say return and i want a layout cool let's do this class name layout and i'll also have some content i'll set some styles style adding let's say zero 50 pixels i'll have a div let's see let's call this to-do list we'll have a room and in that row i'll also have a column let's spin 14 the offset of five if anybody's familiar this column will just be 14 units and offset by five units let's have an h1 tag and i'll say code brains to do's and this is where i'll have my to-do form on form submit handle form submit i'll have a break and let's check on one thing really quick in our css file so i do want to talk about that in our css file let's do something like this to do list i'm just going to set the margin 24 pixels the padding i'll set this also to 24 pixels and the background let's change those so just to get this out of the way let's move back on to our tabs tabs we'll have our default active key equals all tap pane i have three of these so this tab and its key is all set this to active key all parking active tab and let's say complete key fleet so the next thing we're going to do is have our to do tab let's say to do's equals excuse on toddling equals let's set this to or it's to handle total due to status and let's do on to do removal handle remove to do let's have the same line for all of these but we'll have this as active to dose and complete to this let's format this there we go so let's check our files we have our to do tab to do list to do item to do form the last thing we're going to want to do is go to our app js file so once we're inside of our app.js file you're going to want to make sure everything appears properly here save that and refresh the screen and it's actually compiling so this might take a long compile also in your api make sure that you have cores enabled also we did make a mistake here so we do see that in our list we have our data but it's not running now this error is actually caused by not having the renderer here if you go back now we have our to-do and to do let's see what's going on can't perform a rack state update on an unmounted component so there seems to be a memory link let's see where this is let's go back to our file most likely it's inside of the to-do list let's see here oh found it pretty quick so load to do's do something and we have our suit and there we go awesome let's look at our network quest get the payload headers put 52 awesome here's our to-do list and one last thing make sure to

Channel: Skilful Learner

Views: 513

Keywords: react project, react todo, react todo list, react todo list app, react todo app, todo app react, react todo list tutorial, react todo list hooks, react js, react, react js project, react project tutorial, beginner react js project, beginner react project, todo app, todo app list, todo app react js, react tutorial, react project for beginners, ruby on rails project, Ruby on Rails 2022, ruby on rails with react js, Ruby on Rails for beginners, react projects 2022

Id: tkLBC3GZQsE

Length: 97min 56sec (5876 seconds)

Published: Sat Nov 27 2021