Community Round-up #5

We launched the React Facebook Page along with the React v0.4 launch. 700 people already liked it to get updated on the project :)

Cross-browser onChange

Sophie Alpert from Khan Academy worked on a cross-browser implementation of onChange event that landed in v0.4. She wrote a blog post explaining the various browser quirks she had to deal with.

First off, what is the input event? If you have an <input> element and want to receive events whenever the value changes, the most obvious thing to do is to listen to the change event. Unfortunately, change fires only after the text field is defocused, rather than on each keystroke. The next obvious choice is the keyup event, which is triggered whenever a key is released. Unfortunately, keyup doesn’t catch input that doesn’t involve the keyboard (e.g., pasting from the clipboard using the mouse) and only fires once if a key is held down, rather than once per inserted character.

Both keydown and keypress do fire repeatedly when a key is held down, but both fire immediately before the value changes, so to read the new value you have to defer the handler to the next event loop using setTimeout(fn, 0) or similar, which slows down your app. Of course, like keyup, neither keydown nor keypress fires for non-keyboard input events, and all three can fire in cases where the value doesn’t change at all (such as when pressing the arrow keys).

Read the full post…

React Samples

Learning a new library is always easier when you have working examples you can play with. jwh put many of them on his react-samples GitHub repo.

Some simple examples with Facebook’s React framework

• Bootstrap action bar, modal and table #1, #2, #3, #4
• Comments #1, #2
• Data Table #1, #2, #3, #4, #5
• Filter Bar #1, #2, #3, #4, #5
• Fundoo Rating #1
• Line Char: #1, #2
• Multi tabs #1
• Select #1
• Simple Tabs #1, #2, #3, #4
• Toggle #1

React Chosen Wrapper

Cheng Lou wrote a wrapper for the Chosen input library called react-chosen. It took just 25 lines to be able to use jQuery component as a React one.

React.renderComponent(
  <Chosen noResultsText="No result" value="Harvest" onChange={doSomething}>
    <option value="Facebook">Facebook</option>
    <option value="Harvest">Harvest</option>
  </Chosen>
, document.getElementById('example'));

JSX and ES6 Template Strings

Domenic Denicola wrote a slide deck about the great applications of ES6 features and one slide shows how we could use Template Strings to compile JSX at run-time without the need for a pre-processing phase.

React Presentation

Tom Occhino and Jordan Walke, React developers, did a presentation of React at Facebook Seattle’s office. Check out the first 25 minutes for the presentation and the remaining 45 for a Q&A. I highly recommend you watching this video.

Docs

Pete Hunt rewrote the entirety of the docs for v0.4. The goal was to add more explanation about why we built React and what the best practices are.

Guides

• Why React?

• Displaying Data

  • JSX in Depth
  • JSX Gotchas
• Interactivity and Dynamic UIs
• Multiple Components
• Reusable Components
• Forms

• Working With the Browser

  • More About Refs
• Tooling integration
• Reference