{"id":281619,"date":"2016-11-27T19:10:04","date_gmt":"2016-11-27T16:10:04","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=281619"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=281619","title":{"rendered":"\u041d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u044b\u0439 \u043f\u0443\u043b\u044c\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0430 JavaScript\/Node.js \u0434\u043b\u044f \u0440\u043e\u0431\u043e\u0442\u0430 \u043d\u0430 \u0410\u0440\u0434\u0443\u0438\u043d\u0435"},"content":{"rendered":"<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0434\u0435\u043b\u0430\u0435\u043c \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u043e\u0431\u043e\u0442\u043e\u043c \u043d\u0430 \u0410\u0440\u0434\u0443\u0438\u043d\u0435 \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0440\u0442. \u041d\u0430 \u044f\u0437\u044b\u043a\u0435 JavaScript \u043d\u0430 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 Electron \u0441 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u043c\u0438 ReactJS+MaterialUI.<\/p>\n<p>  <a href=\"https:\/\/fotki.yandex.ru\/next\/users\/ii1i7\/album\/527504\/view\/1473948\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/722\/41b\/bea\/72241bbeac018271d28addf8e91570db.png\" width=\"800\" height=\"628\" title=\"Babbler-\u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f-08.png\" alt=\"Babbler-\u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f-08.png\"\/><\/a><\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 56.2493%;\"><iframe src=\"https:\/\/www.youtube.com\/embed\/uLHPr1sS558?rel=0&amp;showinfo=1\" frameborder=\"0\" allowfullscreen=\"true\" webkitallowfullscreen=\"true\" mozallowfullscreen=\"true\" style=\"top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0443\u043b\u044c\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u0441\u0442\u0430\u043d\u043e\u0447\u043a\u0430 \u0441 \u0427\u041f\u0423 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0447\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0430\u0439\u0442\u0438\u043a.<\/p>\n<p>  <a name=\"habracut\"><\/a><\/p>\n<p>  \u0440\u0430\u043d\u0435\u0435<br \/>   \u2014 \u0447\u0430\u0441\u0442\u044c 1: <a href=\"https:\/\/habrahabr.ru\/post\/315084\/\">\u041a\u043e\u043d\u0441\u043e\u043b\u044c\u043a\u0430 \u0432 \u0440\u043e\u0431\u043e\u0442\u0435 \u043d\u0430 \u0410\u0440\u0434\u0443\u0438\u043d\u0435<\/a><br \/>   \u2014 \u0447\u0430\u0441\u0442\u044c 2: <a href=\"https:\/\/habrahabr.ru\/post\/315480\/\">\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0440\u043e\u0431\u043e\u0442\u043e\u043c \u043d\u0430 \u0410\u0440\u0434\u0443\u0438\u043d\u043e \u0438\u0437 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 Node.js<\/a><\/p>\n<p>  <b>\u0413\u043b\u0430\u0432\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438<\/b><br \/>   \u2014 \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0440\u043e\u0431\u043e\u0442\u0430: <a href=\"https:\/\/github.com\/1i7\/babbler_h\">babbler_h<\/a><br \/>   \u2014 \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f Node.js: <a href=\"https:\/\/github.com\/1i7\/babbler-js\">babbler-js<\/a><br \/>   \u2014 \u0412\u0438\u0434\u0436\u0435\u0442\u044b Babbler \u0434\u043b\u044f Node.js+ReactJS+MaterialUI: <a href=\"https:\/\/github.com\/1i7\/babbler-js-material-ui\">babbler-js-material-ui<\/a><br \/>   \u2014 \u041f\u0440\u0438\u043c\u0435\u0440\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0434\u043b\u044f babbler-js: <a href=\"https:\/\/github.com\/1i7\/babbler-js-demo\">babbler-js-demo<\/a><\/p>\n<p>  <b>\u0421\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b<\/b><br \/>   \u2014 \u041f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0440\u0442 \u0432 Node.js node-serialport: <a href=\"https:\/\/github.com\/EmergingTechnologyAdvisors\/node-serialport\">github.com\/EmergingTechnologyAdvisors\/node-serialport<\/a><br \/>   \u2014 \u041f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 Electron: <a href=\"http:\/\/electron.atom.io\/\">electron.atom.io<\/a><br \/>   \u2014 ReactJS: <a href=\"https:\/\/facebook.github.io\/react\/\">facebook.github.io\/react<\/a><br \/>   \u2014 \u0412\u0438\u0434\u0436\u0435\u0442\u044b (\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b) MaterialUI \u0434\u043b\u044f ReactJS: <a href=\"http:\/\/www.material-ui.com\/#\/\">www.material-ui.com\/#<\/a><\/p>\n<p>  <b>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438<\/b><br \/>   \u2014 \u041f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 NWJS: <a href=\"http:\/\/nwjs.io\/\">nwjs.io<\/a><br \/>   \u2014 \u0414\u0440\u0443\u0433\u0438\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0434\u043b\u044f React: <br \/>  <a href=\"https:\/\/github.com\/facebook\/react\/wiki\/Complementary-Tools#ui-components\">github.com\/facebook\/react\/wiki\/Complementary-Tools#ui-components<\/a><\/p>\n<h4>\u0411\u044b\u0441\u0442\u0440\u044b\u0439 \u0441\u0442\u0430\u0440\u0442<\/h4>\n<p>  1. \u041f\u0440\u043e\u0448\u0438\u0432\u0430\u0439\u0442\u0435 \u0432 \u0410\u0440\u0434\u0443\u0438\u043d\u043e \u0441\u043a\u0435\u0442\u0447 <a href=\"https:\/\/github.com\/1i7\/babbler_h\/blob\/master\/babbler_h\/examples\/babbler_json_io\/babbler_json_io.ino\">babbler_json_io.ino<\/a> \u0438\u0437 <a href=\"https:\/\/habrahabr.ru\/post\/315480\/\">\u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0438\u0441\u0442\u043e\u0440\u0438\u0438<\/a><\/p>\n<p>  \u042d\u0442\u0430 \u043f\u0440\u043e\u0448\u0438\u0432\u043a\u0430 \u043e\u0431\u043c\u0435\u043d\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 JSON, \u0443\u043c\u0435\u0435\u0442 \u043c\u0438\u0433\u0430\u0442\u044c \u043b\u0430\u043c\u043f\u043e\u0447\u043a\u043e\u0439, \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 4 \u043a\u043e\u043c\u0430\u043d\u0434\u044b: <i>ping<\/i>, <i>help<\/i>, <i>ledon<\/i>, <i>ledoff<\/i><\/p>\n<p>  2. \u041a\u0430\u0447\u0430\u0439\u0442\u0435 \u043f\u0443\u043b\u044c\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f  <\/p>\n<pre><code class=\"bash\">git clone https:\/\/github.com\/1i7\/babbler-js-demo.git cd babbler-js-demo\/babbler-serial-react npm install <\/code><\/pre>\n<p>  3. \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0439\u0442\u0435 \u043f\u0443\u043b\u044c\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f  <\/p>\n<pre><code class=\"bash\">.\/babbler-serial.sh <\/code><\/pre>\n<p>  4. \u041d\u0430\u0436\u0438\u043c\u0430\u0439\u0442\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043e\u0447\u043a\u0438, \u043c\u0438\u0433\u0430\u0439\u0442\u0435 \u043b\u0430\u043c\u043f\u043e\u0447\u043a\u043e\u0439<\/p>\n<p>  <a href=\"https:\/\/fotki.yandex.ru\/next\/users\/ii1i7\/album\/527504\/view\/1473948\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/722\/41b\/bea\/72241bbeac018271d28addf8e91570db.png\" width=\"800\" height=\"628\" title=\"Babbler-\u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f-08.png\" alt=\"Babbler-\u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f-08.png\"\/><\/a><\/p>\n<h4>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/h4>\n<p>  \u0417\u0430\u0434\u0430\u0447\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u2014 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u0442\u0435\u043a\u0443 Babbler.js \u0434\u043b\u044f \u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0441 \u0440\u043e\u0431\u043e\u0442\u043e\u043c \u0432 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u0438 Electron (\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u043b\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 JavaScript \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u043e\u043a\u043d\u0435, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0430 \u043d\u0430 \u043a\u043e\u0434\u0435 Google Chrome), \u0434\u043b\u044f \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c ReactJS \u0441 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u043c\u0438 MaterialUI. \u0412 \u043e\u0431\u0449\u0435\u043c, \u0432\u0441\u0435 \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u00ab\u0417\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439 \u043c\u0438\u0440\u0430\u00bb \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043d\u043e \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0441\u043e\u0431\u0438\u0440\u0430\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u044d\u0442\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0432 \u043e\u0434\u043d\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0431\u044b\u043b\u043e \u0432\u044b\u044f\u0432\u043b\u0435\u043d\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0438 \u043d\u044e\u0430\u043d\u0441\u043e\u0432, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043d\u043e\u0432\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0431\u0440\u0430\u0442\u044c \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430.<\/p>\n<p>  \u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f: \u0438\u043c\u0435\u0442\u044c \u043d\u0430 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u043c\u0438 node.js, npm \u0438 (\u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e) git.<\/p>\n<p>  \u0435\u0449\u0435 \u0440\u0430\u0437, \u043a\u0430\u0447\u0430\u0435\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0438 \u0438\u0434\u0435\u043c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 babbler-js-demo\/<a href=\"https:\/\/github.com\/1i7\/babbler-js-demo\/tree\/master\/babbler-serial-react\">babbler-serial-react<\/a>  <\/p>\n<pre><code class=\"bash\">git clone https:\/\/github.com\/1i7\/babbler-js-demo.git cd babbler-js-demo\/babbler-serial-react <\/code><\/pre>\n<p>  <b>\u0424\u0430\u0439\u043b\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/b><br \/>   \u2014 <a href=\"https:\/\/github.com\/1i7\/babbler-js-demo\/blob\/master\/babbler-serial-react\/package.json\">package.json<\/a> \u2014 \u043f\u0440\u043e\u0435\u043a\u0442 \u0434\u043b\u044f npm (Node package manager): \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0441\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/p>\n<p>  \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0435\u043c\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u0432 package.json (\u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0443 Electron), \u043e\u0434\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430  <\/p>\n<pre><code class=\"bash\">npm install <\/code><\/pre>\n<p>   \u2014 <a href=\"https:\/\/github.com\/1i7\/babbler-js-demo\/blob\/master\/babbler-serial-react\/main.js\">main.js<\/a> \u2014 \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Electron (\u0432\u0437\u044f\u0442 \u0438\u0437 \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u00ab\u0437\u0434\u0440\u0430\u0432\u0441\u0442\u0432\u0443\u0439 \u043c\u0438\u0440\u00bb \u0434\u043b\u044f \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u0430).<\/p>\n<p>  \u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u0441\u0430\u043c\u043e \u0437\u0430 \u0441\u0435\u0431\u044f. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u2014 \u043a\u043e\u043c\u0430\u043d\u0434\u0430, \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c \u0441 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u0438 \u0441\u0442\u0430\u0440\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:   <\/p>\n<pre><code class=\"javascript\">    \/\/ \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c DevTools.     mainWindow.webContents.openDevTools(); <\/code><\/pre>\n<p>  \u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u044d\u0442\u043e\u0442 \u0432\u044b\u0437\u043e\u0432 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u043d\u044e: View \u2192 Toggle Developer Tools) \u0438 \u0443\u0434\u0430\u043b\u044f\u0442\u044c\/\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0440\u0435\u043b\u0438\u0437\u0435.<\/p>\n<p>   \u2014 <a href=\"https:\/\/github.com\/1i7\/babbler-js-demo\/blob\/master\/babbler-serial-react\/index.html\">index.html<\/a> \u2014 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f Electron. <\/p>\n<p>  \u0422.\u043a. \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c React, \u0432\u0441\u0451, \u0447\u0442\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438 body, \u2014 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 div \u0441 id=\u00abapp-content\u00bb  <\/p>\n<pre><code class=\"html\">&lt;body&gt;     &lt;div id=&quot;app-content&quot;&gt;&lt;\/div&gt; &lt;\/body&gt; <\/code><\/pre>\n<p>  \u042d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u043c\u044b \u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u043c, \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n<p>   \u2014 <a href=\"https:\/\/github.com\/1i7\/babbler-js-demo\/blob\/master\/babbler-serial-react\/react-app-ui.js\">react-app-ui.js<\/a> \u2014 \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0437\u0434\u0435\u0441\u044c \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 \u0434\u043b\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 (\u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 index.html \u0432 div \u0441 id=\u00abapp-content\u00bb), \u0432\u0435\u0441\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u0434, \u043f\u0440\u0430\u0432\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0433\u043e.<\/p>\n<p>   \u2014 <a href=\"https:\/\/github.com\/1i7\/babbler-js-demo\/blob\/master\/babbler-serial-react\/babbler-serial.sh\">babbler-serial.sh<\/a> \u2014 \u0441\u043a\u0440\u0438\u043f\u0442-\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u043b\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f  <\/p>\n<pre><code class=\"bash\">#!\/bin\/sh .\/node_modules\/electron-prebuilt\/dist\/electron . <\/code><\/pre>\n<p>  <b>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043d\u044e\u0430\u043d\u0441\u044b<\/b><br \/>  \u0434\u043b\u044f \u0437\u0430\u043c\u0435\u0442\u043a\u0438<\/p>\n<p>   \u2014 <i>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 node-serialport \u0438 Electron<\/i><br \/>  \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 node-serialport \u043d\u0435 \u0437\u0430\u0445\u043e\u0442\u0435\u043b\u0430 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b Electron (\u043f\u0440\u0438 \u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u0430 \u00ab\u0433\u043e\u043b\u043e\u043c\u00bb Node.js \u0432\u0441\u0451 \u0431\u044b\u043b\u043e \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e).<\/p>\n<p>  \u041d\u0435 \u0432\u0434\u0430\u0432\u0430\u044f\u0441\u044c \u0432 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438, \u043e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438, \u043e\u0442\u043a\u0430\u0442\u0438\u0432\u0448\u0438\u0441\u044c \u043d\u0430 \u0441\u0442\u0430\u0440\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e Electron 1.1.3 \u0438\u043b\u0438 (\u043a\u0430\u043a \u043f\u0438\u0448\u0443\u0442 \u0432 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0439) \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0435\u0433\u043e \u0438\u0437 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432.  <\/p>\n<pre><code class=\"bash\">sudo npm i -g electron-prebuilt@1.1.3<\/code><\/pre>\n<p>  \u042d\u0442\u0430 \u0436\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 NWJS (\u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 Electron), \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u043b\u043e\u043c\u0430\u043b\u0438 \u0432 \u0434\u0432\u0438\u0436\u043a\u0435 \u0425\u0440\u043e\u043c\u0430, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u043d\u0438 \u0432\u0441\u0435 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u044b.<\/p>\n<p>  \u0420\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f Electron \u0443\u043a\u0430\u0437\u0430\u043d\u0430 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044f\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 package.json, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441 \u0434\u0435\u043c\u043e-\u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u0432\u0441\u0451 \u043e\u043a.<\/p>\n<p>  \u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0432 \u0431\u0430\u0433-\u0442\u0440\u0435\u043a\u0435\u0440\u0430\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432:<br \/>  Node-serialport: <a href=\"https:\/\/github.com\/EmergingTechnologyAdvisors\/node-serialport\/issues\/838\">github.com\/EmergingTechnologyAdvisors\/node-serialport\/issues\/838<\/a><br \/>  Electron: <a href=\"https:\/\/github.com\/electron\/electron\/issues\/6074\">github.com\/electron\/electron\/issues\/6074<\/a><br \/>  NWJS: <a href=\"https:\/\/github.com\/nwjs\/nw.js\/issues\/5035\">github.com\/nwjs\/nw.js\/issues\/5035<\/a><\/p>\n<p>  \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432 \u043e\u0434\u043d\u043e\u043c \u0438\u0437 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0440\u0435\u043b\u0438\u0437\u043e\u0432 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0430, \u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c Electron \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u0441\u0432\u0435\u0436\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e.<\/p>\n<p>   \u2014 <i>Babel, \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 JSX \u0438 ES6<\/i><br \/>  \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b ReactJS \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 JSX \u2014 \u044d\u0442\u043e HTML-\u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0439 XML \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b \u0434\u0435\u0440\u0435\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u0440\u044f\u043c\u043e \u0432 \u043a\u043e\u0434\u0435 JavaScript. \u0422\u0430\u043a \u0436\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043c\u0435\u0441\u0442\u0430\u043c\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 JavaScript ES6 (\u044d\u0442\u043e \u043d\u0430\u0431\u043e\u0440 \u0432\u0441\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439 \u044f\u0437\u044b\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0449\u0435 \u043d\u0435 \u0432\u043e\u0448\u043b\u0438 \u0432 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442 JavaScript \u0438\u043b\u0438 \u0432\u043e\u0448\u043b\u0438 \u0432 \u043d\u0435\u0433\u043e \u043d\u0435 \u0442\u0430\u043a \u0434\u0430\u0432\u043d\u043e, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u043a\u0430 \u043d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u0434\u0430\u0436\u0435 \u0432 \u0441\u0430\u043c\u044b\u0445 \u0441\u0432\u0435\u0436\u0438\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432). \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u044f \u0445\u043e\u0442\u0435\u043b \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 ES6 (\u0438\u0445 \u0432\u0441\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430 \u0430\u043d\u0430\u043b\u043e\u0433\u0438 \u0438\u0437 \u00ab\u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e\u00bb JavaScript), \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0433\u043e\u0440\u043e\u0434\u0438\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0445 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0439 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435. \u041d\u043e \u043f\u043e\u0442\u043e\u043c \u0441\u0434\u0430\u043b\u0441\u044f, \u0442.\u043a. \u043c\u043d\u043e\u0433\u0438\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u0434\u043b\u044f ReactJS (\u0438, \u0432 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u0434\u043b\u044f MaterialUI) \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 ES6, \u0438, \u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043c\u043d\u0435 \u0431\u044b \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0432\u0441\u0435\u0445 \u0438\u0445 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0442\u0430\u0440\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 JavaScript.<\/p>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u043d\u0430 \u0441\u0442\u0430\u0440\u043e\u043c \u0434\u0432\u0438\u0436\u043a\u0435 JavaScript, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u2014 Babel. \u041e\u043d \u0443\u043c\u0435\u0435\u0442 \u043d\u0430 \u043b\u0435\u0442\u0443 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0432 \u0438\u0445 \u0430\u043d\u0430\u043b\u043e\u0433\u0438 \u043d\u0430 \u043e\u0431\u044b\u0447\u043d\u043e\u043c JavaScript, \u0435\u0441\u043b\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0437\u0430\u0434\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438. \u0417\u0434\u0435\u0441\u044c \u043d\u0430\u0447\u0438\u043d\u0430\u044e\u0442\u0441\u044f \u043a\u043e\u0441\u0442\u044b\u043b\u0438 \u0438 \u043e\u0433\u043e\u0440\u043e\u0434. \u0412 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0443\u0436\u0435 \u0437\u0430\u0434\u0430\u043d\u044b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0443, \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u044e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0443\u043d\u043a\u0442\u044b:<\/p>\n<p>   \u2014 package.json \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0431\u043b\u043e\u043a \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 Babel:  <\/p>\n<pre><code>&quot;babel&quot;: { &quot;presets&quot;: [&quot;es2015&quot;, &quot;react&quot;, &quot;stage-1&quot;] } <\/code><\/pre>\n<p>   \u2014 \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043d\u0443\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0432 \u0444\u0430\u0439\u043b\u0435 .babelrc, \u0435\u0441\u043b\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0435 \u0432\u0438\u0434\u0436\u0435\u0442\u044b \u0438\u0437 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u043e\u0432 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u043c\u0438 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: babbler-js-meterial-ui\/src\/<a href=\"https:\/\/github.com\/1i7\/babbler-js-material-ui\/blob\/master\/src\/.babelrc\">.babelrc<\/a>)<br \/>   \u2014 \u0427\u0442\u043e\u0431\u044b \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044e Babel \u0432 \u0431\u043b\u043e\u043a\u0430\u0445 script (type=\u00abtext\/babel\u00bb) \u0432 HTML-\u0444\u0430\u0439\u043b\u0430\u0445 (\u0443 \u043d\u0430\u0441 \u2014 index.html), \u0432 \u044d\u0442\u043e\u043c \u0436\u0435 \u0444\u0430\u0439\u043b\u0435 \u043d\u0443\u0436\u043d\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442 <a href=\"https:\/\/unpkg.com\/babel-core@5.8.38\/browser.min.js\">browser.min.js<\/a> (\u043b\u043e\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u043a\u043e\u043f\u0438\u044f \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435: babbler-serial-react\/script\/<a href=\"https:\/\/github.com\/1i7\/babbler-js-demo\/tree\/master\/babbler-serial-react\/script\">browser.min.js<\/a>, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430)<br \/>   \u2014 \u0427\u0442\u043e\u0431\u044b \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044e Babel \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 js-\u0444\u0430\u0439\u043b\u0430\u0445, \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c &#8216;babel-register&#8217;, \u0430 \u0441\u0430\u043c\u0438 js-\u0444\u0430\u0439\u043b\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 <i>require(&#8216;.\/react-app-ui.js&#8217;);<\/i> (\u0441\u043c \u0432\u0441\u0451 \u0442\u043e\u0442 \u0436\u0435 index.html).<\/p>\n<p>  \u041c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043a\u0430\u043a\u043e\u0435-\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043d\u043e\u0432\u0430\u0446\u0438\u0438 ES6 \u043f\u0435\u0440\u0435\u043a\u043e\u0447\u0443\u044e\u0442 \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0432\u0435\u0442\u043a\u0443 JavaScript \u0432 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 \u0413\u0443\u0433\u043b \u0425\u0440\u043e\u043c\u0430 (\u0430 \u043e\u0442\u0442\u0443\u0434\u0430 \u2014 \u0432 \u042d\u043b\u0435\u043a\u0442\u0440\u043e\u043d) \u0438 \u0447\u0430\u0441\u0442\u044c \u044d\u0442\u0438\u0445 \u043f\u043e\u0434\u043f\u043e\u0440\u043e\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043a\u0438\u043d\u0443\u0442\u044c \u0437\u0430 \u043d\u0435\u043d\u0430\u0434\u043e\u0431\u043d\u043e\u0441\u0442\u044c\u044e.<\/p>\n<p>   \u2014 <i>\u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432 MaterialUI \u0432 index.html \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c &#8216;react-tap-event-plugin&#8217; \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c injectTapEventPlugin()<\/i><\/p>\n<h4>\u0421\u043c\u043e\u0442\u0440\u0438\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438<\/h4>\n<p>  \u0412\u0435\u0441\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u0434 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d \u0432 \u043e\u0434\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u2014 babbler-js-demo\/babbler-serial-react\/<a href=\"https:\/\/github.com\/1i7\/babbler-js-demo\/tree\/master\/babbler-serial-react\/react-app-ui.js\">react-app-ui.js<\/a><\/p>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u2014 \u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u043e\u0431\u043e\u0442\u043e\u043c \u0441 \u043b\u0430\u043c\u043f\u043e\u0447\u043a\u0430\u043c\u0438, \u0430 \u0442\u0430\u043a \u0436\u0435 \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0434\u0435\u0440\u0435\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<h5>\u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u0438\u0433\u043e\u0442\u043e\u0432\u043b\u0435\u043d\u0438\u044f<\/h5>\n<p>  \u0411\u0430\u0437\u043e\u0432\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0420\u0435\u0430\u043a\u0442\u0430  <\/p>\n<pre><code class=\"javascript\">var React = require('react'); var ReactDOM = require('react-dom'); <\/code><\/pre>\n<p>  \u0412\u0438\u0434\u0436\u0435\u0442\u044b MaterialUI \u2014 \u043a\u043d\u043e\u043f\u043a\u0438, \u0438\u043a\u043e\u043d\u043a\u0438, \u0442\u0430\u0431\u044b, \u043f\u0430\u043d\u0435\u043b\u044c\u043a\u0438  <\/p>\n<pre><code class=\"javascript\">\/\/ \u0432\u0438\u0434\u0436\u0435\u0442\u044b MaterialUI import getMuiTheme from 'material-ui\/styles\/getMuiTheme'; import MuiThemeProvider from 'material-ui\/styles\/MuiThemeProvider';  import Paper from 'material-ui\/Paper'; import {Tabs, Tab} from 'material-ui\/Tabs'; import Divider from 'material-ui\/Divider';  import RaisedButton from 'material-ui\/RaisedButton';  import FontIcon from 'material-ui\/FontIcon'; import {red200, green200} from 'material-ui\/styles\/colors';  import Subheader from 'material-ui\/Subheader'; <\/code><\/pre>\n<p>  \u0412\u0438\u0434\u0436\u0435\u0442\u044b Babbler \u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 <a href=\"https:\/\/github.com\/1i7\/babbler-js-material-ui\">babbler-js-material-ui<\/a> \u2014 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e\u043c: <br \/>   \u2014 BabblerConnectionPanel \u2014 \u043f\u0430\u043d\u0435\u043b\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f: \u0432\u044b\u0431\u043e\u0440 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0438\u0437 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430, \u043a\u043d\u043e\u043f\u043a\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f\/\u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f (\u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f)<br \/>   \u2014 BabblerConnectionStatusIcon \u2014 \u0438\u043a\u043e\u043d\u043a\u0430 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0443: \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u044b, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u0441\u044f, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u044b<br \/>   \u2014 BabblerConnectionErrorSnackbar \u2014 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u0432\u043d\u0438\u0437\u0443 \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u044c\u043a\u0430, \u0438\u0437\u0432\u0435\u0449\u0430\u044e\u0449\u0430\u044f \u043e \u0440\u0430\u0437\u0440\u044b\u0432\u0435 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u043e\u0448\u0438\u0431\u043a\u0430\u0445 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f<br \/>   \u2014 BabblerDataFlow \u2014 \u043f\u043e\u043b\u043d\u044b\u0439 \u043b\u043e\u0433 \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438: \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0432 \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u043e\u0431\u043c\u0435\u043d \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0441 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e\u043c \u0438 \u0442.\u043f.<br \/>   \u2014 BabblerDebugPanel (\u043f\u043e\u043a\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d \u043d\u0435 \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435, \u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430) \u2014 \u043f\u0430\u043d\u0435\u043b\u044c \u043e\u0442\u043b\u0430\u0434\u043a\u0438: \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u043a\u043e\u043c\u0430\u043d\u0434 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0443 \u0432\u0440\u0443\u0447\u043d\u0443\u044e, \u043a\u043d\u043e\u043f\u043a\u0438 help, ping, \u043b\u043e\u0433 \u0441 BabblerDataFlow<\/p>\n<pre><code class=\"javascript\">\/\/ \u0432\u0438\u0434\u0436\u0435\u0442\u044b Babbler MaterialUI import BabblerConnectionStatusIcon from 'babbler-js-material-ui\/lib\/BabblerConnectionStatusIcon'; import BabblerConnectionErrorSnackbar from 'babbler-js-material-ui\/lib\/BabblerConnectionErrorSnackbar'; import BabblerConnectionPanel from 'babbler-js-material-ui\/lib\/BabblerConnectionPanel'; import BabblerDataFlow from 'babbler-js-material-ui\/lib\/BabblerDataFlow';  import BabblerDebugPanel from '.\/widgets\/BabblerDebugPanel'; <\/code><\/pre>\n<p>  Babbler.js \u0434\u043b\u044f \u0441\u0432\u044f\u0437\u0438 \u0441 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e\u043c  <\/p>\n<pre><code class=\"javascript\">\/\/ Babbler.js import BabblerDevice from 'babbler-js'; <\/code><\/pre>\n<p>  \u0421\u0442\u0438\u043b\u044c \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u0447\u0435\u043a  <\/p>\n<pre><code class=\"javascript\">const btnStyle = {   margin: 12 }; <\/code><\/pre>\n<h5>\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0441\u0430\u043c\u0430\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u2014 \u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0441 \u0440\u043e\u0431\u043e\u0442\u043e\u043c, \u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043b\u0430\u043c\u043f\u043e\u0447\u043a\u043e\u0439<\/h5>\n<p>  \u041f\u0430\u043d\u0435\u043b\u044c \u2014 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 React: \u043a\u043d\u043e\u043f\u043a\u0430 \u00ab\u0412\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043b\u0430\u043c\u043f\u043e\u0447\u043a\u0443\u00bb, \u043a\u043d\u043e\u043f\u043a\u0430 \u00ab\u0412\u044b\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043b\u0430\u043c\u043f\u043e\u0447\u043a\u0443\u00bb, \u0438\u043a\u043e\u043d\u043a\u0430 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u043b\u0430\u043c\u043f\u043e\u0447\u043a\u0438.<\/p>\n<p>  \u043f\u0440\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b React \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0437\u043d\u0430\u0442\u044c<br \/>   \u2014 \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 React \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u043c\u0430\u0448\u0438\u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 (\u0441\u0442\u0435\u0439\u0442-\u043c\u0430\u0448\u0438\u043d\u0430). <br \/>   \u2014 \u0422\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u0434\u0432\u0435 \u0433\u0440\u0443\u043f\u043f\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439: \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <i>this.props<\/i> \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f <i>this.state<\/i>.<br \/>   \u2014 \u0421\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <i>this.props<\/i>: \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0442\u0435\u0433\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0435\u0433\u043e \u043d\u0430 \u044d\u043a\u0440\u0430\u043d.<br \/>   \u2014 \u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f <i>this.state<\/i>: \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043d\u0443\u0436\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <i>this.setState<\/i>.<br \/>   \u2014 \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0447\u0435\u0440\u0435\u0437 <i>this.setState<\/i> \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<br \/>   \u2014 \u041f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <i>render<\/i>, \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 this.props \u0438 this.state.<br \/>   \u2014 \u0412\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 <i>render<\/i> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 React JSX.<\/p>\n<p>  \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435<br \/>   \u2014 \u041e\u0431\u044a\u0435\u043a\u0442 BabblerDevice \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0447\u0435\u0440\u0435\u0437 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <i>this.props.babblerDevice<\/i>.<br \/>   \u2014 \u0421\u043e\u0431\u044b\u0442\u0438\u044f babblerDevice \u043c\u0435\u043d\u044f\u044e\u0442 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (\u0435\u0441\u043b\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u044b, \u0434\u0435\u043b\u0430\u0435\u043c \u0432\u0441\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438, \u0435\u0441\u043b\u0438 \u043d\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u2014 \u0434\u0435\u043b\u0430\u0435\u043c \u043d\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c\u0438).<br \/>   \u2014 \u041a\u043d\u043e\u043f\u043a\u0438 \u00ab\u0412\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043b\u0430\u043c\u043f\u043e\u0447\u043a\u0443\u00bb \u0438 \u00ab\u0412\u044b\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043b\u0430\u043c\u043f\u043e\u0447\u043a\u0443\u00bb \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u044b <i>ledon<\/i> \u0438 <i>ledoff<\/i> \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0443 \u0447\u0435\u0440\u0435\u0437 babblerDevice.<br \/>   \u2014 \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0442\u0432\u0435\u0442\u0430 \u00abok\u00bb \u043c\u0435\u043d\u044f\u044e\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u043b\u0430\u043c\u043f\u043e\u0447\u043a\u0438 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u043f\u0438\u0441\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 <i>this.state.ledOn<\/i> (true\/false). <\/p>\n<pre><code class=\"javascript\">\/\/ \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043b\u0430\u043c\u043f\u043e\u0447\u043a\u043e\u0439 var BabblerLedControlPnl = React.createClass({ \/\/ http:\/\/www.material-ui.com\/#\/components\/raised-button \/\/ http:\/\/www.material-ui.com\/#\/components\/subheader      getInitialState: function() {         return {             deviceStatus: this.props.babblerDevice.deviceStatus(),             ledOn: false         };     },          componentDidMount: function() {         \/\/ \u0441\u043b\u0443\u0448\u0430\u0435\u043c \u0441\u0442\u0430\u0442\u0443\u0441 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430         this.deviceStatusListener = function(status) {             this.setState({deviceStatus: status});         }.bind(this);         this.props.babblerDevice.on(BabblerDevice.Event.STATUS, this.deviceStatusListener);     },          componentWillUnmount: function() {         \/\/ \u043f\u043e\u0447\u0438\u0441\u0442\u0438\u043c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u0435\u0439         this.props.babblerDevice.removeListener(BabblerDevice.Event.STATUS, this.deviceStatusListener);     },          render: function() {         var connected = this.state.deviceStatus === BabblerDevice.Status.CONNECTED ? true : false;         return (             &lt;div style={{textAlign: &quot;center&quot;}}&gt;                 &lt;div&gt;                     &lt;RaisedButton label=&quot;\u0412\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043b\u0430\u043c\u043f\u043e\u0447\u043a\u0443&quot; onClick={this.cmdLedon} disabled={!connected} style={btnStyle} \/&gt;                     &lt;RaisedButton label=&quot;\u0412\u044b\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043b\u0430\u043c\u043f\u043e\u0447\u043a\u0443&quot; onClick={this.cmdLedoff} disabled={!connected} style={btnStyle} \/&gt;                 &lt;\/div&gt;                                  &lt;FontIcon                      className=&quot;material-icons&quot;                      style={{fontSize: 160, marginTop: 40}}                     color={(this.state.ledOn ? green200 : red200)}                 &gt;{(this.state.ledOn ? &quot;sentiment_very_satisfied&quot; : &quot;sentiment_very_dissatisfied&quot;)}&lt;\/FontIcon&gt;                                   &lt;\/div&gt;         );     },          cmdLedon: function() {           this.props.babblerDevice.sendCmd(&quot;ledon&quot;, [],               \/\/ onReply               function(cmd, params, reply) {                   if(reply == 'ok') {                       this.setState({ledOn: true});                   }               }.bind(this),               \/\/ onError               function(cmd, params, err) {                   console.log(cmd + (params.length &gt; 0 ? &quot; &quot; + params : &quot;&quot;) + &quot;: &quot; + err);               }.bind(this)           );       },               cmdLedoff: function() {           this.props.babblerDevice.sendCmd(&quot;ledoff&quot;, [],               \/\/ onReply               function(cmd, params, reply) {                   if(reply == 'ok') {                       this.setState({ledOn: false});                   }               }.bind(this),               \/\/ onError               function(cmd, params, err) {                   console.log(cmd + (params.length &gt; 0 ? &quot; &quot; + params : &quot;&quot;) + &quot;: &quot; + err);               }.bind(this)           );       } }); <\/code><\/pre>\n<h5>\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h5>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e BabblerDevice \u0434\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a \u0440\u043e\u0431\u043e\u0442\u0443  <\/p>\n<pre><code class=\"javascript\">\/\/ \u0423\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e Babbler, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u043e\u0435 \u043a \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u043c\u0443 \u043f\u043e\u0440\u0442\u0443 var babblerDevice1 = new BabblerDevice(); <\/code><\/pre>\n<p>  \u0424\u0438\u043d\u0430\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0442\u043a\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u2014 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 ReactJS JSX (HTML-\u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0439 XML \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0434\u0430 JavaScript). \u0420\u0438\u0441\u0443\u0435\u043c \u0434\u0435\u0440\u0435\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f, \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0432 index.html \u0432 div \u0441 id=&#8217;app-content&#8217;.<\/p>\n<p>  \u0417\u0434\u0435\u0441\u044c \u0443 \u043d\u0430\u0441 \u043f\u0430\u043d\u0435\u043b\u044c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0443 \u2014 \u043f\u043e\u043b\u043e\u0441\u043a\u0430 \u043d\u0430\u0432\u0435\u0440\u0445\u0443, \u0431\u043b\u043e\u043a\u0438 \u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0441 \u0440\u043e\u0431\u043e\u0442\u043e\u043c \u2014 \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0430\u0431\u043e\u0432.<\/p>\n<pre><code class=\"javascript\">\/\/ \u041a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f ReactDOM.render(     &lt;MuiThemeProvider muiTheme={getMuiTheme()}&gt;       &lt;div&gt;         &lt;Paper&gt;             &lt;BabblerConnectionPanel babblerDevice={babblerDevice1}\/&gt;             &lt;BabblerConnectionStatusIcon                  babblerDevice={babblerDevice1}                  iconSize={50}                 style={{position: &quot;absolute&quot;, right: 0, marginRight: 14, marginTop: 5}} \/&gt;         &lt;\/Paper&gt;                  &lt;Divider style={{marginTop: 20, marginBottom: 20}}\/&gt;                  &lt;Tabs&gt;             &lt;Tab label=&quot;\u041b\u0430\u043c\u043f\u043e\u0447\u043a\u0438&quot; &gt;                 &lt;BabblerLedControlPnl babblerDevice={babblerDevice1}\/&gt;             &lt;\/Tab&gt;             &lt;Tab label=&quot;\u041e\u0442\u043b\u0430\u0434\u043a\u0430&quot; &gt;                 &lt;BabblerDebugPanel babblerDevice={babblerDevice1}\/&gt;             &lt;\/Tab&gt;             &lt;Tab label=&quot;\u041b\u043e\u0433&quot; &gt;                 &lt;BabblerDataFlow                      babblerDevice={babblerDevice1}                      reverseOrder={true}                     maxItems={10000}                     timestamp={true} \/\/                    filter={{ err: false, data: false }} \/\/                    filter={{ data: {queue: false} }} \/\/                    filter={{ err: {in: false, out: false, queue: false}, data: {in: false, out: false, queue: false} }}                     style={{margin: 20}}\/&gt;             &lt;\/Tab&gt;         &lt;\/Tabs&gt;                  &lt;BabblerConnectionErrorSnackbar babblerDevice={babblerDevice1}\/&gt;       &lt;\/div&gt;     &lt;\/MuiThemeProvider&gt;,     document.getElementById('app-content') );<\/code><\/pre>\n<h4>\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c<\/h4>\n<pre><code class=\"bash\">.\/babbler-serial.sh <\/code><\/pre>\n<p>  \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e<\/p>\n<p>  <a href=\"https:\/\/fotki.yandex.ru\/next\/users\/ii1i7\/album\/527504\/view\/1473943\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/6f6\/2f9\/eda\/6f62f9eda26bbbd525d034ab7982be4b.png\" width=\"800\" height=\"628\" title=\"Babbler-\u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f-03.png\" alt=\"Babbler-\u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f-03.png\"\/><\/a><\/p>\n<p>  \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c\u0441\u044f<\/p>\n<p>  <a href=\"https:\/\/fotki.yandex.ru\/next\/users\/ii1i7\/album\/527504\/view\/1473944\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/54d\/339\/cbc\/54d339cbc8a8877eb709534745c7f53d.png\" width=\"800\" height=\"628\" title=\"Babbler-\u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f-04.png\" alt=\"Babbler-\u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f-04.png\"\/><\/a><\/p>\n<p>  \u0436\u0434\u0435\u043c<\/p>\n<p>  <a href=\"https:\/\/fotki.yandex.ru\/next\/users\/ii1i7\/album\/527504\/view\/1473945\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/52c\/562\/da5\/52c562da5df879d17d0a43ebac1d2a7d.png\" width=\"800\" height=\"628\" title=\"Babbler-\u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f-05.png\" alt=\"Babbler-\u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f-05.png\"\/><\/a><\/p>\n<p>  \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043b\u0430\u043c\u043f\u043e\u0447\u043a\u0443<\/p>\n<p>  <a href=\"https:\/\/fotki.yandex.ru\/next\/users\/ii1i7\/album\/527504\/view\/1473948\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/722\/41b\/bea\/72241bbeac018271d28addf8e91570db.png\" width=\"800\" height=\"628\" title=\"Babbler-\u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f-08.png\" alt=\"Babbler-\u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f-08.png\"\/><\/a><\/p>\n<p>  \u0432\u044b\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043b\u0430\u043c\u043f\u043e\u0447\u043a\u0443<\/p>\n<p>  <a href=\"https:\/\/fotki.yandex.ru\/next\/users\/ii1i7\/album\/527504\/view\/1473950\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/385\/85e\/fa4\/38585efa446847035d9a156a060a5a41.png\" width=\"800\" height=\"628\" title=\"Babbler-\u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f-10.png\" alt=\"Babbler-\u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f-10.png\"\/><\/a><\/p>\n<p>  \u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043b\u043e\u0433<\/p>\n<p>  <a href=\"https:\/\/fotki.yandex.ru\/next\/users\/ii1i7\/album\/527504\/view\/1473951\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/d3a\/4e8\/f6d\/d3a4e8f6d0da269bbea7172d7458ebc6.png\" width=\"800\" height=\"628\" title=\"Babbler-\u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f-11.png\" alt=\"Babbler-\u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f-11.png\"\/><\/a><\/p>\n<p>  \u0448\u043b\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0432 \u0440\u0443\u0447\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435<\/p>\n<p>  <a href=\"https:\/\/fotki.yandex.ru\/next\/users\/ii1i7\/album\/527504\/view\/1473952\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/a30\/fed\/a75\/a30feda75f47f11abfaaa35f82abc32e.png\" width=\"800\" height=\"628\" title=\"Babbler-\u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f-12.png\" alt=\"Babbler-\u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f-12.png\"\/><\/a><\/p>\n<p>  <a href=\"https:\/\/fotki.yandex.ru\/next\/users\/ii1i7\/album\/527504\/view\/1475272\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/42c\/46e\/d95\/42c46ed951ed115230bfc07e93808cff.png\" width=\"800\" height=\"628\" title=\"Babbler-\u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f-15-1.png\" alt=\"Babbler-\u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f-15-1.png\"\/><\/a><\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 56.2493%;\"><iframe src=\"https:\/\/www.youtube.com\/embed\/uLHPr1sS558?rel=0&amp;showinfo=1\" frameborder=\"0\" allowfullscreen=\"true\" webkitallowfullscreen=\"true\" mozallowfullscreen=\"true\" style=\"top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;\"><\/iframe><\/div>\n<\/div>\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:\/\/habrahabr.ru\/post\/316194\/\"> https:\/\/habrahabr.ru\/post\/316194\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0421\u0435\u0433\u043e\u0434\u043d\u044f \u0434\u0435\u043b\u0430\u0435\u043c \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u043c \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u043e\u0431\u043e\u0442\u043e\u043c \u043d\u0430 \u0410\u0440\u0434\u0443\u0438\u043d\u0435 \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0440\u0442. \u041d\u0430 \u044f\u0437\u044b\u043a\u0435 JavaScript \u043d\u0430 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435 Electron \u0441 \u0432\u0438\u0434\u0436\u0435\u0442\u0430\u043c\u0438 ReactJS+MaterialUI.<\/p>\n<p>  <a href=\"https:\/\/fotki.yandex.ru\/next\/users\/ii1i7\/album\/527504\/view\/1473948\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/722\/41b\/bea\/72241bbeac018271d28addf8e91570db.png\" width=\"800\" height=\"628\" title=\"Babbler-\u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f-08.png\" alt=\"Babbler-\u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f-08.png\"\/><\/a><\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 56.2493%;\"><iframe src=\"https:\/\/www.youtube.com\/embed\/uLHPr1sS558?rel=0&amp;showinfo=1\" frameborder=\"0\" allowfullscreen=\"true\" webkitallowfullscreen=\"true\" mozallowfullscreen=\"true\" style=\"top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;\"><\/iframe><\/div>\n<\/div>\n<\/div>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0443\u043b\u044c\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u0441\u0442\u0430\u043d\u043e\u0447\u043a\u0430 \u0441 \u0427\u041f\u0423 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u0447\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0430\u0439\u0442\u0438\u043a.<\/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-281619","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/281619","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=281619"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/281619\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=281619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=281619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=281619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}