React Tutorial

5 |

6 |

7 | ); 8 | -------------------------------------------------------------------------------- /src/Todo/AddTodo.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import PropTypes from "prop-types"; 3 | 4 | function useInputValue(defaultValue = "") { 5 | const [value, setValue] = useState(defaultValue); 6 | 7 | return { 8 | bind: { 9 | value, 10 | onChange: (event) => setValue(event.target.value), 11 | }, 12 | clear: () => setValue(""), 13 | value: () => value, 14 | }; 15 | } 16 | 17 | function AddTodo({ onCreate }) { 18 | const input = useInputValue(""); 19 | function submitHandler(event) { 20 | event.preventDefault(); 21 | 22 | if (input.value().trim()) { 23 | onCreate(input.value()); 24 | input.clear(); 25 | } 26 | } 27 | return ( 28 | 32 | ); 33 | } 34 | 35 | AddTodo.propTypes = { 36 | onCreate: PropTypes.func.isRequired, 37 | }; 38 | 39 | export default AddTodo; 40 | -------------------------------------------------------------------------------- /src/Todo/Todo.css: -------------------------------------------------------------------------------- 1 | .li-item { 2 | display: flex; 3 | justify-content: space-between; 4 | align-items: center; 5 | padding: 8px 16px; 6 | border: 1px solid #eee; 7 | border-radius: 5px; 8 | margin-bottom: 10px; 9 | } 10 | .input { 11 | margin-right: 0.5rem; 12 | } 13 | .done { 14 | text-decoration: line-through; 15 | } 16 | .btn { 17 | padding: 3px 10px; 18 | background: crimson; 19 | outline: none; 20 | border-radius: 5px; 21 | border: none; 22 | cursor: pointer; 23 | transition: opacity 0.5s ease; 24 | } 25 | .btn:hover { 26 | opacity: 0.8; 27 | } 28 | -------------------------------------------------------------------------------- /src/Todo/TodoItem.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import PropTypes from "prop-types"; 3 | import Context from "../context"; 4 | import "./Todo.css"; 5 | 6 | function TodoItem({ todo, index, onChange }) { 7 | const { removeTodo } = useContext(Context); 8 | const classes = []; 9 | 10 | if (todo.completed) { 11 | classes.push("done"); 12 | } 13 | 14 | return ( 15 |

16 | 17 | onChange(todo.id)} 21 | className="input" 22 | />{" "} 23 | 24 | {index + 1} 25 | {todo.title} 26 | 27 | 30 |

31 | ); 32 | } 33 | 34 | TodoItem.propTypes = { 35 | todo: PropTypes.object.isRequired, 36 | index: PropTypes.number, 37 | }; 38 | 39 | export default TodoItem; 40 | -------------------------------------------------------------------------------- /src/Todo/TodoList.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import TodoItem from "./TodoItem"; 3 | import PropTypes from "prop-types"; 4 | 5 | function TodoList(props) { 6 | const styles = { 7 | ul: { 8 | listStyle: "none", 9 | padding: 0, 10 | }, 11 | }; 12 | return ( 13 |

22 | ); 23 | })} 24 |

25 | ); 26 | } 27 | 28 | TodoList.propTypes = { 29 | todos: PropTypes.arrayOf(PropTypes.object).isRequired, 30 | onToggle: PropTypes.func.isRequired, 31 | }; 32 | 33 | export default TodoList; 34 | -------------------------------------------------------------------------------- /src/context.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Context = React.createContext(); 4 | 5 | export default Context; 6 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | 15 | .wrapper { 16 | width: 80%; 17 | margin: 0 auto; 18 | padding-top: 100px; 19 | } 20 | .lds-dual-ring { 21 | display: inline-block; 22 | width: 80px; 23 | height: 80px; 24 | } 25 | .lds-dual-ring:after { 26 | content: " "; 27 | display: block; 28 | width: 64px; 29 | height: 64px; 30 | margin: 8px; 31 | border-radius: 50%; 32 | border: 6px solid blue; 33 | border-color: blue transparent blue transparent; 34 | animation: lds-dual-ring 1.2s linear infinite; 35 | } 36 | @keyframes lds-dual-ring { 37 | 0% { 38 | transform: rotate(0deg); 39 | } 40 | 100% { 41 | transform: rotate(360deg); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import reportWebVitals from "./reportWebVitals"; 6 | 7 | ReactDOM.render(, document.getElementById("root")); 8 | 9 | reportWebVitals(); 10 | -------------------------------------------------------------------------------- /src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | --------------------------------------------------------------------------------