Custom code

 Documentation | Custom Code

Mition has a built in javasript component and you can use this to create your own links to script files (use Css class 'wholesite' on a webpage component to include it on every page).

With our Javascript component and concepts such as REACT scripts, you can effectively build your own components and call the Mition APIs.

see https://reactjs.org/docs/add-react-to-a-website.html

Add React in One Minute

This page demonstrates using React with no build tooling.

React is loaded as a script tag.

Javascript (in Javascript Component Above)

var loadJS = function(url, implementationCode, location){
    //url is URL of external file, implementationCode is the code
    //to be called from the file, location is the location to 
    //insert the <script> element

    var scriptTag = document.createElement('script');
    scriptTag.src = url;

    scriptTag.onload = implementationCode;
    scriptTag.onreadystatechange = implementationCode;

    location.appendChild(scriptTag);
};

loadJS('https://unpkg.com/react@18/umd/react.development.js', begin1, document. body);

function begin1(){
loadJS('https://unpkg.com/react-dom@18/umd/react-dom.development.js', begin2, document.body);
}

function begin2(){
const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}


const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(e(LikeButton));
}

Html (in Javascript Component Above)

 <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>
    <p>React is loaded as a script tag.</p>

    <!-- We will put our React component inside this div. -->
    <div id="like_button_container"></div>


We will keep extending this example and include our Utilities classes that have functions such as calling APIs for authentication and other data.

You can then create your own custom code to implement this. We will also try to find ways to improve software development so you can get better error management when developing so you can improve your coding.