twisted-nematic57 · August 17, 2022 00:24
diff --git a/grxwypj.markdown b/grxwypj.markdown
diff --git a/index.html b/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>
diff --git a/script.js b/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));