There have been many posts recently covering the why and how of React. This week's community round-up includes a collection of recent articles to help you get started with React, along with a few posts that explain some of the inner workings.

React in a nutshell #

Got five minutes to pitch React to your coworkers? John Lynch (@johnrlynch) put together this excellent and refreshing slideshow:

React's diff algorithm #

React core team member Christopher Chedeau (@vjeux) explores the innards of React's tree diffing algorithm in this extensive and well-illustrated post.

While we're talking about tree diffing: Matt Esch (@MatthewEsch) created this project, which aims to implement the virtual DOM and a corresponding diff algorithm as separate modules.

Many, many new introductions to React! #

James Padosley wrote a short post on the basics (and merits) of React: What is React?

What I like most about React is that it doesn't impose heady design patterns and data-modelling abstractions on me. [...] Its opinions are so minimal and its abstractions so focused on the problem of the DOM, that you can merrily slap your design choices atop.

Read the full post...

Taylor Lapeyre (@taylorlapeyre) wrote another nice introduction to React.

React expects you to do the work of getting and pushing data from the server. This makes it very easy to implement React as a front end solution, since it simply expects you to hand it data. React does all the other work.

Read the full post...

This "Deep explanation for newbies" by @ProJavaScript explains how to get started building a React game without using the optional JSX syntax.

React around the world #

It's great to see the React community expand internationally. This site features a React introduction in Russian.

React tutorial series #

Christopher Pitt explains React Components and React Properties. The former includes a nice introduction to using JSX, while the latter focuses on adding interactivity and linking multiple components together. Also check out the other posts in his React Tutorial series, e.g. on using React + Backbone Model and React + Backbone Router.

Beginner tutorial: Implementing the board game Go #

Chris LaRose walks through the steps of creating a Go app in React, showing how to separate application logic from the rendered components. Check out his tutorial or go straight to the code.

Egghead.io video tutorials #

Joe Maddalone (@joemaddalone) of egghead.io created a series of React video tutorials, such as this introduction to React Components. [part 1], [part 2]

"React: Finally, a great server/client web stack" #

Eric Florenzano (@ericflo) sheds some light on what makes React perfect for server rendering:

[...] the ideal solution would fully render the markup on the server, deliver it to the client so that it can be shown to the user instantly. Then it would asynchronously load some Javascript that would attach to the rendered markup, and invisibly promote the page into a full app that can render its own markup. [...]

What I've discovered is that enough of the pieces have come together, that this futuristic-sounding web environment is actually surprisingly easy to do now with React.js.

Read the full post...

Building a complex React component #

Matt Harrison walks through the process of creating an SVG-based Resistance Calculator using React.

Random Tweets #

Interest in React seems to have surged ever since David Nolen (@swannodette)'s introduction of Om in his post "The Future of Javascript MVC Frameworks".

In this React Community Round-up, we are taking a closer look at React from a functional programming perspective.

"React: Another Level of Indirection" #

To start things off, Eric Normand (@ericnormand) of LispCast makes the case for React from a general functional programming standpoint and explains how React's "Virtual DOM provides the last piece of the Web Frontend Puzzle for ClojureScript".

The Virtual DOM is an indirection mechanism that solves the difficult problem of DOM programming: how to deal with incremental changes to a stateful tree structure. By abstracting away the statefulness, the Virtual DOM turns the real DOM into an immediate mode GUI, which is perfect for functional programming.

Read the full post...

Reagent: Minimalistic React for ClojureScript #

Dan Holmsand (@holmsand) created Reagent, a simplistic ClojureScript API to React.

It allows you to define efficient React components using nothing but plain ClojureScript functions and data, that describe your UI using a Hiccup-like syntax.

The goal of Reagent is to make it possible to define arbitrarily complex UIs using just a couple of basic concepts, and to be fast enough by default that you rarely have to care about performance.

Check it out on Github...

Functional DOM programming #

React's one-way data-binding naturally lends itself to a functional programming approach. Facebook's Pete Hunt (@floydophone) explores how one would go about writing web apps in a functional manner. Spoiler alert:

This is React. It’s not about templates, or data binding, or DOM manipulation. It’s about using functional programming with a virtual DOM representation to build ambitious, high-performance apps with JavaScript.

Read the full post...

Pete also explains this in detail at his #MeteorDevShop talk (about 30 Minutes):

Kioo: Separating markup and logic #

Creighton Kirkendall created Kioo, which adds Enlive-style templating to React. HTML templates are separated from the application logic. Kioo comes with separate examples for both Om and Reagent.

A basic example from github:

<!DOCTYPE html>
<html lang="en">
  <body>
    <header>
      <h1>Header placeholder</h1>
      <ul id="navigation">
        <li class="nav-item"><a href="#">Placeholder</a></li>
      </ul>
    </header>
    <div class="content">place holder</div>
  </body>
</html>

...

(defn my-nav-item [[caption func]]
  (kioo/component "main.html" [:.nav-item]
    {[:a] (do-> (content caption)
                (set-attr :onClick func))}))

(defn my-header [heading nav-elms]
  (kioo/component "main.html" [:header]
    {[:h1] (content heading)
     [:ul] (content (map my-nav-item nav-elms))}))

(defn my-page [data]
  (kioo/component "main.html"
    {[:header] (substitute (my-header (:heading data)
                                      (:navigation data)))
     [:.content] (content (:content data))}))

(def app-state (atom {:heading    "main"
                      :content    "Hello World"
                      :navigation [["home" #(js/alert %)]
                                   ["next" #(js/alert %)]]}))

(om/root app-state my-page (.-body js/document))

Om #

In an interview with David Nolen, Tom Coupland (@tcoupland) of InfoQ provides a nice summary of recent developments around Om ("Om: Enhancing Facebook's React with Immutability").

David [Nolen]: I think people are starting to see the limitations of just JavaScript and jQuery and even more structured solutions like Backbone, Angular, Ember, etc. React is a fresh approach to the DOM problem that seems obvious in hindsight.

Read the full interview...

A slice of React, ClojureScript and Om #

Fredrik Dyrkell (@lexicallyscoped) rewrote part of the React tutorial in both ClojureScript and Om, along with short, helpful explanations.

React has sparked a lot of interest in the Clojure community lately [...]. At the very core, React lets you build up your DOM representation in a functional fashion by composing pure functions and you have a simple building block for everything: React components.

Read the full post...

In a separate post, Dyrkell breaks down how to build a binary clock component in Om.

[Demo] [Code]

Time Travel: Implementing undo in Om #

David Nolen shows how to leverage immutable data structures to add global undo functionality to an app – using just 13 lines of ClojureScript.

A Step-by-Step Om Walkthrough #

Josh Lehman took the time to create an extensive step-by-step walkthrough of the React tutorial in Om. The well-documented source is on github.

Omkara #

brendanyounger created omkara, a starting point for ClojureScript web apps based on Om/React. It aims to take advantage of server-side rendering and comes with a few tips on getting started with Om/React projects.

Om Experience Report #

Adam Solove (@asolove) dives a little deeper into Om, React and ClojureScript. He shares some helpful tips he gathered while building his CartoCrayon prototype.

Not-so-random Tweet #

The theme of this first round-up of 2014 is integration. I've tried to assemble a list of articles and projects that use React in various environments.

React Baseline #

React is only one-piece of your web application stack. Mark Lussier shared his baseline stack that uses React along with Grunt, Browserify, Bower, Zepto, Director and Sass. This should help you get started using React for a new project.

As I do more projects with ReactJS I started to extract a baseline to use when starting new projects. This is very opinionated and I change my opinion from time to time. This is by no ways perfect and in your opinion most likely wrong :).. which is why I love github

I encourage you to fork, and make it right and submit a pull request!

My current opinion is using tools like Grunt, Browserify, Bower and multiple grunt plugins to get the job done. I also opted for Zepto over jQuery and the Flatiron Project's Director when I need a router. Oh and for the last little bit of tech that makes you mad, I am in the SASS camp when it comes to stylesheets

Check it out on GitHub...

Animal Sounds #

Josh Duck used React in order to build a Windows 8 tablet app. This is a good example of a touch app written in React.

Download the app...

React Rails Tutorial #

Selem Delul bundled the React Tutorial into a rails app. This is a good example on how to get started with a rails project.

git clone https://github.com/necrodome/react-rails-tutorial
cd react-rails-tutorial
bundle install
rake db:migrate
rails s

Then visit http://localhost:3000/app to see the React application that is explained in the React Tutorial. Try opening multiple tabs!

View on GitHub...

Mixing with Backbone #

Eldar Djafarov implemented a mixin to link Backbone models to React state and a small abstraction to write two-way binding on-top.

View code on JSFiddle

Check out the blog post...

React Infinite Scroll #

Guillaume Rivals implemented an InfiniteScroll component. This is a good example of a React component that has a simple yet powerful API.

<InfiniteScroll
  pageStart={0}
  loadMore={loadFunc}
  hasMore={true || false}
  loader={<div className="loader">Loading ...</div>}>
  {items} // <-- This is the "stuff" you want to load
</InfiniteScroll>

Try it out on GitHub!

Web Components Style #

Thomas Aylott implemented an API that looks like Web Components but using React underneath.

View the source on JSFiddle...

React vs Angular #

React is often compared with Angular. Pete Hunt wrote an opinionated post on the subject.

First of all I think it’s important to evaluate technologies on objective rather than subjective features. “It feels nicer” or “it’s cleaner” aren’t valid reasons: performance, modularity, community size and ease of testing / integration with other tools are.

I’ve done a lot of work benchmarking, building apps, and reading the code of Angular to try to come up with a reasonable comparison between their ways of doing things.

Read the full post...

Random Tweet #

With the new year, we thought you'd enjoy some new tools for debugging React code. Today we're releasing the React Developer Tools, an extension to the Chrome Developer Tools. Download them from the Chrome Web Store.

You will get a new tab titled "React" in your Chrome DevTools. This tab shows you a list of the root React Components that are rendered on the page as well as the subcomponents that each root renders.

Selecting a Component in this tab allows you to view and edit its props and state in the panel on the right. In the breadcrumbs at the bottom, you can inspect the selected Component, the Component that created it, the Component that created that one, and so on.

When you inspect a DOM element using the regular Elements tab, you can switch over to the React tab and the corresponding Component will be automatically selected. The Component will also be automatically selected if you have a breakpoint within its render phase. This allows you to step through the render tree and see how one Component affects another one.

We hope these tools will help your team better understand your component hierarchy and track down bugs. We're very excited about this initial launch and appreciate any feedback you may have. As always, we also accept pull requests on GitHub.

Happy holidays! This blog post is a little-late Christmas present for all the React users. Hopefully it will inspire you to write awesome web apps in 2014!

React Touch #

Pete Hunt wrote three demos showing that React can be used to run 60fps native-like experiences on mobile web. A frosted glass effect, an image gallery with 3d animations and an infinite scroll view.

Try out the demos!

Introduction to React #

Stoyan Stefanov talked at Joe Dev On Tech about React. He goes over all the features of the library and ends with a concrete example.

JSX: E4X The Good Parts #

JSX is often compared to the now defunct E4X, Vjeux went over all the E4X features and explained how JSX is different and hopefully doesn't repeat the same mistakes.

E4X (ECMAScript for XML) is a Javascript syntax extension and a runtime to manipulate XML. It was promoted by Mozilla but failed to become mainstream and is now deprecated. JSX was inspired by E4X. In this article, I'm going to go over all the features of E4X and explain the design decisions behind JSX.

Historical Context

E4X has been created in 2002 by John Schneider. This was the golden age of XML where it was being used for everything: data, configuration files, code, interfaces (DOM) ... E4X was first implemented inside of Rhino, a Javascript implementation from Mozilla written in Java.

Continue reading ...

React + Socket.io #

Geert Pasteels made a small experiment with Socket.io. He wrote a very small mixin that synchronizes React state with the server. Just include this mixin to your React component and it is now live!

changeHandler: function (data) {
  if (!_.isEqual(data.state, this.state) && this.path === data.path) {
    this.setState(data.state);
  }
},
componentDidMount: function (root) {
  this.path = utils.nodePath(root);
  socket.on('component-change', this.changeHandler);
},
componentWillUpdate: function (props, state) {
  socket.emit('component-change', { path: this.path, state: state });
},
componentWillUnmount: function () {
  socket.removeListener('component-change', this.change);
}

Check it out on GitHub...

cssobjectify #

Andrey Popp implemented a source transform that takes a CSS file and converts it to JSON. This integrates pretty nicely with React.

/* style.css */
MyComponent {
  font-size: 12px;
  background-color: red;
}

/* myapp.js */
var React = require('react-tools/build/modules/React');
var Styles = require('./styles.css');

var MyComponent = React.createClass({
  render: function() {
    return (
      <div style={Styles.MyComponent}>
        Hello, world!
      </div>
    )
  }
});

Check it out on GitHub...

ngReact #

David Chang working at HasOffer wanted to speed up his Angular app and replaced Angular primitives by React at different layers. When using React naively it is 67% faster, but when combining it with angular's transclusion it is 450% slower.

Rendering this takes 803ms for 10 iterations, hovering around 35 and 55ms for each data reload (that's 67% faster). You'll notice that the first load takes a little longer than successive loads, and the second load REALLY struggles - here, it's 433ms, which is more than half of the total time!

Read the full article...

vim-jsx #

Max Wang made a vim syntax highlighting and indentation plugin for vim.

Syntax highlighting and indenting for JSX. JSX is a JavaScript syntax transformer which translates inline XML document fragments into JavaScript objects. It was developed by Facebook alongside React.

This bundle requires pangloss's vim-javascript syntax highlighting.

Vim support for inline XML in JS is remarkably similar to the same for PHP.

View on GitHub...

Random Tweet #