{"id":89,"date":"2025-04-29T21:42:52","date_gmt":"2025-04-29T21:42:52","guid":{"rendered":"https:\/\/praktikant.thkit.ee\/reactjs\/?page_id=85"},"modified":"2025-05-02T17:03:55","modified_gmt":"2025-05-02T17:03:55","slug":"set-up-react-in-webstorm","status":"publish","type":"page","link":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/set-up-react-in-webstorm\/","title":{"rendered":"Set up React in WeBSTORM"},"content":{"rendered":"\nHere we going to install WebStorm here is the link to install <a href=\"https:\/\/www.jetbrains.com\/webstorm\/\">WebStorm<\/a>, We could doe web applications in our case we going demonstration React.js\n\n\n\n<p>As we open WebStorm, it&#8217;s show a menu, you need to click on the <em><strong>New Project<\/strong><\/em>, to start our journey to code react.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"786\" height=\"643\" src=\"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-content\/uploads\/sites\/5\/2025\/04\/image-1.png\" alt=\"\" class=\"wp-image-16\" srcset=\"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-content\/uploads\/sites\/5\/2025\/04\/image-1.png 786w, https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-content\/uploads\/sites\/5\/2025\/04\/image-1-300x245.png 300w, https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-content\/uploads\/sites\/5\/2025\/04\/image-1-768x628.png 768w\" sizes=\"auto, (max-width: 786px) 100vw, 786px\" \/><\/figure>\n<\/div>\n\n\n<p>We are going create a project directory. You could pick use a default path way WebStorm provide or you can select your own location path.<\/p>\n\n\n\n<p>* For the node interpreter, if you don\u2019t have node installed on your machine, WebStorm will download an interpreter to use for webstorm.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"786\" height=\"643\" src=\"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-content\/uploads\/sites\/5\/2025\/04\/image-2.png\" alt=\"\" class=\"wp-image-17\" srcset=\"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-content\/uploads\/sites\/5\/2025\/04\/image-2.png 786w, https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-content\/uploads\/sites\/5\/2025\/04\/image-2-300x245.png 300w, https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-content\/uploads\/sites\/5\/2025\/04\/image-2-768x628.png 768w\" sizes=\"auto, (max-width: 786px) 100vw, 786px\" \/><\/figure>\n<\/div>\n\n\n<ul><li><p>Reminder you can\u2019t use any capitals letters, in your project name. <span title=\"NPM aka Node Package Manager is a package manager for JavaScript.\"><a href=\"https:\/\/en.wikipedia.org\/wiki\/Npm\">NPM<\/a><\/span> packages aren&#8217;t allowed to use upper case characters in their name, seemingly because <span title=\"The file hierarchy structure in Unix systems like MacOS and Linux resembles the growth of a tree, starting from the root and branching out.\"><a href=\"https:\/\/en.wikipedia.org\/wiki\/Unix_filesystem\">unix filesystems<\/a><\/span> are case-sensitive, which creates &#8220;a recipe for confusion and nonportable software&#8221;.<\/p><\/ul><\/li>\n\n\n\n<ul class=\"wp-block-list\">\n<li>What is the diffrecences between React and React Native?<br>Plain React is build for Web applications, for React Native is for creating Mobile applications<\/li>\n<\/ul>\n\n\n\n<p>After it\u2019s launches IDE, wait few minutes for all needed dependencies to install to the project.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"560\" src=\"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-content\/uploads\/sites\/5\/2025\/04\/image-3-1024x560.png\" alt=\"\" class=\"wp-image-18\" srcset=\"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-content\/uploads\/sites\/5\/2025\/04\/image-3-1024x560.png 1024w, https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-content\/uploads\/sites\/5\/2025\/04\/image-3-300x164.png 300w, https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-content\/uploads\/sites\/5\/2025\/04\/image-3-768x420.png 768w, https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-content\/uploads\/sites\/5\/2025\/04\/image-3-1536x840.png 1536w, https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-content\/uploads\/sites\/5\/2025\/04\/image-3.png 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Here we going to install WebStorm here is the link to install WebStorm, We could doe web applications in our case we going demonstration React.js As we open WebStorm, it&#8217;s show a menu, you need to click on the New Project, to start our journey to code react. We are going create a project directory. &#8230; <a title=\"Set up React in WeBSTORM\" class=\"read-more\" href=\"https:\/\/praktikant.thkit.ee\/reactjs\/en\/set-up-react-in-webstorm\/\" aria-label=\"Read more about Set up React in WeBSTORM\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-89","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-json\/wp\/v2\/pages\/89","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-json\/wp\/v2\/comments?post=89"}],"version-history":[{"count":2,"href":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-json\/wp\/v2\/pages\/89\/revisions"}],"predecessor-version":[{"id":99,"href":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-json\/wp\/v2\/pages\/89\/revisions\/99"}],"wp:attachment":[{"href":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-json\/wp\/v2\/media?parent=89"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}