React

React

About

React is a front-end framework base on the virtual dom technology

If the data (state) changes, UI should change.
Learn once, write anywhere

Most of the example use Babel as Javascript language. Babel offers support:

for React JSX
and ES - ES6 Harmony (ES2015) (also known as ES2015)

Inventor: Jordan Walke ??

Articles Related

Library

Model

Composition

React creates a DOM tree that build a components hierarchy where:

The root component of the tree (generally a screen (web page) but may be also a page component) is composed of
Composite components that is composed
Of simple Component

or in the other direction

Single components can be combined in a
Composite components that can be combined in a
Root tree (Screen, Windows)

Data

There are two types of “model” data in React:

props (component parameters) - passed between component - component signature
and state (DOM rendering. Change of state trigger changes of UI. - Local to component

Example

Browser

ReactDOM.render(
  React.createElement(
     'h1',
     null,
     'Hello, world!'
  ),
  document.getElementById('root')
);

<div id="root">
  <!-- This div's content will be managed by React. -->
</div>

Rendered by WebCode

Node

var React = require ('React');

var message = 
    React.DOM.div(
		{
		className: 'hello',
		onClick: somFunc
		},
		[React.DOM.span(null, ['Hello World'])]
		);

// Same as in Jsx
var message = 
	<div class="hello" onClick={somFunc}>
		<span>Hello World</span>
	</div>;
	
React.renderComponent(message, document.body)

Mapping React Class / HTML element

{this.props.text.toUppercase}