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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s