diff --git a/package.json b/package.json index f64ff79..4677c82 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,8 @@ "version": "0.1.0", "private": true, "dependencies": { - "react": "^16.6.0", - "react-dom": "^16.6.0", + "react": "^16.7.0-alpha.0", + "react-dom": "^16.7.0-alpha.0", "react-scripts": "2.0.5" }, "scripts": { diff --git a/src/App.js b/src/App.js index 7e261ca..88164e7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,28 +1,43 @@ -import React, { Component } from 'react'; -import logo from './logo.svg'; -import './App.css'; +import React, { useState } from "react"; -class App extends Component { - render() { - return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
+import Form from "./Form"; +import "./App.css"; + +export default () => { + const [todos, setTodos] = useState([]); + + const toggleComplete = i => + setTodos( + todos.map( + (todo, k) => + k === i + ? { + ...todo, + complete: !todo.complete + } + : todo + ) ); - } -} -export default App; + return ( +
+
setTodos([{ text, complete: false }, ...todos])} + /> +
+ {todos.map(({ text, complete }, i) => ( +
toggleComplete(i)} + style={{ + textDecoration: complete ? "line-through" : "" + }} + > + {text} +
+ ))} +
+ +
+ ); +}; diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index a754b20..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; - -it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); diff --git a/src/Form.jsx b/src/Form.jsx new file mode 100644 index 0000000..402dfcf --- /dev/null +++ b/src/Form.jsx @@ -0,0 +1,27 @@ +import React, { useState } from "react"; + +const useInputValue = initialValue => { + const [value, setValue] = useState(initialValue); + + return { + value, + onChange: e => setValue(e.target.value), + resetValue: () => setValue("") + }; +}; + +export default ({ onSubmit }) => { + const { resetValue, ...text } = useInputValue(""); + + return ( + { + e.preventDefault(); + onSubmit(text.value); + resetValue(); + }} + > + + + ); +}; diff --git a/src/index.css b/src/index.css deleted file mode 100644 index cee5f34..0000000 --- a/src/index.css +++ /dev/null @@ -1,14 +0,0 @@ -body { - margin: 0; - padding: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", - monospace; -} diff --git a/src/index.js b/src/index.js index 0c5e75d..7900787 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,9 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import * as serviceWorker from './serviceWorker'; +import React from "react"; +import ReactDOM from "react-dom"; +import App from "./App"; +import * as serviceWorker from "./serviceWorker"; -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render(, 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. diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 6b60c10..0000000 --- a/src/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/yarn.lock b/yarn.lock index 4121c21..96faa1e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7568,15 +7568,15 @@ react-dev-utils@^6.0.5: strip-ansi "4.0.0" text-table "0.2.0" -react-dom@16.6.0: - version "16.6.0" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.6.0.tgz#6375b8391e019a632a89a0988bce85f0cc87a92f" - integrity sha512-Stm2D9dXEUUAQdvpvhvFj/DEXwC2PAL/RwEMhoN4dvvD2ikTlJegEXf97xryg88VIAU22ZAP7n842l+9BTz6+w== +react-dom@^16.7.0-alpha.0: + version "16.7.0-alpha.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.7.0-alpha.0.tgz#8379158d4c76d63c989f325f45dfa5762582584f" + integrity sha512-/XUn1ldxmoV2B7ov0rWT5LMZaaHMlF9GGLkUsmPRxmWTJwRDOuAPXidSaSlmR/VOhDSI1s+v3+KzFqhhDFJxYA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.10.0" + scheduler "^0.11.0-alpha.0" react-error-overlay@^5.0.5: version "5.0.5" @@ -7637,15 +7637,15 @@ react-scripts@2.0.5: optionalDependencies: fsevents "1.2.4" -react@16.6.0: - version "16.6.0" - resolved "https://registry.yarnpkg.com/react/-/react-16.6.0.tgz#b34761cfaf3e30f5508bc732fb4736730b7da246" - integrity sha512-zJPnx/jKtuOEXCbQ9BKaxDMxR0001/hzxXwYxG8septeyYGfsgAei6NgfbVgOhbY1WOP2o3VPs/E9HaN+9hV3Q== +react@^16.7.0-alpha.0: + version "16.7.0-alpha.0" + resolved "https://registry.yarnpkg.com/react/-/react-16.7.0-alpha.0.tgz#e2ed4abe6f268c9b092a1d1e572953684d1783a9" + integrity sha512-V0za4H01aoAF0SdzahHepvfvzTQ1xxkgMX4z8uKzn+wzZAlVk0IVpleqyxZWluqmdftNedj6fIIZRO/rVYVFvQ== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.10.0" + scheduler "^0.11.0-alpha.0" read-pkg-up@^1.0.1: version "1.0.1" @@ -8092,10 +8092,10 @@ saxes@^3.1.3: dependencies: xmlchars "^1.3.1" -scheduler@^0.10.0: - version "0.10.0" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.10.0.tgz#7988de90fe7edccc774ea175a783e69c40c521e1" - integrity sha512-+TSTVTCBAA3h8Anei3haDc1IRwMeDmtI/y/o3iBe3Mjl2vwYF9DtPDt929HyRmV/e7au7CLu8sc4C4W0VOs29w== +scheduler@^0.11.0-alpha.0: + version "0.11.0-alpha.0" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.11.0-alpha.0.tgz#7b132c726608993471db07866f2d59a52b9e190b" + integrity sha512-0tUDHYSyni/EHkMMBysVXVwfanCWWbLsulnDB1tGrQiWWrVuRVoclWCPHCYC/1iR5Rj34EQhxh3/F36V+F+ZpA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1"