Day 316: React

All right, I've got today, tomorrow, and the first part of Tuesday to dive deep into either React and the MERN stack or PHP/Laravel.  I could go either way, as I'm open to learning PHP, and Laravel looks really powerful, but at the moment, I decided to dive deeper into React and the MERN stack the goal being to get myself up to "employable" level in that stack, and also, to become pretty good at at least once stack before I start diving into a completely new stack.

I figure if I can get several MERN stack projects up (MySQL is cool too, I like both MongoDB and MySQL), I'll be in a strong position to start applying to Jr. Dev positions.

So, first on the agenda for today is a Team Treehouse course on React.  It's supposed to take 183 min (about three hours), but we'll see, the estimated course completion times on Treehouse are sometimes very optimistic.

Now, I've already completed one React project, but I want to grasp React at a very high level, so I'm starting from the basics today, I'm not afraid of putting in time learning the fundamentals of anything!  :)

Ok, I just had an issue with the React tutorial, the tutorial wasn’t using a server and the page would render on Firefox, but not on Chrome due to the CORS error, so I asked in the forum about that and a fellow said that Chrome is more finicky than Firefox on that, so I should set up a local server and run it that way.  Before the boot camp, I would have been like, “Set up a local server with react-router?  Huh?”  Now, I was like…it’ll be just a few minutes…got it up and running using react-router and all those dependencies.  Moving along.

Not going to lie, that feels pretty sweet.  :)

That said, one of the forum members said, "Adam, using React Router to set this project up is like using a bazooka to kill an ant."  Hahaha, he's right, and as a minimalist, I normally avoid doing things like that, but I just wanted to be able to do the course and happened to get that done in a few minutes.  He suggested I download an npm package, http-server, which, after being installed globally (you can do that by entering npm install http-server -g into the command line) allows you to run a server with this simple command (while in your project's root directory):

hs .

That's it.  It worked, and it's great.

You can find the package here if you want to check it out: https://www.npmjs.com/package/http-server

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)                              Complete

Week 15-18: Frameworks (React, React Native)                                      Complete

Week 18-21: Full Stack Coding                                                                Complete
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: 6

Total Hours Coding: 1,717