React

About

React is a virtual dom technology that permits to create HTML page or components based on the concepts that:

  • If the data (state) changes, the UI should change too.
  • Learn once, write anywhere

Most of the example use Babel as Javascript language. Babel offers support:

Inventor: Jordan Walke ??

Example

Native Javascript

In Native Javascript, in the browser with createElement

ReactDOM.render(
  React.createElement(
     'h1',
     {className: 'hallo'},
     'Hello, world!'
  ),
  document.getElementById('root')
);
<div id="root">
  <!-- This div's content will be managed by React. -->
</div>

In Jsx

In jsx where the createElement is replaced by XHTML like tag

var HelloComponent = function() {
   return (
    <h1 className="hello">
        <span>Hello World</span>
    </h1>
   )
};
  • The rendering into the html element with the root id.
ReactDOM.render(<HelloComponent/>, document.getElementById('root'));
<div id="root">
  <!-- Where react render the component -->
</div>
  • Result:

Node

When developing a React application in Node, you need to import it or require it.

var React = require ('React');

let message = 
    React.DOM.div(
		{
		className: 'hello',
		onClick: somFunc
		},
		[React.DOM.span(null, ['Hello World'])]
		);
	
React.renderComponent(message, document.body)		

Mapping React Class / HTML element

React Mapping Html Javascript

{this.props.text.toUppercase}

Model

Composition

React creates a DOM tree of React element that build a components hierarchy where:

or in the other direction

The root may represent:

Data / State

See React - State

Documentation / Reference





Discover More
Emoji Increase Engagement
Commenting System / Discussion application

This page shows you a list of commenting systems that you may use for your web site.
Card Puncher Data Processing
Convexity in Software Dev

abstraction physical widgets, you can only get so much better at building widgets (concave). software and you come up with a better way of building software (tool/language/technique/pattern/library),...
Card Puncher Data Processing
D3 - Selection

D3 adopts the W3C Selectors API to identify document elements for selection. Any number of operators can be applied to selected elements. These operators wrap the W3C DOM API, setting: attributes (attr),...
Dom - Virtual DOM

Front-end framework may implement above the browser dom a virtual dom in order to update/refresh their component. This framework manipulates the DOM with the help of a virtual dom tree. - entirely...
Progressive Web Application (PWA)

A is a regular website that take advantage of modern browser functionality to augment the web experience progressively until you get a native look and feel application. Its name comes from the context...
React - FontAwesome (Icon)

Fontawesome is a library of icon (free and paid). This section is talking fontawesome integration into react. When reading the documentation, you will find prefix that references a style (ie a...
React - Framework

A react framework is a library that is based on react adding other capabilities. Most of the time, they are web based server framework, adding routing and other web capabilities. They create a single...
React - Jquery

Jquery integration in React React is unaware of changes made to the DOM outside of React therefore to integrate DOM manipulation library such as Jquery, React should be prevented from updating the component...
React - Material UI - Icon

This page is the svg icon functionality of material ui for react. FYI a font or class (Example with awesome) The SvgIcon component Standardized Material Design icons exported...
React Framework - React-Static

react-static is a React framework for the creation of static ssr rendered page and dynamic react website. At build time React-Static Example with : ...



Share this page:
Follow us:
Task Runner