ReactJs for ngDevs

The react code is extracted from ruanyf's Github React deoms. It will take about 10 seconds to load all the demos. Please be patient.

Demo 1: Hello world

Result:

AngularJs implementation:

ReactJs implementation:

Apparently, there is more boilerplate code for AngularJs. The advantage of using angular here is the element can be directly put in the html, thus more sematic.

Demo 2: JSX grammar

JSX grammar allow the user to mix HTML tags with JavaScript code. When embedding JavaScriptp code (expression) inside HTML tag, you need to wrap it with {}. For more information about JSX, please click here.

Result:

AngularJs implementation:

ReactJs implementation:

Demo 3: Component

Component is the ReactJs concept that is most similar to AngularJs' directive. You can access the attriubte value with this.props.attrName. {this.props.name} as in the following example. What belongs to template and link typically goes into render of React Class. In more complex scenarios, you may be using transclude: 'element' to get the original node. See Demo 5.

Result:

ReactJs implementation:

AngularJs implementation:

Demo 4: Node children

Accessing the original node in AngularJs requires transclude. In this demo, template is commented out, because it will be ingored when transclude is provided. ReactJs' implementation looks more straight forward.

Result:

ReactJs implementation:

AngularJs implementation:

Demo 5: Access real DOM

Note that in Demo 4 ReactJs implementation, we were not accessing the real DOM. To access the real DOM, we will need React.findDOMNode. On the contratory, you always operate on the real DOM in AngularJs.

Result:

AngularJs implementation:

ReactJs implementation:

Demo 6: State

this.state is a special property that you can initialise with getInitialState() function. ng-model may be the most similar part in AngularJs.

Result:

AngularJs implementation:

ReactJs implementation:

Demo 7: Form

Form handling in AngluarJs is far more simpler. Event handling is completely encapsulated with related directives.

Result:

AngularJs implementation:

ReactJs implementation:

Demo 8: Lifecycle

Lifecycle is more complex in AngularJs. Please checkout (too-long-warning) this or this. Here we are just simulating the effect as in the ReactJs demo.

More informaiton on ReactJs' lifecycle please click here. componentDidMount is called only once. It is good place to put your view logic.

Result:

AngularJs implementation:

ReactJs implementation:

Demo 9: Ajax

This demo shows how ReactJs component communicate with backend. ReactJs does not have a built-in machanism issuing Ajax calls. $http is Angular's way to perform http requests.

Result:

ReactJs implementation:

AngularJs implementation:


3,014 3 15