React
Table of Contents
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 ??
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:
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
- Freenode: #reactjs
