biglovisa

///// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld';

ReactDOM.render(<HelloWorld name='Meeka' />, document.getElementById('container')); 


///// HelloWorld.js

biglovisa

Use this gist to write down notes and questions as you read through the lesson plan. https://github.com/turingschool/lesson_plans/blob/master/ruby_04-apis_and_scalability/react_in_theory.markdown

What does React do?

How does React interact with the DOM?

JSX

biglovisa

// Write a recursive function that outputs the range between two positive numbers 
// myFunction(1, 5) #=> [1, 2, 3, 4, 5]
// (5 pts)


// Write a recursive function that outputs the sum of an array of integers 
// myFunction([1, 2, 3, 4, 5, 6]) #=> 21 
// (5 pts)

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 });

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

Wednesday Dec 9, 2015

1507

JavaScript Events (with Meeka)

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

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

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

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

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