react + es6

app.jsx

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';




class App extends Component {
  constructor() {
    super();
    this.state = {
      race: ['100m Dash'],
      winners: ['Hunter Gath', 'Singa Song', 'Imda Bos']
    };

  }
  setWidth = (width) => width + 5;


  nameAdd = () =>
    [this.state.winners].map((name) => `${name} bos`);

  sayMyName = (name) => {alert(`Hello ${name}!`) }

  componentDidMount() {
    //{this.sayMyName('Tyler')}
  }
  render() {
    var width = 500
    let height = 200;
    const key = 'abc123';
    const key1 = '123abc';
    let { winners } = this.state;
    return (
      <div>
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>

            </div>
    <div>
        <ol>
        <li>{width}</li>
        <li>{height}</li>
        <li>{key}</li>
        <li>{key1}</li>
        <li>width: {this.setWidth(100)}</li>
        <li>arrow: {this.nameAdd('bos')}</li>
        <li>Winners Map: {winners.map((name) => `${name} bos ` )}</li>
        </ol>
    </div>
    </div>
    );
  }
}

export default App;

output

500
200
abc123
123abc
width: 105
arrow: Hunter Gath,Singa Song,Imda Bos bos
Winners Map: Hunter Gath bos Singa Song bos Imda Bos bos