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:

Inventor: Jordan Walke ??

Library

Model

Composition

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

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>

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}

Documentation / Reference


Powered by ComboStrap