subject 11 converted to hooks

Author: bradwestfall

JavaScriptPrimer.md

@@ -13,7 +13,7 @@ $ npm start
 
 Then, open a web browser to [http://localhost:8080](http://localhost:8080) where you'll see a list of subjects.
 
-**IMPORTANT:** Please read the [JavaScript Primer](https://github.com/ReactTraining/react-workshop/blob/master/JavaScriptPrimer.md) before attending the workshop. It's a refresher on some of the newer bits of JavaScript you'll want to be familiar with in order to get the most out of the experience.
+**IMPORTANT:** Please read our [JavaScript Primer](https://reacttraining.com/blog/javascript-the-react-parts/) before attending the workshop. It's a refresher on some of the newer bits of JavaScript you'll want to be familiar with in order to get the most out of the experience.
 
 ### Troubleshooting
 

README.md

@@ -17,56 +17,41 @@
 ////////////////////////////////////////////////////////////////////////////////
 import React from "react";
 import ReactDOM from "react-dom";
-import PropTypes from "prop-types";
 
-class Form extends React.Component {
-  render() {
-    return <div>{this.props.children}</div>;
-  }
+function Form({ children }) {
+  return <div>{children}</div>;
 }
 
-class SubmitButton extends React.Component {
-  render() {
-    return <button>{this.props.children}</button>;
-  }
+function SubmitButton({ children }) {
+  return <button>{children}</button>;
 }
 
-class TextInput extends React.Component {
-  render() {
-    return (
-      <input
-        type="text"
-        name={this.props.name}
-        placeholder={this.props.placeholder}
-      />
-    );
-  }
+function TextInput({ name, placeholder }) {
+  return <input type="text" name={name} placeholder={placeholder} />;
 }
 
-class App extends React.Component {
-  handleSubmit = () => {
+function App() {
+  function handleSubmit() {
     alert("YOU WIN!");
-  };
+  }
 
-  render() {
-    return (
-      <div>
-        <h1>
-          This isn't even my final <code>&lt;Form/&gt;</code>!
-        </h1>
+  return (
+    <div>
+      <h1>
+        This isn't even my final <code>&lt;Form/&gt;</code>!
+      </h1>
 
-        <Form onSubmit={this.handleSubmit}>
-          <p>
-            <TextInput name="firstName" placeholder="First Name" />{" "}
-            <TextInput name="lastName" placeholder="Last Name" />
-          </p>
-          <p>
-            <SubmitButton>Submit</SubmitButton>
-          </p>
-        </Form>
-      </div>
-    );
-  }
+      <Form onSubmit={handleSubmit}>
+        <p>
+          <TextInput name="firstName" placeholder="First Name" />{" "}
+          <TextInput name="lastName" placeholder="Last Name" />
+        </p>
+        <p>
+          <SubmitButton>Submit</SubmitButton>
+        </p>
+      </Form>
+    </div>
+  );
 }
 
 ReactDOM.render(<App />, document.getElementById("app"));