\ No newline at end of file
diff --git a/images/reactjs_component_lifecycle.jpeg b/images/reactjs_component_lifecycle.jpeg
new file mode 100644
index 0000000..58a7df6
Binary files /dev/null and b/images/reactjs_component_lifecycle.jpeg differ
diff --git a/images/what-is-webpack.png b/images/what-is-webpack.png
new file mode 100644
index 0000000..519ed22
Binary files /dev/null and b/images/what-is-webpack.png differ
diff --git a/lesson 13 - React Part1.md b/lesson 13 - React Part1.md
index 7c0f8b9..75898dc 100644
--- a/lesson 13 - React Part1.md
+++ b/lesson 13 - React Part1.md
@@ -1,4 +1,4 @@
-# Lesson 14 - React
+# Lesson 13 - React
## Recap & Intro
- We've come a long way! We've learned
@@ -17,7 +17,7 @@
- Simple, powerful, and composable
## What React Isn't
-- React is not a web framework (not tied to html/css).
+- React is not a web framework (not tied to html/css).
- React isn't a full fledged application framework
- React is not Flux or Redux
@@ -73,7 +73,7 @@ Like we said before, JSX isn't really HTML. Because it lives in the same context
- All tags have to be closed. `` for example, has to include a closing tag ``.
## Exercise 1: Rendering a Simple Component
-Let's create our first component!
+Let's create our first component!
1. Clone the boilerplate project from `git@github.com:ttsJavaScriptApps/webpack-boilerplate.git`
2. In index.jsx, create a component class called `MessageInput` that renders:
@@ -85,7 +85,7 @@ Let's create our first component!
## Making our JSX Dynamic
Let's take a deeper look at the render method. This is essentially the equivalant of our view template in other frameworks (ejs, handlebars, mustache, jade, haml, etc.).
-The basic functionality needed in any templating language is
+The basic functionality needed in any templating language is
1. Token Replacement
2. Conditions
@@ -103,7 +103,7 @@ class HelloMessage extends React.Component {
constructor() {
super(); //needed for inheritance
-
+
//Define an intial state object
this.state = {
message : 'Hello World'
@@ -152,13 +152,13 @@ Often times we want to render one thing in one case, and something else in anoth
// this.state = { person : 'Matt'};
render() {
-
+
//Figure out the elements in advance
if(this.state.person)
message = "Hello " + this.state.person;
else
message = "I'm all alone... and sad";
-
+
return (
{message}
);
@@ -189,12 +189,12 @@ Sometimes you want to render the same elements repeatedly for every item in an a
```javascript
//this.state = { studentNames: ['Matt', 'Katy', 'Mariel', 'Lee'] }
-render() {
+render() {
//Figure out the elements in advance
var students = this.state.studentNames.map(function(name){
return (
{name}
)
})
-
+
return (
{students}
);
@@ -211,12 +211,12 @@ One of the most common dynamic elements is the list of classes an element has ap
render() {
var classes = 'item'
-
+
if(isActive) {
classes += 'active';
}
-
-
+
+
return (
);
@@ -233,8 +233,8 @@ render() {
var classes = classNames({
'item' : true,
'active' : isActive
- })
-
+ })
+
return (
);
@@ -251,7 +251,7 @@ render() {
color: 'red',
textDecoration: 'underline'
}
-
+
return (
);
@@ -270,7 +270,7 @@ Let's add some logic to our little component.
5. Only show the most recent 3 messages.
6. If there are more than 3 messages, show a "load more" button
-## Homework
+## Homework
- Start Reading the [React Documentation](https://facebook.github.io/react/docs/getting-started.html)
- Complete the first 3 challenges (stop at Step 2 - Part 3) of [Thinking in React](https://github.com/asbjornenge/thinking-in-react) module
diff --git a/lesson 16 - React Part 4.md b/lesson 16 - React Part 4.md
new file mode 100644
index 0000000..3512c07
--- /dev/null
+++ b/lesson 16 - React Part 4.md
@@ -0,0 +1,542 @@
+# React Component LifeCycle & React Router
+
+
+## Recap & Intro
+- Last week focused on:
+ - State
+ - Props
+ - Component Composition
+- Tonight we'll be discussing React LifeCycle and React Router
+
+
+## Agenda
+
+- Cover the full spectrum of LifeCycle events in React
+- Discuss how to render different views (in a single page application)
+
+## Lifecycle events
+
+So, what are Component LifeCycle Events? While it sounds scary, the concept is actually quite simple.
+
+Below are the 4 stages of the React LifeCycle:
+
+
+
+Before we dive in though, let's review props and state
+
+### Props vs State
+
+#### Review of Props and State
+
+If a Component needs to alter one of its attributes at some point in time, that attribute should be part of its state, otherwise it should just be a prop for that Component.
+
+**props**:
+
+props (short for properties) are a Component's configuration, its options if you may. They are received from above and immutable as far as the Component receiving them is concerned.
+
+A Component cannot change its props, but it is responsible for putting together the props of its child Components.
+
+**state**:
+
+The state starts with a default value when a Component mounts and then suffers from mutations in time (mostly generated from user events). It's a serializable* representation of one point in time—a snapshot.
+
+A Component manages its own state internally, but—besides setting an initial state—has no business fiddling with the state of its children. You could say the state is private.
+
+## Component Initialization
+
+You are familiar with the instantiation of a component.
+
+```javascript
+class HelloMessage extends React.Component {
+ constructor(){
+ super();
+ }
+
+ render(){
+ return(
+
Hello World
+ )
+ }
+}
+```
+
+When a component is instantiated, the `render()` method - along with 4 other methods - are called.
+
+Those methods are:
+
+- `getInitialState()` ***this has been deprecated in favor of `this.state` in your constructor method***
+- `getDefaultProps()` ***(also deprecated in favor of ES6 instance methods)***
+- `componentWillMount()`
+- `componentDidMount()`
+
+Obviously, you understand render, so lets dig into the other methods
+
+### this.state = {}
+
+As stated above, `getInitialState` has been replaced with `this.state`, however, I believe that looking at the `getInitialState` syntax will help bring a bit of clarity to the LifeCycle
+
+Let's create a basic counter that, when clicked, will count up
+
+##### with: getInitialState
+```javascript
+var Counter = React.createClass({
+ getInitialState: function() {
+ console.log('getInitialState just ran!');
+ return {count: 0};
+ },
+
+ countUp: function() {
+ this.setState({count: this.state.count + 1});
+ },
+
+ render: function() {
+ return (
+
+
{this.state.count}
+
+ )
+ }
+});
+
+let mountPoint = document.getElementById("root");
+ReactDOM.render(, mountPoint)
+```
+
+`getInitialState` fires as soon as the component is instantiated. However, it does not run again throughout the life of the component.
+
+
+let's throw a couple of `console.log()`'s in to further illustrate the point.
+
+```javascript
+var Counter = React.createClass({
+ getInitialState: function() {
+ console.log('getInitialState just ran!')
+ return {count: 0};
+ },
+ ...
+ render: function() {
+ console.log('render just ran!');
+ return (
+ ...
+ )
+ }
+});
+```
+
+In an effort to make React line up more with ES2015 (and future versions of JavaScript) `getInitialState` has been replaced with simply declaring `this.state =` in your constructor method.
+
+
+##### with: this.state
+```javascript
+class Counter extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {count: 0};
+ console.log('state has been intialized!');
+ }
+
+ countUp() {
+ this.setState({count: this.state.count + 1});
+ }
+
+ render() {
+ console.log('render just ran!');
+ return (
+
+
Clicks: {this.state.count}
+
+ );
+ }
+}
+
+let mountPoint = document.getElementById("root");
+ReactDOM.render(, mountPoint)
+```
+
+### defaultProps
+
+As stated in the intro, `defaultProps` was formerly known as `getDefaultProps`
+
+`defaultProps` does exactly what you would think... it defines default props being made available to the component.
+
+Assigning default props is as simple as declaring `YourClass.defaultProps` and passing an object.
+
+```javascript
+class Counter extends React.Component {
+ constructor(props) {
+ super(props);
+ console.log('State has been intialized!');
+ this.state = {count: this.props.initialCount};
+ console.log('Default Props assigned!');
+ }
+ countUp() {
+ this.setState({count: this.state.count + 1});
+ }
+ render() {
+ console.log('render just ran!');
+ return (
+
+
Clicks: {this.state.count}
+
+ );
+ }
+}
+
+Counter.propTypes = { initialCount: React.PropTypes.number };
+Counter.defaultProps = { initialCount: 0 };
+```
+
+`defaultProps` and `propTypes` are considered properties on the constructor method. Which is why we can pass props to `super()`
+
+### componentWillMount
+
+`componentWillMount` is called *before* `render` is executed
+
+This is the part of the lifecycle where props and state values are interpreted to create the correct output. Meaning that state/props should should be modified inside this function.
+
+According to the [React Documentation](https://facebook.github.io/react/docs/component-specs.html):
+> If you call `setState` within this method, `render()` will see the updated state and will be executed only once despite the state change.
+
+```javascript
+class Counter extends React.Component {
+ ...
+
+ componentWillMount(){
+ console.log('componentWillMount just ran!');
+ }
+ render() {
+ ...
+ }
+}
+```
+
+### componentDidMount
+
+Immediately after the `render` method has been invoked, the `componentDidMount` function is called.
+
+`componentDidMount` is where you should place your DOM interactions and AJAX calls.
+
+```javascript
+ class Counter extends React.Component {
+
+ ...
+
+ componentDidMount(){
+ console.log('componentDidMount just ran!');
+ setTimeout(function(){
+ console.log('running the setTimeout method!');
+ }, 2000);
+ }
+
+ render() {
+ ...
+ }
+}
+```
+
+This summarizes the LifeCycle events being triggered during Component Instantiation.
+
+## setState and props Changed
+
+`setState` triggers the state change LifeCycle events, while updates to props triggers the `componentWillReceiveProps` method
+
+Updates to **state** and **props** contain 3 additional LifeCycle methods:
+- `shouldComponentUpdate`
+- `componentWillUpdate`
+- `componentDidUpdate`
+
+### shouldComponentUpdate
+
+`shouldComponentUpdate` is **boolean** method that isalways called before `render`.
+
+The purpose of `shouldComponentUpdate` is to determine if re-rendering is needed.
+
+`shouldComponentUpdate` takes 2 arguments:
+
+- nextProps
+- nextState
+
+These arguments are used to detect when re-rendering is needed.
+
+```javascript
+class Counter extends React.Component {
+
+ ...
+
+ shouldComponentUpdate(nextProps, nextState){
+ console.log(`shouldComponentUpdate is running!
+ nextState: ${JSON.stringify(nextState)}`);
+
+ return true;
+ }
+ render() {
+ ...
+ }
+}
+```
+*note: if the `shouldComponentUpdate` method is invoked, you must return a boolean value*
+
+### componentWillUpdate
+
+As soon as `shouldComponentUpdate` returns `true`, `componentWillUpdate` is invoked. In many ways, you could consider this a cousin to the `componentWillMount` method.
+
+Calls to to trigger state changes, (ie: `this.setState`) are not allowed in `componentWillUpdate`.
+
+
+Think of `componentWillUpdate` as a way to prepare for upcoming changes to state.
+
+```javascript
+class Counter extends React.Component {
+ ...
+
+ componentWillUpdate(nextProps, nextState){
+ console.log(`preparing for the upcoming state change!
+ this.state: ${JSON.stringify(this.state)}
+ nextState: ${JSON.stringify(nextState)}`);
+}
+
+ render() {
+ ...
+ }
+}
+```
+
+### componentDidUpdate
+
+At this point, you should be able to pretty clearly guess the behavior of `componentDidUpdate`.
+
+The functionality of `componentDidUpdate` is very similar to `componentDidMount`(with the exception that `componentDidUpdate` is called each time the component is re-rendered). Any interactions with the DOM (after re-rendering) should take place within this method
+
+Additionally, you'll notice that `prevProps` and `prevState` are passed as arguments
+
+```javascript
+class Counter extends React.Component {
+ ...
+
+componentDidUpdate(prevProps, prevState) {
+ console.log('componentDidUpdate just ran!');
+}
+
+ render() {
+ ...
+ }
+}
+```
+
+### componentWillReceiveProps
+
+`componentWillReceiveProps` runs prior to the above state change methods and is only invoked when changes are made to props.
+
+Before we go any further, let's change up the code and try out a new example with multiple components.
+
+#### index.js
+```javascript
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+writeToScreen('Initial', 'primary');
+
+class Counter extends React.Component{
+ constructor(props){
+ super(props);
+ writeToScreen('GetInitialState', 'info');
+ writeToScreen('GetDefaultProps', 'info');
+ this.state = {
+ foo : 1
+ };
+ }
+
+ componentWillMount() {
+ writeToScreen('ComponentWillMount', 'warning');
+ }
+
+ componentDidMount() {
+ writeToScreen('ComponentDidMount', 'warning');
+ }
+
+ shouldComponentUpdate() {
+ writeToScreen('ShouldComponentUpdate', 'info');
+ return true;
+ }
+
+ componentWillReceiveProps(nextProps) {
+ writeToScreen('ComponentWillRecieveProps', 'warning');
+ }
+
+ componentWillUpdate() {
+ writeToScreen('ComponentWillUpdate', 'warning');
+ }
+
+ componentDidUpdate() {
+ writeToScreen('ComponentDidUpdate', 'warning');
+ }
+
+ componentWillUnmount() {
+ writeToScreen('componentWillUnmount', 'danger');
+ }
+
+updateState() {
+ writeToScreen('Updating State', 'primary');
+ this.setState({foo: this.state.foo + 1});
+}
+
+render(){
+ writeToScreen('Render', 'success');
+ return (
+
';
+}
+
+let mountPoint = document.getElementById("root");
+ReactDOM.render(, mountPoint)
+```
+
+#### index.html
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+*At this point, it would be better to switch to the React Dev Tools to inspect the state and props of each component*
+
+Above, we are calling the `componentWillReceiveProps` method each time we click the Update Props button.
+
+This method runs and each subsequent state change method is invoked afterwards.
+
+### componentWillUnmount
+
+Again, you should have a pretty clear sense of what `componentWillUnmount` is going to accomplish.
+
+This method removes the component from the DOM.
+
+In your `` component, add the following:
+
+```javascript
+class App extends React.Component{
+ constructor(){
+ ...
+ }
+ unmount() {
+ writeToScreen('Unmounting', 'primary');
+ ReactDOM.unmountComponentAtNode(document.getElementById('root'));
+ }
+
+ updateProps() {
+ ...
+ }
+
+ render() {
+ return (
+
+
+
+
+
+
+ )
+ }
+}
+```
+
+For fun, we can also add the following code to our `App` component:
+
+```javascript
+ componentDidUpdate(prevProps, prevState) {
+ setInterval(this.updateProps.bind(this),500);
+ }
+```
+
+This will show that our app will continue to make calls even after the app is no longer mounted. While it serves no *real* purpose, this should show you the power of Mounting/UnMounting Components.
+
+
+
+Now that you've had a chance to review the React LifeCycle, let's look at a more detailed image:
+
+
+
+
+## Homework
+
+- Complete the [ReactJS Koans](https://github.com/arkency/reactjs_koans) exercies
+- Read the following article on [shouldComponentUpdate](http://buildwithreact.com/article/optimizing-with-shouldcomponentupdate)
diff --git a/lesson 17 - React Part 5.md b/lesson 17 - React Part 5.md
new file mode 100644
index 0000000..3be56fe
--- /dev/null
+++ b/lesson 17 - React Part 5.md
@@ -0,0 +1,231 @@
+## React Router
+
+
+## Intro & Recap
+
+- Last class, we discussed the React Component LifeCycle.
+- This includes:
+ - Component Instantiation
+ - Updates to State
+ - Updates to Props
+ - Unmounting Components
+- Which leads us into tonight's topic: React Router
+
+## Agenda
+
+- Understand the purpose of React Router
+- When to use React Router
+- How to implement React Router
+
+## The Purpose of React Router
+
+Due to the fact that React is a library (not a complete framework), it does not aim to solve all an application's needs.
+
+While React does a great job at creating components and providing a system for managing state (in Single Page Applications, you still need a way of changing URL's and rendering new components (based on User Interaction)
+
+The best solution for this is the React Router Library.
+
+According to the React Router Documentation:
+
+> React Router is a powerful routing library built on top of React that helps you add new screens and flows to your application incredibly quickly, all while keeping the URL in sync with what's being displayed on the page.
+
+In short, React Router takes care of rendering components for us.
+
+Let's dig in:
+
+### Install and Import React Router
+
+You'll need to install React Router through NPM
+
+`npm install react-router --save-dev`
+
+Next, you'll want to import the appropriate variables.
+
+```javascript
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Router, Link, Route } from 'react-router';
+
+```
+
+That's it for setup!
+
+
+### Component Configuration
+
+We're going to utilize 3 components
+
+Starting with a NavBar component
+
+```javascript
+class NavBar extends React.Component{
+ render(){
+ return(
+