Community Round-up #9

We organized a React hackathon last week-end in the Facebook Seattle office. 50 people, grouped into 15 teams, came to hack for a day on React. It was a lot of fun and we’ll probably organize more in the future.

React Hackathon Winner

Alex Swan implemented Qu.izti.me, a multi-player quiz game. It is real-time via Web Socket and mobile friendly.

The game itself is pretty simple. People join the “room” by going to http://qu.izti.me on their device. Large displays will show a leaderboard along with the game, and small displays (such as phones) will act as personal gamepads. Users will see questions and a choice of answers. The faster you answer, the more points you earn.

In my opinion, Socket.io and React go together like chocolate and peanut butter. The page was always an accurate representation of the game object.

Read More…

JSConf EU Talk: Rethinking Best Practices

Pete Hunt presented React at JSConf EU. He covers three controversial design decisions of React:

1. Build components, not templates
2. Re-render the whole app on every update
3. Virtual DOM

The video will be available soon on the JSConf EU website, but in the meantime, here are Pete’s slides:

Pump - Clojure bindings for React

Alexander Solovyov has been working on React bindings for ClojureScript. This is really exciting as it is using “native” ClojureScript data structures.

(ns your.app
  (:require-macros [pump.def-macros :refer [defr]])
  (:require [pump.core]))

(defr Component
  :get-initial-state #(identity {:some-value ""})

  [component props state]

  [:div {:class-name "test"} "hello"])

Check it out on GitHub…

JSXHint

Todd Kennedy working at Condé Nast implemented a wrapper on-top of JSHint that first converts JSX files to JS.

A wrapper around JSHint to allow linting of files containing JSX syntax. Accepts glob patterns. Respects your local .jshintrc file and .gitignore to filter your glob patterns.

npm install -g jsxhint

Check it out on GitHub…

Turbo React

Ross Allen working at Mesosphere combined Turbolinks, a library used by Ruby on Rails to speed up page transition, and React.

“Re-request this page” is just a link to the current page. When you click it, Turbolinks intercepts the GET request and fetchs the full page via XHR.

The panel is rendered with a random panel- class on each request, and the progress bar gets a random widthX class.

With Turbolinks alone, the entire would be replaced, and transitions would not happen. In this little demo though, React adds and removes classes and text, and the attribute changes are animated with CSS transitions. The DOM is otherwise left intact.

Check out the demo…

Reactive Table

Stoyan Stefanov continues his series of blog posts about React. This one is an introduction tutorial on rendering a simple table with React.

React is all about components. So let’s build one.

Let’s call it Table (to avoid any confusion what the component is about).

var Table = React.createClass({
  /*stuff goeth here*/
});

You see that React components are defined using a regular JS object. Some properties and methods of the object such as render() have special meanings, the rest is upforgrabs.

Read the full article…