ReactJS Conf!
In this second installment of This Week in React we’ve got some awesome news! React Conf is coming January 28-29. If you’re interested in becoming a presenter, you can apply here.
You probably don’t care, but I’ll be going (along with hopefully the rest of the ReactJSNews team). I plan on blogging throughout the conference, this way you can experience some of the talks if even if you can’t make it. The best part is going meeting some of the React community!
##What’s new this week?
I always encourage people to tweet me @ReactJSNews with any of their creations. It’s an easy way to get your stuff out there.
First up, we’ve got the biggest React resource I’ve ever seen. As of writing this, it’s peaked at #10 on hackernews. Check it out if you’re looking to learn literally anything dealing with React. Take my word for it, it’s probably there.
####Components The first component we’ve got is a custom number input field made by @Tommy. It seems to act like a hybrind input / slider field. The component has quite a few options, the example given can be seen here:
<NumberEditor min={0} max={1} step={0.01} decimals={2} onValueChange={onValueChange} />
You can find all the options on github.
Domain Driven Forms by @GiulioCanti is an awesome library for generating html forms through javascript. Creating a form is just too easy:
var t = require('tcomb-form');
// define a type
var Person = t.struct({
name: t.Str,
surname: t.Bool
});
// create the form
var Form = t.form.createForm(Person);
Now that for form is created all you need to do is reference it in a React component: <Form />.
React Select is another form based component. I just realized that every component being featured this week deals with forms! That wasn’t planned, I swear! Anyways, this component aims to make generating select boxes easier. I like that it makes asynchronously addding options easy. Here’s an example with async enabled:
var getOptions = function(input, callback) {
setTimeout(function() {
callback(null, {
options: [
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' }
],
complete: true
});
}, 500);
};
<Select
name="form-field-name"
value="one"
asyncOptions={getOptions}
/>
##React Articles Easier UI Reasoning with Unidirectional Dataflow and Immutable Data
Why you might not need MVC with React.js ##Cool Links
Embedded SVG icon sets and Reactjs
Glenjamin’s favorite NPM modules
Verizon Wireless injecting tracking UIDs into HTTP requests