Day 267: React and Node.js

All right, my goal is to start looking for a job by the end of August, so I can access the boot camp's resources during my job search.  If I wait until after the boot camp is finished, then I won't have the same network available to me.  So, In order to do that, I plan to put in at least 4 hours of React study per day (Monday through Friday), from 10 a.m. to 2 p.m.  I can study more if I want, but those hours are exclusively devoted to React.  I will also squeeze in more Node.js study time, but that will be outside of the React time (unless the React project requires some Node work, of course).

Because of this new study plan, I'll be going back to blogging more regularly.

I am noticing that many React jobs pair React with Node.js on the back end, so that's something to keep in mind.

All right, so far today I've introduced myself in the slack channel for the tutorial I'm taking and I've also joined the React Discuss forum/message board.  Both those actions are part of diving into the React community.  

Okay, now I've gone ahead and organized my bookmarks for the GitHub repos for the course, the slack channel, and the React Discuss forum/message board in a way that makes them easy to access on a day to day basis.  I also renamed several of the bookmarks, so it's easier to remember what they are.

So we went over imperative versus declarative code.  Imperative is when we tell the computer how to do something, explicitly, like with a for loop, for example, and declarative is when we use things like .reduce to tell the computer what to do, and it already knows how to do it because of built in functions, for example.  

The teacher says declarative code is more readable and we should strive to code in that manner.  One example of the benefits of declarative code is that we don't have to keep track of state as much as with imperative code, because the functions take care of (abstract away) some of that.

React is declarative, for the most part.  Ok, I'm saving this:

$(this).toggleClass('addHighlight');

Will toggle the class, as in, if it's on, it'll turn it off, if it's off, it'll turn it on.  We used that in the video, and I've probably used it before, but I thought I'd save it anyhow.

This was the full code, and it works:

$(document).ready(function() {
     $('#theId').click(function() {
          $(this).toggleClass("highlight");
          $(this).text() === 'Add Highlight'
               ? $(this).text('Remove Highlight')
               : $(this).text('Add Highlight')
     });

});  //  Closes jQuery wrapper

That's cool.  So, this is the react version of it (from the tutorial, but I'm not sure if the first word should be capitalized or not, in the tutorial, he does in one part, but not in another, so, to be continued...):

<theId
     onToggleHighlight={this.handToggleHighlight}
     highlight={this.state.highlight}>
          {this.state.buttonText}
</theId>

So that's React...again, "theId" may or may not need to be capitalized, the example isn't clear, but still, this is great!

jQuery takes the state out of the DOM and puts it into the React component (at least in the first example, anyhow).

The argument that React is declarative comes mostly from it's components, because the code above would be calling this:

this.setState({
     highlight: !this.state.highlight,
     buttonText: this.state.buttonText === 'Add Highlight'
          ? 'Remove Highlight'
          : 'Add Highlight'
})

All right.  When programming in React, we need to think of the idea of breaking everything (every element on the page) down into a component.  These components have elements nested within them, just like HTML.

React applications are basically built out of a bunch of React components.

A lot of react is just JavaScript, and it uses things like .map.  So in this course, I'm covering:

React, 
React Router, 
Webpack, 
Babel, and 
Axios.

SUMMARY OF CODING SKILLS 

Books:                                                                                               Status
"Head First HTML and CSS," by E. Robson & E. Freeman                      Complete

"A Smarter Way to Learn JavaScript," by Mark Myers                          Complete

"HTML and CSS," by Jon Duckett                                                        Complete

"JavaScript and JQuery," by Jon Duckett                                            Complete

Team Treehouse (Front End Web Dev Track Complete):                    Status

How to Make a Website                                                                     Complete

HTML                                                                                                Complete

HTML Forms                                                                                      Complete

HTML Tables                                                                                     Complete

HTML Video and Audio                                                                       Complete

CSS Foundations                                                                                Complete

CSS Basics                                                                                         Complete

CSS Layout Techniques                                                                      Complete

CSS Layout Basics                                                                              Complete

CSS Selectors                                                                                     Complete

Responsive Layouts                                                                            Complete

CSS Flexbox Layout                                                                            Complete
Framework Basics (Bootstrap and Foundation)                                    Complete

Git Basics                                                                                          Complete

Console Foundations                                                                          Complete

Introduction to Programming                                                              Complete

JavaScript Basics                                                                               Complete

JavaScript Loops, Arrays, & Objects                                                   Complete

AJAX Basics                                                                                       Complete

JQuery Basics                                                                                    Complete

Interactive Web Pages With JavaScript                                               Complete

Object-Oriented JavaScript                                                                Complete 

Accessibility                                                                                      Complete

Website Optimization                                                                        Complete

Front End Performance Optimization                                                  Complete

Aesthetic Foundations                                                                        Complete                 

Design Foundations                                                                            Complete  

Adobe Photoshop Foundations                                                            Complete

Adobe Illustrator Foundations                                                      66% Complete

Other Courses:                                                                                     Status

HTML and CSS (Codecademy)                                                               Complete

Introduction to Web Dev (The Odin Project)                                         Complete

Web Dev 101 (The Odin Project)                                                    33% Complete

Free Code Camp (FCC)                                                                           Status

1. Get Started with Free Code Camp                                                     Complete

2. HTML5 and CSS                                                                                 Complete

3. Responsive Design with Bootstrap                                                      Complete

4. Gear up for Success                                                                          Complete
5. jQuery                                                                                             Complete
6. Basic Front End Development Projects                                              Complete
7. Basic JavaScript                                                                                Complete
8. Object Oriented and Functional Programming                                    Complete
9. Basic Algorithm Scripting                                                                   Complete
10. JSON API's and Ajax                                                                         Complete
11. Intermediate Front End Development Projects                                  Complete

12. Intermediate Algorithm Scripting                                                     Complete

13. Advanced Front End Development Projects                                       Complete

14. Claim Your Front End Development Certificate                              Complete

The Coding Boot Camp at UT Austin                                              Status (starts 4/19/2016)
Week 1-6: Mastering the Browser (HTML, CSS, JavaScript, JQuery)          Complete

Week 7-10: API & JSON (RESTful API"s, parsing JSON, AJAX)                    Complete

Week 11-14: Server Side (Node.js, MySQL, MongoDB)                             In Progress

Week 15-18: PHP (WordPress, CodeIgniter, Laravel) 

Week 18-21: Full Stack Coding
Week 22-24: Final Project


My Web Dev Portfolio: www.adamcamacho.com
CodePen Projects: http://codepen.io/Adancode/

GitHub Projects: https://github.com/Adancode

LinkedIn Profile: https://www.linkedin.com/in/adamcamacho1
Team Treehouse Profile: https://teamtreehouse.com/adamcamacho
Free Code Camp Profile: http://www.freecodecamp.com/adancode

Hours Spent Coding During This Blog Entry: 4

Total Hours Coding: 1,404