Skip to content

UseHover/preact-rails

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

preact-rails

Preact integration for Ruby on Rails.

Getting started

  1. Add webpacker and preact-rails to your Gemfile
gem 'webpacker'
gem 'preact-rails'
  1. Install the gems by running bundle install
  2. Install Preact by running yarn add preact
  3. To transpile JSX, you need a Babel plugin that converts it to valid JavaScript code. Install @babel/plugin-transform-react-jsx by running yarn add --dev @babel/plugin-transform-react-jsx Once installed, you need to specify the function for JSX that should be used. Your .babelrc/babel.config.js should include the following plugin description
    {
       "plugins": [
          ["@babel/plugin-transform-react-jsx", {
             "pragma": "h",
             "pragmaFrag": "Fragment",
          }]
       ]
    }
  4. Install the Preact UJS driver by running yarn add preact_ujs or npm i preact_ujs
  5. Include your Preact components in your application.js Update app/javascript/packs/application.js, add the following lines:
    var componentRequireContext = require.context("components", true);
    var PreactRailsUJS = require("preact_ujs");
    
    PreactRailsUJS.useContext(componentRequireContext)
    
  6. Create the directory app/javascript/components. That's where your Preact components will reside.
  7. Create your first Preact component - create the file app/javascript/components/Button.js and add the following lines:
    import { h, Component } from "preact"
    
    class Button extends Component {
      render (props, state) {
        return (
          <button className="button" type={props.type}>{props.label}</button>
        );
      }
    }
    
    export default Button
    
  8. Ensure the javascript Pack is linked in Rails; the tag <%= javascript_pack_tag 'application' %> is included in app/views/layouts/application.html.erb
  9. Render your Preact component in a view <%= preact_component('Button', { type: 'submit', label: 'Get started!'}) %>