biglovisa

// Annotated Code -- CRUD with Rails-React
// Functions we get from the React framework will be marked with -> R!
// to get the full repo: `$ git clone git@github.com:applegrain/ideabox-react.git` 

// https://facebook.github.io/react/docs/thinking-in-react.html
// Good read to get into the React state of mind 


// Create a new dashboard component.
var Dashboard = React.createClass({

biglovisa

November 30th 2015 1507

• chaining APIs & LoDash
• how/when to use jQuery
• jQuery fundamentals was good to get the basics, but didn't cover when/where to use it

biglovisa

Tuesday December 1 1507

IdeaBox PSA

• http://jsbin.com/nuhuyurami/4/edit?js,output
• underscore.js #template)[http://underscorejs.org/#template
• in application.js, with the asset pipeline, it will first require jQuery and then tree .
  • This means that the Rails asset pipeline will take all your JavaScript and jam it all together into one massive file
  • The compiled file is required in app/views/layouts/application.html.erb and therefore available to you anywhere (whether you like it or not) in your application

biglovisa

2 December 2015

1507

Countdown

• https://github.com/turingschool-examples/countdown

Functions in JavaScript

• https://github.com/mdn/advanced-js-fundamentals-ck/blob/gh-pages/tutorials/02-functions/01-calling-functions.md
• https://github.com/mdn/advanced-js-fundamentals-ck/blob/gh-pages/tutorials/02-functions/02-what-is-this.md

biglovisa

3 December 2015

1507

• Ideabox tutorial
  • https://github.com/stevekinney/idea-box
• Debugging JS
  • https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/shortcuts
  • http://discover-devtools.codeschool.com/
• https://developer.chrome.com/devtools/docs/javascript-debugging

biglovisa

Monday December 7, 2015

1507

Morning challenge

• It starts out with five buttons.
• When you click the first button, it alerts the us that "Button #1" has been clicked.
• The equivalent works for the second, third, fourth, and fifth buttons.
• There is an additional button for adding new buttons.
• When added and subsequently clicked, the sixth button will log that "Button #6" was clicked.

biglovisa

Tuesday December 8, 2015

1507

Homework:

• watch: https://vimeo.com/105955605
• fork and reply: https://gist.github.com/stevekinney/353182d7cd10fb4a5b27

Unit testing JS (with Meeka):

• https://github.com/turingschool/lesson_plans/blob/master/ruby_04-apis_and_scalability/unit_testing_javascript_an_overview.md

biglovisa

Wednesday Dec 9, 2015

1507

JavaScript Events (with Meeka)

• https://github.com/mdn/advanced-js-fundamentals-ck/tree/gh-pages/tutorials/04-events

biglovisa

Monday, 14 December 2015

1507

• Sinon and Stuff
  • [https://github.com/turingschool-examples/spy-vs-spy](example library)
  • Lesson Plan
  • Adding Sinon to game time
  • [Sinon example repo])(https://github.com/turingschool-examples/sinon-and-event-gametime)

biglovisa

//-------------------------------Main (parent) component
var Main = React.createClass({
    // props: name (data)
    // state: counter (data) 
    
    getInitialState: function() {
    	return { counter: 0 };
    },
    handleClick: function() {
    	this.setState({ counter: ++this.state.counter });