Introduction to React

This is a minimal introduction to React. These are intended to be rough notes for my future self. Any other use is entirely fortuitous.

I have taken the Pluralsight course: https://www.pluralsight.com/courses/react-js-getting-started

This is based upon using the online repl found at:  https://jscomplete.com/repl

// This is a simple function based react component.
// Note that the name of the component has to start with a capital.
// You need to treat the props as immutable.

const MyComponent = (props) => {
  return ( 
{props.greeting} {props.name}
 );
};

// This is a simple class based React component
// State is mutable, but you need to use the setState function
// so that the UI will be re-rendered.
// The state defined here is a proposed js extension that works through Babel.
class App extends React.Component {
  state = {name: "Fred"};

  render() {
    return ( 
  ); 
  };
};

// This is the bootstrap that injects React into a page
// Here mountNode is an id of a div
ReactDOM.render(<App />, mountNode);

So from the above sample a quick comparison of React to AngularJs.

React is a view model that can be injected into a page. It follows functional programming idoms (props are immutable, state is updated by returning deltas that are merged into it). The html is embedded into the script so it does not require a distinct template language. It creates a virtual DOM that is dynamically updated when the data changes.

AngularJs is a full framework with routing, templating. It is typically added via custom tags. The developer needs to cede control of a region of a page to angular. Angular typically has distinct templates that are rendered.

They can be made to play well together – React can act as the View to an Angular application.