HackerDaGreat57/grxwypj.markdown

## grxwypj.markdown

      
    Raw
  

              grxwypj.markdown
            
          
    GRxwYPj

A Pen by Akshat Singh on CodePen.
License.

  
## index.html
<!-- index.html: The starting page for the something project (just activates React and goes from there) -->
<!DOCTYPE html>
<html>
  <head> <!-- Stuff that's not visible on the web page itself, i.e. favicons and title -->
    <link rel="stylesheet" href="index.css"> <!-- Load the CSS for this page -->
	  <script src="index.js"></script> <!-- Load the JavaScript for this page -->

    <link rel="icon" href="assets/suitcase_general.png">
		<title>something</title>

    <!-- Load React -->
    <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 the React components -->
    <script src="like_button.js"></script>
  </head>
	<body> <!-- Stuff that you see on the website itself -->
		<!-- React stuff goes in this div. Let's go! -->
    <div id="main_container"></div>
	</body>
</html>

## script.js
'use strict';

const e = React.createElement;

document.body.style = 'background: red;';

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('#main_container');
const root = ReactDOM.createRoot(domContainer);
root.render(e(LikeButton));
	<!-- index.html: The starting page for the something project (just activates React and goes from there) -->
	<!DOCTYPE html>
	<html>
	<head> <!-- Stuff that's not visible on the web page itself, i.e. favicons and title -->
	<link rel="stylesheet" href="index.css"> <!-- Load the CSS for this page -->
	<script src="index.js"></script> <!-- Load the JavaScript for this page -->

	<link rel="icon" href="assets/suitcase_general.png">
	<title>something</title>

	<!-- Load React -->
	<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 the React components -->
	<script src="like_button.js"></script>
	</head>
	<body> <!-- Stuff that you see on the website itself -->
	<!-- React stuff goes in this div. Let's go! -->
	<div id="main_container"></div>
	</body>
	</html>
	'use strict';

	const e = React.createElement;

	document.body.style = 'background: red;';

	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('#main_container');
	const root = ReactDOM.createRoot(domContainer);
	root.render(e(LikeButton));