File tree Expand file tree Collapse file tree 2 files changed +50
-1
lines changed
Expand file tree Collapse file tree 2 files changed +50
-1
lines changed Original file line number Diff line number Diff line change 11# preact-rails
22Preact integration for Ruby on Rails.
33
4- Under active development.
4+ ## Getting started
5+
6+ 1 . Add ` webpacker ` and ` preact-rails ` to your Gemfile
7+ ```
8+ gem 'webpacker'
9+ gem 'preact-rails'
10+ ```
11+ 2 . Install the gems by running ` bundle install `
12+ 3 . Install the Preact UJS driver by running ` yarn add preact_ujs ` or ` npm i preact_ujs `
13+ 4 . Include your Preact components in your application.js
14+ Update ` app/javascript/packs/application.js ` , add the following lines:
15+ ```
16+ var componentRequireContext = require.context("components", true);
17+ var PreactRailsUJS = require("preact_ujs");
18+
19+ PreactRailsUJS.useContext(componentRequireContext)
20+ ```
21+ 5 . Create the directory ` app/javascript/components ` . That's where your Preact components will reside.
22+ 6 . Create your first Preact component - create the file ` app/javascript/components/Button.js ` and add the following lines:
23+ ```
24+ import { h, Component } from "preact"
25+
26+ class Button extends Component {
27+ render (props, state) {
28+ return (
29+ <button className="button" type={props.type}>{props.label}</button>
30+ );
31+ }
32+ }
33+
34+ export default Button
35+ ```
36+ 7. Link the javascript Pack in Rails, add `<%= javascript_pack_tag 'application' %>` to `app/views/layouts/application.html.erb`
37+ 8. Render your Preact component in a view
38+ ```
39+ <%= preact_component('Button', { type: 'submit', label: 'Get started!'}) %>
40+ ```
41+
Original file line number Diff line number Diff line change 1+ # Preact UJS
2+
3+ UJS driver for [ preact-rails] ( https://github.com/UseHover/preact-rails ) .
4+
5+ ## Install
6+ ```
7+ npm i preact_ujs
8+ ```
9+ or
10+ ```
11+ yarn add preact_ujs
12+ ```
You can’t perform that action at this time.
0 commit comments