{"id":368696,"date":"2024-05-21T03:47:49","date_gmt":"2024-05-21T03:47:49","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=368696"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=368696","title":{"rendered":"\u041f\u0435\u0440\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 SolidJS<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043c\u0441\u044f \u0441 SolidJS \u2212 JavaScript-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0431\u0435\u0437 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e DOM. \u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043b\u0435\u0433\u043a\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0434\u0430\u0447 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c TypeScript \u0438 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. <\/p>\n

\"SolidJS\"<\/p>\n
SolidJS<\/figcaption><\/div>\n<\/figure>\n

\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 SolidJS?<\/h2>\n

SolidJS \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f JS \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c. \u0421\u0430\u043c\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043f\u0438\u0448\u0443\u0442 \u043d\u0430 \u0441\u0432\u043e\u0435\u043c \u0433\u0438\u0442\u0445\u0430\u0431\u0435<\/a>: \u00abSolid \u2212 \u044d\u0442\u043e \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 JavaScript \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432. \u0412\u043c\u0435\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e DOM \u043e\u043d \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442 \u0441\u0432\u043e\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 \u0443\u0437\u043b\u044b DOM \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0438\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0435\u0442\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0440\u0435\u0430\u043a\u0446\u0438\u0439\u00bb. <\/p>\n

\u0423\u0436\u0435 \u0432 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043d\u044f\u0442\u044c \u0441 \u043a\u0430\u043a\u043e\u0439 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \u0438\u0434\u0435\u0442 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u043e \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0439 DOM. SolidJS \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 React, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u043d\u0430\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043d\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b, \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0438\u0433\u043d\u0430\u043b\u043e\u0432 (\u0440\u0435\u0430\u043a\u0442\u043e\u0432\u0441\u043a\u0438\u0435 \u0445\u0443\u043a\u0438), \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0430\u0440\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439. <\/p>\n

\u0423 SolidJS \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0445\u043e\u0440\u043e\u0448\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f <\/a>\u043d\u0430 \u0440\u0443\u0441\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u0438 \u0438\u043c\u0435\u0435\u0442 \u0440\u044f\u0434 \u0442\u0443\u0442\u043e\u0440\u0438\u0430\u043b\u043e\u0432. \u041e\u0434\u043d\u0430\u043a\u043e, \u0432 \u0440\u0443\u0441\u0441\u043a\u043e\u044f\u0437\u044b\u0447\u043d\u043e\u043c \u0441\u0435\u0433\u043c\u0435\u043d\u0442\u0435 \u043c\u0430\u043b\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u043c\u0443 \u0432\u043e\u043f\u0440\u043e\u0441\u0443. <\/p>\n

\u041d\u0430\u0447\u0430\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u044b <\/h2>\n

\u041d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u043f\u0430\u043a\u0435\u0442\u043d\u044b\u0439 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440 npm \u0438 \u0441\u0440\u0435\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 VS Code. \u0422\u0430\u043a\u0436\u0435 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0431\u043e\u0440\u0449\u0438\u043a Vite (\u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438 webpack). <\/p>\n

\u0412 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e, \u0433\u0434\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0430 \u043f\u0430\u043f\u043a\u0430 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c, \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443: npm create vite@latest todo-list -- --template solid-ts<\/code>
\u042d\u0442\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u043d\u0430\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e todo\u2011list<\/strong> \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b. <\/p>\n

\u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0432 \u043f\u0430\u043f\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430: cd todo-list
<\/code>\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043f\u0430\u043a\u0435\u0442\u043e\u0432: npm install<\/code> <\/p>\n

\u0417\u0430\u043f\u0443\u0441\u0442\u0438\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c, \u0447\u0442\u043e \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442: npm run dev<\/code> <\/p>\n

\u0415\u0441\u043b\u0438 \u043c\u044b \u0432\u0441\u0435 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u0442\u043e \u043d\u0430 \u0430\u0434\u0440\u0435\u0441\u0435 http:\/\/localhost:5173\/<\/a> \u0443\u0432\u0438\u0434\u0438\u043c \u044d\u0442\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443: <\/p>\n

\"\u0421\u0442\u0430\u0440\u0442\u043e\u0432\u0430\u044f<\/p>\n
\u0421\u0442\u0430\u0440\u0442\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430<\/figcaption><\/div>\n<\/figure>\n

\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e<\/strong><\/p>\n

\u0414\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0441 \u0433\u043e\u0442\u043e\u0432\u044b\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u2212 Bootstrap<\/a>. \u0412 \u0444\u0430\u0439\u043b\u0435 index.html \u0432\u0441\u0442\u0430\u0432\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0440\u043e\u0447\u043a\u0438: <\/p>\n

\u041f\u0435\u0440\u0435\u0434 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u043c \u0442\u0435\u0433\u043e\u043c <\/head><\/code>: <\/p>\n

<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65\" crossorigin=\"anonymous\"><\/code> <\/p>\n

\u041f\u0435\u0440\u0435\u0434 \u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0438\u043c \u0442\u0435\u0433\u043e\u043c <\/body><\/code>: <\/p>\n

<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.3\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK\/7HAuoJl+0I4\" crossorigin=\"anonymous\"><\/script><\/code> <\/p>\n

\u0422\u0430\u043a\u0436\u0435 \u0443\u0434\u0430\u043b\u0438\u043c \u0444\u0430\u0439\u043b App.css. \u0412 index.css \u0443\u0434\u0430\u043b\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0438 \u0432\u0441\u0442\u0430\u0432\u0438\u043c \u0441\u0432\u043e\u0435:<\/p>\n

:root {   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;   line-height: 1.5;   font-weight: 400;   width: 100%;   height: 100%; }  #root {   max-width: 1280px;   margin: 0 auto;   padding: 2rem;   display: flex;   flex-flow: column nowrap;   place-items: center; }<\/code><\/pre>\n
\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430<\/h3>\n
\u041d\u0430\u0448\u0435 \u0431\u0443\u0434\u0443\u0449\u0435\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 \u0442\u0440\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432:<\/p>\n
    \n
  1. \n
    \u0417\u0430\u0434\u0430\u0447\u0430 \u2212 \u0444\u043b\u0430\u0436\u043e\u043a \u00ab\u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430\/\u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430\u00bb \u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n<\/li>\n
  2. \n
    \u0422\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u043f\u043e\u043b\u0435 \u0434\u043b\u044f \u0432\u0432\u043e\u0434\u0430 \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n<\/li>\n
  3. \n
    \u041a\u043d\u043e\u043f\u043a\u0430 \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f\/\u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n<\/li>\n<\/ol>\n
    \u0412 \u0438\u0442\u043e\u0433\u0435 \u0443 \u043d\u0430\u0441 \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0435 <\/a>\u0433\u043e\u0442\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n
    \u041f\u0435\u0440\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/h2>\n
    \u0417\u0430\u0434\u0430\u0447\u0430<\/h4>\n
    \u0412 \u043f\u0430\u043f\u043a\u0435 src \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b components\/task\/index.tsx <\/em>\u0438 \u0432 \u043d\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043e\u0434\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438:   <\/p>\n
    export default function Task() {   return (     <div class=\"row form-check\">       <input         class=\"form-check-input\"         type=\"checkbox\"         value=\"\"         id=\"flexCheckDefault\"       \/>       <label class=\"form-check-label\" for=\"flexCheckDefault\">         \u0417\u0430\u0434\u0430\u0447\u0430 \u21161       <\/label>     <\/div>   ); }<\/code><\/pre>\n
    \u0412 input \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430 \u0438\u043b\u0438 \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430 \u0437\u0430\u0434\u0430\u0447\u0430 \u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u044d\u0442\u043e\u0433\u043e \u0444\u043b\u0430\u0436\u043e\u043a, \u0430 \u0432 \u0442\u0435\u0433 label \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438. \u042d\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0438\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 (\u0434\u0430\u043b\u0435\u0435 \u2212 \u043f\u0440\u043e\u043f\u0441\u043e\u0432) \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 props (\u043a\u043e\u0434 \u043d\u0438\u0436\u0435).<\/p>\n
    \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438. \u0412 \u043f\u0440\u043e\u043f\u0441\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0438 \u0441\u0442\u0430\u0442\u0443\u0441 (\u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430\/\u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430). \u0417\u0434\u0435\u0441\u044c \u043d\u0430\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u043f\u0435\u0440\u0432\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d<\/em>\u0442 \u0432 SolidJS.<\/p>\n
    \u0412\u0441\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 SolidJS \u2212 \u044d\u0442\u043e \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c. \u0417\u0434\u0435\u0441\u044c \u043e\u043d\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u0430,\u0447\u0442\u043e\u0431\u044b \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0442\u0430\u0442\u0443\u0441 \u0437\u0430\u0434\u0430\u0447\u0438 \u0431\u0435\u0437 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0427\u0442\u043e\u0431\u044b \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0430 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u043d\u0435\u043b\u044c\u0437\u044f \u0434\u0435\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 props<\/strong>, \u043a\u0430\u043a \u0432 React. \u041f\u0440\u043e\u043f\u0441\u044b \u0432 SolidJS \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f \u0438 \u0443\u0436\u0435<\/strong> \u0438\u043c\u0435\u044e\u0442 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043f\u0440\u0438 \u0434\u0435\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u0442\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0442\u0435\u0440\u044f\u044e\u0442\u0441\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 props.<\/p>\n
    \u041d\u043e \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0437\u0430\u0434\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0442\u043e \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c? \u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u043c\u0435\u0442\u043e\u0434 \u2212 mergeProps<\/code>. \u0412 mergeProps<\/code> \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0441\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438 \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u043f\u0440\u043e\u043f\u0441\u043e\u0432, \u0432 \u0438\u0442\u043e\u0433\u0435 \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043d\u043e\u0432\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f:<\/p>\n
    import { mergeProps } from \"solid-js\";  type Props = {   name?: string;   isDone?: boolean; };  export default function Task(_props: Props) {   const props = mergeProps(     {       name: \"\u0417\u0430\u0434\u0430\u0447\u0430 \u21161\",       isDone: false,     },     _props   );   return (     <div class=\"form-check\">       <input         class=\"form-check-input\"         type=\"checkbox\"         value=\"\"         id=\"flexCheckDefault\"         checked={props.isDone}       \/>       <label class=\"form-check-label\" for=\"flexCheckDefault\">         {props.name}       <\/label>     <\/div>   ); }<\/code><\/pre>\n
     \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0432 App.tsx, \u0443\u0434\u0430\u043b\u0438\u043c \u0432\u0435\u0441\u044c \u043a\u043e\u0434, \u0447\u0442\u043e \u0442\u0430\u043c \u0435\u0441\u0442\u044c, \u0438 \u0432\u0441\u0442\u0430\u0432\u0438\u043c \u0441\u0432\u043e\u0439:  <\/p>\n
    import Task from \".\/components\/task\";  function App() {   return (     <div>       <Task \/>     <\/div>   ); }  export default App;<\/code><\/pre>\n
    \u041e\u043f\u044f\u0442\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043d\u0430 http:\/\/localhost:5173\/<\/a> \u0438 \u0443\u0432\u0438\u0434\u0438\u043c \u043d\u0430\u0448 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 (\u043f\u0440\u043e\u0435\u043a\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0437\u0430\u043f\u0443\u0449\u0435\u043d):<\/p>\n
    \"\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/p>\n
    \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u0432\u043e\u0434\u0430 \u043e\u0434\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/figcaption><\/div>\n<\/figure>\n
    \u041e\u0442\u043b\u0438\u0447\u043d\u043e! \u041f\u043e\u043b\u0434\u0435\u043b\u0430 \u0441\u0434\u0435\u043b\u0430\u043d\u043e, \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0435\u0449\u0435 \u043f\u0430\u0440\u043e\u0447\u043a\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.<\/p>\n
    \u041f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430 \u0437\u0430\u0434\u0430\u0447\u0438<\/h4>\n
    \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0444\u0430\u0439\u043b components\/input-field\/index.tsx<\/em> \u0438 \u0437\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n
    type Props = {   onChanged: () => void; };  export default function InputField(props: Props) {   return (     <div class=\"mb-3\">       <label for=\"exampleFormControlInput1\" class=\"form-label\">         \u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438       <\/label>       <input         type=\"email\"         class=\"form-control form-control\"         id=\"exampleFormControlInput1\"         placeholder=\"\u041f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e...\"         onChange={props.onChanged}       \/>     <\/div>   ); }<\/code><\/pre>\n
    \u0412 input \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u0437\u0430\u0434\u0430\u0447\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u043c\u0435\u0442\u043e\u0434 \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u2212 onChanged<\/code>. \u0412 \u044d\u0442\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0443\u0436\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043f\u0440\u043e\u043f\u0441\u044b \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e onChanged<\/code> \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0434\u043b\u044f \u0432\u044b\u0437\u043e\u0432\u0430 \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n
    \u041a\u043d\u043e\u043f\u043a\u0430 \u0434\u043b\u044f \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0437\u0430\u0434\u0430\u0447\u0438  <\/h4>\n
    \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0434\u0438\u043d \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u0434\u0432\u0443\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0438 \u0432 \u043f\u0440\u043e\u043f\u0441\u0430\u0445 \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0442\u0438\u043f \u043a\u043d\u043e\u043f\u043a\u0438. \u0412 \u0444\u0430\u0439\u043b\u0435 components\/button\/index.tsx<\/em> \u0437\u0430\u043f\u0438\u0448\u0435\u043c:<\/p>\n
    type Props = {   name: string;   type: \"add\" | \"delete\";   onClick: () => void; };  export default function Button(props: Props) {   return (     <button       type=\"button\"       class=\"btn btn-success\"       classList={{         \"btn-succes\": props.type === \"add\",         \"btn-danger\": props.type === \"delete\",       }}       onClick={props.onClick}     >       {props.name}     <\/button>   ); }<\/code><\/pre>\n
    \u0417\u0434\u0435\u0441\u044c \u0442\u0430\u043a\u0436\u0435 \u0432 \u043f\u0440\u043e\u0441\u044b \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043a\u0438, \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f-\u043a\u043b\u0438\u043a \u0438 \u0442\u0438\u043f \u043a\u043d\u043e\u043f\u043a\u0438. \u0423 \u043d\u0430\u0441 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0432\u0430 \u0442\u0438\u043f\u0430 \u043a\u043d\u043e\u043f\u043e\u043a: \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0438\u0445 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0442\u0440\u043e\u0447\u043a\u0430\u043c\u0438 ( \u043d\u0430 \u0431\u0443\u0434\u0443\u0449\u0435\u0435 \u043b\u0443\u0447\u0448\u0435 \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0443). \u0422\u0438\u043f \u043a\u043d\u043e\u043f\u043a\u0438 \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439.<\/p>\n
    \u041a\u0430\u043a \u0432\u044b \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435 \u0443\u0436\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u043b\u0438, SolidJS \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0446\u0435\u043b\u044b\u0445 \u0434\u0432\u0430 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0434\u043b\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u0430: class<\/code> \u0438 classList<\/code>. \u041f\u0435\u0440\u0432\u044b\u0439 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043d\u0430 \u0432\u0445\u043e\u0434 \u0441\u0442\u0440\u043e\u043a\u0443 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u0430, \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u2212 \u043e\u0431\u044a\u0435\u043a\u0442, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0441\u043b\u0435\u0432\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441, \u0430 \u0441\u043f\u0440\u0430\u0432\u0430 \u2212 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0442\u0438\u043f\u0430 boolean, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 true \u0434\u043e\u0431\u0430\u0432\u0438\u0442 \u043a\u043b\u0430\u0441\u0441 \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443.<\/p>\n
    \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0448\u0430 \u043f\u0430\u043f\u043a\u0430 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u0434\u043e\u043b\u0436\u043d\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a:  <\/p>\n
    \"\u0414\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f<\/p>\n
    \u0414\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/figcaption><\/div>\n<\/figure>\n
    \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432 App:<\/p>\n
    import Button from \".\/components\/button\"; import InputField from \".\/components\/input-field\"; import Task from \".\/components\/task\";  function App() {   return (     <div>       <InputField onChanged={() => console.log(\"input changed\")} \/>       <Button         name=\"\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c\"         onClick={() => console.log(\"btn click\")}         type=\"add\"       \/>       <Task \/>       <Button         name=\"\u0423\u0434\u0430\u043b\u0438\u0442\u044c\"         onClick={() => console.log(\"btn click\")}         type=\"delete\"       \/>     <\/div>   ); }  export default App;<\/code><\/pre>\n
    \u041f\u043e\u043a\u0430 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438 \u0441 \u0432\u044b\u0432\u043e\u0434\u043e\u043c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c, \u043f\u043e\u0437\u0436\u0435 \u044d\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043c. <\/p>\n
    \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n
    \"\u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435<\/p>\n
    \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0430\u0448\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435<\/figcaption><\/div>\n<\/figure>\n
    \u041c\u0434\u0430, \u043f\u043e\u043a\u0430 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u043e, \u0441\u0435\u0439\u0447\u0430\u0441 \u044d\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u043c.<\/p>\n
    \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0444\u0430\u0439\u043b components\/task-row\/index.tsx<\/em> \u0441 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0437\u0430\u0434\u0430\u0447\u0438 \u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u0423\u0434\u0430\u043b\u0438\u0442\u044c\u00bb \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435:<\/p>\n
    import Button from \"..\/button\"; import Task from \"..\/task\";  export default function TaskRow() {   return (     <div class=\"d-flex flex-row justify-content-between align-items-center gap-3\">       <div class=\"flex-grow-1\">         <Task \/>       <\/div>        <Button         name=\"\u0423\u0434\u0430\u043b\u0438\u0442\u044c\"         onClick={() => console.log(\"btn click\")}         type=\"delete\"       \/>     <\/div>   ); }<\/code><\/pre>\n
     \u0418 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 App \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u0433\u043e\u0432:  <\/p>\n
    import Button from \".\/components\/button\"; import InputField from \".\/components\/input-field\"; import TaskRow from \".\/components\/task-row\";  function App() {   return (     <div class=\"container\">       <div class=\"d-flex flex-row justify-content-between align-items-center gap-3\">         <div class=\"flex-grow-1\">           <InputField onChanged={() => console.log(\"input changed\")} \/>         <\/div>          <div class=\"mt-3\">           <Button             name=\"+ \u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c\"             onClick={() => console.log(\"btn click\")}             type=\"add\"           \/>         <\/div>       <\/div>        <div class=\"mb-3 d-flex flex-column gap-3\">         <TaskRow \/>       <\/div>     <\/div>   ); }  export default App;<\/code><\/pre>\n
     \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043e\u043f\u0440\u044f\u0442\u043d\u043e:  <\/p>\n
    \"\u041d\u0430\u0448<\/p>\n
    \u041d\u0430\u0448 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u043b\u0435\u0433\u043a\u043e\u0439 \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/figcaption><\/div>\n<\/figure>\n
    \u041f\u0435\u0440\u0432\u0430\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/h3>\n
    \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0441\u0430\u043c\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u043c\u0443 \u2212 \u043b\u043e\u0433\u0438\u043a\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n
    \u0412 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 App \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0441\u0438\u0433\u043d\u0430\u043b \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u043d\u0430\u0448\u0438\u0445 \u0437\u0430\u0434\u0430\u0447 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0442\u0438\u043f ITask:<\/p>\n
    import { createSignal } from \"solid-js\"; ...  export interface ITask {   id: number;   name: string;   isDone: boolean; }  function App() {   const [tasks, setTasks] = createSignal<ITask[]>([]);   const [taskId, setTaskId] = createSignal(0);   const [newTask, setNewTask] = createSignal(\"\"); ...<\/code><\/pre>\n
    \u0412\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 createSignal \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043f\u0430\u0440\u0443: \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 + \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f (\u0442\u043e\u0442 \u0436\u0435 \u0441\u0430\u043c\u044b\u0439 useState). \u041e\u0434\u043d\u0430\u043a\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u044b \u043d\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u044b \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u0438 \u044d\u0442\u0438 \u0441\u0442\u0440\u043e\u0447\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u043f\u043e\u043a\u043e\u0439\u043d\u043e \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c App.   <\/p>\n
    \u041c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0438\u0433\u043d\u0430\u043b\u043e\u0432:<\/p>\n