{"componentChunkName":"component---src-templates-blog-js","path":"/blog/2014/09/12/community-round-up-22.html","result":{"data":{"markdownRemark":{"html":"

This has been an exciting summer as four big companies: Yahoo, Mozilla, Airbnb and Reddit announced that they were using React!

\n
\n

Our friends at @yahoo talk about migrating Yahoo! Mail from YUI to ReactJS at the next #ReactJS meetup! http://t.co/Cu2AaE0sVE

— Facebook Open Source (@fbOpenSource) September 12, 2014
\n		\n

I guess @reactjs is getting into Firefox :-) Thanks @n1k0 ! https://t.co/kipfUS0hu4

— David Bruant (@DavidBruant) July 4, 2014
\n
\n

.@AirbnbNerds just launched our first user-facing React.js feature to production! We love it so far. https://t.co/KtyudemcIW /@floydophone

— spikebrehm (@spikebrehm) July 22, 2014
\n		\n

We shipped reddit's first production @reactjs code last week, our checkout process. https://t.co/KUInwsCmAF

— Brian Holt (@holtbt) July 28, 2014
\n
\n

React’s Architecture

\n

Vjeux, from the React team, gave a talk at OSCON on the history of React and the various optimizations strategies that are implemented. You can also check out the annotated slides or Chris Dawson’s notes titled JavaScript’s History and How it Led To React.

\n
\n

v8 optimizations

\n

Jakob Kummerow landed two optimizations to V8 specifically targeted at optimizing React. That’s really exciting to see browser vendors helping out on performance!

\n

Reusable Components by Khan Academy

\n

Khan Academy released many high quality standalone components they are using. This is a good opportunity to see what React code used in production look like.

\n
var TeX = require('react-components/js/tex.jsx');\nReact.renderComponent(<TeX>\\nabla \\cdot E = 4 \\pi \\rho</TeX>, domNode);\n\nvar translated = (\n  <$_ first=\"Motoko\" last=\"Kusanagi\">\n    Hello, %(first)s %(last)s!\n  </$_>\n);
\n

React + Browserify + Gulp

\n

Trường wrote a little guide to help your getting started using React, Browserify and Gulp.

\n
\n \n \n \"react\n \n \n
\n

React Style

\n

After React put HTML inside of JavaScript, Sander Spies takes the same approach with CSS: IntegratedCSS. It seems weird at first but this is the direction where React is heading.

\n
var Button = React.createClass({\n  normalStyle: ReactStyle(function() {\n    return { backgroundColor: vars.orange };\n  }),\n  activeStyle: ReactStyle(function() {\n    if (this.state.active) {\n      return { color: 'yellow', padding: '10px' };\n    }\n  }),\n  render: function() {\n    return (\n      <div styles={[this.normalStyle(), this.activeStyle()]}>\n        Hello, I'm styled\n      </div>\n    );\n  }\n});
\n

Virtual DOM in Elm

\n

Evan Czaplicki explains how Elm implements the idea of a Virtual DOM and a diffing algorithm. This is great to see React ideas spread to other languages.

\n
\n

Performance is a good hook, but the real benefit is that this approach leads to code that is easier to understand and maintain. In short, it becomes very simple to create reusable HTML widgets and abstract out common patterns. This is why people with larger code bases should be interested in virtual DOM approaches.

\n

Read the full article

\n
\n

Components Tutorial

\n

If you are getting started with React, Joe Maddalone made a good tutorial on how to build your first component.

\n
\n

Saving time & staying sane?

\n

When Kent William Innholt who works at M>Path summed up his experience using React in an article.

\n
\n

We’re building an ambitious new web app, where the UI complexity represents most of the app’s complexity overall. It includes a tremendous amount of UI widgets as well as a lot rules on what-to-show-when. This is exactly the sort of situation React.js was built to simplify.

\n\n

Read the article…

\n
\n

Weather

\n

To finish this round-up, Andrew Gleave made a page that displays the Weather. It’s great to see that React is also used for small prototypes.

\n
\n \n \n \"weather\"\n \n \n
","excerpt":"This has been an exciting summer as four big companies: Yahoo, Mozilla, Airbnb and Reddit announced that they were using React! React’s Architecture Vjeux, from the React team, gave a talk at OSCON on the history of React and the various optimizations strategies that are implemented. You can also check out the annotated slides or Chris Dawson’s notes titled JavaScript’s History and How it Led To React. v8 optimizations Jakob Kummerow landed two optimizations to V8 specifically targeted at…","frontmatter":{"title":"Community Round-up #22","next":null,"prev":null,"author":[{"frontmatter":{"name":"Lou Husson","url":"https://twitter.com/loukan42"}}]},"fields":{"date":"September 12, 2014","path":"content/blog/2014-09-12-community-round-up-22.md","slug":"/blog/2014/09/12/community-round-up-22.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/09/12/community-round-up-22.html"}},"staticQueryHashes":[]}