Rails Embraces JavaScript<\/h2>\n
JavaScript has its flaws and that\u2019s why Rails embraced CoffeeScript early on instead of plain JS. With ES6 and Babel, CoffeeScript seemed less and less necessary, and in fact to me became something I disliked writing when most examples and articles online were using ES6 syntax. The js2coffee<\/a> website came in handy to convert between the two syntaxes.<\/p>\n Then came the issue of how to include JS libraries in your Rails app. The typical way would be to look for a \u201cRails\u201d version of the JS library on rubygems.org<\/a>, or perhaps take advantage of rails-assets.org<\/a>. It was a good solution for the time, but to fully embrace JS and provide a more seamless integration, we needed the ability to have a With Rails 5.1, it feels like we finally have a great JS story rather than one that is just passable. It comes with support for yarn, es6, and webpack. Read here<\/a> for a great intro to exactly what this includes. Also, though it\u2019s a paid course, I recommend the ES6 course by Wes Bos<\/a> as a great introduction to the new features of JS.<\/p>\n React on Rails<\/a> is a gem that allows you to organize and use React inside of a Rails project, easily rendering components (and passing them data) from within your Rails views. Additionally, it allows you to take advantage of NPM JavaScript libraries with yarn.<\/p>\n Although Rails 5.1 gives you some of this ability, React on Rails presents a nice alternative for people who want the best of the front-end within Rails. It creates a structured and complete solution where any front-end developer, who may not have any prior Rails experience, can jump in and feel at home.<\/p>\n For further details on installing React on Rails, please refer to the installation guide<\/a>.<\/p>\n The basic steps are as follows:<\/p>\n This will prepare your Rails application to be able to render React components by creating a client folder where all of your React work will take place. Additionally, it adds a \u2018HelloWorld\u2019 example that includes a controller, route, view, and a component. Use One caveat we\u2019ve noticed with Rails 5.1 is that since it comes with a Inside of the client folder, you will find a fully separate React setup that comes with its own You can use as much or as little of React as you want in your Rails app. It doesn\u2019t need to take over the entire front-end. Here is an example using React to create a hamburger nav menu; one small piece of a larger page.<\/p>\n Inside of the application layout file<\/a>, a React component is rendered using the This produces the following HTML, which is then picked up by The actual component renders a material design hamburger menu using the One important note is how to expose your React components to Rails. Inside of the client\/app\/bundles\/App\/startup\/registration.jsx<\/a> file, you can register it:<\/p>\n Visiting any page on www.marianserna.com<\/a>, you\u2019ll see the hamburger menu on the top-right hand corner of the screen.<\/p>\n In React, components generally have two types of \u201cdata\u201d to worry about: Props and State. Props are read-only data passed from a parent component to a child. State is data internal to and managed by a specific component. If you need state, that is up to you, but how you pass props from your Rails view to your React component is done like so:<\/p>\n These props will then arrive to the component\u2019s constructor function as a JS object, which you can then access with To see the rest of the component, it is available here<\/a> and you can see it in action here<\/a>.<\/p>\n When you need to send data back to Rails, you have quite a few different options. You could use In a slightly more in-depth One thing you might have noticed is the ability to include the CSRF token in our POST request to Rails. This is functionality provided by !Sign up for a free Codeship Account<\/p>\n As your app grows in complexity, it may be a good idea to avoid managing state in each of your components (or a single Main\/Parent component) and instead manage it using Redux. The talented Wes Bos<\/a> again has a course for learning this<\/a>, which happens to be free!<\/p>\n Redux is very verbose and in my opinion sort of complicated to get set up. Thankfully the HelloWorld example of Without going into the full complexity of Redux, we\u2019ll try to show a simple example below that fetches the information for a single When the HouseInfo component<\/a> mounts, it will make a call to the action, telling it which house it needs data for.<\/p>\n The For more information on dealing with asynchronous code inside of Redux, check out the redux-thunk<\/a> library.<\/p>\n Now it\u2019s time for the reducer<\/a> to create a new version of the state based on the events dispatched above.<\/p>\n If we want routing to be handled client-side using React Router<\/a>, this isn\u2019t a problem with The Rails routes are pretty standard:<\/p>\n What you don\u2019t see here is that This One thing that caused some confusion was not having Because authentication in this demo app was done via Devise, we stuck with using the typical cookie-based user session.<\/p>\n As you move more and more toward your entire app living in React, or even supporting ReactNative or other native apps, you might be better off not assuming that cookies will exist and instead looking into JSON Web Tokens<\/a>. This is beyond the scope of the article though, so will have to be explored at a later date.<\/p>\n We hope we were able to show that including React inside of your Rails app is not only possible, it is a fairly elegant solution to including more front-end interactivity and avoiding the spaghetti code that jQuery can often end up turning into.<\/p>\n It\u2019s up to you how much or how little to include. It can be as small as a nav component on a specific page, it can be an entire page of your app, or you can use Redux + React Router to take over larger and larger areas of your application.<\/p>\n Don\u2019t feel the need to abandon server-rendered code. It can still be a joy to write and is often the most simple solution. At the same time, it\u2019s great being able to take advantage of all the cutting edge client-side code available these days.<\/p>\npackage.json<\/code> file to list our JS dependencies<\/a>, install them via yarn<\/a>, and then package them together with a tool like webpack<\/a>.<\/p>\nRails Embraces React<\/h2>\n
Installation<\/h2>\n
\n
react_on_rails<\/code>, ~> 7.0<\/code>, >= 7.0.4<\/code> + bundle install<\/li>\nrails generate react_on_rails:install --help<\/code><\/li>\nrails generate
\nreact_on_rails:install --redux --node<\/code><\/li>\n<\/ul>\ngit diff<\/code> to see which files have been added and\/or modified.<\/p>\npackage.json<\/code> file of its own, there may be a conflict and you will have to manually merge them together.<\/p>\npackage.json<\/code> file, containing all of the NPM modules necessary to run React with Webpack and ES6. Webpack comes preconfigured. All of our components will live inside of client\/app\/bundles<\/code>.<\/p>\nOur First Component<\/h2>\n
react_component<\/code> helper method provided by react_on_rails.<\/p>\n!!! 5\r\n%html\r\n %head\r\n ... typical head tags\r\n\r\n %body\r\n = react_component(\"NavMenu\", props: {}, prerender: false)<\/pre>\nreact_on_rails<\/code>, and a component is initialized on your behalf.<\/p>\n<script type=\"application\/json\" class=\"js-react-on-rails-component\">{\"component_name\":\"NavMenu\",\"props\":{},\"trace\":false,\"dom_id\":\"NavMenu-react-component-f8e24b6a-a711-49e5-930b-1472e97665ec\"}<\/script>\r\n<div id=\"NavMenu-react-component-f8e24b6a-a711-49e5-930b-1472e97665ec\"><\/div><\/pre>\nreact-mfb<\/code> package. This component lives in client\/app\/bundles\/App\/components\/NavMenu.jsx<\/a>.<\/p>\nimport React from 'react';\r\nimport {Menu, MainButton, ChildButton} from 'react-mfb';\r\n\r\nexport default class NavMenu extends React.Component {\r\n render() {\r\n return(\r\n <Menu effect=\"zoomin\" method=\"click\" position=\"tr\">\r\n <MainButton iconResting=\"ion-drag\" iconActive=\"ion-close-round\" \/>\r\n\r\n <ChildButton icon=\"ion-ios-home\" label=\"Home\"\r\n onClick = {(e) => {}} href=\"\/\" \/>\r\n <ChildButton icon=\"ion-android-laptop\" label=\"Work\"\r\n onClick = {(e) => {}} href=\"\/work\" \/>\r\n <ChildButton icon=\"ion-android-person\" label=\"About\"\r\n onClick = {(e) => {}} href=\"\/about\" \/>\r\n <ChildButton icon=\"ion-email\" label=\"Contact\"\r\n onClick = {(e) => {}} href=\"\/contact\" \/>\r\n <\/Menu>\r\n )\r\n }\r\n}<\/pre>\nimport ReactOnRails from 'react-on-rails';\r\nimport NavMenu from '..\/components\/NavMenu';\r\n\r\nReactOnRails.register({\r\n NavMenu\r\n});<\/pre>\nPassing Data from Rails to React<\/h2>\n
= react_component(\"CaseStudy\", props: {case_study: @case_study_props, code_highlights: @code_highlights_props, more_case_studies: @more_case_studies_props}, prerender: false)<\/pre>\nthis.props.case_study<\/code>, for example.<\/p>\nexport default class CaseStudy extends React.Component {\r\n constructor(props, _railsContext) {\r\n super(props);\r\n\r\n \/\/ ... rest of constructor\r\n }\r\n}<\/pre>\nPosting Data Back to Rails<\/h2>\n
jQuery.post<\/code>, fetch<\/code> (remember to include a polyfill for older browser support), or a library like axios<\/code>. These are just standard AJAX requests like you\u2019re used to. In this case, we\u2019re treating our Rails app like an API, usually expecting JSON as the response.<\/p>\nreact_on_rails<\/code> integration, this is how you might post data to create a House<\/code> object that has many related Image<\/code> records. This takes advantage of Rails\u2019 accepts_nested_attributes_for<\/code> ability to create parent and child records at the same time. The code is available on GitHub<\/a>. Refer to the repo and the controllers\/models\/serializers to see how the Rails side of this example was done.<\/p>\nsubmitForm = (e) => {\r\n e.preventDefault();\r\n\r\n \/\/ Build form data and format it in way Rails API expects\r\n const data = new FormData();\r\n data.append('house[city]', this.city.value);\r\n data.append('house[price]', this.price.value);\r\n data.append('house[description]', this.description.value);\r\n Array.from(this.images.files).forEach((file, index) => {\r\n data.append(`house[images_attributes][${index}][photo]`, file, file.name);\r\n });\r\n\r\n \/\/ Include CSRF token for form_authenticity validation\r\n const config = {\r\n headers: {\r\n 'Content-Type': 'multipart\/form-data',\r\n 'Accept': 'application\/json',\r\n 'X-CSRF-Token': ReactOnRails.authenticityToken()\r\n }\r\n };\r\n\r\n \/\/ Post data to \/houses endpoint and update state upon response\r\n axios.post('\/houses', data, config).then((response) => {\r\n this.setState({\r\n status: 'success',\r\n houseId: response.data.id\r\n });\r\n });\r\n}<\/pre>\nreact_on_rails<\/code> and must be imported at the top of your file: import ReactOnRails from 'react-on-rails';<\/code>. The complete file can be found here<\/a>.<\/p>\nManaging State in Redux<\/h2>\n
react_on_rails<\/code> comes with built-in support for Redux and all of the packages are included if you install it with the --redux<\/code> option.![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/06\/redux-cycle.jpg\")
<\/a><\/p>\nreact_on_rails<\/code> contains a complete setup. What you\u2019ll see are folders for the following items:<\/p>\n\n
thunk<\/code>, which we\u2019ll touch on very briefly below.<\/li>\nHouse<\/code> object in our demo app.<\/p>\ncomponentWillMount() {\r\n this.props.loadHouse(this.props.match.params.id);\r\n}<\/pre>\nloadHouse<\/code> action lives inside of a file which contains all related actions<\/a>. Because this AJAX request happens asynchronously, our loadHouse<\/code> will return a function that will get passed a dispatch<\/code> function. dispatch<\/code> can be called any time we have more information we want to update in the store (via a reducer).<\/p>\nexport const loadHouse = (id) => {\r\n return (dispatch) => {\r\n \/\/ Make sure there isn't an existing house in the store\r\n \/\/ Also allows us to show a \"Loading...\" screen\r\n dispatch({type: LOAD_HOUSE, house: null});\r\n\r\n \/\/ Make AJAX request to Rails endpoint\r\n axios.get(`\/houses\/${id}`, {\r\n headers: {'Content-Type': 'application\/json', 'Accept': 'application\/json'}\r\n }).then((response) => {\r\n \/\/ Upon response, dispatch another event with the house data\r\n dispatch({\r\n type: LOAD_HOUSE,\r\n house: response.data\r\n });\r\n });\r\n }\r\n}<\/pre>\n\/\/ Load our constants, the link between actions & reducers\r\nimport {\r\n LOAD_HOUSE,\r\n LOAD_FEATURED_HOUSES,\r\n SEARCH_HOUSES\r\n} from '..\/constants\/homeConstants';\r\n\r\nconst homeReducer = (state = {}, action) => {\r\n \/\/ Look for the action.type to determine what state needs to change\r\n switch (action.type) {\r\n case LOAD_HOUSE:\r\n \/\/ Create a copy and then modify copy of state using ES6 spread operator\r\n return {...state, house: action.house};\r\n case LOAD_FEATURED_HOUSES:\r\n return {...state, houses: action.houses};\r\n case SEARCH_HOUSES:\r\n return {...state, houses: action.houses};\r\n default:\r\n \/\/ We didn't understand any of the action types, return existing state unchanged\r\n return state;\r\n }\r\n};\r\n\r\nexport default homeReducer;<\/pre>\nClient Side Routing in React<\/h2>\n
react_on_rails<\/code>. The trick to make it work is that you\u2019ll essentially have to handle routing twice\u2026once inside of Rails (which will render the component) and then again inside of React.<\/p>\nRails.application.routes.draw do\r\n root to: \"houses#index\"\r\n\r\n resources :houses, only: [:new, :show, :create] do\r\n collection do\r\n get :featured\r\n get :search\r\n end\r\n end\r\nend<\/pre>\n
houses#index<\/code>, houses#show<\/code>, and houses#new<\/code> all render the same component:<\/p>\n= react_component(\"HomeApp\", props: {}, prerender: false)<\/pre>\nHomeApp<\/code> component then takes over and figures out the routing on the client side.<\/p>\nconst HomeApp = (props, _railsContext) => {\r\n const store = configureStore(props);\r\n\r\n return (\r\n <Provider store={store}>\r\n <BrowserRouter>\r\n <Switch>\r\n <Route path=\"\/\" exact component={HomeContainer} \/>\r\n <Route path=\"\/houses\/new\" component={NewHouseContainer} \/>\r\n <Route path=\"\/houses\/:id\" component={HouseInfoContainer} \/>\r\n <\/Switch>\r\n <\/BrowserRouter>\r\n <\/Provider>\r\n );\r\n};<\/pre>\nSwitch<\/code> wrapping the routes\u2026it was causing ambiguous routing, thinking that the \u201cnew\u201d part of \"\/houses\/new\"<\/code> was actually an ID of a house. Switch<\/code> deals with this by sticking with the route that matches correctly first, so the order you list them in is important.<\/p>\nA Word on Authentication<\/h2>\n
Conclusion<\/h2>\n