https://shakacode.com/component---src-template-blog-article-tsx-co…-on-rails-index-mdx-62cc85f28107f5e3d197.js

1"use strict";(self.webpackChunkgatsby_starter_default=self.webpackChunkgatsby_starter_default||[]).push([[3973],{11376:function(e,t,a){a.r(t),a.d(t,{Head:function(){return w},default:function(){return b}});var n=a(28453),r=a(96540);function l(e){const t=Object.assign({p:"p",h2:"h2",a:"a",span:"span",ol:"ol",li:"li",strong:"strong"},(0,n.R)(),e.components);return r.createElement(r.Fragment,null,r.createElement(t.p,null,"Recently, I’ve been doing more private coaching/pairing sessions on getting setup with React on Rails. In this article, I’m going to share my general tips for maximum productivity when using React on Rails. Many of these tips will apply regardless of your programming environment."),"\n",r.createElement(t.h2,{id:"general-tips",style:{position:"relative"}},r.createElement(t.a,{href:"#general-tips","aria-label":"general tips permalink",className:"anchor before"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"General Tips"),"\n",r.createElement(t.ol,null,"\n",r.createElement(t.li,null,r.createElement(t.strong,null,"Do the simplest possible thing"),". Do not try to make all the advanced features of React on Rails, like server rendering, work at first!"),"\n",r.createElement(t.li,null,r.createElement(t.strong,null,"Run code that you know works"),". The first is just to download some code, compile it, run it, etc. To check if your machine is setup for React on Rails, git clone the ",r.createElement(t.a,{href:"https://github.com/shakacode/react-webpack-rails-tutorial/"},"React Webpack Rails Tutorial")," and run it!"),"\n",r.createElement(t.li,null,"Start off with something that works. Then take ",r.createElement(t.strong,null,"baby steps"),"! Add one small component. Get that one thing working first, then move on to something else."),"\n",r.createElement(t.li,null,r.createElement(t.strong,null,"Read the error messages very carefully"),", especially the very first error message."),"\n",r.createElement(t.li,null,r.createElement(t.strong,null,"Figure out the first place that something is going wrong"),". Ignore issues that are happening much later than the first error."),"\n",r.createElement(t.li,null,r.createElement(t.strong,null,"Only run the part of the system that is causing the error"),". For example, if you’re having an error in the webpack compilation, run that command by itself until you resolve any errors."),"\n",r.createElement(t.li,null,"Be ",r.createElement(t.strong,null,"very careful")," that your installed version of software matches the documentation you are reading. Often, Github will display the latest documentation on the master branch for unreleased software. You’re probably not using unreleased software. You might switch the displayed branch to match up with what you are using."),"\n",r.createElement(t.li,null,r.createElement(t.strong,null,"Check for errors in all the places where you’ll have logs"),". The main places to check are: 1) Output from running foreman on the console. 2) The console in the Chrome debugger. 3) Your log files for Rails."),"\n"),"\n",r.createElement(t.h2,{id:"react-on-rails-specifics",style:{position:"relative"}},r.createElement(t.a,{href:"#react-on-rails-specifics","aria-label":"react on rails specifics permalink",className:"anchor before"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"React on Rails Specifics"),"\n",r.createElement(t.ol,null,"\n",r.createElement(t.li,null,"Be sure to understand simpler examples before you tackle more complicated examples. Study the output of running the React on Rails generator on a new Rails app. See the videos: ",r.createElement(t.a,{href:"https://www.youtube.com/playlist?list=PL5VAKH-U1M6dj84BApfUtvBjvF-0-JfEU"},"React On Rails Tutorial Series"),". When you’ve got the basics, then see a live example at ",r.createElement(t.a,{href:"http://www.reactrails.com/"},"reactrails.com")," and its ",r.createElement(t.a,{href:"https://github.com/shakacode/react-webpack-rails-tutorial/"},"source code on github"),"."),"\n",r.createElement(t.li,null,r.createElement(t.strong,null,"Skip server rendering"),". Ensure that client rendering works perfectly before turning on server rendering."),"\n",r.createElement(t.li,null,r.createElement(t.strong,null,"Skip hot reloading"),". Hot reloading allows you to see the browser update after you hit save in the editor. The alternative is to press CMD-R to refresh your browser screen. Get regular “static” loading working first. When you’re ready for hot reloading, check out the docs."),"\n",r.createElement(t.li,null,r.createElement(t.strong,null,"Skip CSS Modules and creating CSS from Webpack, initially"),". You can do all your CSS the way you’ve always done it with Rails. When you’re ready, you’ll definitely want to consider using ",r.createElement(t.a,{href:"https://css-tricks.

1com/css-modules-part-1-need/"},"CSS Modules"),". The ",r.createElement(t.a,{href:"https://github.com/shakacode/react-webpack-rails-tutorial/"},"React Webpack Rails Tutorial")," uses them! Once you use them, you won’t go back!"),"\n",r.createElement(t.li,null,r.createElement(t.strong,null,"Understand the flow")," of what happens when you start your Procfile in Rails. Open up the Procfile and see what’s in it. The key thing to note is that the Webpack command must successfully complete before you want to look at the Rails part. The webpack file will create one or more files for inclusion by your Rails app. These files are typically included in a Rails manifest file for your JavaScript. That file will be loaded by your main layout. When there’s a component on a view from the ",r.createElement(t.strong,null,"react_component"),", the React on Rails JavaScript will detect that and bootstrap the rendering of your component."),"\n",r.createElement(t.li,null,r.createElement(t.strong,null,"Start off with very simple React code"),". Then add popular libraries, like redux, react-router, immutable.js, only when you understand why you need them. Don’t be shy about putting in a generous amount of ",r.createElement(t.strong,null,"console.log")," statements in your JavaScript code to see what’s happening."),"\n"),"\n",r.createElement(t.p,null,"If your time is valuable, consider signing up for ShakaCode's ",r.createElement(t.a,{href:"https://reactonrails.com/pro/"},"React on Rails Pro"),". For current pricing and purchase options, visit ",r.createElement(t.a,{href:"https://pro.reactonrails.com/"},"pro.reactonrails.com")," or email me at ",r.createElement(t.a,{href:"mailto:[email protected]"},"[email protected]"),"."),"\n",r.createElement(t.p,null,"Here are some of my favorite debugging articles that apply to React on Rails. You can find more by searching for ",r.createElement(t.a,{href:"https://forum.shakacode.com/search?q=debugging"},"debugging at forum.shakacode.com"),"."),"\n",r.createElement(t.a,{href:"https://forum.shakacode.com/t/favorite-rails-and-javascript-debugging-tips/213/11"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n      class="gatsby-resp-image-wrapper"\n      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 679px; "\n    >

1\n      <span\n    class="gatsby-resp-image-background-image"\n    style="padding-bottom: 25%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA0UlEQVR42o1Q2Y6DMBDL/38kogECPXKQ5oIE3Em6u+rDPnQka6yRJx6H7fuOGCNiIKTYeAjhPftBSgmfdZ5n60opcM4hpYS1tmmZ1hpCCAwDxzzPENOEkVBnfd+j6zosyxXVuJSCnHPrtYK30HKCNQtWLZCCAfPOwRgNs65YCZq4NsTJsZopreBI83tpjAHbvrUH695wuWDmI+5k6r0D20hUSV3y3qPk0iK9gT/+X+RqOFKy23WBkg/6Ng9Wz//EcRxf4qSIFv55Q3AP5KRRtidekNSCoz2D0uYAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n  ></span>\n  <img\n        class="gatsby-resp-image-image"\n        alt="image2"\n        title=""\n        src="/static/525f754ff3d1baf8133d9fd4dcd2577b/1b747/image2.png"\n        srcset="/static/525f754ff3d1baf8133d9fd4dcd2577b/4dcb9/image2.png 188w,\n/static/525f754ff3d1baf8133d9fd4dcd2577b/5ff7e/image2.png 375w,\n/static/525f754ff3d1baf8133d9fd4dcd2577b/1b747/image2.png 679w"\n        sizes="(max-width: 679px) 100vw, 679px"\n        style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n        loading="lazy"\n        decoding="async"\n      />\n    </span>'}})),"\n",r.createElement(t.a,{href:"https://forum.shakacode.com/t/blackbelt-rails-capybara-debugging-techniques-with-react-server-rendering/351"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n      class="gatsby-resp-image-wrapper"\n      style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 681px; "\n    >

1\n      <span\n    class="gatsby-resp-image-background-image"\n    style="padding-bottom: 24.468085106382976%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA9UlEQVR42l2OT0/DMAzF+93hwqeC025w6EonTUJiZUMdamInTduk/x52p13m6Cc7lt+zM3YOTvDebzDf/sYYEBFY8M7DSZ/Igh1Dozqd8PL8hL/zD+hao5Fsfi/I8mKPw+GAoihQliUaMWJm1LUMmQZkLUxjYHWB1NYSVn3zjL6+IOTv6PIPtHvJ529kTjYSsQxauYIRQkDXdfBti1boux4xxo1hGJDigHVdMYmhkyXLZwl+e8V1twNVFbI23ISKmqlIUdMgpJQ2gzv30L5qJiaEryNm8ZmXBVk/9JtYiTFhkeYjs1zzyDRNGMcRo1yevNtqXfIP7tp9Gc5jGTEAAAAASUVORK5CYII=\'); background-size: cover; display: block;"\n  ></span>\n  <img\n        class="gatsby-resp-image-image"\n        alt="image1"\n        title=""\n        src="/static/a64b19c4eb5caba6f5a4b8dc8f15dc06/8ce52/image1.png"\n        srcset="/static/a64b19c4eb5caba6f5a4b8dc8f15dc06/4dcb9/image1.png 188w,\n/static/a64b19c4eb5caba6f5a4b8dc8f15dc06/5ff7e/image1.png 375w,\n/static/a64b19c4eb5caba6f5a4b8dc8f15dc06/8ce52/image1.png 681w"\n        sizes="(max-width: 681px) 100vw, 681px"\n        style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n        loading="lazy"\n        decoding="async"\n      />\n    </span>'}})),"\n")}var o=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,n.R)(),e.components);return t?r.createElement(t,e,r.createElement(l,e)):l(e)},i=a(5588),s=a(65427),c=a(20504),m=a(43397),u=a(61942);const h=e=>e.replace(/\/+$/,""),g=(e,t)=>t?""+e+(t.startsWith("/")?t:"/"+t):e,d=(e,t)=>g(h(e),t),p=(e,t)=>g((e=>"undefined"!=typeof window?window.location.origin:h(e))(e),t),f=(e,t)=>{const a=(0,i.d)(t);return a?d(e,a):(e=>d(e,"/shakacode-og.png"))(e)},y=e=>{let{data:t,location:a,children:n}=e;const{frontmatter:l}=t.mdx,{siteUrl:o}=t.site.siteMetadata,i=p(o,a.pathname);return r.createElement(r.Fragment,null,r.createElement(s.A,null),r.createElement(c.A,{header:r.createElement(u.r,{breadcrumb:l.title}),main:r.createElement(r.Fragment,null,r.createElement(u.c,{body:n,title:l.title,author:l.author,date:l.date,link:i,categories:l.categories,featuredImage:l.featuredImage,showFeaturedImage:l.showFeaturedImage}),r.createElement(m.LN,null))}))};function b(e){return r.createElement(y,e,r.createElement(o,e))}const w=e=>{let{data:t,location:a}=e;const{frontmatter:n,excerpt:l}=t.mdx,{siteMetadata:o}=t.site,{siteUrl:i,title:s,description:c}=o,m=((e,t,a)=>e.excerpt||t||a)(n,l,c),u=f(i,n.featuredImage),h=d(i,a.pathname);return r.createElement(r.Fragment,null,r.createElement("title",null,n.title+" | "+s),r.createElement("link",{rel:"canonical",href:h}),r.createElement("meta",{name:"description",content:m}),r.createElement("meta",{property:"og:title",content:n.title}),r.createElement("meta",{property:"og:description",content:m}),r.createElement("meta",{property:"og:type",content:"article"}),r.createElement("meta",{property:"og:url",content:h}),r.createElement("meta",{property:"og:image",content:u}),r.createElement("meta",{name:"image",content:u}),r.createElement("meta",{name:"twitter:card",content:"summary_large_image"}),r.createElement("meta",{name:"twitter:title",content:n.title}),r.createElement("meta",{name:"twitter:description",content:m}),r.createElement("meta",{name:"twitter:image",content:u}))}}}]);
2//# sourceMappingURL=component---src-template-blog-article-tsx-content-file-path-src-posts-general-troubleshooting-and-getting-started-with-react-on-rails-index-mdx-62cc85f28107f5e3d197.js.map