Monday, July 5, 2021

Add React to WebPage

This much code in the index.html page 

 <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>

and below is the content of like_button.js 

'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 this.';

    }


    return e(

      'button',

      { onClick: () => this.setState({ liked: true }) },

      'Like'

    );

  }

}

const domContainer = document.querySelector('#like_button_container');

ReactDOM.render(e(LikeButton), domContainer);


references:

https://reactjs.org/docs/add-react-to-a-website.html

https://meda.io/embed-react-into-an-html-web-page/


No comments:

Post a Comment