made loginform

package.json

@@ -9,8 +9,10 @@
     "@types/node": "12.0.5",
     "@types/react": "16.8.19",
     "@types/react-dom": "16.8.4",
+    "@types/react-router-dom": "^4.3.3",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1",
     "typescript": "3.5.1"
   },

src/App.tsx

@@ -1,26 +1,7 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
 
 const App: React.FC = () => {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
+  return <div>aa</div>;
+};
 
 export default App;

src/components/Atoms/TextInput.tsx

@@ -4,7 +4,7 @@ import TextField from '@material-ui/core/TextField';
 interface IProps {
   name: string;
   type?: 'password' | 'email' | 'text';
-  autoFocus: boolean;
+  autoFocus?: boolean;
   label: string;
   placeholder: string;
   value: string;
@@ -17,7 +17,7 @@ const TextInput: React.FC<IProps> = props => {
       required={true}
       name={props.name}
       type={props.type || 'text'}
-      autoFocus={props.autoFocus}
+      autoFocus={props.autoFocus || false}
       label={props.label}
       placeholder={props.placeholder}
       fullWidth={true}

src/components/Molecules/LoginForm.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import TextInput from '../Atoms/TextInput';
+import { Button } from '@material-ui/core';
+
+const LoginForm: React.FC<{}> = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const changeEmail = (e: React.ChangeEvent<HTMLInputElement>) => setEmail(e.target.value);
+  const changePassword = (e: React.ChangeEvent<HTMLInputElement>) => setPassword(e.target.value);
+
+  return (
+    <form action="" method="POST">
+      <TextInput
+        name="email"
+        type="email"
+        autoFocus={true}
+        label="label"
+        placeholder="placeholder"
+        onChange={changeEmail}
+        value={email}
+      />
+      <TextInput
+        name="password"
+        type="password"
+        label="label"
+        placeholder="placeholder"
+        onChange={changePassword}
+        value={password}
+      />
+      <Button fullWidth={true} variant="contained" color="primary" type="submit">
+        Login
+      </Button>
+    </form>
+  );
+};
+
+export default LoginForm;

src/index.tsx

@@ -1,10 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+import { BrowserRouter as Router, Route } from 'react-router-dom';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import LoginForm from './components/Molecules/LoginForm';
+import CssBaseline from '@material-ui/core/CssBaseline';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(
+  <Router>
+    <CssBaseline />
+    <Route path="/" exact={true} component={App} />
+    <Route path="/login" exact={true} component={LoginForm} />
+  </Router>,
+  document.getElementById('root')
+);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.