React

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

3 - Library

4 - Model

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

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

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}

7 - Documentation / Reference


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap