Skip to content

Instantly share code, notes, and snippets.

@coloredlambda

coloredlambda/index.html

Created August 23, 2017 13:48
Show Gist options
  • Save coloredlambda/9282631bbe3d32d463f54bafdfbe16f7 to your computer and use it in GitHub Desktop.
Save coloredlambda/9282631bbe3d32d463f54bafdfbe16f7 to your computer and use it in GitHub Desktop.
Download ZIP
Code to render data in an array to the DOM
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Provision</title>
</head>
<body>
<div id='react-container'></div>
<!-- We import the React and ReactDOM library -->
<script src='https://unpkg.com/react@15.4.2/dist/react.js' type="text/javascript"></script>
<script src='https://unpkg.com/react-dom@15.4.2/dist/react-dom.js' type="text/javascript"></script>
<script type="text/javascript">
const provisions = ['Gari', 'Shito', 'Rice', 'Groundnuts'] //We create a data structure to hold our provisions
//Let's build the elements now
var provisionsElement = React.createElement('ul', {className : 'provisionsElement'},
provisions.map((provision, i) => React.createElement('li', {className : i}, provision))
)
//Time to render
ReactDOM.render(provisionsElement, document.getElementById('react-container'));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment