React

React v0.10

2014-03-21T00:00:00-07:00

Hot on the heels of the release candidate earlier this week, we're ready to call v0.10 done. The only major issue we discovered had to do with the react-tools package, which has been updated. We've copied over the changelog from the RC with some small clarifying changes.

The release is available for download from the CDN:

React
Dev build with warnings: http://fb.me/react-0.10.0.js
Minified build for production: http://fb.me/react-0.10.0.min.js
React with Add-Ons
Dev build with warnings: http://fb.me/react-with-addons-0.10.0.js
Minified build for production: http://fb.me/react-with-addons-0.10.0.min.js
In-Browser JSX transformer
http://fb.me/JSXTransformer-0.10.0.js

We've also published version 0.10.0 of the react and react-tools packages on npm and the react package on bower.

Please try these builds out and file an issue on GitHub if you see anything awry.

Clone On Mount #

The main purpose of this release is to provide a smooth upgrade path as we evolve some of the implementation of core. In v0.9 we started warning in cases where you called methods on unmounted components. This is part of an effort to enforce the idea that the return value of a component (React.DOM.div(), MyComponent()) is in fact not a reference to the component instance React uses in the virtual DOM. The return value is instead a light-weight object that React knows how to use. Since the return value currently is a reference to the same object React uses internally, we need to make this transition in stages as many people have come to depend on this implementation detail.

In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on this page. Most of the time you can solve your pattern by using refs.

Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:

// This is a common pattern. However instance here really refers to a
// "descriptor", not necessarily the mounted instance.
var instance = <MyComponent/>;
React.renderComponent(instance);
// ...
instance.setProps(...);

// The change here is very simple. The return value of renderComponent will be
// the mounted instance.
var instance = React.renderComponent(<MyComponent/>)
// ...
instance.setProps(...);

These warnings and method forwarding are only enabled in the development build. The production builds continue to work as they did in v0.9. We strongly encourage you to use the development builds to catch these warnings and fix the call sites.

The plan for v0.11 is that we will go fully to "descriptors". Method calls on the return value of MyComponent() will fail hard.

Changelog #

React Core #

New Features #

Added warnings to help migrate towards descriptors
Made it possible to server render without React-related markup (data-reactid, data-react-checksum). This DOM will not be mountable by React. Read the docs for React.renderComponentToStaticMarkup
Added support for more attributes:
- srcSet for <img> to specify images at different pixel ratios
- textAnchor for SVG

Bug Fixes #

Ensure all void elements don’t insert a closing tag into the markup.
Ensure className={false} behaves consistently
Ensure this.refs is defined, even if no refs are specified.

Addons #

update function to deal with immutable data. Read the docs

react-tools #

Added an option argument to transform function. The only option supported is harmony, which behaves the same as jsx --harmony on the command line. This uses the ES6 transforms from jstransform.

React v0.10 RC

2014-03-19T00:00:00-07:00

v0.9 has only been out for a month, but we’re getting ready to push out v0.10 already. Unlike v0.9 which took a long time, we don't have a long list of changes to talk about.

The release candidate is available for download from the CDN:

React
Dev build with warnings: http://fb.me/react-0.10.0-rc1.js
Minified build for production: http://fb.me/react-0.10.0-rc1.min.js
React with Add-Ons
Dev build with warnings: http://fb.me/react-with-addons-0.10.0-rc1.js
Minified build for production: http://fb.me/react-with-addons-0.10.0-rc1.min.js
In-Browser JSX transformer
http://fb.me/JSXTransformer-0.10.0-rc1.js

We've also published version 0.10.0-rc1 of the react and react-tools packages on npm and the react package on bower.

Please try these builds out and file an issue on GitHub if you see anything awry.

Clone On Mount #

Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:

// This is a common pattern. However instance here really refers to a
// "descriptor", not necessarily the mounted instance.
var instance = <MyComponent/>;
React.renderComponent(instance);
// ...
instance.setProps(...);

// The change here is very simple. The return value of renderComponent will be
// the mounted instance.
var instance = React.renderComponent(<MyComponent/>)
// ...
instance.setProps(...);

The plan for v0.11 is that we will go fully to "descriptors". Method calls on the return value of MyComponent() will fail hard.

Changelog #

React Core #

New Features #

Added warnings to help migrate towards descriptors
Made it possible to server render without React-related markup (data-reactid, data-react-checksum). This DOM will not be mountable by React. Read the docs for React.renderComponentToStaticMarkup
Added support for more attributes:
- srcSet for <img> to specify images at different pixel ratios
- textAnchor for SVG

Bug Fixes #

Ensure all void elements don’t insert a closing tag into the markup.
Ensure className={false} behaves consistently
Ensure this.refs is defined, even if no refs are specified.

Addons #

update function to deal with immutable data. Read the docs

react-tools #

Added an option argument to transform function. The only option supported is harmony, which behaves the same as jsx --harmony on the command line. This uses the ES6 transforms from jstransform.

Community Round-up #18

2014-03-14T00:00:00-07:00

In this Round-up, we are taking a few closer looks at React's interplay with different frameworks and architectures.

"Little framework BIG splash" #

Let's start with yet another refreshing introduction to React: Craig Savolainen (@maedhr) walks through some first steps, demonstrating how to build a Google Maps component using React.

Architecting your app with react #

Brandon Konkle (@bkonkle) Architecting your app with react We're looking forward to part 2!

React is not a full MVC framework, and this is actually one of its strengths. Many who adopt React choose to do so alongside their favorite MVC framework, like Backbone. React has no opinions about routing or syncing data, so you can easily use your favorite tools to handle those aspects of your frontend application. You'll often see React used to manage specific parts of an application's UI and not others. React really shines, however, when you fully embrace its strategies and make it the core of your application's interface.

Read the full article...

React vs. async DOM manipulation #

Eliseu Monar (@eliseumds)'s post "ReactJS vs async concurrent rendering" is a great example of how React quite literally renders a whole array of common web development work(arounds) obsolete.

React, Scala and the Play Framework #

Matthias Nehlsen wrote a detailed introductory piece on React and the Play Framework, including a helpful architectural diagram of a typical React app.

Nehlsen's React frontend is the second implementation of his chat application's frontend, following an AngularJS version. Both implementations are functionally equivalent and offer some perspective on differences between the two frameworks.

In another article, he walks us through the process of using React with scala.js to implement app-wide undo functionality.

Also check out his talk at Ping Conference 2014, in which he walks through a lot of the previously content in great detail.

React and Backbone #

The folks over at Venmo are using React in conjunction with Backbone. Thomas Boyt (@thomasaboyt) wrote this detailed piece about why React and Backbone are "a fantastic pairing".

React vs. Ember #

Eric Berry (@coderberry) developed Ember equivalents for some of the official React examples. Read his post for a side-by-side comparison of the respective implementations: "Facebook React vs. Ember".

React and plain old HTML #

Daniel Lo Nigro (@Daniel15) created React-Magic, which leverages React to ajaxify plain old html pages and even allows CSS transitions between pageloads.

React-Magic intercepts all navigation (link clicks and form posts) and loads the requested page via an AJAX request. React is then used to "diff" the old HTML with the new HTML, and only update the parts of the DOM that have been changed.

Check out the project on GitHub...

On a related note, Reactize by Ross Allen (@ssorallen) is a similarly awesome project: A wrapper for Rails' Turbolinks, which seems to have inspired John Lynch (@johnrlynch) to then create a server-rendered version using the JSX transformer in Rails middleware.

React and Object.observe #

Check out François de Campredon's implementation of TodoMVC based on React and ES6's Object.observe.

React and Angular #

Ian Bicking (@ianbicking) of Mozilla Labs explains why he "decided to go with React instead of Angular.js".

ng-React Update #

David Chang works through some performance improvements of his ngReact project. His post "ng-React Update - React 0.9 and Angular Track By" includes some helpful advice on boosting render performance for Angular components.

Angular gives you a ton of functionality out of the box - a full MV* framework - and I am a big fan, but I'll admit that you need to know how to twist the right knobs to get performance.

That said, React gives you a very strong view component out of the box with the performance baked right in. Try as I did, I couldn't actually get it any faster. So pretty impressive stuff.

Read the full post...

React was also recently mentioned at ng-conf, where the Angular team commented on React's concept of the virtual DOM:

React and Web Components #

Jonathan Krause (@jonykrause) offers his thoughts regarding parallels between React and Web Components, highlighting the value of React's ability to render pages on the server practically for free.

Immutable React #

Peter Hausel shows how to build a Wikipedia auto-complete demo based on immutable data structures (similar to mori), really taking advantage of the framework's one-way reactive data binding:

Its truly reactive design makes DOM updates finally sane and when combined with persistent data structures one can experience JavaScript development like it was never done before.

Read the full post

D3 and React #

Ben Smith built some great SVG-based charting components using a little less of D3 and a little more of React: D3 and React - the future of charting components?

Om and React #

Josh Haberman (@joshhaberman) discusses performance differences between React, Om and traditional MVC frameworks in "A closer look at OM vs React performance".

Speaking of Om: Omchaya by Sean Grove (@sgrove) is a neat Cljs/Om example project.

Random Tweets #

Worked for 2 hours on a [@react_js](https://twitter.com/react_js) app sans internet. Love that I could get stuff done with it without googling every question.
— John Shimek (@varikin) February 20, 2014

Community Round-up #17

2014-02-24T00:00:00-08:00

It's exciting to see the number of real-world React applications and components skyrocket over the past months! This community round-up features a few examples of inspiring React applications and components.

React in the Real World #

Facebook Lookback video editor #

Large parts of Facebook's web frontend are already powered by React. The recently released Facebook Lookback video and its corresponding editor are great examples of a complex, real-world React app.

Russia's largest bank is now powered by React #

Sberbank, Russia's largest bank, recently switched large parts of their site to use React, as detailed in this post by Vyacheslav Slinko.

Relato #

Relato by Ben Ripkens shows Open Source Statistics based on npm data. It features a filterable and sortable table built in React. Check it out – it's super fast!

Makona Editor #

John Lynch (@johnrlynch) created Makona, a block-style document editor for the web. Blocks of different content types comprise documents, authored using plain markup. At the switch of a toggle, block contents are then rendered on the page. While not quite a WYSIWYG editor, Makona uses plain textareas for input. This makes it compatible with a wider range of platforms than traditional rich text editors.

Create Chrome extensions using React #

React is in no way limited to just web pages. Brandon Tilley (@BinaryMuse) just released a detailed walk-through of how he built his Chrome extension "Fast Tab Switcher" using React.

Twitter Streaming Client #

Javier Aguirre (@javaguirre) put together a simple twitter streaming client using node, socket.io and React.

Sproutsheet #

Sproutsheet is a gardening calendar. You can use it to track certain events that happen in the life of your plants. It's currently in beta and supports localStorage, and data/image import and export.

Instant Domain Search #

Instant Domain Search also uses React. It sure is instant!

SVG-based graphical node editor #

NoFlo and Meemoo developer Forresto Oliphant built an awesome SVG-based node editor in React.

Ultimate Tic-Tac-Toe Game in React #

Rafał Cieślak (@Ravicious) wrote a React version of Ultimate Tic Tac Toe. Find the source here.

ReactJS Gallery #

Emanuele Rampichini's ReactJS Gallery is a cool demo app that shows fullscreen images from a folder on the server. If the folder content changes, the gallery app updates via websockets.

Emanuele shared this awesome demo video with us:

React Components #

Table Sorter #

Table Sorter by bgerm [source] is another helpful React component.

Static-search #

Dmitry Chestnykh @dchest wrote a static search indexer in Go, along with a React-based web front-end that consumes search result via JSON.

Lorem Ipsum component #

Martin Andert created react-lorem-component, a simple component for all your placeholding needs.

Input with placeholder shim #

react-input=placeholder by enigma-io is a small wrapper around React.DOM.input that shims in placeholder functionality for browsers that don't natively support it.

diContainer #

dicontainer provides a dependency container that lets you inject Angular-style providers and services as simple React.js Mixins.

React server rendering #

Ever wonder how to pre-render React components on the server? react-server-example by Michael Hart (@hichaelmart) walks through the necessary steps.

Similarly, Alan deLevie (@adelevie) created react-client-server-starter, another detailed walk-through of how to server-render your app.

Random Tweet #

Recent changes: web ui is being upgraded to [#reactjs](https://twitter.com/search?q=%23reactjs&src=hash), HEAD~4 at [https://camlistore.googlesource.com/camlistore/](https://camlistore.googlesource.com/camlistore/)
— Camlistore (@Camlistore) January 16, 2014

React v0.9

2014-02-20T00:00:00-08:00

I'm excited to announce that today we're releasing React v0.9, which incorporates many bug fixes and several new features since the last release. This release contains almost four months of work, including over 800 commits from over 70 committers!

Thanks to everyone who tested the release candidate; we were able to find and fix an error in the event handling code, we upgraded envify to make running browserify on React faster, and we added support for five new attributes.

As always, the release is available for download from the CDN:

React
Dev build with warnings: http://fb.me/react-0.9.0.js
Minified build for production: http://fb.me/react-0.9.0.min.js
React with Add-Ons
Dev build with warnings: http://fb.me/react-with-addons-0.9.0.js
Minified build for production: http://fb.me/react-with-addons-0.9.0.min.js
In-Browser JSX Transformer
http://fb.me/JSXTransformer-0.9.0.js

We've also published version 0.9.0 of the react and react-tools packages on npm and the react package on bower.

What’s New? #

This version includes better support for normalizing event properties across all supported browsers so that you need to worry even less about cross-browser differences. We've also made many improvements to error messages and have refactored the core to never rethrow errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly.

We've also added to the add-ons build React.addons.TestUtils, a set of new utilities to help you write unit tests for React components. You can now simulate events on your components, and several helpers are provided to help make assertions about the rendered DOM tree.

We've also made several other improvements and a few breaking changes; the full changelog is provided below.

JSX Whitespace #

In addition to the changes to React core listed below, we've made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:

<div>
  Monkeys:
  {listOfMonkeys} {submitButton}
</div>

In v0.8 and below, it was transformed to the following:

React.DOM.div(null,
  " Monkeys: ",
  listOfMonkeys, submitButton
)

In v0.9, it will be transformed to this JS instead:

React.DOM.div(null,
  "Monkeys:",
  listOfMonkeys, " ", submitButton
)

We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.

In cases where you want to preserve the space adjacent to a newline, you can write {'Monkeys: '} or Monkeys:{' '} in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can install jsx_whitespace_transformer from npm and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.

Changelog #

React Core #

Breaking Changes #

The lifecycle methods componentDidMount and componentDidUpdate no longer receive the root node as a parameter; use this.getDOMNode() instead
Whenever a prop is equal to undefined, the default value returned by getDefaultProps will now be used instead
React.unmountAndReleaseReactRootNode was previously deprecated and has now been removed
React.renderComponentToString is now synchronous and returns the generated HTML string
Full-page rendering (that is, rendering the <html> tag using React) is now supported only when starting with server-rendered markup
On mouse wheel events, deltaY is no longer negated
When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, type checks are now skipped for performance)
On input, select, and textarea elements, .getValue() is no longer supported; use .getDOMNode().value instead
this.context on components is now reserved for internal use by React

New Features #

React now never rethrows errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly
Added support for SVG tags defs, linearGradient, polygon, radialGradient, stop
Added support for more attributes:
- crossOrigin for CORS requests
- download and hrefLang for <a> tags
- mediaGroup and muted for <audio> and <video> tags
- noValidate and formNoValidate for forms
- property for Open Graph <meta> tags
- sandbox, seamless, and srcDoc for <iframe> tags
- scope for screen readers
- span for <colgroup> tags
Added support for defining propTypes in mixins
Added any, arrayOf, component, oneOfType, renderable, shape to React.PropTypes
Added support for statics on component spec for static component methods
On all events, .currentTarget is now properly set
On keyboard events, .key is now polyfilled in all browsers for special (non-printable) keys
On clipboard events, .clipboardData is now polyfilled in IE
On drag events, .dataTransfer is now present
Added support for onMouseOver and onMouseOut in addition to the existing onMouseEnter and onMouseLeave events
Added support for onLoad and onError on <img> elements
Added support for onReset on <form> elements
The autoFocus attribute is now polyfilled consistently on input, select, and textarea

Bug Fixes #

React no longer adds an __owner__ property to each component's props object; passed-in props are now never mutated
When nesting top-level components (e.g., calling React.renderComponent within componentDidMount), events now properly bubble to the parent component
Fixed a case where nesting top-level components would throw an error when updating
Passing an invalid or misspelled propTypes type now throws an error
On mouse enter/leave events, .target, .relatedTarget, and .type are now set properly
On composition events, .data is now properly normalized in IE9 and IE10
CSS property values no longer have px appended for the unitless properties columnCount, flex, flexGrow, flexShrink, lineClamp, order, widows
Fixed a memory leak when unmounting children with a componentWillUnmount handler
Fixed a memory leak when renderComponentToString would store event handlers
Fixed an error that could be thrown when removing form elements during a click handler
Boolean attributes such as disabled are rendered without a value (previously disabled="true", now simply disabled)
key values containing . are now supported
Shortened data-reactid values for performance
Components now always remount when the key property changes
Event handlers are attached to document only when necessary, improving performance in some cases
Events no longer use .returnValue in modern browsers, eliminating a warning in Chrome
scrollLeft and scrollTop are no longer accessed on document.body, eliminating a warning in Chrome
General performance fixes, memory optimizations, improvements to warnings and error messages

React with Addons #

React.addons.TestUtils was added to help write unit tests
React.addons.TransitionGroup was renamed to React.addons.CSSTransitionGroup
React.addons.TransitionGroup was added as a more general animation wrapper
React.addons.cloneWithProps was added for cloning components and modifying their props
Bug fix for adding back nodes during an exit transition for CSSTransitionGroup
Bug fix for changing transitionLeave in CSSTransitionGroup
Performance optimizations for CSSTransitionGroup
On checkbox <input> elements, checkedLink is now supported for two-way binding

JSX Compiler and react-tools Package #

Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed
The react-tools npm package no longer includes the React core libraries; use the react package instead.
displayName is now added in more cases, improving error messages and names in the React Dev Tools
Fixed an issue where an invalid token error was thrown after a JSX closing tag
JSXTransformer now uses source maps automatically in modern browsers
JSXTransformer error messages now include the filename and problematic line contents when a file fails to parse

React v0.9 RC

2014-02-16T00:00:00-08:00

We're almost ready to release React v0.9! We're posting a release candidate so that you can test your apps on it; we'd much prefer to find show-stopping bugs now rather than after we release.

The release candidate is available for download from the CDN:

React
Dev build with warnings: http://fb.me/react-0.9.0-rc1.js
Minified build for production: http://fb.me/react-0.9.0-rc1.min.js
React with Add-Ons
Dev build with warnings: http://fb.me/react-with-addons-0.9.0-rc1.js
Minified build for production: http://fb.me/react-with-addons-0.9.0-rc1.min.js
In-Browser JSX transformer
http://fb.me/JSXTransformer-0.9.0-rc1.js

We've also published version 0.9.0-rc1 of the react and react-tools packages on npm and the react package on bower.

Please try these builds out and file an issue on GitHub if you see anything awry.

Upgrade Notes #

<div>
  Monkeys:
  {listOfMonkeys} {submitButton}
</div>

In v0.8 and below, it was transformed to the following:

React.DOM.div(null,
  " Monkeys: ",
  listOfMonkeys, submitButton
)

In v0.9, it will be transformed to this JS instead:

React.DOM.div(null,
  "Monkeys:",
  listOfMonkeys, " ", submitButton
)

We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.

In cases where you want to preserve the space adjacent to a newline, you can write a JS string like {"Monkeys: "} in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can install jsx_whitespace_transformer from npm and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.

Changelog #

React Core #

Breaking Changes #

The lifecycle methods componentDidMount and componentDidUpdate no longer receive the root node as a parameter; use this.getDOMNode() instead
Whenever a prop is equal to undefined, the default value returned by getDefaultProps will now be used instead
React.unmountAndReleaseReactRootNode was previously deprecated and has now been removed
React.renderComponentToString is now synchronous and returns the generated HTML string
Full-page rendering (that is, rendering the <html> tag using React) is now supported only when starting with server-rendered markup
On mouse wheel events, deltaY is no longer negated
When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, the type checks are now skipped for performance)
On input, select, and textarea elements, .getValue() is no longer supported; use .getDOMNode().value instead
this.context on components is now reserved for internal use by React

New Features #

React now never rethrows errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly
Added a new tool for profiling React components and identifying places where defining shouldComponentUpdate can give performance improvements
Added support for SVG tags defs, linearGradient, polygon, radialGradient, stop
Added support for more attributes:
- noValidate and formNoValidate for forms
- property for Open Graph <meta> tags
- sandbox, seamless, and srcDoc for <iframe> tags
- scope for screen readers
- span for <colgroup> tags
Added support for defining propTypes in mixins
Added any, arrayOf, component, oneOfType, renderable, shape to React.PropTypes
Added support for statics on component spec for static component methods
On all events, .currentTarget is now properly set
On keyboard events, .key is now polyfilled in all browsers for special (non-printable) keys
On clipboard events, .clipboardData is now polyfilled in IE
On drag events, .dataTransfer is now present
Added support for onMouseOver and onMouseOut in addition to the existing onMouseEnter and onMouseLeave events
Added support for onLoad and onError on <img> elements
Added support for onReset on <form> elements
The autoFocus attribute is now polyfilled consistently on input, select, and textarea

Bug Fixes #

React no longer adds an __owner__ property to each component's props object; passed-in props are now never mutated
When nesting top-level components (e.g., calling React.renderComponent within componentDidMount), events now properly bubble to the parent component
Fixed a case where nesting top-level components would throw an error when updating
Passing an invalid or misspelled propTypes type now throws an error
On mouse enter/leave events, .target, .relatedTarget, and .type are now set properly
On composition events, .data is now properly normalized in IE9 and IE10
CSS property values no longer have px appended for the unitless properties columnCount, flex, flexGrow, flexShrink, lineClamp, order, widows
Fixed a memory leak when unmounting children with a componentWillUnmount handler
Fixed a memory leak when renderComponentToString would store event handlers
Fixed an error that could be thrown when removing form elements during a click handler
key values containing . are now supported
Shortened data-reactid values for performance
Components now always remount when the key property changes
Event handlers are attached to document only when necessary, improving performance in some cases
Events no longer use .returnValue in modern browsers, eliminating a warning in Chrome
scrollLeft and scrollTop are no longer accessed on document.body, eliminating a warning in Chrome
General performance fixes, memory optimizations, improvements to warnings and error messages

React with Addons #

React.addons.TransitionGroup was renamed to React.addons.CSSTransitionGroup
React.addons.TransitionGroup was added as a more general animation wrapper
React.addons.cloneWithProps was added for cloning components and modifying their props
Bug fix for adding back nodes during an exit transition for CSSTransitionGroup
Bug fix for changing transitionLeave in CSSTransitionGroup
Performance optimizations for CSSTransitionGroup
On checkbox <input> elements, checkedLink is now supported for two-way binding

JSX Compiler and react-tools Package #

Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed
The react-tools npm package no longer includes the React core libraries; use the react package instead.
displayName is now added in more cases, improving error messages and names in the React Dev Tools
Fixed an issue where an invalid token error was thrown after a JSX closing tag
JSXTransformer now uses source maps automatically in modern browsers
JSXTransformer error messages now include the filename and problematic line contents when a file fails to parse

Community Round-up #16

2014-02-15T00:00:00-08:00

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 #

[#reactjs](https://twitter.com/search?q=%23reactjs&src=hash) has very simple API, but it's amazing how much work has been done under the hood to make it blazing fast.
— Anton Astashov (@anton_astashov) December 30, 2013

[#reactjs]((https://twitter.com/search?q=%23reactjs&src=hash) makes refactoring your HTML as easy & natural as refactoring your javascript [@react_js](https://twitter.com/react_js)
— Jared Forsyth (@jaredforsyth) January 6, 2014

Played with react.js for an hour, so many things suddenly became stupidly simple.
— andrewingram (@andrewingram) January 13, 2014

[@okonetchnikov](https://twitter.com/okonetchnikov) HOLY CRAP react is nice
— julik (@julikt) January 13, 2014

brb rewriting everything with react
— Ben Smithett (@bensmithett) February 4, 2014

Community Round-up #15

2014-02-05T00:00:00-08:00

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 #

[@swannodette](https://twitter.com/swannodette) No thank you! It's honestly a bit weird because Om is exactly what I didn't know I wanted for doing functional UI work.
— Adam Solove (@asolove) January 6, 2014

Community Round-up #14

2014-01-06T00:00:00-08:00

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 mutiple 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.

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.

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 #

Really intrigued by React.js. I've looked at all JS frameworks, and excepting @serenadejs this is the first one which makes sense to me.
— Jonas Nicklas (@jonicklas) December 16, 2013

React Chrome Developer Tools

2014-01-02T00:00:00-08:00

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.