Community Round-up #14

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 #