catmando

Few days ago i’ve started to learning and understanding Reactrb from scratch. Well, at now days React is a popular JavaScript library for building user interfaces. With a big pleasure let me introduce you Reactrb  —  an Opal Ruby wrapper of React.js library.
I recommended this wrapper for all Ruby On Rails funs, because when you get some experience (just little bit) to work with it — you just gorgeous this. First step in my way was understanding how to work param/params in Components and inside it’s.
Here is the my first lesson:
When you pass some params to Reactrb component from Controller or View, don’t forget about using it inside Component as method calls.
You must read the attributes by method calls.
Here is fast example. Though View we pass to Reactrb Component parameter user:
class MyClass < React::Component::Base
   param :user, type: User
   def render
      div

catmando

      module HyperStore
        def self.included(base)
          base.extend ClassMethods
        end
        module ClassMethods
          def state_reader(state_name)
            define_method(state_name) { React::State.get_state(self, state_name) }
          end
        end
        # render {}

catmando

  class DateTimePicker < React::Component::Base
    param :record # typically an active_record model, but can be any object really
    param :field # attr (read and write) of the object to be updated.

    after_mount do
      initialize_timepicker
      initialize_datepicker
    end

    def initialize_timepicker

catmando

# app/hyperloop/operations/controller_op.rb

# make sure to also require 'operations/controller_op' 
# at the *END* of config/initializers/hyperloop.rb

module Hyperloop
  
  # monkey patch HyperloopController to pass controller instance from controller method to ServerOp
        
  Engine.routes.append do

catmando

class Something
  def self.display_map
    [
      {
        key: :position,
        name: 'Number'
      },
      {
        key: :design_collection,
        name: 'Collection',

catmando

class Node

  # each node has a val (value) and a link to the next node.

  def val  # reads the instance variable val
    @val
  end

  def next_node  # reads the instance variable next_node
    @next_node

catmando

import React, {Component} from 'react';
import './ToDoItem.css';

class ToDoItem extends Component {

    render() {
        return (
            <div className="ToDoItem">
                <p className="ToDoItem-Text">{this.props.item}</p>
                <button className="ToDoItem-Delete"

catmando

class TodoItem < HyperComponent
  param :item
  fires :delete_item
  render(DIV, class: 'ToDoItem') do
    P(class: 'ToDoItem-Text') { @Item }
    BUTTON(class: 'ToDoItem-Delete').on(:click) { delete_item! }
  end
end

catmando

import React, {Component} from 'react';
import './ToDo.css';
import ToDoItem from './components/ToDoItem';
import Logo from './assets/logo.png';

class ToDo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            // this is where the data goes

catmando

class TodoIndex < HyperComponent
  # TodoIndex is the conventional name for listing
  # a set of items.
  INITIAL_TODOS = [
    {
      todo: 'clean the house'
    },
    {
      todo: 'buy milk'
    }