{"id":7083,"date":"2020-10-19T06:35:56","date_gmt":"2020-10-19T04:35:56","guid":{"rendered":"http:\/\/blog.via-internet.de\/?p=7083"},"modified":"2020-10-19T06:35:56","modified_gmt":"2020-10-19T04:35:56","slug":"reactjs-cookbook","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2020\/10\/19\/reactjs-cookbook\/","title":{"rendered":"ReactJS | Cookbook"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">General Readings<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/reactjs.org\/\" target=\"_blank\">https:\/\/reactjs.org\/<\/a><\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Create App<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Run the following commands to create a new React Native project called &#8220;app-getting-started&#8221;:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npx create-react-app  app-getting-started\ncd app-getting-started<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Start App<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"shell\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm start<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Add Typescript Support<\/h2>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">yarn\u00a0create\u00a0react-app\u00a0app-getting-started-with-typescript\u00a0--folder-name\ncd app-getting-started-with-typescript<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">yarn\u00a0add\u00a0typescript\u00a0@types\/node\u00a0@types\/react\u00a0@types\/react-dom\u00a0@types\/jest<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Testing: Tools and Frameworks<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">ReactJS related<\/h3>\n\n\n\n<div class=\"wp-block-advgb-list\"><ul class=\"advgblist-ae0c337f-913b-42e0-be72-5adfbd33cc96\"><li>React Testing Utilities &#8211;<a href=\"https:\/\/reactjs.org\/docs\/test-utils.html#overview\" data-type=\"URL\" data-id=\"https:\/\/reactjs.org\/docs\/test-utils.html#overview\" target=\"_blank\" rel=\"noreferrer noopener\"> Home<\/a><\/li><li>Jest &#8211; Delightful JavaScript Testing Framework with a focus on simplicity &#8211; <a rel=\"noreferrer noopener\" href=\"https:\/\/jestjs.io\/en\/\" data-type=\"URL\" data-id=\"https:\/\/jestjs.io\/en\/\" target=\"_blank\">Home<\/a><\/li><li>Jasmine &#8211; <a rel=\"noreferrer noopener\" href=\"https:\/\/jasmine.github.io\/\" data-type=\"URL\" data-id=\"https:\/\/jasmine.github.io\/\" target=\"_blank\">Home <\/a>| <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/jasmine\/jasmine.github.io\" data-type=\"URL\" data-id=\"https:\/\/github.com\/jasmine\/jasmine.github.io\" target=\"_blank\">Github<\/a><\/li><li>Enzyme &#8211; <a rel=\"noreferrer noopener\" href=\"https:\/\/enzymejs.github.io\/enzyme\/\" data-type=\"URL\" data-id=\"https:\/\/enzymejs.github.io\/enzyme\/\" target=\"_blank\">Home <\/a>| <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/enzymejs\/enzyme\" data-type=\"URL\" data-id=\"https:\/\/github.com\/enzymejs\/enzyme\" target=\"_blank\">Github<\/a><\/li><li><\/li><li><\/li><\/ul><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Others<\/h3>\n\n\n\n<div class=\"wp-block-advgb-list\"><ul class=\"advgblist-ae0c337f-913b-42e0-be72-5adfbd33cc96\"><li>Karma &#8211; <a rel=\"noreferrer noopener\" href=\"http:\/\/karma-runner.github.io\/latest\/index.html\" target=\"_blank\">Home<\/a> | <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/karma-runner\/karma\" target=\"_blank\">Github<\/a><\/li><\/ul><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>General Readings https:\/\/reactjs.org\/ Create App Run the following commands to create a new React Native project called &#8220;app-getting-started&#8221;: Start App Add Typescript Support Testing: Tools and Frameworks ReactJS related Others<\/p>\n","protected":false},"author":1,"featured_media":7082,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[66,67],"tags":[],"class_list":["post-7083","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react","category-reactjs"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/7083","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=7083"}],"version-history":[{"count":0,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/7083\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=7083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=7083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=7083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}