React.js

Introduction to React

• React is an open-source JavaScript library created by Facebook in 2011 for building component based user interfaces for the web and mobile applications.
• React provides the View in the Model View Controller architecture.
• React is a library, not a framework (like Angular).
• React directly interacts with a Virtual DOM for performance reasons.
• React was open sourced in 2015 and has become very popular.
• React can render on the client or server-side.
• React follows a one-way data flows for data binding.
• React components better support UI testing.
• React is JavaScript centric because it puts HTML into JavaScript, while Angular is HTML centric because it puts JavaScript/TypeScript into HTML.

Components

• React is used to build components, that typically take inputs of State and Properties that output HTML.
• A component can be thought of as a function.
• The State object can be changed by the component, while the Property object cannot and contains fixed values.

This is the traditional way of creating a React component class is using ES5 as follows:

var component = React.createClass({
  render: function() { } 
});

To render a REACT component to the HTML markup is as follows:

react.render({ <>, mountNode });

• There are at least four different ways of creating a React component. For example ES6 uses React.create( .. )
• React.render is used to mount a component in the browser and takes two arguments. The first argument is the name of the REACT component to render, while the second argument is the HTML node or element to hold the rendered markup.
• For example to mount a REACT button component in the element named root is as follows;

var Button = React.createClass({ 
  getInitalState: function() { 
    return ( <button></button> ) 
  }
});
React.render(<Button />, document.getElementById("root"));

JSX

• JSX allows us to write HTML-like syntax that gets transpiled to a JavaScript syntax
• JSX is optional by is the preferred method to creating React components.
• The JavaScript created by JSX, or manually typed by the developer executes against the Virtual DOM.
• JSX files have the file extension .jsx, not .js
• JSX transformers like Babel are used to convert JSX into pure JavaScript so browsers can process JSX

Virtual DOM

• The virtual DOM is a JavaScript representation of the browser DOM. It is a node tree of elements and their attributes and their contents. React's render function creates a node tree of the React components, then updates this tree based on the changes made to the component's data by teh component's events.
• The virtual DOM works like this (1) After data changes in the UI it is re-rendered in the virtual DOM, (2) The differences or changes made to the virtual DOM are collected, (3) Only those collected changes are then applied to the browser DOM. This results in high performance UI changes.
• To test React you don't need to actually fire up a browser, you can test against the virtual DOM

React Events

• React comes with nomalized events e.g. onClick _that work across all modern browsers.