Skip to content

Commit dc40a12

Browse files
committed
Merge branch 'master' of github.com:UseHover/preact-rails
2 parents 554b27a + e5f7a9b commit dc40a12

File tree

2 files changed

+50
-1
lines changed

2 files changed

+50
-1
lines changed

README.md

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,41 @@
11
# preact-rails
22
Preact 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+

preact_ujs/README.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
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+
```

0 commit comments

Comments
 (0)