Arvind Kushwah Web Developer and Software Consultant

Create New Application:  $ rails new rails-react-webpacker $ cd rails-react-webpacker Add  webpacker  and  react-rails  to your  Gemfile  and run the installers $ bundle install $ rails webpacker:install $ rails webpacker:install:react $ rails generate react:install After the successful completion the of the above commands. You will have the directory structure like below image. All of our React components shall go to  app/javascript/components/ directory. The content of  app/javascript/packs/application.js  is as following. console . log ( ' Hello World from Webpacker ' ) var componentRequireContext = require . context ( " components " , true ) var ReactRailsUJS = require ( " react_ujs " ) ReactRailsUJS . useContext (componentRequireContext) The line  var  componentRequireContext = require.context(“components”, true)  makes the react components available to our rails app. Now we just need to add the above file i

HTML:  <div class="plane">   <div class="cockpit">     <h1>Please select a seat</h1>   </div>   <div class="exit exit--front fuselage">       </div>   <ol class="cabin fuselage">     <li class="row row--1">       <ol class="seats" type="A">         <li class="seat">           <input type="checkbox" id="1A" />           <label for="1A">1A</label>         </li>         <li class="seat">           <input type="checkbox" id="1B" />           <label for="1B">1B</label>         </li>         <li class="seat">           <input type="checkbox" id="1C" />           <label for="1C">1C</label>         </li>         <li class="seat&q

    @most_likes_posts = Post.joins("LEFT JOIN likes on likes.likeable_id = posts.id and likes.likeable_type = 'Post' and likes.liker_type = 'User'").group('posts.id').select('posts.*','count(likes.likeable_id) as likes_count').select('posts.*','count(likes.likeable_id) as likes_count').sort_by(&:likes_count).last(20) @lessons = Lesson.joins('INNER JOIN views ON lessons.id = views.viewable_id')                     .joins('LEFT OUTER JOIN likes ON lessons.id = likes.likeable_id')                     .select('lessons.*, sum(views.count) AS views_sum, count(likes.likeable_id) AS likes_count')                     .group('lessons.id')                     .order('sum(views.count) DESC').paginate(page: params[:page], per_page: 40) List lessons which has at least 1 post: @lessons = Lesson.joins('INNER JOIN posts ON lessons.id = posts.lesson_id')                  

< script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/3.3.3/adapter.min.js" > </ script > < script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js" > </ script > < script type = "text/javascript" src = "https://rawgit.com/schmich/instascan-builds/master/instascan.min.js" > </ script > < script src = "https://unpkg.com/sweetalert/dist/sweetalert.min.js" > </ script > < h2 > QR Scan </ h2 > < div id = "app" > < div class = "row" > < div class = "col-md-12" > < div class = "preview-container" > < video id = "preview" > </ video > </ div > </ div > </ div > < div class = "row" >