JSFiddle - React, Tailwind, and code Playground

by shorif2000

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/react-table@latest/react-table.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.7.6/react-table.js" integrity="sha256-opK2YC6HciT8cYw3AkGXzte62YszfyubKWiOxrCDUKw=" crossorigin="anonymous"></script>

<div id="app">
</div>

CSS

.App {
    text-align: center;
}

.App-header {
    background-color: #222;
    height: 60px;
    padding: 5px;
    color: white;
}

.App-title {
    font-size: 1.5em;
}

Babel + JSX

let ReactTable = window.ReactTable.default

const CORS_PROXY = `https://cors-proxy.lcps.io`;
const BITTREX_API_V1_1 = `https://bittrex.com/api/v1.1`;
const BITTREX_API_V2_0 = `https://bittrex.com/Api/v2.0`;
const RSI_DATASETS = 14;

let dateStart = new Date();

let rsList = {};
let rsiList = {};
let marketList = {};
let marketData = {};
let avgGainList = {};
let avgLossList = {};
let historicalDataList = {};
let ignoreMarketList = [];

class App extends React.Component {
	constructor(props) {
  	super(props);
		this.state = {
    	secondsElapsed: 0,
    	usdtBTC: 0,
      usdtETH: 0,
  		marketList: marketList,
      ignoreMarketList: ignoreMarketList,
      historicalDataList: historicalDataList,
      rsList: rsList,
      rsiList: rsiList,
      marketData: marketData,
      avgGainList: avgGainList,
      avgLossList: avgLossList,
      historicalDataListPromiseIsResolved: false,
      initialUpdatePromiseIsResolved: false,
      minuteUpdatePromiseResolved: false
		}
  }

	getMarketListPromise = () => {
  	let self = this;
    let url = CORS_PROXY + `/` + BITTREX_API_V1_1 + `/public/getmarkets`;

    getHttpRequestJSON(url)
    .then((response) => {
      self.setState({
				marketList: response.result             
      });
      
      return response.result;
    })
		.catch(error => {
    	console.log("Failed!", error);
    });
  }
  
  getBittrexReferencePricesPromise = () => {
  	let self = this;

  	let url = CORS_PROXY + `/` + BITTREX_API_V1_1 + `/public/getmarketsummary?market=`;
    
    let promiseBTC = getHttpRequestJSON(url + `USDT-BTC`);
    let promiseETH = getHttpRequestJSON(url + `USDT-ETH`);
    
		Promise.all([promiseBTC, promiseETH])
    .then(([responseBTC, responseETH]) => {
    	self.setState({
    		usdtBTC: Number.parseFloat(responseBTC.result[0].Last).toFixed(2),
				usdtETH: Number.parseFloat(responseETH.result[0].Last).toFixed(2)
    	});
    })
		.catch(error => {
			console.log("Failed!", error);
		});
  }
 ...