lukechilds
/
react.dev
mirror of https://github.com/lukechilds/react.dev.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
6030 Commits
2 Branches
0 Tags
148 MiB
 
 
 
 
Tree: fc42e168d4
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'fc42e168d4'
${ noResults }
react.dev/content/blog/2013-08-26-community-roundu...

4.1 KiB
Raw Blame History

title author
Community Round-up #7 [vjeux]

It's been three months since we open sourced React and it is going well. Some stats so far:

Wolfenstein Rendering Engine Ported to React

Pete Hunt ported the render code of the web version of Wolfenstein 3D to React. Check out the demo and render.js file for the implementation.

React & Meteor

Ben Newman made a 13-lines wrapper to use React and Meteor together. Meteor handles the real-time data synchronization between client and server. React provides the declarative way to write the interface and only updates the parts of the UI that changed.

This repository defines a Meteor package that automatically integrates the React rendering framework on both the client and the server, to complement or replace the default Handlebars templating system.

The React core is officially agnostic about how you fetch and update your data, so it is far from obvious which approach is the best. This package provides one answer to that question (use Meteor!), and I hope you will find it a compelling combination.

var MyComponent = React.createClass({
 mixins: [MeteorMixin],

 getMeteorState: function() {
   return { foo: Session.get('foo') };
 },

 render: function() {
   return <div>{this.state.foo}</div>;
 }
});

Dependencies will be registered for any data accesses performed by getMeteorState so that the component can be automatically re-rendered whenever the data changes.

Read more ...

React Page

Jordan Walke implemented a complete React project creator called react-page. It supports both server-side and client-side rendering, source transform and packaging JSX files using CommonJS modules, and instant reload.

Easy Application Development with React JavaScript

Why Server Rendering?

  • Faster initial page speed:
    • Markup displayed before downloading large JavaScript.
    • Markup can be generated more quickly on a fast server than low power client devices.
  • Faster Development and Prototyping:
    • Instantly refresh your app without waiting for any watch scripts or bundlers.
  • Easy deployment of static content pages/blogs: just archive using recursive wget.
  • SEO benefits of indexability and perf.

How Does Server Rendering Work?

  • react-page computes page markup on the server, sends it to the client so the user can see it quickly.
  • The corresponding JavaScript is then packaged and sent.
  • The browser runs that JavaScript, so that all of the event handlers, interactions and update code will run seamlessly on top of the server generated markup.
  • From the developer's (and the user's) perspective, it's just as if the rendering occurred on the client, only faster.

Try it out ...