{"id":3553,"date":"2020-03-07T18:27:40","date_gmt":"2020-03-07T17:27:40","guid":{"rendered":"http:\/\/arduino.net.pl\/?p=3553"},"modified":"2020-03-11T19:30:11","modified_gmt":"2020-03-11T18:30:11","slug":"react-podobno-najlepsza-biblioteka-js","status":"publish","type":"post","link":"https:\/\/arduino.net.pl\/index.php\/react-podobno-najlepsza-biblioteka-js\/","title":{"rendered":"React &#8211; podobno najlepsza biblioteka JS"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"443\" src=\"http:\/\/arduino.net.pl\/wp-content\/uploads\/2020\/03\/react1_podobno-1024x443.png\" alt=\"\" class=\"wp-image-3566\" srcset=\"https:\/\/arduino.net.pl\/wp-content\/uploads\/2020\/03\/react1_podobno-1024x443.png 1024w, https:\/\/arduino.net.pl\/wp-content\/uploads\/2020\/03\/react1_podobno-300x130.png 300w, https:\/\/arduino.net.pl\/wp-content\/uploads\/2020\/03\/react1_podobno-768x333.png 768w, https:\/\/arduino.net.pl\/wp-content\/uploads\/2020\/03\/react1_podobno-440x191.png 440w, https:\/\/arduino.net.pl\/wp-content\/uploads\/2020\/03\/react1_podobno.png 1531w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">LINKI<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/typeofweb.com\/poznaj-react-js\/\">Poznaj React.js<\/a><\/li><li><a href=\"https:\/\/www.youtube.com\/watch?v=UfUnqvv_MPY&amp;list=PLhZynnUPiyGlu2KZR7kxeFbnsyVI8tI5k\">React od Podstaw<\/a> &#8211; React od Podstaw (<strong>macos<\/strong>) <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/www.youtube.com\/channel\/UCVG_DCWpRtRKpyGDfLrHKRA\" target=\"_blank\">Tadeusz Aleksandruk<\/a> <ul><li><a href=\"https:\/\/github.com\/AleksandrukTad\/ReactPoradnik\">https:\/\/github.com\/AleksandrukTad\/ReactPoradnik<\/a> github<br><\/li><\/ul><\/li><li><a rel=\"noreferrer noopener\" aria-label=\"React Tutorial For Beginners by Dev Ed (opens in a new tab)\" href=\"https:\/\/www.youtube.com\/watch?v=dGcsHMXbSOA\" target=\"_blank\">React Tutorial For Beginners by Dev Ed<\/a> &#8211; tutorial<br><\/li><li><a href=\"https:\/\/www.youtube.com\/watch?v=DLX62G4lc44&amp;t=960s\">Learn React JS &#8211; Full Course for Beginners &#8211; Tutorial 2019<\/a>   &#8211; bardzo dobry przewodnik od podstaw (<strong>macos<\/strong>)<ul><li><a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/github.com\/AleksandrukTad\/ReactPoradnik\" target=\"_blank\">https:\/\/create-react-app.dev\/docs\/getting-started<\/a> &#8211; \u015brodowisko i template do kursu<br><\/li><\/ul><\/li><li><a href=\"https:\/\/reactjs.org\">reactjs.org<\/a><\/li><li><a href=\"https:\/\/pl.reactjs.org\/\">reactjs.org po polsku<\/a><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Instalowanie react-a w Visual Studio Code<\/h3>\n\n\n\n<h6 class=\"wp-block-heading\">wg: <a rel=\"noreferrer noopener\" href=\"https:\/\/www.youtube.com\/watch?v=dGcsHMXbSOA\" target=\"_blank\">React Tutorial For Beginners by Dev Ed<\/a> <\/h6>\n\n\n\n<p style=\"font-size:-4px\">Otwieramy <strong>Visual Studio Code<\/strong><br>Zak\u0142adka: <strong>Terminal <\/strong>-&gt; <strong>New Terminal<\/strong><br>W otwartym oknie Terminala przechodzimy do miejsca w kt\u00f3rym chcemy utworzy\u0107 nowy folder z aplikacj\u0105. Ja stworzy\u0142em w tym celu folder React. Korzystamy z komend: <strong>cd [<\/strong><em>nazwa foldera<\/em><strong>] , cd ..  , pwd<\/strong> itp.<br>Teraz wpisujemy polecenie:<br><code>npx create-react-app projectreact<\/code><br><br>Po instalacji otrzymujemy taki komunikat:<br><br><code>Success! Created projectreact at ... \/React\/projectreact<br> Inside that directory, you can run several commands:<br>npm start<br>     Starts the development server.<br>npm run build<br>     Bundles the app into static files for production.<br>npm test<br>     Starts the test runner.<br>npm run eject<br>     Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can\u2019t go back!<br>We suggest that you begin by typing:<br>cd projectreact<br>   npm start<\/code><\/p>\n\n\n\n<p>Zgodnie z sugesti\u0105 wpisujemy polecenie:<br><code>cd projectreact<\/code><br>i jeste\u015bmy w folderze projektu.<\/p>\n\n\n\n<p>Pojawi\u0142o si\u0119 sporo nowych folder\u00f3w, najwa\u017cniejszym jest <br><strong>&gt; node_modules<\/strong><br>w kt\u00f3rym znajduj\u0105 si\u0119 wszystkie modu\u0142y konieczne do uruchomienia zapisanych skeczy, p\u00f3ki co nie interesuje nas jego zawarto\u015b\u0107<br>w pliku <br><strong>{} package.json<\/strong><br>znajduj\u0105 si\u0119 mi\u0119dzy innymi skrypty z kt\u00f3rych b\u0119dziemy korzysta\u0107. S\u0105 to:<br><strong>&#8222;start&#8221;: &#8222;react-scripts start&#8221;,    <br>&#8222;build&#8221;: &#8222;react-scripts build&#8221;,    <br>&#8222;test&#8221;: &#8222;react-scripts test&#8221;,    <br>&#8222;eject&#8221;: &#8222;react-scripts eject&#8221;<\/strong> <\/p>\n\n\n\n<p>P\u00f3ki co zostawiamy zawarto\u015b\u0107 folder\u00f3w i wracamy do okna <strong>Terminala<\/strong>. Wpisujemy komend\u0119:<br><code>npm start<\/code><\/p>\n\n\n\n<p>Po chwili otrzymujemy informacj\u0119:<\/p>\n\n\n\n<p><code>Compiled successfully!<br>You can now view projectreact in the browser.<br>Local:            http:\/\/localhost:3000<br>   On Your Network:  http:\/\/192.168.0.3:3000<br>Note that the development build is not optimized.<br>To create a production build, use npm run build.<\/code><\/p>\n\n\n\n<p>W przegl\u0105darce (u mnie Chrom) otwiera si\u0119 okno z kr\u0119c\u0105cym si\u0119 logo React-a i napisem:<br>Edit&nbsp;<code>src\/App.js<\/code>&nbsp;and save to reload.<br><a rel=\"noreferrer noopener\" href=\"https:\/\/reactjs.org\/\" target=\"_blank\">Learn React<\/a><\/p>\n\n\n\n<p class=\"has-regular-font-size\">Widzimy zatem nasz\u0105 pierwsz\u0105 aplikacj\u0119 w j\u0119zyku <strong>React<\/strong>. <br><br>Zgodnie z sugesti\u0105 w edytorze otworzy\u0142em plik <strong>App.js<\/strong> i dokona\u0142em edycji. Spolszczy\u0142em napisy i zmieni\u0142em odno\u015bnik na polski.<br>Tu kod:<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/yarogniew\/98e9dcbe1b8f8856fea22db0d86f8bc1.js\"><\/script>\n","protected":false},"excerpt":{"rendered":"<p>LINKI Poznaj React.js React od Podstaw &#8211; React od Podstaw (macos) Tadeusz Aleksandruk https:\/\/github.com\/AleksandrukTad\/ReactPoradnik github React Tutorial For Beginners by Dev Ed &#8211; tutorial Learn React JS &#8211; Full Course&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[65,106],"tags":[54,107],"class_list":["post-3553","post","type-post","status-publish","format-standard","hentry","category-programowanie","category-react","tag-programowanie","tag-react"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/arduino.net.pl\/index.php\/wp-json\/wp\/v2\/posts\/3553","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arduino.net.pl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/arduino.net.pl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/arduino.net.pl\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/arduino.net.pl\/index.php\/wp-json\/wp\/v2\/comments?post=3553"}],"version-history":[{"count":16,"href":"https:\/\/arduino.net.pl\/index.php\/wp-json\/wp\/v2\/posts\/3553\/revisions"}],"predecessor-version":[{"id":3578,"href":"https:\/\/arduino.net.pl\/index.php\/wp-json\/wp\/v2\/posts\/3553\/revisions\/3578"}],"wp:attachment":[{"href":"https:\/\/arduino.net.pl\/index.php\/wp-json\/wp\/v2\/media?parent=3553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/arduino.net.pl\/index.php\/wp-json\/wp\/v2\/categories?post=3553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/arduino.net.pl\/index.php\/wp-json\/wp\/v2\/tags?post=3553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}