dkarmalita/api.js

## api.js
const exampleApi = {
  async getMovies(){
    return fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then((response) => {
      return response.json();
    })
  }
}

exampleApi.getMovies().then(console.log)

## app.js
const MaterializeCard = () => (
  <div className="row">
    <div className="col s12 m6">
      <div className="card blue-grey darken-1">
        <div className="card-content white-text">
          <span className="card-title">Card Title</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
        <div className="card-action">
          <a href="#">This is a link</a>
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>
)

ReactDOM.render(
  <MaterializeCard/>,
  document.getElementById('target')
);

## index.html
<!DOCTYPE html>
<!-- kard | v.20201024 | https://gist.github.com/dkarmalita/b336d1985b71bc4ff9147282b426d1c0 -->
<html>
  <head>
    <meta charset="utf-8" />
    <title>React • in-browser</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"/>
  </head>
  <body>
    <div id="target"></div>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.6/es6-shim.min.js"></script>
    <script src="https://unpkg.com/babel-regenerator-runtime@6.5.0/runtime.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
    <script type="text/babel" src='api.js'></script>
    <script type="text/babel" src='app.js'></script>
  </body>
</html>
	const exampleApi = {
	async getMovies(){
	return fetch('https://jsonplaceholder.typicode.com/todos/1')
	.then((response) => {
	return response.json();
	})
	}
	}

	exampleApi.getMovies().then(console.log)
	const MaterializeCard = () => (
	<div className="row">
	<div className="col s12 m6">
	<div className="card blue-grey darken-1">
	<div className="card-content white-text">
	<span className="card-title">Card Title</span>
	<p>I am a very simple card. I am good at containing small bits of information.
	I am convenient because I require little markup to use effectively.</p>
	</div>
	<div className="card-action">
	<a href="#">This is a link</a>
	<a href="#">This is a link</a>
	</div>
	</div>
	</div>
	</div>
	)

	ReactDOM.render(
	<MaterializeCard/>,
	document.getElementById('target')
	);
	<!DOCTYPE html>
	<!-- kard \| v.20201024 \| https://gist.github.com/dkarmalita/b336d1985b71bc4ff9147282b426d1c0 -->
	<html>
	<head>
	<meta charset="utf-8" />
	<title>React • in-browser</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"/>
	</head>
	<body>
	<div id="target"></div>
	<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.6/es6-shim.min.js"></script>
	<script src="https://unpkg.com/babel-regenerator-runtime@6.5.0/runtime.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script>
	<script type="text/babel" src='api.js'></script>
	<script type="text/babel" src='app.js'></script>
	</body>
	</html>