Skip to content

Instantly share code, notes, and snippets.

View todo-compare-hyperstack.rb
class TodoIndex < HyperComponent
# TodoIndex is the conventional name for listing
# a set of items.
INITIAL_TODOS = [
{
todo: 'clean the house'
},
{
todo: 'buy milk'
}
View todo-compare-react.jsx
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
View todo-item-compare-hyperstack.rb
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
View todo-item-compare-react.jsx
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
catmando / linked_list.rb
Created Oct 13, 2017
Translate this code please
View linked_list.rb
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
View mapper.rb
class Something
def self.display_map
[
{
key: :position,
name: 'Number'
},
{
key: :design_collection,
name: 'Collection',
@catmando
catmando / controller_op.rb
Last active Jun 22, 2017
hyper operation Controller Operation experimental patch
View controller_op.rb
# 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
View date_picker.rb
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
View hyper_store.rb
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 {}
View reactrb first steps
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