{"id":306815,"date":"2020-07-12T21:00:39","date_gmt":"2020-07-12T21:00:39","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=306815"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=306815","title":{"rendered":"Todolist \u043d\u0430 React Hooks + TypeScript: \u043e\u0442 \u0441\u0431\u043e\u0440\u043a\u0438 \u0434\u043e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f"},"content":{"rendered":"\n
\u041d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u0432\u0435\u0440\u0441\u0438\u0438 16.9, \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 React JS \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043d\u043e\u0432\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u2014 \u0445\u0443\u043a\u0438<\/a>. \u041e\u043d\u0438 \u0434\u0430\u044e\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 React, \u043e\u0441\u0432\u043e\u0431\u043e\u0436\u0434\u0430\u044f \u043e\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0441 \u0445\u0443\u043a\u0430\u043c\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n

\u041f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 Todolist \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 React Hooks \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c TypeScript<\/a>.
<\/a> <\/p>\n

\u0421\u0431\u043e\u0440\u043a\u0430<\/h2>\n

\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f:<\/p>\n

\u251c\u2500\u2500 src
| \u251c\u2500\u2500 components
| \u251c\u2500\u2500 index.html
| \u251c\u2500\u2500 index.tsx
\u251c\u2500\u2500 package.json
\u251c\u2500\u2500 tsconfig.json
\u251c\u2500\u2500 webpack.config.json<\/p>\n

\u0424\u0430\u0439\u043b package.json:<\/b> <\/p>\n
\n
{   "name": "todo-react-typescript",   "version": "1.0.0",   "description": "",   "main": "index.tsx",   "scripts": {     "start": "webpack-dev-server --port 3000 --mode development --open --hot",     "build": "webpack --mode production"   },   "author": "",   "license": "ISC",   "devDependencies": {     "ts-loader": "^5.2.1",     "html-webpack-plugin": "^3.2.0",     "typescript": "^3.8.2",     "webpack": "^4.41.6",     "webpack-cli": "^3.3.11",     "webpack-dev-server": "^3.10.3"   },   "dependencies": {     "@types\/react": "^16.9.23",     "@types\/react-dom": "^16.9.5",     "react": "^16.12.0",     "react-dom": "^16.12.0"   } }<\/code><\/pre>\n
  \u0414\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 TypeScript, \u043f\u043e\u043c\u0438\u043c\u043e \u043f\u0430\u043a\u0435\u0442\u0430 typescript, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c ts-loader, \u0441\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 tsx-\u0444\u0430\u0439\u043b\u044b \u0432 js-\u043a\u043e\u0434, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0430\u043a\u0435\u0442\u044b \u0441\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0442\u0438\u043f\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f React \u2014 @types\/react \u0438 @types\/react-dom. \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0442\u0430\u0432\u0438\u043c html-webpack-plugin, \u043e\u043d \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 dev-\u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043f\u0440\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 index.html \u2014 \u0444\u0430\u0439\u043b\u0430 \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0438 \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043b\u044f production-\u0441\u0431\u043e\u0440\u043a\u0438 \u0432 \u043d\u0443\u0436\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435.  <\/div>\n<\/p><\/div>\n
  <\/p>\n
                         \u0424\u0430\u0439\u043b tsconfig.json:<\/b>                         <\/p>\n
\n
{   "compilerOptions": {     "sourceMap": true,     "noImplicitAny": false,     "module": "commonjs",     "target": "es6",     "lib": [       "es2015",       "es2017",       "dom"     ],     "removeComments": true,     "allowSyntheticDefaultImports": false,     "jsx": "react",     "allowJs": true,     "baseUrl": ".\/",     "paths": {       "components\/*": [         "src\/components\/*"       ]     }   } }<\/code><\/pre>\n
  \u041f\u043e\u043b\u0435 \u00abjsx\u00bb \u0437\u0430\u0434\u0430\u0451\u0442 \u0440\u0435\u0436\u0438\u043c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430. \u0412\u0441\u0435\u0433\u043e \u0435\u0441\u0442\u044c 3 \u0440\u0435\u0436\u0438\u043c\u0430: \u00abpreserve\u00bb, \u00abreact\u00bb \u0438 \u00abreact-native\u00bb. <\/p>\n
    <\/div>\n<\/p><\/div>\n
  <\/p>\n
                         \u0424\u0430\u0439\u043b webpack.config.json:<\/b>                         <\/p>\n
\n
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin');  module.exports = {     entry: '.\/src\/index.tsx',     resolve: {         extensions: ['.ts', '.tsx', '.js']     },     output: {         path: path.join(__dirname, '\/dist'),         filename: 'bundle.min.js'     },     module: {         rules: [             {                 test: \/\\.ts(x?)$\/,                 exclude: \/node_modules\/,                 use: [                     {                         loader: "ts-loader"                     }                 ]             }         ]     },     plugins: [         new HtmlWebpackPlugin({             template: '.\/src\/index.html'         })     ] };<\/code><\/pre>\n
  \u0422\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u2014 .\/src\/index.tsx. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e resolve.extensions \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c ts\/tsx\/js \u0444\u0430\u0439\u043b\u044b. \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c ts-loader \u0438 html-webpack-plugin. \u0421\u0431\u043e\u0440\u043a\u0430 \u0433\u043e\u0442\u043e\u0432\u0430.  <\/div>\n<\/p><\/div>\n
  <\/p>\n
\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430<\/h2>\n
  \u0412 \u0444\u0430\u0439\u043b\u0435 index.html \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043a\u0443\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435: <\/p>\n
<div id="root"><\/div><\/code><\/pre>\n
  \u0412 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 components \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u0430\u0448 \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u043f\u0443\u0441\u0442\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u2014 App.tsx.
  \u0424\u0430\u0439\u043b index.tsx: <\/p>\n
import * as React from 'react'; import * as ReactDOM from 'react-dom';  import App from ".\/components\/App";  ReactDOM.render (     <App\/>,     document.getElementById("root") );<\/code><\/pre>\n
  Todolist-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c:<\/p>\n