index.md

layout	title	id
page	Use Ruby to build Reactive User Interfaces	home

Pure Ruby

Reactrb lets you build beautiful interactive user interfaces using the same Ruby language running your server side code. Reactrb replaces JS code, JSX, HTML, templating languages, and complex frameworks with one simple system.

React + Ruby

The power and simplicity of React with a great easy to use Ruby DSL. Reactrb frees you up to do what you do best - building great apps.

Simplicity

One language. One simple model. Under the hood Reactrb takes care of all the details for you. The same ruby code runs on the server to deliver pages fast, and then keeps running on the client to handle your user interactions.

---

A Simple Component

React components can be defined by subclassing `React::Component::Base`. The `render` callback defines the components HTML.

A Stateful Component

In addition to taking input data (such as the `visitor` param), a component can have state variables, which are like reactive instance variables. When a component's state changes, the markup will be updated by automatically by re-invoking the `render` callback.

An Application

Using params and state, we can put together a small Todo application. This example uses two state variables to track the current list of items and the text that the user has entered.

A Component Using External Plugins

React is flexible and provides hooks that allow you to interface with other libraries and frameworks. This example uses **marked**, an external Markdown library, to convert the textarea's value in real-time.

<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script> <script src="/react/js/examples/hello.js"></script> <script src="/react/js/examples/timer.js"></script> <script src="/react/js/examples/todo.js"></script> <script src="/react/js/examples/markdown.js"></script>

---

Get Started