React

Modern javascript front-end library for rendering HTML and 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.


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
Properties are called props.
If we want to override the constructor we have to pass 'props' to super


Functional vs Class

A component can either be a function component or a class component
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>
      );
   }
}

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() {
   }
}

Build an Excel task pane add-in using React

link - docs.microsoft.com/en-us/office/dev/add-ins/quickstarts/excel-quickstart-react


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