react-webpacker's Introduction

React-Webpacker

React-Webpacker is the smallest, enoughly-tested library for react with webpacker.

Features

View Helper to render react component. (using Custom Data Attributes)
JavaScript library to render react components, loading only used components.
Enoughly view testing.
NOT Provide Server-Side Rendering.

Usage

Notes

From Ruby to JS, snake_case in props will be transformed to camelCase AUTOMATICALLY.
react-webpacker script should be called ONCE per rendered html page, DON'T call in looped views.

ES Modules Way Usage

your-view.js

import ReactWebpacker from 'react-webpacker'
import YourCoolComponent from 'path/to/YourCoolComponent'

const components = {
  YourCoolComponent
}

ReactWebpacker.render(components)

your-view.html.erb

<%= javascript_pack_tag 'your-view', defer: true %>

<%= render_component('YourCoolComponent', {props_key: :value}) %>

or Easy Usage

YourCoolComponent.js

// Add component to `window` scope.
Object.assign(window, { YourCoolComponent })

react-webpacker.js

import ReactWebpacker from 'react-webpacker'

ReactWebpacker.render()

your-view.html.erb

<%= use_components ['path/to/YourCoolComponent'], defer: true %>
<%= javascript_pack_tag 'react-webpacker', defer: true %>

<%= render_component('YourCoolComponent', {props_key: :value}) %>

Notes

DOM is rendered in order from the top, so you should call ReactWebpacker#render() with defer attribute.
- or after render_component
You should call ReactWebpacker#render() after use_components, even if using defer.

Compared with `React-Rails` and `React on Rails`

They provide JavaScript library to load ALL COMPONENTS, too heavy and harmful for browser performance.
They provide Server-Side Rendering, so library is too large.
They don't test JavaScript library about rendering by E2E testing.