React

Modern javascript front-end library for building rich user interfaces.
Launched in 2013 and maintained by FaceBook React is not a framework, it is just the View in an MVP architecture
Focuses on reusable components which are very easy to maintain
Uses a Virtual DOM that makes it extremely fast
Gives you a lot of flexibility and is relatively easy to learn
There are two main concepts: Properties and State JSX is a syntax extension to JavaScript (optional)
Both Outlook.com and Script Lab are written using React


React is a JavaScript library that can be used to render HTML.
React is a component based JavaScript library or framework.
codecademy.com/articles/react-setup-1


Components

Think of a component as a simple function
A JavaScript function takes input arguments and can return a value.
A React component takes properties and state and returns a user interface description


A component can have a private state that can change over time
A component can either be a function component or a class component
Properties are called props.


If we want to override the constructor we have to pass 'props' to super



Functional vs Class

React supports two types of components:
Functional - (or stateless) - used to isolate state management
Class
A functional (or stateless) component is a function which takes props as an argument and returns a React element.




Function Component

const MyComponent = function(props) { 
   return (
      <h1>
         React { props.version || 1 } Notes
      </h1>
   );
};

This is equivalent to

const MyComponent = (props) => { } 


Class Component

class MyComponent extends React.Component { 
   render() {
      return (
      <h1>
         React { this.props.version || 1 } Notes
      </h1>
      );
   }
}

//https://github.com/OfficeDev/office-js-docs/blob/master/docs/design/using-office-ui-fabric-react.md


Constructors

class Button extends React.Component { 
   constructor(props) {
      super(props);
      this.state = { counter : 4 };
   render() {
   }
}

This is equivalent to

class Button extends React.Component { 
   state = {counter : 4 };
   render() {
   }
}




© 2019 Better Solutions Limited. All Rights Reserved. © 2019 Better Solutions Limited TopNext