React
Table of Contents
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:
- for React JSX
- and ES - ES6 Harmony (ES2015) (also known as ES2015)
Inventor: Jordan Walke ??
2 - Articles Related
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:
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}