{"id":317231,"date":"2021-01-31T15:00:27","date_gmt":"2021-01-31T15:00:27","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=317231"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=317231","title":{"rendered":"\u0414\u0435\u043b\u0430\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0430 React \u0441 \u0431\u0430\u0437\u043e\u0439 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u043e\u0432 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 Airtable \u0438 Quarkly"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\n<p>\u0421\u043b\u044b\u0448\u0430\u043b\u0438 \u043f\u0440\u043e \u0442\u0430\u043a\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043a\u0430\u043a Airtable, \u043d\u043e \u043d\u0435 \u0437\u043d\u0430\u043b\u0438, \u0441 \u0447\u0435\u0433\u043e \u043d\u0430\u0447\u0430\u0442\u044c? \u0422\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0430\u0435\u043c \u0432 \u043c\u0438\u0440 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e <s>\u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/s> \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0411\u0414!<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u0438\u043c \u043f\u043e\u0441\u0442\u043e\u043c \u043c\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0446\u0438\u043a\u043b \u043e\u0431\u0443\u0447\u0430\u044e\u0449\u0438\u0445 \u0441\u0442\u0430\u0442\u0435\u0439, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0443\u0434\u0435\u043c \u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043d\u0430\u0448\u0438\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c Quarkly. \u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u043e\u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438. \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0438 \u043e\u0434\u0438\u043d \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a \u0420\u0416\u0414 \u043d\u0435 \u043f\u043e\u0441\u0442\u0440\u0430\u0434\u0430\u043b.<\/p>\n<p>  <\/p>\n<p>\u0424\u0440\u043e\u043d\u0442 \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 Quarkly, \u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u0434\u0442\u044f\u0433\u0438\u0432\u0430\u0442\u044c \u0438\u0437 \u0431\u0430\u0437\u044b \u0432 Airtable. \u041d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043c react-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0441 \u0431\u0430\u0437\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>  <a name=\"habracut\"><\/a>  <\/p>\n<h2>\u041f\u0440\u0435\u0430\u043c\u0431\u0443\u043b\u0430. \u041f\u043e\u0447\u0435\u043c\u0443 Airtable<\/h2>\n<p>  <\/p>\n<p>Airtable \u2014 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 no-code \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043c\u0430. \u0412\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043e\u043d\u0438 \u043a\u0430\u043a \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u043d\u043e \u0438\u043c\u0435\u044e\u0442 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u0435\u0435 \u043c\u043e\u0449\u043d\u044b\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b. \u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u0443\u0440\u043e\u043a\u0430 \u0432\u044b\u0431\u043e\u0440 Airtable \u043e\u0431\u0443\u0441\u043b\u043e\u0432\u043b\u0435\u043d \u043b\u0435\u0433\u043a\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e API.<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0432\u043f\u0435\u0440\u0432\u044b\u0435 \u0441\u043b\u044b\u0448\u0438\u0442\u0435 \u043f\u0440\u043e Airtable, \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043b\u0438\u0448\u043d\u0438\u043c \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/support.airtable.com\/hc\/en-us\/sections\/360009677453\">\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e<\/a> \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438. \u0422\u0430\u043a\u0436\u0435 \u0441\u043e\u0432\u0435\u0442\u0443\u0435\u043c \u043d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u0442\u044c\u0441\u044f \u0438 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u0432 \u0447\u0430\u0442\u0438\u043a\u0435 <a href=\"https:\/\/t.me\/airtable_russia\">Airtable Chat &amp; Community<\/a> \u0432 \u0442\u0435\u043b\u0435\u0433\u0440\u0430\u043c.<\/p>\n<p>  <\/p>\n<p>\u0424\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u043d\u0430 \u0432 Quarkly, \u0438 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435\u0433\u043e \u0434\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:<\/p>\n<p>  <\/p>\n<ul>\n<li><i>\u041a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430<\/i>. \u0412 \u043d\u0435\u0439 \u0431\u0443\u0434\u0443\u0442 \u0444\u043e\u0442\u043e, \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0434\u0432\u0435 \u043a\u043d\u043e\u043f\u043a\u0438: \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c email \u0438 \u043f\u043e\u0437\u0432\u043e\u043d\u0438\u0442\u044c. \u042d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u2014 \u043e\u0431\u0435\u0440\u0442\u043a\u0438.<\/li>\n<li><i>\u041e\u0431\u0435\u0440\u0442\u043a\u0430<\/i>. \u041e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 Airtable, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043d\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0435.<\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0442\u0435\u0445, \u0443 \u043a\u043e\u0433\u043e \u043d\u0435\u0442 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0432\u043d\u0438\u043a\u0430\u0442\u044c \u0432 \u043f\u043e\u0441\u0442 \u0432 \u043f\u0435\u0447\u0430\u0442\u043d\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435, \u043c\u044b \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b\u0438 \u0432\u0438\u0434\u0435\u043e \u0441 \u0441\u0443\u0431\u0442\u0438\u0442\u0440\u0430\u043c\u0438 \u0438 \u0442\u0430\u0439\u043c\u043a\u043e\u0434\u0430\u043c\u0438:<\/p>\n<p>  <a href=\"https:\/\/www.youtube.com\/watch?v=mbPukPi0RZA\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/5m\/af\/tw\/5maftwrd7mwem0bfvt8sdrs9dbq.jpeg\"><\/a><\/p>\n<h2>\u0427\u0430\u0441\u0442\u044c 1. \u0414\u0435\u043b\u0430\u0435\u043c \u0432\u0438\u0437\u0443\u0430\u043b \u0432 Quarkly<\/h2>\n<p>  <\/p>\n<h4>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438:<\/h4>\n<p>  <\/p>\n<ol>\n<li>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 Quarkly, \u043d\u0430\u0437\u043e\u0432\u0435\u043c \u0435\u0433\u043e <i>Airtable Example<\/i>;<\/li>\n<li>\u041f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u0430;<\/li>\n<li>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u0431\u043b\u043e\u043a \u0441 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u043e\u0432. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u043b\u0438\u043a\u0430\u0435\u043c \u043d\u0430 \u0447\u0435\u0440\u043d\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 + \u043f\u043e\u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435 \u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0431\u043b\u043e\u043a \u0438\u0437 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0438 <i>Team<\/i>;\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/9h\/j1\/cw\/9hj1cwk69_qeqa5uqaggpbgd8s0.png\"><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/i-\/ms\/w-\/i-msw-wmma7xsl42ylqbyzhnjko.png\"><\/li>\n<li>\u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u0438 \u0441\u043b\u043e\u0435\u0432 \u043f\u0435\u0440\u0432\u0443\u044e \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443 (<i>StackItem<\/i>) \u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c \u0435\u0451 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442;\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/5y\/ht\/vj\/5yhtvjs976wkeowgo_bgdmd6buy.png\"><\/p>\n<p>  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u043d\u0430 \u00ab\u0442\u0440\u043e\u0435\u0442\u043e\u0447\u0438\u0435\u00bb \u0438 \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u0443\u043d\u043a\u0442 <i>Convert to Component<\/i>. \u041d\u0430\u0437\u043e\u0432\u0435\u043c \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <i>EmployeeCard<\/i>.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/p-\/pi\/g_\/p-pig_bogxubbfwe2o-xhxx186e.png\"><\/li>\n<li>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u044d\u0442\u043e\u0433\u043e react-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043d\u043e \u043f\u043e\u043a\u0430 \u044d\u0442\u043e\u0433\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0438 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430-\u043e\u0431\u0435\u0440\u0442\u043a\u0438.<\/li>\n<\/ol>\n<p>  <\/p>\n<h4>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043e\u0431\u0435\u0440\u0442\u043a\u0438:<\/h4>\n<p>  <\/p>\n<ol>\n<li>\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043c \u043e\u0431\u0435\u0440\u0442\u043a\u0443 \u043a \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044e \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0443\u0434\u0430\u043b\u0438\u043c \u043e\u0441\u0442\u0430\u0432\u0448\u0438\u0435\u0441\u044f \u0442\u0440\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438, \u043e\u043d\u0438 \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u044b;\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/hz\/lq\/3x\/hzlq3x_sirw1swmbejthdgpbfzo.png\"><\/li>\n<li>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u044b\u0442\u0430\u0449\u0438\u043c <i>EmployeeCard<\/i> \u0438\u0437 <i>Stack<\/i>. \u0417\u0430\u0442\u0435\u043c \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u043c <i>Stack<\/i> \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u0430\u043a \u043c\u044b \u0443\u0436\u0435 \u0434\u0435\u043b\u0430\u043b\u0438 \u0440\u0430\u043d\u0435\u0435 \u0441 <i>EmployeeCard<\/i>: \u043f\u0440\u0430\u0432\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c, \u043a\u043d\u043e\u043f\u043a\u0430 \u00ab\u0442\u0440\u043e\u0435\u0442\u043e\u0447\u0438\u0435\u00bb \u0438 <i>Convert to Component<\/i>. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430\u0437\u043e\u0432\u0435\u043c <i>EmployeeTable<\/i>.\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/rc\/ha\/mk\/rchamkmbohcf_cai6iabxuapmma.png\"><\/p>\n<p>  \u041d\u0430 \u044d\u0442\u043e\u043c \u043f\u043e\u043a\u0430 \u0432\u0441\u0451, \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u044d\u0442\u0430\u043f \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d. \u041e\u0441\u0442\u0430\u0432\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0437\u0430\u0439\u043c\u0435\u043c\u0441\u044f \u0431\u0430\u0437\u043e\u0439 \u0432 Airtable.<\/li>\n<\/ol>\n<h2>\u0427\u0430\u0441\u0442\u044c 2. \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 Airtable<\/h2>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0430 \u0441\u0430\u0439\u0442 <a href=\"https:\/\/airtable.com\/\">Airtable<\/a> \u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c\u0441\u044f\/\u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0443\u0435\u043c\u0441\u044f.<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041a\u043b\u0438\u043a\u0430\u0435\u043c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 <i>Add a base<\/i>, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u0431\u0430\u0437\u0443. \u0418\u0437 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0433\u043e \u043c\u0435\u043d\u044e \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043f\u0443\u043d\u043a\u0442 <i>Start with a template<\/i>;\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/gu\/h0\/im\/guh0imfotfdwiddl-_nzugjyxjq.png\"><\/li>\n<li>\u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044e <i>HR &amp; Recruiting<\/i> \u0438 \u0448\u0430\u0431\u043b\u043e\u043d <i>Employee directory<\/i>. \u0414\u0430\u043b\u0435\u0435 \u043a\u043b\u0438\u043a\u0430\u0435\u043c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 <i>Use template<\/i>;\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/s9\/ik\/dg\/s9ikdgeoeaxaybyvoaziyjpoico.png\"><\/li>\n<li>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442;\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/f5\/bz\/fh\/f5bzfhzlfpqg1gxvsavqethhxoi.png\"><\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u041d\u0430 \u0434\u0430\u043d\u043d\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0437\u0434\u0435\u0441\u044c \u043c\u044b \u043d\u0438\u0447\u0435\u0433\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u043c, \u0432 \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u0432\u0438\u0434\u0435 \u0431\u0430\u0437\u0430 \u0443\u0436\u0435 \u043d\u0430\u0441 \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442.<\/p>\n<h2>\u0427\u0430\u0441\u0442\u044c 3. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a API<\/h2>\n<p>  <\/p>\n<p>\u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e Airtable \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0435\u043d \u0434\u043b\u044f \u043d\u0430\u0441 \u0438\u043c\u0435\u043d\u043d\u043e \u0437\u0430 \u0441\u0447\u0435\u0442 \u0443\u0434\u043e\u0431\u043d\u043e\u0433\u043e API. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u0435\u043c\u0430\u043b\u043e\u0432\u0430\u0436\u043d\u043e, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u0431\u0438\u0440\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0445 \u0432 \u043d\u0430\u0448\u0443 \u0431\u0430\u0437\u0443 Airtable \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e.<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432\u044b\u0431\u043e\u0440\u0430 API \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432: <a href=\"https:\/\/airtable.com\/api\">https:\/\/airtable.com\/api<\/a>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/e2\/vp\/he\/e2vpheqstngabkuutooxs5jx0sm.png\"><\/li>\n<li>\u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 <i>Employee directory<\/i>. \u0412 \u043f\u043e\u044f\u0432\u0438\u0432\u0448\u0435\u0439\u0441\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0430 \u0440\u0430\u0437\u0434\u0435\u043b <i>AUTHENTICATION<\/i>.\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/vf\/w5\/_o\/vfw5_o9hnqlxuife0jmajg_b2jo.png\"><\/li>\n<li>\u0421\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u0434\u0432\u0435 \u0441\u0442\u0440\u043e\u0447\u043a\u0438, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043d\u0438\u0436\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 <i>EXAMPLE USING BEARER TOKEN (RECOMMENDED)<\/i>.\n<p>  \u0423 \u043c\u0435\u043d\u044f \u043e\u043d\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0442\u0430\u043a:<\/p>\n<p>  <code>$ curl https:\/\/api.airtable.com\/v0\/app2MdLITmRTBsrkg\/Employee%20directory \\<br \/>  -H &quot;Authorization: Bearer YOUR_API_KEY&quot;<\/code><\/li>\n<li>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d <i>YOUR_API_KEY<\/i>. \u042d\u0442\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u044e\u0447 \u0434\u043e\u0441\u0442\u0443\u043f\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u0430. \u041d\u0430\u0439\u0442\u0438 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445.\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/zg\/et\/71\/zget71yej_lug-tgjir5m_k156w.png\"><\/li>\n<li>\u041d\u0430 \u043e\u0442\u043a\u0440\u044b\u0432\u0448\u0435\u0439\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b API \u0438 \u043d\u0430\u0436\u043c\u0438\u0442\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 <i>Generate API key<\/i>;\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/f-\/ry\/dv\/f-rydvhmcny5tvtaqtxipchm7a0.png\"><\/li>\n<li>\u0421\u043a\u043e\u043f\u0438\u0440\u0443\u0439\u0442\u0435 \u043a\u043b\u044e\u0447. \u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0435\u0433\u043e \u0440\u044f\u0434\u043e\u043c \u0441\u043e \u0441\u0442\u0440\u043e\u0447\u043a\u0430\u043c\u0438 \u0438\u0437 \u043f\u0443\u043d\u043a\u0442\u0430 3. \u041e\u043d\u0438 \u043f\u0440\u0438\u0433\u043e\u0434\u044f\u0442\u0441\u044f \u043d\u0430\u043c \u0434\u0430\u043b\u0435\u0435.<\/li>\n<\/ol>\n<h2>\u0427\u0430\u0441\u0442\u044c 4. \u0418\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u043c \u0431\u0430\u0437\u0443 Airtable \u0432 Quarkly<\/h2>\n<p>  <\/p>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <i>EmployeeTable<\/i> \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0431\u0438\u0440\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 API.<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043e\u0442\u043a\u0440\u043e\u0435\u043c \u0432\u043a\u043b\u0430\u0434\u043a\u0443 <i>Components<\/i> \u0438 \u043d\u0430\u0436\u043c\u0435\u043c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 &lt;&gt; \u0443 <i>EmployeeTable<\/i> (\u043e\u043d\u0430 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043a\u0443\u0440\u0441\u043e\u0440\u0430 \u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442);\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ba\/zl\/gx\/bazlgxotyvm4d3ovj7w4vmsxutm.png\"><\/li>\n<li>\u0421\u0435\u0439\u0447\u0430\u0441 \u043a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/vn\/1u\/6f\/vn1u6fcyaisn2jwliug7zazneks.png\"><\/li>\n<li>\u0417\u0430\u043c\u0435\u043d\u0438\u043c:\n<pre><code class=\"javascript\">import React from &quot;react&quot;;<\/code><\/pre>\n<p>  \u043d\u0430:<\/p>\n<pre><code class=\"javascript\">import React, { useEffect, useState } from &quot;react&quot;;<\/code><\/pre>\n<p>  \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0445\u0443\u043a\u0438 useEffect \u0438 useState, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u043d\u0430\u043c \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c;<\/li>\n<li>\u041d\u0438\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u0442\u0440\u043e\u0447\u043a\u0443, \u0447\u0442\u043e\u0431\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <i>EmployeeCard<\/i>:\n<pre><code class=\"javascript\">import EmployeeCard from &quot;.\/EmployeeCard&quot;;<\/code><\/pre>\n<\/li>\n<li>\u0417\u0430\u043c\u0435\u043d\u0438\u043c <i>children<\/i> (\u043e\u043d\u0438 \u043d\u0430\u043c \u043f\u043e\u043a\u0430 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b) \u043d\u0430 <i>override<\/i> (\u043f\u0440\u0438\u0433\u043e\u0434\u044f\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435):\n<pre><code class=\"javascript\">const EmployeeTable = props =&gt; { \tconst { \t\tchildren, \t\trest \t} = useOverrides(props, overrides, defaultProps);<\/code><\/pre>\n<p>  \u043d\u0430:<\/p>\n<pre><code class=\"javascript\">const EmployeeTable = props =&gt; { \tconst { \t\toverride, \t\trest \t} = useOverrides(props, overrides, defaultProps);<\/code><\/pre>\n<\/li>\n<li>\u041d\u0438\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u044b\u0437\u043e\u0432 \u0445\u0443\u043a\u0430 <i>useState<\/i>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u0435\u0434\u0438\u0442\u044c \u0437\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c:\n<pre><code class=\"javascript\">const [employees, setEmployees] = useState([]);<\/code><\/pre>\n<\/li>\n<li>\u0414\u0430\u043b\u0435\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0445\u0443\u043a <i>useEffect<\/i>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043a API Airtable \u0438 \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043d\u0430\u0448\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0447\u0435\u0440\u0435\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <i>setEmployees<\/i>.\n<p>  \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u044e\u0434\u0430 \u0441\u0442\u0440\u043e\u0447\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0440\u0430\u043d\u0435\u0435. \u0412 <i>fetch<\/i> \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c URL \u0430\u0434\u0440\u0435\u0441 \u043d\u0430\u0448\u0435\u0439 \u0431\u0430\u0437\u044b, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <i>?view=All%20employees<\/i>. \u0412 <i>headers<\/i> \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u0430\u043c API \u043a\u043b\u044e\u0447, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0432 3 \u0447\u0430\u0441\u0442\u0438 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438, \u043f\u043e\u0434\u043f\u0443\u043d\u043a\u0442 4.<\/p>\n<pre><code class=\"javascript\">useEffect(() =&gt; { \t\t\tfetch(&quot;https:\/\/api.airtable.com\/v0\/appWw7KBKSc9bPjZE\/Employee%20directory?view=All%20employees&quot;, { \t\t\t\theaders: { \t\t\t\t\t'Authorization': 'Bearer YOUR_API_KEY' \t\t\t\t} \t\t\t}) \t\t\t.then(response =&gt; response.json()) \t\t\t.then(data =&gt; setEmployees(data.records.map(({ fields }) =&gt; fields))); \t}, []);<\/code><\/pre>\n<\/li>\n<li>\u0422\u0435\u043f\u0435\u0440\u044c \u0431\u0443\u0434\u0435\u043c \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0438\u0437 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0438\u043c <i>props<\/i> \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0438 <i>override<\/i>. \u041e\u043d \u043d\u0443\u0436\u0435\u043d, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0438 \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.\n<p>  \u041c\u0435\u043d\u044f\u0435\u043c:<\/p>\n<pre><code class=\"javascript\">return &lt;Stack {...rest}&gt; \t\t{children} \t&lt;\/Stack&gt;; };<\/code><\/pre>\n<p>  \u043d\u0430:<\/p>\n<pre><code class=\"javascript\">return &lt;Stack {...rest}&gt; \t\t{ \t\t\temployees.map(employee =&gt; &lt;EmployeeCard  {...override(&quot;employeeCard&quot;)}  employee={employee} \/&gt;) \t\t} \t&lt;\/Stack&gt;; };<\/code><\/pre>\n<\/li>\n<li>\u041d\u0430\u0436\u043c\u0438\u0442\u0435 Ctrl + S (\u0438\u043b\u0438 Cmd + S \u043d\u0430 Mac). \u041e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u0434 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:\n<pre><code class=\"javascript\">import React, { useEffect, useState } from &quot;react&quot;; import { useOverrides, Stack } from &quot;@quarkly\/components&quot;; import EmployeeCard from &quot;.\/EmployeeCard&quot;; const defaultProps = { \t&quot;margin-top&quot;: &quot;40px&quot; }; const overrides = {};  const EmployeeTable = props =&gt; { \tconst { \t\toverride, \t\trest \t} = useOverrides(props, overrides, defaultProps);  \tconst [employees, setEmployees] = useState([]);  \tuseEffect(() =&gt; { \t\t\tfetch(&quot;https:\/\/api.airtable.com\/v0\/appWw7KBKSc9bPjZE\/Employee%20directory?view=All%20employees&quot;, { \t\t\t\theaders: { \t\t\t\t\t'Authorization': 'Bearer YOUR_API_KEY' \t\t\t\t} \t\t\t}) \t\t\t.then(response =&gt; response.json()) \t\t\t.then(data =&gt; setEmployees(data.records.map(({ fields }) =&gt; fields))); \t}, []); \t \treturn &lt;Stack {...rest}&gt; \t\t{ \t\t\temployees.map(employee =&gt; &lt;EmployeeCard  {...override(&quot;employeeCard&quot;)} employee={employee} \/&gt;) \t\t} \t&lt;\/Stack&gt;; };  Object.assign(EmployeeTable, { \t...Stack, \tdefaultProps, \toverrides }); export default EmployeeTable;<\/code><\/pre>\n<p>  <b>\u0412\u0430\u0436\u043d\u043e<\/b>: \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 API \u043a\u043b\u044e\u0447 \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u0435\u043a\u0441\u0442\u0430 <i>YOUR_API_KEY<\/i>.<\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u0413\u043e\u0442\u043e\u0432\u043e! \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0442 Airtable, \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u0438\u0445 \u0432 <i>employees<\/i> \u0438 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043c\u0441\u044f \u043f\u043e \u043d\u0435\u043c\u0443 \u043c\u0435\u0442\u043e\u0434\u043e\u043c <i>map<\/i>. \u041d\u0430 \u043a\u0430\u0436\u0434\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c \u0432 <i>employees<\/i> \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c <i>&lt;EmployeeCard\/&gt;<\/i>, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043a\u0430\u043a \u043f\u0440\u043e\u043f\u0441 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n<p>  <\/p>\n<p>\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043d\u0430\u0443\u0447\u0438\u0442\u044c <i>EmpolyeeCard<\/i> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u043d\u0443\u0436\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435.<\/p>\n<h2>\u0427\u0430\u0441\u0442\u044c 5. \u0423\u0447\u0438\u043c EmpolyeeCard \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0411\u0414<\/h2>\n<p>  <\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043d\u0430\u0443\u0447\u0438\u043c \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u0445.<\/p>\n<p>  <\/p>\n<ol>\n<li>\u041e\u0442\u043a\u0440\u043e\u0435\u043c \u043a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0437\u0430\u0445\u043e\u0434\u0438\u043c \u0432\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0443 <i>Components<\/i>, \u0438\u0449\u0435\u043c \u0442\u0430\u043c <i>EmployeeCard<\/i>, \u043d\u0430\u0432\u043e\u0434\u0438\u043c \u043a\u0443\u0440\u0441\u043e\u0440 \u0438 \u0436\u043c\u0435\u043c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 &lt;&gt;.<\/li>\n<li>\u0421\u0435\u0439\u0447\u0430\u0441 \u043a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:\n<pre><code class=\"javascript\">import React from &quot;react&quot;; import { useOverrides, Override, StackItem } from &quot;@quarkly\/components&quot;; import { Box, Text } from &quot;@quarkly\/widgets&quot;; const defaultProps = { \t&quot;width&quot;: &quot;25%&quot;, \t&quot;lg-width&quot;: &quot;50%&quot;, \t&quot;sm-width&quot;: &quot;100%&quot; }; const overrides = { \t&quot;box&quot;: { \t\t&quot;kind&quot;: &quot;Box&quot;, \t\t&quot;props&quot;: { \t\t\t&quot;height&quot;: &quot;0&quot;, \t\t\t&quot;margin&quot;: &quot;0 0 20px 0&quot;, \t\t\t&quot;padding-bottom&quot;: &quot;100%&quot;, \t\t\t&quot;background&quot;: &quot;url(https:\/\/images.unsplash.com\/photo-1503443207922-dff7d543fd0e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=582&amp;q=80) 50% 0\/cover no-repeat&quot; \t\t} \t}, \t&quot;text&quot;: { \t\t&quot;kind&quot;: &quot;Text&quot;, \t\t&quot;props&quot;: { \t\t\t&quot;color&quot;: &quot;--grey&quot;, \t\t\t&quot;margin&quot;: &quot;0&quot;, \t\t\t&quot;children&quot;: &quot;CEO&quot; \t\t} \t}, \t&quot;text1&quot;: { \t\t&quot;kind&quot;: &quot;Text&quot;, \t\t&quot;props&quot;: { \t\t\t&quot;as&quot;: &quot;h3&quot;, \t\t\t&quot;font&quot;: &quot;--headline3&quot;, \t\t\t&quot;margin&quot;: &quot;5px 0 20px 0&quot;, \t\t\t&quot;children&quot;: &quot;Nathan K. Joe&quot; \t\t} \t}, \t&quot;text2&quot;: { \t\t&quot;kind&quot;: &quot;Text&quot;, \t\t&quot;props&quot;: { \t\t\t&quot;as&quot;: &quot;p&quot;, \t\t\t&quot;margin&quot;: &quot;20px 0 5px 0&quot;, \t\t\t&quot;children&quot;: &quot;This space is 100% editable. Use it to introduce a team member, describe their work experience and role within the company. This is also a great place to highlight a team member's strong sides.&quot; \t\t} \t} };  const EmployeeCard = props =&gt; { \tconst { \t\toverride, \t\tchildren, \t\trest \t} = useOverrides(props, overrides, defaultProps); \treturn &lt;StackItem {...rest}&gt; \t\t&lt;Override slot=&quot;StackItemContent&quot; flex-direction=&quot;column&quot; \/&gt; \t\t&lt;Box {...override(&quot;box&quot;)} \/&gt; \t\t&lt;Text {...override(&quot;text&quot;)} \/&gt; \t\t&lt;Text {...override(&quot;text1&quot;)} \/&gt; \t\t&lt;Text {...override(&quot;text2&quot;)} \/&gt; \t\t{children} \t&lt;\/StackItem&gt;; };  Object.assign(EmployeeCard, { ...StackItem, \tdefaultProps, \toverrides }); export default EmployeeCard;<\/code><\/pre>\n<\/li>\n<li>\u0418\u0449\u0435\u043c \u0441\u0442\u0440\u043e\u0447\u043a\u0443:\n<pre><code class=\"javascript\">} = useOverrides(props, overrides, defaultProps);<\/code><\/pre>\n<p>  \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0438\u0436\u0435:<\/p>\n<pre><code class=\"javascript\">const { employee = {} } = rest;<\/code><\/pre>\n<p>  \u0412 \u043e\u0431\u044a\u0435\u043a\u0442 <i>employee<\/i> \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u043d\u0430\u0448\u0438 \u0434\u0430\u043d\u043d\u044b\u0435.<\/li>\n<li>\u041d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0438 \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u043c, \u0447\u0442\u043e \u0432\u0441\u0451 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043a\u0430\u043a \u043d\u0443\u0436\u043d\u043e. \u0418\u0449\u0435\u043c \u0441\u0442\u0440\u043e\u043a\u0443 \u0438 \u043c\u0435\u043d\u044f\u0435\u043c:\n<pre><code class=\"javascript\">&lt;Box {...override(&quot;box&quot;)} \/&gt;<\/code><\/pre>\n<p>  \u043d\u0430:<\/p>\n<pre><code class=\"javascript\">&lt;Box {...override(&quot;box&quot;)} background-image={`url(${employee.Photo &amp;&amp; employee.Photo[0] &amp;&amp; employee.Photo[0].url})`}\/&gt;<\/code><\/pre>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u0438\u0449\u0435\u043c:<\/p>\n<pre><code class=\"javascript\">&quot;background&quot;: &quot;url(https:\/\/images.unsplash.com\/photo-1503443207922-dff7d543fd0e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=582&amp;q=80) 50% 0\/cover no-repeat&quot;<\/code><\/pre>\n<p>  \u0438 \u043c\u0435\u043d\u044f\u0435\u043c \u043d\u0430:<\/p>\n<pre><code class=\"javascript\">&quot;background-size&quot;: &quot;cover&quot;, &quot;background-position&quot;: &quot;center&quot;, &quot;background-image&quot;: &quot;url(https:\/\/images.unsplash.com\/photo-1503443207922-dff7d543fd0e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=582&amp;q=80) 50% 0\/cover no-repeat&quot;<\/code><\/pre>\n<p>  \u0414\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0442\u0430\u043a:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/sr\/b7\/rc\/srb7rc9tiguvwbwntehrkswy5n8.png\"><\/li>\n<li>\u0421\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a\u0438\u0435 \u043f\u043e\u043b\u044f \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c. \u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0434\u043b\u044f API \u0432 Airtable \u0441\u0434\u0435\u043b\u0430\u043d\u0430 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e. \u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 <a href=\"https:\/\/airtable.com\/api\">https:\/\/airtable.com\/api<\/a>, \u0432\u044b\u0431\u0440\u0430\u0432 \u0441\u0432\u043e\u044e \u0431\u0430\u0437\u0443.\n<p>  \u0414\u0430\u043b\u0435\u0435 \u0438\u0449\u0435\u043c \u0440\u0430\u0437\u0434\u0435\u043b <i>EMPLOYEE DIRECTORY TABLE<\/i>.<\/p>\n<p>  \u0418\u0442\u0430\u043a, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c:<\/p>\n<p>  <i>Name<br \/>  Department<br \/>  Home address<br \/>  Email address<br \/>  DOB<br \/>  Start date<br \/>  Phone<br \/>  Reports to<br \/>  Title<br \/>  Status<br \/>  Photo<br \/>  Location<\/i><\/li>\n<li>\u0414\u043e\u0431\u0430\u0432\u0438\u043c Title. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u043c:\n<pre><code class=\"javascript\">&lt;Text {...override(&quot;text&quot;)} \/&gt;<\/code><\/pre>\n<p>  \u043d\u0430:<\/p>\n<pre><code class=\"javascript\">&lt;Text {...override(&quot;title&quot;)} children={employee.Title} \/&gt;<\/code><\/pre>\n<p>  \u0418 \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u0435\u043c \u043e\u0442\u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c <i>overrides<\/i> \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0435\u0433\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n<p>  \u041c\u0435\u043d\u044f\u0435\u043c:<\/p>\n<pre><code class=\"javascript\">&quot;text&quot;: { \t&quot;kind&quot;: &quot;Text&quot;, \t&quot;props&quot;: { \t\t&quot;color&quot;: &quot;--grey&quot;, \t\t&quot;margin&quot;: &quot;0&quot;, \t\t&quot;children&quot;: &quot;CEO&quot; \t} },<\/code><\/pre>\n<p>  \u043d\u0430:<\/p>\n<pre><code class=\"javascript\">&quot;title&quot;: { \t&quot;kind&quot;: &quot;Text&quot;, \t&quot;props&quot;: { \t\t&quot;color&quot;: &quot;--grey&quot;, \t\t&quot;margin&quot;: &quot;0&quot;, \t\t&quot;children&quot;: &quot;Title&quot; \t} },<\/code><\/pre>\n<p>  \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/zv\/dq\/b7\/zvdqb7_21wng_apklx-d4e3avxu.png\"><\/p>\n<p>  <b>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442<\/b>: \u0432 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0430\u0441\u044c \u0441\u0442\u0440\u043e\u043a\u0430 \u0441 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u0435\u0439.<\/li>\n<li>\u041f\u043e\u0432\u0442\u043e\u0440\u0438\u043c \u0442\u0430\u043a\u0438\u0435 \u0436\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0434\u043b\u044f <i>Name<\/i> \u0438 <i>Home address<\/i>.\n<p>  \u0417\u0430\u043c\u0435\u043d\u0438\u043c:<\/p>\n<pre><code class=\"javascript\">&lt;Text {...override(&quot;text1&quot;)} \/&gt; &lt;Text {...override(&quot;text2&quot;)} \/&gt;<\/code><\/pre>\n<p>  \u043d\u0430:<\/p>\n<pre><code class=\"javascript\">&lt;Text {...override(&quot;name&quot;)} children={employee.Name} \/&gt; &lt;Text {...override(&quot;address&quot;)} children={employee['Home address']} \/&gt;<\/code><\/pre>\n<p>  \u0418 \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u043c \u0438\u0445 <i>overrides<\/i>. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u043c:<\/p>\n<pre><code class=\"javascript\">&quot;text1&quot;: { \t&quot;kind&quot;: &quot;Text&quot;, \t&quot;props&quot;: { \t\t&quot;as&quot;: &quot;h3&quot;, \t\t&quot;font&quot;: &quot;--headline3&quot;, \t\t&quot;margin&quot;: &quot;5px 0 20px 0&quot;, \t\t&quot;children&quot;: &quot;Nathan K. Joe&quot; \t} }, &quot;text2&quot;: { \t&quot;kind&quot;: &quot;Text&quot;, \t&quot;props&quot;: { \t\t&quot;as&quot;: &quot;p&quot;, \t\t&quot;margin&quot;: &quot;20px 0 5px 0&quot;, \t\t&quot;children&quot;: &quot;This space is 100% editable. Use it to introduce a team member, describe their work experience and role within the company. This is also a great place to highlight a team member's strong sides.&quot; \t} }<\/code><\/pre>\n<p>  \u043d\u0430:<\/p>\n<pre><code class=\"javascript\">&quot;name&quot;: { \t&quot;kind&quot;: &quot;Text&quot;, \t&quot;props&quot;: { \t\t&quot;as&quot;: &quot;h3&quot;, \t\t&quot;font&quot;: &quot;--headline3&quot;, \t\t&quot;margin&quot;: &quot;5px 0 5px 0&quot;, \t\t&quot;children&quot;: &quot;Name&quot; \t} }, &quot;address&quot;: { \t&quot;kind&quot;: &quot;Text&quot;, \t&quot;props&quot;: { \t\t&quot;as&quot;: &quot;p&quot;, \t\t&quot;margin&quot;: &quot;10px 0 5px 0&quot;, \t\t&quot;children&quot;: &quot;Home address&quot; \t} },<\/code><\/pre>\n<p>  \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0438 \u0441\u043d\u043e\u0432\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/fi\/8b\/xy\/fi8bxyk48mlv2q7b3eoglt-htjk.png\"><\/li>\n<li>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0449\u0451 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e <i>Text<\/i> \u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438. \u0414\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0431\u0440\u0430\u0442\u044c <i>Department<\/i> \u0438 <i>Reports to<\/i>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0431\u0430\u0437\u0435 <i>DEPARTMENTS TABLE<\/i>.\n<p>  \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c:<\/p>\n<pre><code class=\"javascript\">&lt;Text {...override(&quot;address&quot;)} children={employee['Home address']} \/&gt; &lt;Text {...override(&quot;Start date&quot;)} children={`Start date: ${employee['Start date']}`} \/&gt; &lt;Text {...override(&quot;Status&quot;)} children={employee['Status']} \/&gt; &lt;Text {...override(&quot;DOB&quot;)} children={`Birth date: ${employee['DOB']}`} \/&gt;<\/code><\/pre>\n<p>  \u0438<\/p>\n<pre><code class=\"javascript\">&quot;address&quot;: { \t&quot;kind&quot;: &quot;Text&quot;, \t&quot;props&quot;: { \t\t&quot;as&quot;: &quot;p&quot;, \t\t&quot;margin&quot;: &quot;10px 0 5px 0&quot;, \t\t&quot;children&quot;: &quot;Home address&quot; \t} }, &quot;Start date&quot;: { \t&quot;kind&quot;: &quot;Text&quot;, \t&quot;props&quot;: { \t\t&quot;as&quot;: &quot;p&quot;, \t\t&quot;margin&quot;: &quot;10px 0 5px 0&quot;, \t\t&quot;children&quot;: &quot;Start date&quot; \t \t} }, &quot;Status&quot;: { \t&quot;kind&quot;: &quot;Text&quot;, \t&quot;props&quot;: { \t\t&quot;as&quot;: &quot;p&quot;, \t\t&quot;margin&quot;: &quot;10px 0 5px 0&quot;, \t\t&quot;children&quot;: &quot;Status&quot; \t} }, &quot;DOB&quot;: { \t&quot;kind&quot;: &quot;Text&quot;, \t&quot;props&quot;: { \t\t&quot;as&quot;: &quot;p&quot;, \t\t&quot;margin&quot;: &quot;10px 0 5px 0&quot;, \t\t&quot;children&quot;: &quot;Birth date&quot; \t} },<\/code><\/pre>\n<p>  \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/3y\/cz\/4b\/3ycz4bxykefda_lsxtb7jj7e4zw.png\"><\/li>\n<li>\u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0434\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <i>Link<\/i>, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0443\u0442 <i>Phone<\/i> \u0438 <i>Email<\/i>:\n<pre><code class=\"javascript\">import { Box, Text } from &quot;@quarkly\/widgets&quot;;<\/code><\/pre>\n<p>  \u043c\u0435\u043d\u044f\u0435\u043c \u043d\u0430:<\/p>\n<pre><code class=\"javascript\">import { Box, Text, Link } from &quot;@quarkly\/widgets&quot;;<\/code><\/pre>\n<p>  \u0418 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0440\u043e\u043a\u0438:<\/p>\n<pre><code class=\"javascript\">&lt;Link {...override(&quot;Email address&quot;)} children={employee['Email address']} href={`mailto:${employee['Email address']}`} \/&gt; &lt;Link {...override(&quot;Phone&quot;)} children={employee['Phone']} href={`tel:${employee['Phone']}`}\/&gt;<\/code><\/pre>\n<p>  \u041d\u0435 \u0437\u0430\u0431\u044b\u0432 \u043f\u0440\u043e \u0438\u0445 <i>overrides<\/i>:<\/p>\n<pre><code class=\"javascript\">&quot;Email address&quot;: { \t&quot;kind&quot;: &quot;Link&quot;, \t&quot;props&quot;: { \t\t&quot;margin&quot;: &quot;10px 0 5px 0&quot;, \t\t&quot;color&quot;: &quot;--primary&quot;, \t\t&quot;text-decoration&quot;: &quot;none&quot;, \t\t&quot;children&quot;: &quot;Email&quot; \t} }, &quot;Phone&quot;: { \t&quot;kind&quot;: &quot;Link&quot;, \t&quot;props&quot;: { \t\t&quot;margin&quot;: &quot;10px 0 5px 0&quot;, \t\t&quot;color&quot;: &quot;--primary&quot;, \t\t&quot;text-decoration&quot;: &quot;none&quot;, \t\t&quot;children&quot;: &quot;Phone&quot; \t} },<\/code><\/pre>\n<p>  \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ys\/bf\/oy\/ysbfoy2lfl_xccdexonpiwkg3nc.png\"><\/li>\n<\/ol>\n<p>  <\/p>\n<p>\u0424\u0438\u043d\u0430\u043b\u044c\u043d\u043e \u043d\u0430\u0448 \u043a\u043e\u0434 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code class=\"javascript\">import React from &quot;react&quot;; import { useOverrides, Override, StackItem } from &quot;@quarkly\/components&quot;; import { Box, Text, Link } from &quot;@quarkly\/widgets&quot;; const defaultProps = { \t&quot;width&quot;: &quot;25%&quot;, \t&quot;lg-width&quot;: &quot;50%&quot;, \t&quot;sm-width&quot;: &quot;100%&quot; }; const overrides = { \t&quot;box&quot;: { \t\t&quot;kind&quot;: &quot;Box&quot;, \t\t&quot;props&quot;: { \t\t\t&quot;height&quot;: &quot;0&quot;, \t\t\t&quot;margin&quot;: &quot;0 0 20px 0&quot;, \t\t\t&quot;padding-bottom&quot;: &quot;100%&quot;, \t\t\t&quot;background-size&quot;: &quot;cover&quot;, \t\t\t&quot;background-position&quot;: &quot;center&quot;, \t\t\t&quot;background-image&quot;: &quot;url(https:\/\/images.unsplash.com\/photo-1503443207922-dff7d543fd0e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=582&amp;q=80) 50% 0\/cover no-repeat&quot; \t\t} \t}, \t&quot;title&quot;: { \t\t&quot;kind&quot;: &quot;Text&quot;, \t\t&quot;props&quot;: { \t\t\t&quot;color&quot;: &quot;--grey&quot;, \t\t\t&quot;margin&quot;: &quot;0&quot;, \t\t\t&quot;children&quot;: &quot;title&quot; \t\t} \t}, \t&quot;name&quot;: { \t\t&quot;kind&quot;: &quot;Text&quot;, \t\t&quot;props&quot;: { \t\t\t&quot;as&quot;: &quot;h3&quot;, \t\t\t&quot;font&quot;: &quot;--headline3&quot;, \t\t\t&quot;margin&quot;: &quot;5px 0 5px 0&quot;, \t\t\t&quot;children&quot;: &quot;Name&quot; \t\t} \t}, \t&quot;address&quot;: { \t\t&quot;kind&quot;: &quot;Text&quot;, \t\t&quot;props&quot;: { \t\t\t&quot;as&quot;: &quot;p&quot;, \t\t\t&quot;margin&quot;: &quot;10px 0 5px 0&quot;, \t\t\t&quot;children&quot;: &quot;Home address&quot; \t\t} \t}, \t&quot;Start date&quot;: { \t\t&quot;kind&quot;: &quot;Text&quot;, \t\t&quot;props&quot;: { \t\t\t&quot;as&quot;: &quot;p&quot;, \t\t\t&quot;margin&quot;: &quot;10px 0 5px 0&quot;, \t\t\t&quot;children&quot;: &quot;Start date&quot; \t\t} \t}, \t&quot;Status&quot;: { \t\t&quot;kind&quot;: &quot;Text&quot;, \t\t&quot;props&quot;: { \t\t\t&quot;as&quot;: &quot;p&quot;, \t\t\t&quot;margin&quot;: &quot;10px 0 5px 0&quot;, \t\t\t&quot;children&quot;: &quot;Status&quot; \t\t} \t}, \t&quot;DOB&quot;: { \t\t&quot;kind&quot;: &quot;Text&quot;, \t\t&quot;props&quot;: { \t\t\t&quot;as&quot;: &quot;p&quot;, \t\t\t&quot;margin&quot;: &quot;10px 0 5px 0&quot;, \t\t\t&quot;children&quot;: &quot;Birth date&quot; \t\t} \t}, \t&quot;Email address&quot;: { \t\t&quot;kind&quot;: &quot;Link&quot;, \t\t&quot;props&quot;: { \t\t\t&quot;margin&quot;: &quot;10px 0 5px 0&quot;, \t\t\t&quot;color&quot;: &quot;--primary&quot;, \t\t\t&quot;text-decoration&quot;: &quot;none&quot;, \t\t\t&quot;children&quot;: &quot;Email&quot; \t\t} \t}, \t&quot;Phone&quot;: { \t\t&quot;kind&quot;: &quot;Link&quot;, \t\t&quot;props&quot;: { \t\t\t&quot;margin&quot;: &quot;10px 0 5px 0&quot;, \t\t\t&quot;color&quot;: &quot;--primary&quot;, \t\t\t&quot;text-decoration&quot;: &quot;none&quot;, \t\t\t&quot;children&quot;: &quot;Phone&quot; \t\t} \t}, };  const EmployeeCard = props =&gt; { \tconst { \t\toverride, \t\tchildren, \t\trest \t} = useOverrides(props, overrides, defaultProps); \t \t\tconst { employee = {} } = rest;  \t \treturn &lt;StackItem {...rest}&gt; \t\t&lt;Override slot=&quot;StackItemContent&quot; flex-direction=&quot;column&quot; \/&gt; \t\t&lt;Box {...override(&quot;box&quot;)} background-image={`url(${employee.Photo[0].url})`}\/&gt; \t\t&lt;Text {...override(&quot;title&quot;)} children={employee.Title} \/&gt; \t\t&lt;Text {...override(&quot;name&quot;)} children={employee.Name} \/&gt; \t\t&lt;Text {...override(&quot;address&quot;)} children={employee['Home address']} \/&gt; \t\t&lt;Text {...override(&quot;Start date&quot;)} children={`Start date: ${employee['Start date']}`} \/&gt; \t\t&lt;Text {...override(&quot;Status&quot;)} children={employee['Status']} \/&gt; \t\t&lt;Text {...override(&quot;DOB&quot;)} children={`Birth date: ${employee['DOB']}`} \/&gt; \t\t&lt;Link {...override(&quot;Email address&quot;)} children={employee['Email address']} href={`mailto:${employee['Email address']}`} \/&gt; \t\t&lt;Link {...override(&quot;Phone&quot;)} children={employee['Phone']} href={`tel:${employee['Phone']}`}\/&gt; \t\t{children} \t&lt;\/StackItem&gt;; };  Object.assign(EmployeeCard, { ...StackItem, \tdefaultProps, \toverrides }); export default EmployeeCard;<\/code><\/pre>\n<p>  \u0414\u0435\u043b\u0430\u0435\u043c \u043a\u043e\u043c\u043c\u0438\u0442 \u0432 GitHub \u0438 \u043f\u0443\u0431\u043b\u0438\u043a\u0443\u0435\u043c \u043d\u0430 Netlify:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/c1\/rb\/fr\/c1rbfrajdtdfsnxe3hzt_qvk2ea.png\"><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/th\/g1\/tm\/thg1tmhequckonhmqc-0bksi50y.png\"><\/p>\n<p>\u0416\u0434\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0438\u043d\u0443\u0442 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c: <a href=\"https:\/\/keen-varahamihira-c54ae1.netlify.app\/\">https:\/\/keen-varahamihira-c54ae1.netlify.app\/<\/a><\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/mj\/ea\/7i\/mjea7i3ozpif1dyly_0r6ieeqnw.png\"><\/p>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043c\u0435\u043d\u044f\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u0431\u0430\u0437\u0435:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/9u\/ox\/nm\/9uoxnmc0cvchkqfkz-ygvotox1s.png\"><\/p>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043e\u043d\u0438 \u043f\u043e\u044f\u0432\u044f\u0442\u0441\u044f \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/m0\/oz\/sq\/m0ozsqj67qnr6ifcs5xaq2ymqsg.png\"><\/p>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043a\u0430\u043a \u0443\u0433\u043e\u0434\u043d\u043e \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430\u043c\u0438, \u043d\u0435 \u043d\u0430\u0440\u0443\u0448\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0438\u043c\u043f\u043e\u0440\u0442 \u0438\u0437 Airtable. \u041f\u0440\u0438\u043c\u0435\u0440 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/youtu.be\/mbPukPi0RZA?t=489\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  <\/p>\n<p>\u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u043d\u0430 GitHub: <a href=\"https:\/\/github.com\/quarkly-dev\/Getting-data-from-Airtable-tutorial\">https:\/\/github.com\/quarkly-dev\/Getting-data-from-Airtable-tutorial<\/a><\/p>\n<p>  <\/p>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435!<\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u2014 \u043d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u0439\u0442\u0435\u0441\u044c \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445. \u0412 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0443\u0440\u043e\u043a\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0435\u0449\u0451 \u043e\u0434\u0438\u043d \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043f\u043e\u043a\u0430\u0436\u0435\u043c \u043a\u0430\u043a \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u043e \u0438\u0445 \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0434\u0430\u0432 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043c\u0435\u043d\u044f\u0442\u044c \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u043f\u0440\u044f\u043c\u043e \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<\/p>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/quarkly\/blog\/540094\/\"> https:\/\/habr.com\/ru\/company\/quarkly\/blog\/540094\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\">\n<p>\u0421\u043b\u044b\u0448\u0430\u043b\u0438 \u043f\u0440\u043e \u0442\u0430\u043a\u043e\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043a\u0430\u043a Airtable, \u043d\u043e \u043d\u0435 \u0437\u043d\u0430\u043b\u0438, \u0441 \u0447\u0435\u0433\u043e \u043d\u0430\u0447\u0430\u0442\u044c? \u0422\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0430\u0435\u043c \u0432 \u043c\u0438\u0440 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e <s>\u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/s> \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0411\u0414!<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u0438\u043c \u043f\u043e\u0441\u0442\u043e\u043c \u043c\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0446\u0438\u043a\u043b \u043e\u0431\u0443\u0447\u0430\u044e\u0449\u0438\u0445 \u0441\u0442\u0430\u0442\u0435\u0439, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0443\u0434\u0435\u043c \u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043d\u0430\u0448\u0438\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u043c Quarkly. \u0412 \u044d\u0442\u043e\u043c \u0443\u0440\u043e\u043a\u0435 \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a\u043e\u0432 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438. \u041f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0438 \u043e\u0434\u0438\u043d \u0441\u043e\u0442\u0440\u0443\u0434\u043d\u0438\u043a \u0420\u0416\u0414 \u043d\u0435 \u043f\u043e\u0441\u0442\u0440\u0430\u0434\u0430\u043b.<\/p>\n<p>  <\/p>\n<p>\u0424\u0440\u043e\u043d\u0442 \u0431\u0443\u0434\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 Quarkly, \u0430 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u0434\u0442\u044f\u0433\u0438\u0432\u0430\u0442\u044c \u0438\u0437 \u0431\u0430\u0437\u044b \u0432 Airtable. \u041d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043c react-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435 \u0441 \u0431\u0430\u0437\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<p>  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-317231","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/317231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=317231"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/317231\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=317231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=317231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=317231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}