preact-rails

KO | EN

gitlite — search

#javascript #hacktoberfest #react #ai #typescript #go #android #machine-learning #deep-learning #linux #security #openai #mcp #open-source

(★ 16)

Preact integration for Ruby on Rails

preact-rails Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# preact-rails
Preact integration for Ruby on Rails.

## Getting started

1. Add `webpacker` and `preact-rails` to your Gemfile
```
gem 'webpacker'
gem 'preact-rails'
```
2. Install the gems by running `bundle install`
3. Install Preact by running `yarn add preact`
4. To transpile JSX, you need a Babel plugin that converts it to valid JavaScript code. Install [@babel/plugin-transform-react-jsx](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#installation) 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
   ```json
   {
      "plugins": [
         ["@babel/plugin-transform-react-jsx", {
            "pragma": "h",
            "pragmaFrag": "Fragment",
         }]
      ]
   }
   ``` 
5. Install the Preact UJS driver by running `yarn add preact_ujs` or `npm i preact_ujs`
6. 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)
   ```
7. Create the directory `app/javascript/components`. That's where your Preact components will reside.
8. 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
    ```
 9. Ensure the javascript Pack is linked in Rails; the tag `<%= javascript_pack_tag 'application' %>` is included in `app/views/layouts/application.html.erb`
 10. Render your Preact component in a view
    ```
    <%= preact_component('Button', { type: 'submit', label: 'Get started!'}) %>
    ```

preact-rails

preact-rails Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

preact-rails

preact-rails Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README