Skip to content

Instantly share code, notes, and snippets.

@daylightnanalog

daylightnanalog/index.html

Forked from gaearon/index.html
Created January 9, 2023 22:35
Show Gist options
  • Save daylightnanalog/2eb0cae939156cbadb09f8e04f7af853 to your computer and use it in GitHub Desktop.
Save daylightnanalog/2eb0cae939156cbadb09f8e04f7af853 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @gaearon gaearon revised this gist Apr 27, 2022. 2 changed files with 5 additions and 5 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -30,8 +30,8 @@ <h2>Add React in One Minute</h2>

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

    <!-- Load our React component. -->
    <script src="like_button.js"></script>
    6 changes: 3 additions & 3 deletions like_button.js
    View file
    Original file line number Diff line number Diff line change
    @@ -26,8 +26,8 @@ document.querySelectorAll('.like_button_container')
    .forEach(domContainer => {
    // Read the comment ID from a data-* attribute.
    const commentID = parseInt(domContainer.dataset.commentid, 10);
    ReactDOM.render(
    e(LikeButton, { commentID: commentID }),
    domContainer
    const root = ReactDOM.createRoot(domContainer);
    root.render(
    e(LikeButton, { commentID: commentID })
    );
    });
  2. @gaearon gaearon revised this gist Oct 20, 2020. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -30,8 +30,8 @@ <h2>Add React in One Minute</h2>

    <!-- 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>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

    <!-- Load our React component. -->
    <script src="like_button.js"></script>
  3. @gaearon gaearon created this gist Jun 25, 2018.
    40 changes: 40 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
    </head>
    <body>

    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>
    <p>React is loaded as a script tag.</p>

    <p>
    This is the first comment.
    <!-- We will put our React component inside this div. -->
    <div class="like_button_container" data-commentid="1"></div>
    </p>

    <p>
    This is the second comment.
    <!-- We will put our React component inside this div. -->
    <div class="like_button_container" data-commentid="2"></div>
    </p>

    <p>
    This is the third comment.
    <!-- We will put our React component inside this div. -->
    <div class="like_button_container" data-commentid="3"></div>
    </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="like_button.js"></script>

    </body>
    </html>
    33 changes: 33 additions & 0 deletions like_button.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    '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'
    );
    }
    }

    // Find all DOM containers, and render Like buttons into them.
    document.querySelectorAll('.like_button_container')
    .forEach(domContainer => {
    // Read the comment ID from a data-* attribute.
    const commentID = parseInt(domContainer.dataset.commentid, 10);
    ReactDOM.render(
    e(LikeButton, { commentID: commentID }),
    domContainer
    );
    });