{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2013/12/23/community-roundup-12.html","result":{"data":{"markdownRemark":{"html":"

React got featured on the front-page of Hacker News thanks to the Om library. If you try it out for the first time, take a look at the docs and do not hesitate to ask questions on the Google Group, IRC or Stack Overflow. We are trying our best to help you out!

\n

The Future of JavaScript MVC

\n

David Nolen announced Om, a thin wrapper on-top of React in ClojureScript. It stands out by only using immutable data structures. This unlocks the ability to write a very efficient shouldComponentUpdate and get huge performance improvements on some tasks.

\n
\n

We’ve known this for some time over here in the ClojureScript corner of the world - all of our collections are immutable and modeled directly on the original Clojure versions written in Java. Modern JavaScript engines have now been tuned to the point that it’s no longer uncommon to see collection performance within 2.5X of the Java Virtual Machine.

\n

Wait, wait, wait. What does the performance of persistent data structures have to do with the future of JavaScript MVCs?

\n

A whole lot.

\n
\n \n \n \"om\n \n \n
\n

Read the full article…

\n
\n

Scroll Position with React

\n

Managing the scroll position when new content is inserted is usually very tricky to get right. Vjeux discovered that componentWillUpdate and componentDidUpdate were triggered exactly at the right time to manage the scroll position.

\n
\n

We can check the scroll position before the component has updated with componentWillUpdate and scroll if necessary at componentDidUpdate

\n
componentWillUpdate: function() {\n  var node = this.getDOMNode();\n  this.shouldScrollBottom =\n    (node.scrollTop + node.offsetHeight) === node.scrollHeight;\n},\ncomponentDidUpdate: function() {\n  if (this.shouldScrollBottom) {\n    var node = this.getDOMNode();\n    node.scrollTop = node.scrollHeight\n  }\n},
\n

Check out the blog article…

\n
\n

Lights Out

\n

React declarative approach is well suited to write games. Cheng Lou wrote the famous Lights Out game in React. It’s a good example of use of TransitionGroup to implement animations.

\n
\n \n \n \"lights\n \n \n
\n

Try it out!

\n

Reactive Table Bookmarklet

\n

Stoyan Stefanov wrote a bookmarklet to process tables on the internet. It adds a little “pop” button that expands to a full-screen view with sorting, editing and export to csv and json.

\n
\n \n \n \"reactive\n \n \n
\n

Check out the blog post…

\n

MontageJS Tutorial in React

\n

Ross Allen implemented MontageJS’s Reddit tutorial in React. This is a good opportunity to compare the philosophies of the two libraries.

\n

View the source on JSFiddle…

\n

Writing Good React Components

\n

William Högman Rudenmalm wrote an article on how to write good React components. This is full of good advice.

\n
\n

The idea of dividing software into smaller parts or components is hardly new - It is the essance of good software. The same principles that apply to software in general apply to building React components. That doesn’t mean that writing good React components is just about applying general rules.

\n

The web offers a unique set of challenges, which React offers interesting solutions to. First and foremost among these solutions is the what is called the Mock DOM. Rather than having user code interface with the DOM in a direct fashion, as is the case with most DOM manipulation libraries.

\n

You build a model of how you want the DOM end up like. React then inserts this model into the DOM. This is very useful for updates because React simply compares the model or mock DOM against the actual DOM, and then only updates based on the difference between the two states.

\n

Read the full article …

\n
\n

Hoodie React TodoMVC

\n

Sven Lito integrated the React TodoMVC example within an Hoodie web app environment. This should let you get started using Hoodie and React.

\n
hoodie new todomvc -t "hoodiehq/hoodie-react-todomvc"
\n

Check out on GitHub…

\n

JSX Compiler

\n

Ever wanted to have a quick way to see what a JSX tag would be converted to? Tim Yung made a page for it.

\n
\n \n \n \"jsx\n \n \n
\n

Try it out!

\n

Random Tweet

\n

.@jordwalke lays down some truth http://t.co/AXAn0UlUe3, optimizing your JS application shouldn't force you to rewrite so much code #reactjs

— David Nolen (@swannodette) December 19, 2013
","excerpt":"React got featured on the front-page of Hacker News thanks to the Om library. If you try it out for the first time, take a look at the docs and do not hesitate to ask questions on the Google Group, IRC or Stack Overflow. We are trying our best to help you out! The Future of JavaScript MVC David Nolen announced Om, a thin wrapper on-top of React in ClojureScript. It stands out by only using immutable data structures. This unlocks the ability to write a very efficient shouldComponentUpdate and…","frontmatter":{"title":"Community Round-up #12","next":null,"prev":null,"author":[{"frontmatter":{"name":"Vjeux","url":"https://twitter.com/vjeux"}}]},"fields":{"date":"December 23, 2013","path":"content/blog/2013-12-23-community-roundup-12.md","slug":"/blog/2013/12/23/community-roundup-12.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/2013/12/23/community-roundup-12.html"}},"staticQueryHashes":[]}