How to use dotnetify - 10 common examples

constructor(props) {
    super(props);
    this.state = { Employees: [], newName: '' };

    // Connect this component to the back-end view model.
    this.vm = dotnetify.react.connect('SimpleListVM', this);

    // Set up function to dispatch state to the back-end.
    this.dispatch = state => this.vm.$dispatch(state);

    this.dispatchState = state => {
      this.setState(state);
      this.vm.$dispatch(state);
    };
  }

constructor(props) {
    super(props);
    this.state = { FirstName: '', LastName: '' };

    // Connect this component to the back-end view model.
    this.vm = dotnetify.react.connect('HelloWorldVM', this);

    // Set up function to dispatch state to the back-end.
    this.dispatchState = state => this.vm.$dispatch(state);
  }

removeOrphan(vmId) {
      // Clear any existing connection to the same view model.
      dotnetify.react.getViewModels().filter(vm => vm.$vmId === vmId).forEach(vm => vm.$destroy());
   }
}

import dotnetify from 'dotnetify/vue';
import App from './App.vue';
import SimpleList from './SimpleList.vue';
import LiveChart from './LiveChart.vue';

dotnetify.debug = true;

// Set the components to global window to make it accessible to dotNetify routing.
Object.assign(window, { SimpleList, LiveChart });

dotnetify.vue.router.$mount('#App', App);

import React from 'react';
import dotnetify from 'dotnetify';
import ReactDOM from 'react-dom';
import App from './App';
import SimpleList from './SimpleList';
import LiveChart from './LiveChart';
import CompositeView from './CompositeView';

dotnetify.debug = true;

// Set the components to global window to make it accessible to dotNetify routing.
Object.assign(window, { SimpleList, LiveChart, CompositeView });

ReactDOM.render(, document.getElementById('App'));

import React from 'react';
import ReactDOM from 'react-dom';
import dotnetify from 'dotnetify';
import App from './App';
import Dashboard from './dashboard/Dashboard';
import Form from './form/Form';
import 'dotnetify-elements/dotnetify-elements.css';

dotnetify.debug = true;

// Import all the routeable views into the global window variable.
Object.assign(window, { Form, Dashboard });

ReactDOM.render(, document.getElementById('App'));

import React from 'react';
import ReactDOM from 'react-dom';
import dotnetify from 'dotnetify';
import App from './app/views/App';
import './app/styles/app.css';
import './app/styles/prism.css';
import * as views from './app/views';
import 'dotnetify-elements/dotnetify-elements.css';

dotnetify.debug = true;

// Import all the routeable views into the global window variable.
Object.assign(window, { ...views });

ReactDOM.render(, document.getElementById('App'));

import dotnetify from 'dotnetify';
import App from './App';
import Dashboard from './dashboard/Dashboard';
import Form from './form/Form';
import createWebComponent from './utils/web-component';

dotnetify.debug = true;

// Import all the routeable views into the global window variable.
Object.assign(window, { Form, Dashboard });

createWebComponent(App, 'd-app1');

export default () => {
  const [ newName, setNewName ] = useState('');

  // Connect this component to the back-end view model.
  const { vm, state } = useConnect('SimpleListVM', { Employees: [] });

  // Set up function to dispatch state to the back-end.
  const dispatch = state => vm.$dispatch(state);

  return (
    
      <header>
        <span>Add:</span>
         setNewName(value)}
          onUpdate={value =&gt; {
            dispatch({ Add: value });
            setNewName('');
          }}</header>

// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.

import React from 'react'
import ReactDOM from 'react-dom'
import HelloWorld from './HelloWorld.jsx'
import dotnetify from 'dotnetify';

dotnetify.hubServerUrl = "http://localhost:5000";

ReactDOM.render(, document.getElementById('Content'))