Last active
June 30, 2022 20:23
-
-
Save charlos/10c0c7924f9cc374d19441a6718799c1 to your computer and use it in GitHub Desktop.
Multiple React components on a single HTML page (JS 100%). See it in action! https://jsfiddle.net/charlos/kp7thgqx
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
| 'use strict'; | |
| const e = React.createElement; | |
| class LikeButton extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = { liked: false }; | |
| } | |
| render() { | |
| if (this.state.liked) { | |
| return 'You liked comment number ' + this.props.commentID; | |
| } | |
| return e( | |
| 'button', | |
| { onClick: () => this.setState({ liked: true }) }, | |
| 'Like' | |
| ); | |
| } | |
| } | |
| class CommentList extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = {}; | |
| } | |
| render() { | |
| const items = []; | |
| let i; | |
| for (i = 0; i < this.props.items.length; i++) { | |
| const commentID = i+1; | |
| const li = e( | |
| 'li', | |
| {}, | |
| [ | |
| 'This is the ' + this.props.items[i] + ' comment. ', | |
| e(LikeButton, {commentID: commentID}) | |
| ] | |
| ); | |
| items.push(li); | |
| } | |
| return e( | |
| 'ul', | |
| {}, | |
| items | |
| ); | |
| } | |
| } | |
| ReactDOM.render( | |
| e(CommentList, {items: ['first', 'second', 'third']}), | |
| document.getElementById('comment_list') | |
| ); |
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> | |
| <meta charset="UTF-8" /> | |
| <title>Add React in One Minute 100% JS</title> | |
| </head> | |
| <body> | |
| <h2>Add React in One Minute 100% JS</h2> | |
| <p>This page demonstrates using React with no build tooling.</p> | |
| <p>React is loaded as a script tag.</p> | |
| <div id="comment_list"></div> | |
| <br> | |
| <p>Based on <a href="https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda" target="_blank">"Add React in One Minute"</a></p> | |
| <!-- Load React. --> | |
| <!-- Note: when deploying, replace "development.js" with "production.min.js". --> | |
| <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> | |
| <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> | |
| <!-- Load our React component. --> | |
| <script src="comment_list.js"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment