code.md

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>{{ msg }}</h1>
    <h3>{{ reverseMsg() }}</h3>
    <button (click)="changeTitle()">Change title</button>
  `,
})
export class AppComponent  {
  public msg = 'Welcome to Your Angular App';

  public changeTitle() {
    setTimeout(() => {
      console.log('changeTitle');
      this.msg = 'Hello front conf';
    }, 2000);
  }

  public reverseMsg() {
    console.log('reverseMsg');
    return this.msg.split('').reverse().join('');
  }

}

Vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h3>{{ reverseMsg() }}</h3>
    <button @click="changeTitle">Change title</button>				
  </div>
</template>

<script>
export default {
  name: "Hello",
  data: function() {
    return {
      msg: "Welcome to Your Vue.js App",
      changeTitle: () => {
        setTimeout(() => {
          this.msg = 'Hello front conf';
          console.log('changeTitle', this._data);
        }, 2000);
      },
      reverseMsg: () => {
        console.log('reverseMsg');
        return this.msg.split('').reverse().join('');
      },
    };
  }
};
</script>

React

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = { mgs: 'Welcome to Your React App' };
  }

  changeTitle = () => {
    setTimeout(() => {
      console.log('changeTitle');
      this.setState({ mgs: 'Hello front conf' });
    }, 2000);
  }

  reverseTitle = () => {
    console.log('reverseTitle');
    return this.state.mgs.split('').reverse().join('');
  }

  render() {
    return (
      <div>
        <h1>{ this.state.mgs }</h1>
        <h3>{ this.reverseTitle() }</h3>
        <button onClick={this.changeTitle}>Change title</button>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));