{"id":1747,"date":"2018-12-17T15:40:06","date_gmt":"2018-12-17T15:40:06","guid":{"rendered":"http:\/\/learncode.tinjurewp.com\/?p=1747"},"modified":"2019-10-05T23:39:30","modified_gmt":"2019-10-05T23:39:30","slug":"reactjs-javascript-learning-roadmap-for-2019","status":"publish","type":"post","link":"https:\/\/learncode.tinjurewp.com\/reactjs-javascript-learning-roadmap-for-2019\/","title":{"rendered":"ReactJs &#038; JavaScript Learning Roadmap for 2019"},"content":{"rendered":"<p class=\"note icon-note\">Note: This post is part of my JavaScript (JS) and ReactJs learning roadmap series. This post is work-in-progress and will be updated regularly.<\/p>\n<p>In a previous post <a href=\"https:\/\/tinjure.com\/jsblog\/javascript-fundamentals-knowledge-react-learning\/\" target=\"_blank\" rel=\"noopener noreferrer\">JavaScript Fundamentals Knowledge &amp; React Learning<\/a>, I reviewed my JavaScript &amp; React learning. In the post I wrote my React Learning approach as (i) learning by doing and (ii) strengthen JS fundamentals by reverse engineering.<\/p>\n<p>Related Post: <a href=\"https:\/\/tinjure.com\/jsblog\/javascript-fundamentals-knowledge-react-learning\/\" target=\"_blank\" rel=\"noopener noreferrer\">Fundamentals Knowledge &amp; React Learning<\/a><\/p>\n<h4>Re-evaluating React Learning approach<\/h4>\n<p>As I wrote in my <a href=\"https:\/\/tinjure.com\/jsblog\/javascript-fundamentals-knowledge-react-learning\/\" target=\"_blank\" rel=\"noopener noreferrer\">previous<\/a> post, I seem to better learn through projects and power of repetition. I plan to continue learning react through simple react projects and simultaneously strengthening JS fundamentals through the following books, blog tutorials, and learning videos.<\/p>\n<ul>\n<li><a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\" target=\"_blank\" rel=\"noopener noreferrer\">React Main Concept: Learning from React Documentation<\/a>. During the 2018 fourth quarter, I completed chapters 1-4 and 8. I plan to continue rest of the topics starting <a href=\"https:\/\/reactjs.org\/docs\/state-and-lifecycle.html\" target=\"_blank\" rel=\"noopener noreferrer\">State and Lifecycle<\/a> to fully understand the react main concepts.<\/li>\n<li><a href=\"https:\/\/www.robinwieruch.de\/about\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Robin Wieruch<\/strong><\/a> and <a href=\"https:\/\/www.kirupa.com\/react\/index.htm\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Kirupa<\/strong><\/a> inspired me all the time through their books ( <a href=\"https:\/\/roadtoreact.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">The Road to Learn React<\/a> &amp; <a href=\"https:\/\/www.amazon.com\/exec\/obidos\/ASIN\/0134546318\/kirupacom\" target=\"_blank\" rel=\"noopener noreferrer\">Learning React<\/a> ).<\/li>\n<li><a href=\"https:\/\/www.lynda.com\/search?q=reactjs+and+eve\" target=\"_blank\" rel=\"noopener noreferrer\">React Learning Tutorial Videos<\/a> from <strong>Lynda<\/strong> library. <em>Eve Percell<\/em>o has some basic React tutorials to understand concepts with practical use case. I will continue to learn from her recent popular react courses <a href=\"https:\/\/www.lynda.com\/React-js-tutorials\/React-js-Essential-Training\/761961-2.html?srchtrk=index%3a1%0alinktypeid%3a2%0aq%3areactjs+and+eve%0apage%3a1%0as%3arelevance%0asa%3atrue%0aproducttypeid%3a2\" target=\"_blank\" rel=\"noopener noreferrer\">React.js Essential Training<\/a>, <a href=\"https:\/\/www.lynda.com\/React-js-tutorials\/Learning-React-js\/645064-2.html?srchtrk=index%3a2%0alinktypeid%3a2%0aq%3areactjs+and+eve%0apage%3a1%0as%3arelevance%0asa%3atrue%0aproducttypeid%3a2\" target=\"_blank\" rel=\"noopener noreferrer\">Learning React.js<\/a> and from other authors.<\/li>\n<\/ul>\n<p><!--more--><\/p>\n<h4>React Learning Roadmap for 2019<\/h4>\n<p>My broad React learning goals include:<\/p>\n<ul>\n<li>Creating React CRUD App<\/li>\n<li>Learning Fetch API &amp; fetch() method<\/li>\n<li>Connecting React App to REST API<\/li>\n<li>React SPA with WordPress REST API<\/li>\n<li>Building React App on the top of WordPress Rest API<\/li>\n<\/ul>\n<p>This section is still work in progress !<\/p>\n<h5>Building React Blog SPA<\/h5>\n<p>The <a href=\"https:\/\/tinjure.com\/jsblog\/creating-a-simple-blog-listing-react-component\/\" target=\"_blank\" rel=\"noopener noreferrer\">React Blog SPA<\/a> project that I have been working as learning project will be a long-term learning react project for 2019 &amp; beyond. As I learn new react features the React Blog site will be updated accordingly. At the end of my Learning React Basics, I plan to have a functional React Blog SPA site with (i) multiple page (views)\u00a0 with nested routing, (ii) CRUD post list. Its design will evolve as I make progress with my learning progress.<\/p>\n<h5>React Learning Resources<\/h5>\n<p>The following <em>work-in-progress<\/em> list of learning resources was prepared after reviewing the listed post or articles and considered useful for my current learning goals.<\/p>\n<h6>REST API<\/h6>\n<ul>\n<li><a href=\"http:\/\/www.smashingmagazine.com\/2018\/01\/understanding-using-rest-api\/\" target=\"_blank\" rel=\"noopener noreferrer\">Understanding And Using REST APIs<\/a> \u2013 Zell Liew | Smashing Magazine<\/li>\n<li><a href=\"https:\/\/www.andreasreiterer.at\/connect-react-app-rest-api\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to Connect your React App to a REST API<\/a> | Andreas Reiterer<\/li>\n<li><a href=\"https:\/\/developer.wordpress.org\/rest-api\/\" target=\"_blank\" rel=\"noopener noreferrer\">REST API Handbook<\/a> | <a href=\"https:\/\/developer.wordpress.org\/rest-api\/\" target=\"_blank\" rel=\"noopener noreferrer\">developer.wordpress.org\/rest-api\/<\/a><\/li>\n<li><a href=\"https:\/\/code.tutsplus.com\/tutorials\/code-your-first-api-with-nodejs-and-express-understanding-rest-apis--cms-31697\" target=\"_blank\" rel=\"noopener noreferrer\">Code Your First API With Node.js and Express: Understanding REST APIs<\/a> \u2013 Tania Rascia | tutsPlus<\/li>\n<\/ul>\n<h6>Fetch API<\/h6>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/using-fetch\/\" target=\"_blank\" rel=\"noopener noreferrer\">Using Fetch<\/a> \u2013 by Zell Liew | CSS Tricks<\/li>\n<li><a href=\"https:\/\/css-tricks.com\/using-data-in-react-with-the-fetch-api-and-axios\/\" target=\"_blank\" rel=\"noopener noreferrer\">Using data in React with the Fetch API and axios<\/a> \u2013 by Kingsley Silas | CSS Tricks<\/li>\n<li><a href=\"https:\/\/www.robinwieruch.de\/react-fetching-data\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to fetch data in React<\/a> | <a href=\"https:\/\/www.robinwieruch.de\/about\/\" target=\"_blank\" rel=\"noopener noreferrer\">Robin Wieruch<\/a><\/li>\n<\/ul>\n<h6>Axios API<\/h6>\n<ul>\n<li><a href=\"https:\/\/www.andreasreiterer.at\/connect-react-app-rest-api\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to Connect your React App to a REST API<\/a> | Andreas Reiterer<\/li>\n<li><a href=\"https:\/\/dzone.com\/articles\/api-integration-with-axios-in-react\" target=\"_blank\" rel=\"noopener noreferrer\">API Integration with Axios in React<\/a> \u2013 by Mrityunjay Karn\u00a0 | <a href=\"https:\/\/dzone.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">DZone<\/a><\/li>\n<li><a href=\"https:\/\/code.tutsplus.com\/tutorials\/introduction-to-api-calls-with-react-and-axios--cms-21027\" target=\"_blank\" rel=\"noopener noreferrer\">Introduction to API Calls With React and Axios<\/a> \u2013 Dogacan Bilgili | tutsPlus<\/li>\n<\/ul>\n<h6>React SPAs &amp; WordPress REST API<\/h6>\n<ul>\n<li><a href=\"https:\/\/developer.wordpress.org\/rest-api\/\" target=\"_blank\" rel=\"noopener noreferrer\">REST API Handbook<\/a> | <a href=\"https:\/\/developer.wordpress.org\/rest-api\/\" target=\"_blank\" rel=\"noopener noreferrer\">developer.wordpress.org\/rest-api\/<\/a><\/li>\n<li><a href=\"https:\/\/snipcart.com\/blog\/reactjs-wordpress-rest-api-example\" target=\"_blank\" rel=\"noopener noreferrer\">Tying a React SPA to WordPress as a Backend [w\/ WP REST API]<\/a> | Snipcart.com<\/li>\n<li><a href=\"https:\/\/www.ibenic.com\/how-to-create-a-wordpress-widget-with-reactjs-rest-api\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to Create a WordPress Widget with ReactJS and REST API<\/a> | ibenic.com<\/li>\n<li><a href=\"https:\/\/hackernoon.com\/react-js-with-wordpress-as-a-backend-wp-rest-api-example-127639a6cc41\" target=\"_blank\" rel=\"noopener noreferrer\">React.js with WordPress as a Backend: WP REST API Example<\/a> | hackernoon.com<\/li>\n<\/ul>\n<h6><strong>Learning JavaScript Fundamentals<\/strong><\/h6>\n<p><strong>1. ES6 Promise<\/strong>: The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Guide\/Using_promises\" target=\"_blank\" rel=\"noopener noreferrer\">JS Promises<\/a> are important in Web API like <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fetch_API\/Using_Fetch\" target=\"_blank\" rel=\"noopener noreferrer\">Fetch API<\/a> and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Service_Worker_API\/Using_Service_Workers\" target=\"_blank\" rel=\"noopener noreferrer\">Service Workers<\/a>.<\/p>\n<ul>\n<li><a href=\"https:\/\/medium.com\/@th317erd\/javascript-demystifying-promises-b43c746ae35f\" target=\"_blank\" rel=\"noopener noreferrer\">JavaScript \u2013 Demystifying Promises<\/a> \u2013 by <em>Wyatt Greenway<\/em> | Medium<\/li>\n<li><a href=\"https:\/\/flaviocopes.com\/javascript-promises\/\" target=\"_blank\" rel=\"noopener noreferrer\">Understanding JavaScript Promises<\/a> | <a href=\"https:\/\/flaviocopes.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Flavio Copes<\/a><\/li>\n<\/ul>\n<p class=\"note\"><em>Note: This post is also cross-posted in <a href=\"https:\/\/tinjure.com\/jsblog\/reactjs-javascript-learning-roadmap-for-2019\/\" target=\"_blank\" rel=\"noopener noreferrer\">JS Blog<\/a> site.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Note: This post is part of my JavaScript (JS) and ReactJs learning roadmap series. This post is work-in-progress and will be updated regularly. In a previous post JavaScript Fundamentals Knowledge &amp; React Learning, I reviewed my JavaScript &amp; React learning. In the post I wrote my React Learning approach as (i) learning by doing 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":[4,5],"tags":[],"class_list":["post-1747","post","type-post","status-publish","format-standard","hentry","category-javascript","category-reactjs"],"_links":{"self":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts\/1747","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=1747"}],"version-history":[{"count":0,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/posts\/1747\/revisions"}],"wp:attachment":[{"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/media?parent=1747"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/categories?post=1747"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learncode.tinjurewp.com\/wp-json\/wp\/v2\/tags?post=1747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}