Siemko

<template>

<div class="field">
  <label class="label">Employer</label>
  <div class="control">
    <input class="input" type="text" v-model="employer" />
  </div>
</div>

</template>

Siemko

import React, { Component } from "react";

export default class Counter extends Component {
  state = {
    title: "Counter",
    counter: 0
  };

  incrementCounter = () => {
    this.setState(prevState => ({

Siemko

<template>
<h1>{{ greeting }} world!</h1>
</template>

<script>
export default {
  data () {
    return {
      greeting: 'Hello'	
    }

Siemko

class WorkerInfo extends React.Component {
  state = { worker: null }
  componentDidMount() {
    // Simulate fetching data:
    setTimeout(() => this.setState({
      worker: `Hi, I am ${this.props.name} and I am proud to work for ${this.props.employer}`
    }), 2500);
  }
  render() {
    return this.props.children(this.state.worker);

Siemko

const Worker = props => <p>{props.message}</p>

Siemko

const Loading = () => <p>Loading...</p>

Siemko

const Connect = ComposedComponent =>
  class extends React.Component {
    state = { name: "" }

    componentDidMount() {
      //fetching data is a part of HOC
      getAsync('https://imaginary-api.gorrion.io/name')
        .then(({ name }) => { this.setState({ name: name }) })
    }

Siemko

const Greeting = ({ name, ...props }) => {
  if (!name) {
    return <div>Loading...</div>
  }
  return <div {...props}>Hi {name}!</div>
}

Siemko

class CommentListContainer extends React.Component {
  state = { comments: [] }

  componentDidMount() {
    getAsync("https://imaginary-api.gorrion.io/my-comments")
	    .then(comments => this.setState({ comments }))
  }
  render() {
    return <CommentList comments={this.state.comments} />;
  }

Siemko

const Commentlist = ({comments}) => (
  <ul>
    {comments.map(({ body, author }) =>
      <li>{body}-{author}</li>
    )}
  </ul>
)