{"id":2534,"date":"2018-10-09T21:50:08","date_gmt":"2018-10-09T21:50:08","guid":{"rendered":"https:\/\/tinjurewp.com\/jsblog\/?p=2534"},"modified":"2018-10-09T21:50:08","modified_gmt":"2018-10-09T21:50:08","slug":"javascript-fundamentals-knowledge-react-learning","status":"publish","type":"post","link":"https:\/\/learncode.tinjurewp.com\/javascript-fundamentals-knowledge-react-learning\/","title":{"rendered":"JavaScript Fundamentals Knowledge &#038; React Learning"},"content":{"rendered":"<p class=\"note icon-note\"><strong>Note<\/strong>: This post is work-in-progress learning-note and still in active development and updated regularly.<\/p>\n<p>I have been deep diving into learning JavaScript (JS) throughout 2018 but with my only couple of daily learning hours, progress is frustratingly slow. Nevertheless, I feel that I have made some progress and here are links to <a href=\"https:\/\/tinjurewp.com\/jsblog\/my-three-months-of-javascript-learning\/\" target=\"_blank\" rel=\"noopener\">first<\/a>, <a href=\"https:\/\/tinjurewp.com\/jsblog\/javascript-learning-april-june-2018\/\" target=\"_blank\" rel=\"noopener\">second<\/a> and <a href=\"https:\/\/tinjurewp.com\/jsblog\/javascript-learning-july-september-2018\/\" target=\"_blank\" rel=\"noopener\">third<\/a> quarters learning progress.<\/p>\n<p>Except occasional small catch up breaks into WordPress Gutenberg editor I have been focusing learning JS this year. My main goal of JS learning was to gain basic understanding of ReactJS frame work. Last week, while doing <a href=\"https:\/\/tinjurewp.com\/jsblog\/understanding-this-keyword-in-javascript\/\" target=\"_blank\" rel=\"noopener\">understanding this keyword<\/a>, I learn that <code>this<\/code> key word is widely used in <a href=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"noopener\">ReactJs<\/a>. While deep diving <code>this<\/code> keyword, I thought to take a brief detour to explore how <code>this<\/code> keyword is used in the <a href=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"noopener\">ReactJs<\/a>.<\/p>\n<p>After completing <a href=\"https:\/\/tinjurewp.com\/jsblog\/the-javascript-this-keyword-and-its-use-in-reactjs\/\" target=\"_blank\" rel=\"noopener\"><code>this<\/code> keyword and its use in ReactJs<\/a> learning-note post, I spent some time reviewing blog posts, tutorials, books on ReactJs to side track from my regular JS learning. In my brief search I found the following resources very helpful:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.kirupa.com\/\" target=\"_blank\" rel=\"noopener\"><strong>Kirupa Chinnathambi<\/strong><\/a>\u2018s blog posts on\u00a0<a href=\"https:\/\/www.kirupa.com\/react\/building_your_first_react_app.htm\" target=\"_blank\" rel=\"noopener\">Building Your First React App<\/a> and his <a href=\"https:\/\/www.amazon.com\/exec\/obidos\/ASIN\/0134546318\/kirupacom\" target=\"_blank\" rel=\"noopener\">Learning React<\/a> book. Kirupa\u2019s tutorial posts are very through and explains basic concepts in great detail in without much technical jargon suitable for beginners.<\/li>\n<li><a href=\"https:\/\/www.robinwieruch.de\/about\/\" target=\"_blank\" rel=\"noopener\"><strong>Robin Wieruch<\/strong><\/a>\u2018s <a href=\"https:\/\/www.robinwieruch.de\/\" target=\"_blank\" rel=\"noopener\">blog<\/a> post and highlight of his <a href=\"https:\/\/roadtoreact.com\/\" target=\"_blank\" rel=\"noopener\">The Road to Learn React<\/a> book.His blogs posts cover different components of ReactJS and most are more advanced for my current knowledge these three posts: <a href=\"https:\/\/www.robinwieruch.de\/javascript-fundamentals-react-requirements\/\" target=\"_blank\" rel=\"noopener\">JavaScript fundamentals before learning React<\/a>, <a href=\"https:\/\/www.robinwieruch.de\/react-js-macos-setup\/\" target=\"_blank\" rel=\"noopener\">A simple React.js on MacOS Setup<\/a> and <a href=\"https:\/\/www.robinwieruch.de\/the-road-to-learn-react\/\" target=\"_blank\" rel=\"noopener\">The Road to learn React<\/a> book.\u00a0 This post was inspired by his post too.<\/li>\n<li>Watched some parts of ES6 features videos: <a href=\"http:\/\/Learning ECMAScript 6\" target=\"_blank\" rel=\"noopener\">Learning ECMAScript 6<\/a> \u2013 by Eve Porcello and few chapters from <a href=\"https:\/\/www.lynda.com\/React-js-tutorials\/React-Web-Designers\/645063-2.html?srchtrk=index%3a11%0alinktypeid%3a2%0aq%3areact%0apage%3a1%0as%3arelevance%0asa%3atrue%0aproducttypeid%3a2\" target=\"_blank\" rel=\"noopener\">React for Web Designers<\/a> \u2013 by Joe Chellman from <a href=\"https:\/\/www.lynda.com\/\" target=\"_blank\" rel=\"noopener\">lynda library<\/a> to explore learning materials. Eve\u2019s ES6 tutorial videos were very helpful but Joe Chellman\u2019s video tutorial covers subject that I am interested in but currently a bit advance at my current JS skill level.<\/li>\n<\/ul>\n<p>I have not completed yet my JavaScript fundamentals and my <a href=\"https:\/\/tinjurewp.com\/jsblog\/javascript-learning-july-september-2018\/\" target=\"_blank\" rel=\"noopener\">fourth quarter learning plan<\/a> includeES6 features and understanding DOM. This post was inspired by Robin Wieruch\u2019s post \u2013 <a href=\"https:\/\/www.robinwieruch.de\/javascript-fundamentals-react-requirements\/\" target=\"_blank\" rel=\"noopener\">JavaScript fundamentals before learning React<\/a>, to identify my JS knowledge gaps required to understand terminology and various react components and ability to create and do small React App projects.<\/p>\n<p>In this post, for the presentation purposes I will be following table of contents from <a href=\"https:\/\/www.robinwieruch.de\/javascript-fundamentals-react-requirements\/\" target=\"_blank\" rel=\"noopener\">Robin Wieruch\u2019s post<\/a> as a guide to structure content of this post.<\/p>\n<h5>Creating React App<\/h5>\n<p>Creating react app requires prerequisite knowledge in the following areas:<\/p>\n<ul>\n<li>A good understanding of HTML &amp; CSS<\/li>\n<li>Basic knowledge of JavaScript Fundamentals<\/li>\n<li>Basic knowledge on DOM and its working<\/li>\n<li>JavaScript ES6 Syntax<\/li>\n<li>Basic knowledge of JS development environment (working with Node.js and npm).<\/li>\n<\/ul>\n<p>Lets look at the following react component <code>App.js<\/code> code:<\/p>\n<pre class=\"line-numbers\"><code class=\"language-javascript\">\/\/ app.js\nimport React, { Component } from &#039;react&#039;;\nimport logo from &#039;.\/logo.svg&#039;;\nimport &#039;.\/App.css&#039;;\n\nclass App extends Component {\n  render() {\n    return (\n      &lt;div className=&quot;App&quot;&gt;\n        &lt;div className=&quot;App-header&quot;&gt;\n          &lt;img src={logo} className=&quot;App-logo&quot; alt=&quot;logo&quot; \/&gt;\n          &lt;h2&gt;Welcome to React&lt;\/h2&gt;\n          &lt;\/div&gt;\n          &lt;p className=&quot;app-intro&quot;&gt;\n            Happy Learning &amp; hacking!\n          &lt;\/p&gt;\n         &lt;\/div&gt;\n    );\n  }\n}\n\nexport default App;<\/code><\/pre>\n<p>This example code is basic React <code>app.js<\/code> code which is a bit scary at the beginning. But if we look at more carefully it is React class component.<\/p>\n<p>Lets look at what is going here from JS perspective. There is <code>import<\/code> statement (at the beginning) and <code>export<\/code> statement (at the end). There is <code>Class<\/code> statement (line 6), <code>render()<\/code> class method (line 7) and class inheritance <code>extends<\/code> (line 6). Then there is React syntax <a href=\"https:\/\/reactjs.org\/docs\/introducing-jsx.html\" target=\"_blank\" rel=\"noopener\">JSX<\/a> (lines: 9-17) as well.<\/p>\n<h5>Skill Status<\/h5>\n<p>In the above example, there is lot of typical <a href=\"https:\/\/reactjs.org\/docs\/glossary.html\" target=\"_blank\" rel=\"noopener\">React glossary of terms<\/a>, and their understanding is critical for developing developing any react application. However, as suggested by <a href=\"https:\/\/www.robinwieruch.de\/about\/\" target=\"_blank\" rel=\"noopener\">Robin Wieruch<\/a>, react is JS \u2013 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Functions\" target=\"_blank\" rel=\"noopener\">functions<\/a>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Classes\" target=\"_blank\" rel=\"noopener\">classes<\/a> and <code>&lt;a href=&quot;https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;array.map()&lt;\/a&gt;<\/code> etc.<\/p>\n<h5>React Learning approach<\/h5>\n<p>Because I learn better by learning by doing, I plan to start working with simple react projects at the same time I plan to go back and strengthen JS fundamentals (sort of reverse engineering) through the following books:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.amazon.com\/Understanding-ECMAScript-Definitive-JavaScript-Developers\/dp\/1593277571\/ref=pd_bxgy_14_3?_encoding=UTF8&amp;pd_rd_i=1593277571&amp;pd_rd_r=d4706cba-df52-11e8-b8c2-271c112ae42d&amp;pd_rd_w=pIC8u&amp;pd_rd_wg=7sZsz&amp;pf_rd_i=desktop-dp-sims&amp;pf_rd_m=ATVPDKIKX0DER&amp;pf_rd_p=6725dbd6-9917-451d-beba-16af7874e407&amp;pf_rd_r=K1K1G0AABVYC7WHCP77Q&amp;pf_rd_s=desktop-dp-sims&amp;pf_rd_t=40701&amp;psc=1&amp;refRID=K1K1G0AABVYC7WHCP77Q\" target=\"_blank\" rel=\"noopener\">Understanding ECMAScript 6<\/a> \u2013 The Definitive Guide for JavaScript Developers. Nicolas C. Zakas.<\/li>\n<li><a href=\"https:\/\/www.amazon.com\/Learning-React-Hands-Building-Applications\/dp\/013484355X\/ref=sr_1_1?s=books&amp;ie=UTF8&amp;qid=1541240809&amp;sr=1-1&amp;keywords=kirupa\" target=\"_blank\" rel=\"noopener\">Learning React<\/a> \u2013 A Hands-on Guide to Building Web Applications Using React and Redux. Kirupa Chinnathambi.<\/li>\n<li>T<a href=\"https:\/\/www.amazon.com\/Road-learn-React-pragmatic-React-js\/dp\/172004399X\/ref=tmm_pap_swatch_0?_encoding=UTF8&amp;qid=&amp;sr=\" target=\"_blank\" rel=\"noopener\">he Road to Learn React<\/a>. Robin Wieruch.<\/li>\n<\/ul>\n<h6>Posts Series:<\/h6>\n<ol>\n<li><a href=\"https:\/\/tinjurewp.com\/jsblog\/working-with-functions-and-array-map-method-in-reactjs\/\" target=\"_blank\" rel=\"noopener\">Array.Map(), Filter() &amp; Reduce() in ReactJS<\/a><\/li>\n<li>Use of JS Class &amp; Arrow Function In ReactJs App<\/li>\n<li>Use of Switch and Enums Operators in ReactJS<\/li>\n<\/ol>\n<h6>Useful Resources and Links<\/h6>\n<p>While preparing this post, I have referred the following references extensively. Please to refer original posts for more detailed information.<\/p>\n<ul>\n<li><a href=\"https:\/\/www.robinwieruch.de\/javascript-fundamentals-react-requirements\/\" target=\"_blank\" rel=\"noopener\">JavaScript fundamentals before learning React<\/a> | <a href=\"https:\/\/www.robinwieruch.de\/\" target=\"_blank\" rel=\"noopener\">www.robinwieruch.de<\/a><\/li>\n<li><a href=\"https:\/\/www.robinwieruch.de\/tips-to-learn-react-redux\/\" target=\"_blank\" rel=\"noopener\">Tips to learn React + Redux in 2018<\/a> | <a href=\"https:\/\/www.robinwieruch.de\/\" target=\"_blank\" rel=\"noopener\">www.robinwieruch.de<\/a><\/li>\n<li><a href=\"https:\/\/medium.com\/dev-bits\/a-perfect-guide-for-cracking-a-javascript-interview-a-developers-perspective-23a5c0fa4d0d\" target=\"_blank\" rel=\"noopener\">A perfect guide for cracking a JavaScript interview (A developer\u2019s perspective)<\/a> | <a href=\"https:\/\/medium.com\/dev-bits\" target=\"_blank\" rel=\"noopener\">DEV.BITS()<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Note: This post is work-in-progress learning-note and still in active development and updated regularly. I have been deep diving into learning JavaScript (JS) throughout 2018 but with my only couple of daily learning hours, progress is frustratingly slow. Nevertheless, I feel that I have made some progress and here are links to first, second and [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[39,5],"tags":[],"class_list":["post-2534","post","type-post","status-publish","format-standard","hentry","category-javascript-progress","category-reactjs"],"_links":{"self":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts\/2534","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/comments?post=2534"}],"version-history":[{"count":0,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts\/2534\/revisions"}],"wp:attachment":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/media?parent=2534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/categories?post=2534"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/tags?post=2534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}