React App

├── .gitignore ├── README.md ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.js ├── Hello.jsx ├── index.css └── index.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Уроки по React Hooks 2 | 3 | YouTube-канал: https://www.youtube.com/c/ArchakovBlog -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-hooks", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-hooks-tutorial/be1a0caf2d38c88eeb4803692c2bded4a481a4c4/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |

32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-hooks-tutorial/be1a0caf2d38c88eeb4803692c2bded4a481a4c4/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Archakov06/react-hooks-tutorial/be1a0caf2d38c88eeb4803692c2bded4a481a4c4/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Hello from './Hello'; 4 | 5 | function reducer(state, action) { 6 | switch (action.type) { 7 | case 'ADD_NUMBER': 8 | return { 9 | ...state, 10 | numbers: [...state.numbers, action.payload], 11 | }; 12 | case 'TOGGLE_VISIBLE_HELLO': 13 | return { 14 | ...state, 15 | showHello: false, 16 | }; 17 | default: 18 | return state; 19 | } 20 | } 21 | 22 | function init(state) { 23 | return { 24 | ...state, 25 | numbers: [5, 5, 5], 26 | }; 27 | } 28 | 29 | function App() { 30 | const [state, dispatch] = React.useReducer( 31 | reducer, 32 | { 33 | showHello: true, 34 | numbers: [1, 2, 3], 35 | }, 36 | init, 37 | ); 38 | 39 | const inputRef = React.useRef(null); 40 | const words = React.useRef(['hello', 'world']); 41 | 42 | const addNumber = () => { 43 | const randNumber = Math.round(Math.random() * 10); 44 | dispatch({ 45 | type: 'ADD_NUMBER', 46 | payload: randNumber, 47 | }); 48 | }; 49 | 50 | const setFocus = () => { 51 | inputRef.current.focus(); 52 | console.log(words); 53 | }; 54 | 55 | return ( 56 |

57 | {state.showHello && } 58 | 66 |

{num}

71 | 72 |
73 |
74 |

75 | 76 | 77 |

78 | ); 79 | } 80 | 81 | export default App; 82 | -------------------------------------------------------------------------------- /src/Hello.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function Hello() { 4 | React.useEffect(() => { 5 | console.log('Hello отобразился один раз'); 6 | 7 | return () => { 8 | console.log('Hello удаляется'); 9 | }; 10 | }, []); 11 | 12 | return

Hello, World!

; 13 | } 14 | 15 | export default Hello; 16 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 4 | 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | } 8 | 9 | * { 10 | padding: 0; 11 | margin: 0; 12 | list-style: none; 13 | } 14 | 15 | ul { 16 | margin-bottom: 10px; 17 | } 18 | 19 | ul li { 20 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); 21 | padding: 5px; 22 | } 23 | 24 | .App { 25 | margin: 20px; 26 | } 27 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | import './index.css'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | --------------------------------------------------------------------------------