#109 Using React-Rails and Loading Data from Rails into React


In this episode, we look at one of many different ways to add the Javascript Framework, React, into our Ruby on Rails application. This tutorial covers adding react into the application and pulling and displaying database information in nested React components.
rails javascript javascript framework react 9:33

Early Bird Pro Subscription Pricing!

From now until Mar 01, 2018, save on the Pro Membership!
Get the Pro Membership for $9.00 USD per month while you maintain an active subscription.

  • Student & Teacher
  • $9.00 / month
  • Valid School Email Required
  • Same Access as Pro
  • Subscribe Now
  • Pro Membership

    Early Bird until Mar 01, 2018

  • $9.00 $15.00 / month
  • Access to Pro Episodes
  • Invite to Slack Channel
  • Priority Episode Suggestions
  • Ad Free
  • Subscribe Now
  • Teams
  • starts at $75.00 / month
  • 5 Users Minimum
  • $15.00 / user / month
  • Same Access as Pro
  • Subscribe to Teams
there are turning to ah to add a turn around and learned lessons and what their p n t s which is the jobs with hadn't read more than the idea behind react is at its component based which means that you have several different kind of jobs with components that to be we use within the application so an example of a component to be a tweet from twitter in a not a couponing to be the streamer the time more and so the timeline would be a component and it's composed of several nasa components which is the tweets and because the client side or he has all the information of what the component is if you'd be very fast with gregory new components so the only thing you would need from the server side would be to just one string which a rouse application can serve very fast the weather's made the different ways to use react with rails when i look at the react wills gem so will you say rails five one application with wet pack in there we once all react rails to him in there will say well we can do within our wills application to interact with the react opponents set to get soda will create a new wheels application and i'm just gonna call this template they will pass in the auction dashed ask what pack equals react this will go through in and stole the will said leticia in your will and saw what pack well as react if you don't already have your nuts on the assembly decide bruins all yarn and it shouldn't sell love for you then in their job i'll let the gym react rails the beach and rom bottle then in their terminal wicked eyebrows generate react install it within the app java scrip sulfur it'll create a couple announced red curry in there within the app comes with specs for it creates a application j s as well as a server rendering j s file snacks and just give it to a controller caldwell home with a page index this is just so we have something to their display are react up on it and then within the route starter be felt that has couldn't make this the would be used to whenever we get or locals port to me thousand and all display those controllers action next will create a simple react component which he did that with wales generate we act upon it and then the name of our component that we had that sense of the props and os is basically just a place holder or weekend has stayed up from the server to the client side and then that quiet side will kids in that data and then displayed appropriately and in our case will create a prop called reading so you'll see that we're the app java scripts company directory it created a hello world die j s if we look at this file even see that we're importing and a wii ecuador eddie most of the apocalypse with a creating a class hello world or extending this from the react opponent that we had this winter and a block and the important thing about react the only returning one block so with something like a day of you can return something like a day of it then another day of tag instead yet to make sure the only word twenty one in caps elated element and then you can have whatever in there the deed and then within our application h t m l you are being fall which is one of our away else we need dead end java script pack had an application that references to or at java script packs application on java scrip and then within are welcome index site each team out that year be weekend is called the react component we're calling the hello world component they were passing in the props and in this case were passing integrating with just the word hello self we enter application loaded we we've pressure page now though now see that we have our grading hello so we've created your first reaction opponent it we passed in some data in there we render did with interviewed you should run what baghdad server this will compile all the assets and your public folder under packs and as you make changes to the files don't we compile these he may had to research this from time to time if you're creating new j s files or if you rename one what a cool things with what pakistan as we make a change and save the file will see it automatically update on the client side then and and create a model called user and we're just gonna have a first name and a last name in here then i'll be sure to run real stevie my grade in a pool of the wheels console man create a few different users so manages to user that create then the first name it said to john in the last name one is set to go this guy a great day another user and the summer when it does create a jane doe i'd sit out the console in l we need to build a reactor pond and bella display this information what are what comes controller wouldn't have the ad users eagles to the user dot all and they should just returned all of the users million easy egg users as a prop within the component within the welcome index we have our reaction poem it there we could change the grading them to skin a call this new users that we had pets in the end users which is referencing will we said in the welcome controller today with an arrow hello world duck tales file which again is entered the app java script component hello world that tales the angle they get rid of this greetings on and some remember we do have to return a single element that we get several elements within this one but i'm just gonna leave the opening and closing depends there for now so that we would be called the stock props i users and this is referencing from our index n h t m l well we passed into the react come home at and from here we went to map through each one of these users there we want to call wave function it within the fox imported has sent a variable in i'm just an acog this user may need that would want to live through each one of the users and work and assign it to the variable years or so now we need to call another return again this return would an active has said one single element so if we have a day of we need to just as in this wind mill we get that same whatever with in there that we need to so what's in here that is when it has in the users first name and their last name like it creates a curly braces and at the disco user guide for some underscored name then i can also call user got less underscored name all this as work we might get air with the verify what we did rhetoric that's because we lived was something this can expect a key for each one of these savages said the key to the user data id so back at the application of we refreshed the page l the sierra john doe and our jane doe if you saw they were yet developer tools accent shouldn't you get some information about the components this was a processor best bet and so this all works however if we need to make some changes then wouldn't have to come into this hello world they would add to make the changes here whenever i want to extract this into its own component so they'll wait if we had to make a change that would just make it change 'em one small place that way we're just going to bed a bit the bullet and within a year the within our terminal good to score the call rails to a great reaction comment and instead of this i'm heading be hello world and is getting create a company called user then within the app telescopes components be created the user that j s fall they're within the user jay as well adjusted or places in the day of the article on it they within the hello world j s well lead to create a user component in there we want is that the object to the user one for this isn't enough because the users my yet to find so we need to import the user then reference or user file that we created then also within the user j s well we won't be able to just simply call user because we need access the props to a friend of each one these users he needed called the stock props in a week and all that user id in the first name we're getting a user from e. hello world that j s well or we can sit in here then the users as the data that we're getting from our map so if we leave pressure page you see that still works will ever know we still get the unique he propped that's because we can't guarantee within the user j s and instead we need to move as out of here and then put it in the hello world so within the hello world we get ready and then key then just referencing his student id they only go back to or application or refreshed you see that it works there we get no more jobs with warnings in our next episode in a dive into this bit deeper the green bay for where we can create new users who have their purses on the database and red group with interview with its offer this episode thank you for watching