step3 - creates the SimpleForm component

package.json

@@ -2,14 +2,19 @@
   "name": "react",
   "version": "1.0.0",
   "description": "React example starter project",
-  "keywords": ["react", "starter"],
+  "keywords": [
+    "react",
+    "starter"
+  ],
   "main": "src/index.js",
   "dependencies": {
     "react": "16.12.0",
     "react-dom": "16.12.0",
     "react-scripts": "3.0.1"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "5.1.1",
+    "@testing-library/react": "10.0.1",
     "typescript": "3.3.3"
   },
   "scripts": {
@@ -18,5 +23,10 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

src/App.js

@@ -1,11 +1,8 @@
-import React from "react";
-import "./styles.css";
+import React from 'react';
+import './styles.css';
 
-export default function App() {
-  return (
-    <div className="App">
-      <h1>Hello CodeSandbox</h1>
-      <h2>Start editing to see some magic happen!</h2>
-    </div>
-  );
-}
+import SimpleForm from './components/SimpleForm';
+
+const App = () => <SimpleForm />;
+
+export default App;

src/components/SimpleForm.jsx

@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+
+const SimpleForm = () => {
+  const [name, setName] = useState('');
+
+  const handleSubmit = e => e.preventDefault();
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div>
+        <label htmlFor="name">name</label>
+        <input
+          type="text"
+          name="name"
+          id="name"
+          value={name}
+          onChange={e => setName(e.target.value)}
+        />
+      </div>
+    </form>
+  );
+};
+
+export default SimpleForm;

src/components/SimpleForm.spec.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import SimpleForm from './SimpleForm';
+
+describe('<SimpleForm />', () => {
+  it('should render a name input', () => {
+    const { getByLabelText } = render(<SimpleForm />);
+
+    const nameInput = getByLabelText('name');
+
+    expect(nameInput).toBeInTheDocument();
+  });
+});