daylightnanalog · January 9, 2023 22:32 · Apr 27, 2022 · Oct 20, 2020 · Jun 25, 2018 · Jun 25, 2018
diff --git a/index.html b/index.html
@@ -15,8 +15,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>

diff --git a/like_button.js b/like_button.js
@@ -22,4 +22,5 @@ class LikeButton extends React.Component {
 }
 
 const domContainer = document.querySelector('#like_button_container');
-ReactDOM.render(e(LikeButton), domContainer);
+const root = ReactDOM.createRoot(domContainer);
+root.render(e(LikeButton));
diff --git a/index.html b/index.html
@@ -15,8 +15,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>

diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@ <h2>Add React in One Minute</h2>
     <p>React is loaded as a script tag.</p>
 
     <!-- We will put our React component inside this div. -->
-    <div class="like_button_container"></div>
+    <div id="like_button_container"></div>
 
     <!-- Load React. -->
     <!-- Note: when deploying, replace "development.js" with "production.min.js". -->

diff --git a/like_button.js b/like_button.js
@@ -21,5 +21,5 @@ class LikeButton extends React.Component {
   }
 }
 
-const domContainer = document.querySelector('.like_button_container');
+const domContainer = document.querySelector('#like_button_container');
 ReactDOM.render(e(LikeButton), domContainer);
diff --git a/like_button.js b/like_button.js
@@ -21,8 +21,5 @@ class LikeButton extends React.Component {
   }
 }
 
-// Find the DOM container we defined in HTML.
-let domContainer = document.querySelector('.like_button_container');
-
-// Show the LikeButton component inside our DOM container.
+const domContainer = document.querySelector('.like_button_container');
 ReactDOM.render(e(LikeButton), domContainer);
diff --git a/like_button.js b/like_button.js
@@ -1,5 +1,7 @@
 'use strict';
 
+const e = React.createElement;
+
 class LikeButton extends React.Component {
   constructor(props) {
     super(props);
@@ -11,7 +13,7 @@ class LikeButton extends React.Component {
       return 'You liked this.';
     }
 
-    return React.createElement(
+    return e(
       'button',
       { onClick: () => this.setState({ liked: true }) },
       'Like'
@@ -23,4 +25,4 @@ class LikeButton extends React.Component {
 let domContainer = document.querySelector('.like_button_container');
 
 // Show the LikeButton component inside our DOM container.
-ReactDOM.render(React.createElement(LikeButton), domContainer);
+ReactDOM.render(e(LikeButton), domContainer);
diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@ <h2>Add React in One Minute</h2>
     <div class="like_button_container"></div>
 
     <!-- Load React. -->
-    <!-- Change .development.js to .production.min.js in both tags before deployment! -->
+    <!-- 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>
 

diff --git a/like_button.js b/like_button.js
@@ -1,28 +1,19 @@
 'use strict';
 
-// Define a LikeButton component
 class LikeButton extends React.Component {
   constructor(props) {
     super(props);
-    // At first, the user didn't click "Like"
     this.state = { liked: false };
   }
 
   render() {
-    // If the user clicked "Like", show a message
     if (this.state.liked) {
       return 'You liked this.';
     }
 
-    // Otherwise, show the "Like" button
     return React.createElement(
-      'button', // This can be any DOM tag, try changing it to 'h1'
-      {
-        // This object contains button's "props" (short for properties).
-        // They may be DOM attributes or event handlers.
-        onClick: () => this.setState({ liked: true })
-      },
-      // Put any content here!
+      'button',
+      { onClick: () => this.setState({ liked: true }) },
       'Like'
     );
   }
@@ -32,4 +23,4 @@ class LikeButton extends React.Component {
 let domContainer = document.querySelector('.like_button_container');
 
 // Show the LikeButton component inside our DOM container.
-ReactDOM.render(React.createElement(LikeButton), domContainer);
+ReactDOM.render(React.createElement(LikeButton), domContainer);
diff --git a/like_button.js b/like_button.js
@@ -32,7 +32,4 @@ class LikeButton extends React.Component {
 let domContainer = document.querySelector('.like_button_container');
 
 // Show the LikeButton component inside our DOM container.
-ReactDOM.render(
-  React.createElement(LikeButton),
-  domContainer
-);
+ReactDOM.render(React.createElement(LikeButton), domContainer);
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@ <h2>Add React in One Minute</h2>
     <p>React is loaded as a script tag.</p>
 
     <!-- We will put our React component inside this div. -->
-    <div class="like_button_root"></div>
+    <div class="like_button_container"></div>
 
     <!-- Load React. -->
     <!-- Change .development.js to .production.min.js in both tags before deployment! -->

diff --git a/like_button.js b/like_button.js
@@ -29,7 +29,7 @@ class LikeButton extends React.Component {
 }
 
 // Find the DOM container we defined in HTML.
-let domContainer = document.querySelector('.like_button_root');
+let domContainer = document.querySelector('.like_button_container');
 
 // Show the LikeButton component inside our DOM container.
 ReactDOM.render(

diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!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>
+
+    <!-- We will put our React component inside this div. -->
+    <div class="like_button_root"></div>
+
+    <!-- Load React. -->
+    <!-- Change .development.js to .production.min.js in both tags before deployment! -->
+    <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>
diff --git a/like_button.js b/like_button.js
@@ -0,0 +1,38 @@
+'use strict';
+
+// Define a LikeButton component
+class LikeButton extends React.Component {
+  constructor(props) {
+    super(props);
+    // At first, the user didn't click "Like"
+    this.state = { liked: false };
+  }
+
+  render() {
+    // If the user clicked "Like", show a message
+    if (this.state.liked) {
+      return 'You liked this.';
+    }
+
+    // Otherwise, show the "Like" button
+    return React.createElement(
+      'button', // This can be any DOM tag, try changing it to 'h1'
+      {
+        // This object contains button's "props" (short for properties).
+        // They may be DOM attributes or event handlers.
+        onClick: () => this.setState({ liked: true })
+      },
+      // Put any content here!
+      'Like'
+    );
+  }
+}
+
+// Find the DOM container we defined in HTML.
+let domContainer = document.querySelector('.like_button_root');
+
+// Show the LikeButton component inside our DOM container.
+ReactDOM.render(
+  React.createElement(LikeButton),
+  domContainer
+);
No results found