Last active
August 23, 2017 19:12
-
-
Save coloredlambda/901aec6e2d006861bf45eebcde184b14 to your computer and use it in GitHub Desktop.
Creating React components using ES6 classes syntax
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>React Example</title> | |
| </head> | |
| <body> | |
| <div id='react-container'></div> | |
| <script src='https://unpkg.com/[email protected]/dist/react.js' type="text/javascript"></script> | |
| <script src='https://unpkg.com/[email protected]/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