React

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

1 - About

Javascript UI library

React is a DOM framework.

Freenode: #reactjs

If the data 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)
  • and state (DOM rendering. Change of state trigger changes of UI.

State is similar to props, but it is private and fully controlled by the 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

web/javascript/react/react.txt · Last modified: 2019/02/16 17:40 by gerardnico