{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2014/01/06/community-roundup-14.html","result":{"data":{"markdownRemark":{"html":"

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.

\n

React Baseline

\n

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.

\n
\n

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

\n

I encourage you to fork, and make it right and submit a pull request!

\n

My current opinion is using tools like Grunt, Browserify, Bower and multiple 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

\n

Check it out on GitHub…

\n
\n

Animal Sounds

\n

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.\n\n \n \n \n \n \n

\n

Download the app…

\n

React Rails Tutorial

\n

Selem Delul bundled the React Tutorial into a rails app. This is a good example on how to get started with a rails project.

\n
\n
git clone https://github.com/necrodome/react-rails-tutorial\ncd react-rails-tutorial\nbundle install\nrake db:migrate\nrails s
\n

Then visit http://localhost:3000/app to see the React application that is explained in the React Tutorial. Try opening multiple tabs!

\n

View on GitHub…

\n
\n

Mixing with Backbone

\n

Eldar Djafarov implemented a mixin to link Backbone models to React state and a small abstraction to write two-way binding on-top.

\n

View code on JSFiddle

\n

Check out the blog post…

\n

React Infinite Scroll

\n

Guillaume Rivals implemented an InfiniteScroll component. This is a good example of a React component that has a simple yet powerful API.

\n
<InfiniteScroll\n  pageStart={0}\n  loadMore={loadFunc}\n  hasMore={true || false}\n  loader={<div className=\"loader\">Loading ...</div>}>\n  {items} // <-- This is the \"stuff\" you want to load\n</InfiniteScroll>
\n

Try it out on GitHub!

\n

Web Components Style

\n

Thomas Aylott implemented an API that looks like Web Components but using React underneath.

\n

View the source on JSFiddle…

\n

React vs Angular

\n

React is often compared with Angular. Pete Hunt wrote an opinionated post on the subject.

\n
\n

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.

\n

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.

\n

Read the full post…

\n
\n

Random Tweet

\n

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
","excerpt":"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…","frontmatter":{"title":"Community Round-up #14","next":null,"prev":null,"author":[{"frontmatter":{"name":"Vjeux","url":"https://twitter.com/vjeux"}}]},"fields":{"date":"January 06, 2014","path":"content/blog/2014-01-06-community-roundup-14.md","slug":"/blog/2014/01/06/community-roundup-14.html"}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":"Introducing the New JSX Transform"},"fields":{"slug":"/blog/2020/09/22/introducing-the-new-jsx-transform.html"}}},{"node":{"frontmatter":{"title":"React v17.0 Release Candidate: No New Features"},"fields":{"slug":"/blog/2020/08/10/react-v17-rc.html"}}},{"node":{"frontmatter":{"title":"React v16.13.0"},"fields":{"slug":"/blog/2020/02/26/react-v16.13.0.html"}}},{"node":{"frontmatter":{"title":"Building Great User Experiences with Concurrent Mode and Suspense"},"fields":{"slug":"/blog/2019/11/06/building-great-user-experiences-with-concurrent-mode-and-suspense.html"}}},{"node":{"frontmatter":{"title":"Preparing for the Future with React Prereleases"},"fields":{"slug":"/blog/2019/10/22/react-release-channels.html"}}},{"node":{"frontmatter":{"title":"Introducing the New React DevTools"},"fields":{"slug":"/blog/2019/08/15/new-react-devtools.html"}}},{"node":{"frontmatter":{"title":"React v16.9.0 and the Roadmap Update"},"fields":{"slug":"/blog/2019/08/08/react-v16.9.0.html"}}},{"node":{"frontmatter":{"title":"Is React Translated Yet? ¡Sí! Sim! はい！"},"fields":{"slug":"/blog/2019/02/23/is-react-translated-yet.html"}}},{"node":{"frontmatter":{"title":"React v16.8: The One With Hooks"},"fields":{"slug":"/blog/2019/02/06/react-v16.8.0.html"}}},{"node":{"frontmatter":{"title":"React v16.7: No, This Is Not the One With Hooks"},"fields":{"slug":"/blog/2018/12/19/react-v-16-7.html"}}}]}},"pageContext":{"slug":"/blog/2014/01/06/community-roundup-14.html"}},"staticQueryHashes":[]}