React

> (World Wide) Web - (W3|WWW) > Javascript (Js|ECMAScript) > React

1 - About

React is a DOM framework.

  • 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 ??

Advertising

3 - Library

4 - Data Model

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

5 - Example

5.1 - 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>

5.2 - 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)		

6 - Mapping React Class / HTML element

{this.props.text.toUppercase}

Advertising

7 - Documentation / Reference