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