{"id":249,"date":"2016-09-21T11:08:23","date_gmt":"2016-09-21T15:08:23","guid":{"rendered":"https:\/\/mberlove.com\/blog\/?p=249"},"modified":"2016-09-21T11:08:23","modified_gmt":"2016-09-21T15:08:23","slug":"learning-reactjs-part-1-steps-takeaways","status":"publish","type":"post","link":"https:\/\/mberlove.com\/blog\/learning-reactjs-part-1-steps-takeaways\/","title":{"rendered":"Learning ReactJS, Part 1– Steps & Takeaways"},"content":{"rendered":"

This past March, I discovered my javascript skills felt out of date. I needed to catch up, so I learned Angular — took an online course, built a couple of minor projects, did some freelance work that used it. It felt good.<\/p>\n

 <\/p>\n

Now they tell me Angular is out, React is in.<\/strong><\/p>\n

Truthfully, I think the endless treadmill of languages and libraries is a bit ridiculous, and I believe strongly that developers (and especially developer managers!) ought to care more about what the project requires than what language, etc, is “in,” but I recognize the need to stay up to date in all one’s skills.<\/p>\n

 <\/p>\n

Therefore — off to battle with ReactJS, via CodeAcademy. Let’s see how it goes.<\/p>\n

 <\/p>\n

1. Compiled javascript? Hm.<\/strong> As a long-time ES5-er, I’m dubious already. I just barely tolerate ES2015 in pure Node. It just doesn’t exactly feel\u00a0<\/em>like javascript. But I guess there are a lot of advantages, such as better class usage, debugging, maintainability…well, we’ll see.<\/p>\n

 <\/p>\n

2. Ok, CodeAcademy is slow.<\/strong> Both in terms of the learning curve and in app connectivity. I hope they’re not powered by React. As long as I’m searching for a new course, I think I’ll let myself get sidetracked and read up on ES2015 to give myself some background<\/a>.<\/p>\n

 <\/p>\n

It’s heady reading, but thorough, and useful, and interesting too, as long as you take the occasional break.<\/p>\n

 <\/p>\n

Likewise to get acquainted with ES2016 and ’17: https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/New_in_JavaScript\/ECMAScript_Next_support_in_Mozilla<\/a><\/p>\n

 <\/p>\n

3. To start learning the topics surrounding React<\/strong>, I’ve found this book: ReactJS Succinctly<\/a> (free!)<\/p>\n

 <\/p>\n

Some takeaways from the book:<\/p>\n

– A f<\/em>ocus on views<\/em>: React focuses on a clean view, letting the developer ignore some of the nitty gritty of the data.<\/p>\n

– Components:<\/em> Like many frameworks, React provides an easy way to create components (this holds true especially if pairing React with JDX).<\/p>\n

– React is not amazingly readable<\/em>. It’s an intentional sacrifice, to enable clean and reusable code.<\/p>\n

– Mixins:<\/em> Not quite the same as in Ruby, but React can add in sections of functional code to reuse.<\/p>\n

\u00a0– React uses native browser javascript events<\/em>, e.g. onClick. I guess you could pair this with jQuery?<\/p>\n

\u00a0– This book has a <\/em>great practical example section<\/em> where you can follow along to build a working game in React. I skipped this for now as I intend to follow up with some practical training courses.<\/p>\n

 <\/p>\n

4. Time to learn React for real.<\/strong> I’ll be starting off with this tutorial from TutorialsPoint<\/a>, because it looks like a good balance of practical and informational.<\/p>\n

– Getting started takes a lot of work<\/em>, but that’s expected for a framework like this. You’ll want Node, npm, babel, React, ReactDOM, and more. Once you get used to it or automate it, it’s no big deal.<\/p>\n

– “React recommends using inline styles.”<\/em> This seems a suspicious departure from reasonable protocol, and I want to look into this later.<\/p>\n

– This tutorial meanders<\/em>, and is not the best for following in code, but it makes decently organized reading to firm concepts in your mind. We’ll back it up later with something a bit more interactive.<\/p>\n

– M<\/em>uch of this is redundant material, having read the book mentioned earlier <\/em>— redundant in a good way, mostly. It’s a lot less content, so the important points get reaffirmed in your mind.<\/p>\n

 <\/p>\n

5. After all that, back at the CodeAcademy React course after all.<\/strong> It’s still slow, annoyingly so, but it’s pretty thorough, and probably worthwhile. The interactivity alone is worthwhile, and of the interactive courses I previewed, this is the most straightforward to dive into.<\/p>\n

 <\/p>\n

\n

 <\/p>\n

\"CodeAcademy<\/a><\/p>\n

 <\/p>\n

After all that, I at least understand many of the fundamentals fairly rigorously. Next up, CodeAcademy’s ReactJS Part II (sigh), and a personal coding project!<\/p>\n

 <\/p>\n

The learning never ends — and that’s wonderful.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

This past March, I discovered my javascript skills felt out of date. I needed to catch up, so I learned Angular — took an online course, built a couple of minor projects, did some freelance work that used it. It […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[118,109,125],"tags":[183,184,119,185,37,182],"class_list":["post-249","post","type-post","status-publish","format-standard","hentry","category-javascript","category-learning","category-programming","tag-ecma","tag-es2015","tag-javascript","tag-jdx","tag-learning","tag-react"],"_links":{"self":[{"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/posts\/249","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/comments?post=249"}],"version-history":[{"count":7,"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/posts\/249\/revisions"}],"predecessor-version":[{"id":261,"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/posts\/249\/revisions\/261"}],"wp:attachment":[{"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/media?parent=249"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/categories?post=249"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/tags?post=249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}