Skip to content

Instantly share code, notes, and snippets.

@coloredlambda

coloredlambda/index.html

Last active August 23, 2017 19:12
Show Gist options
  • Save coloredlambda/901aec6e2d006861bf45eebcde184b14 to your computer and use it in GitHub Desktop.
Save coloredlambda/901aec6e2d006861bf45eebcde184b14 to your computer and use it in GitHub Desktop.
Download ZIP
Creating React components using ES6 classes syntax
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>React Example</title>
</head>
<body>
<div id='react-container'></div>
<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>
const provisions = ['Gari', 'Shito', 'Rice', 'Groundnuts'];
class ListProvisions extends React.Component{
render(){ //A method that returns a function. Hi Functional Programming
return React.createElement('ul', {className : 'list'},
this.props.provisions.map((item, i) => React.createElement('li', {className : i}, item))
)
}
}
const provisionsComponent = React.createElement(ListProvisions, {provisions}, null);
ReactDOM.render(provisionsComponent, 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