React.js tutorial and points to remember about react.js

react.js

It’s important to remember React is “just the V in MVC” or “just the view layer”. React isn’t trying to be a full fledged framework.

a)React.js Fundamentals:

1.Components are the building blocks of React.  You can think of a component as a collection of HTML, CSS, JS, and some internal data specific to that component.
2.JSX — Allows us to write HTML like syntax which gets transformed to lightweight JavaScript objects.
3.Virtual DOM — A JavaScript representation of the actual DOM.
4.React.createClass — The way in which you create a new component.
5.render (method) — What we would like our HTML Template to look like.
6.ReactDOM.render — Renders a React component to a DOM node.
7.state — The internal data store (object) of a component.
8.getInitialState — The way in which you set the initial state of a component.
9.setState — A helper method for altering the state of a component.
10.props — The data which is passed to the child component from the parent component.
11.propTypes — Allows you to control the presence, or types of certain props passed to the child component.
12.getDefaultProps — Allows you to set default props for your component

b)Component LifeCycle:

1.componentWillMount — Fired before the component will mount
2.componentDidMount — Fired after the component mounted
3.componentWillReceiveProps — Fired whenever there is a change to props
4.componentWillUnmount — Fired before the component will unmount

c)Events:

1.onClick
2.onSubmit
3.onChange

d)Creating Components:

var HelloWorld = React.createClass({
  render: function(){
    return (
      <div>
        Hello World!
      </div>
    )
  }
});
ReactDOM.render(<HelloWorld />, document.getElementById('app'))

Note: Every component is required to have a render method. The reason for that is render is essentially
the template for our component
     So in this example the text that will show on the screen where this component is rendered is Hello World!
ReactDOM.render takes in two arguments. The first argument is the component you want to render, the second argument is 
the DOM node where you want to render the component. 

(Notice we’re using ReactDOM.render and not React.render. This was a change made in React .14 to make React more modular. 
 It makes sense when you think that React can render to more things than just a DOM element)

Because of the parent/child child relations of React we talked about earlier, you usually only have to use ReactDOM.render
once in your application because by rendering the most parent component, all child components will be rendered as well.
React isolates the changes between the old and new virtual DOM and then only updates the real DOM with the necessary changes.
In more layman’s terms, because manipulating the actual DOM is slow, React is able to minimize manipulations to the actual DOM 
by keeping track of a virtual DOM and only updating the real DOM when necessary and with only the necessary changes.

The process looks something like this,
Signal to notify our app some data has changed
→ Re-render virtual DOM -> Diff previous virtual DOM with new virtual DOM -> Only update real DOM with necessary changes.

e) Adding State to your Component (state)

Each component has the ability to manage its own state and pass its state down to child components if needed.
If you have a multi component hierarchy, a common parent component should manage the state and pass it down to 
its children components via props.
var HelloUser = React.createClass({
  getInitialState: function(){
    return {
      username: '@tylermcginnis33'
    }
  },
  render: function(){
    return (
      <div>
        Hello {this.state.username}
      </div>
    )
  }
});
From the definition above, the getInitialState method is “The way in which you set the state of a component”.
In other terms, getInitialState returns an object which contains the state or data for our component.

The last thing to talk about with state is that our component needs the ability to modify its own internal state. 
We do this with a method called setState. 
That “signal to notify our app some data has changed” is actually just setState. Whenever setState is called,
 the virtual DOM re-renders, the diff algorithm runs, and the real DOM is updated with the necessary changes.
 
 var HelloUser = React.createClass({
  getInitialState: function(){
    return {
      username: 'someUserName'
    }
  },
  handleChange: function(e){
    this.setState({
      username: e.target.value
    });
  },
  render: function(){
    return (
      <div>
        Hello {this.state.username} <br />
        Change Name: <input type="text" value={this.state.username} onChange={this.handleChange} />
      </div>
    )
  }
});

f) Receiving State from Parent Component (props, propTypes, getDefaultProps)

props is the data which is passed to the child component from the parent component.
Handle state in the highest most parent component which needs to use the specific data, 
and if you have a child component that also needs that data, pass that data down as props.
var HelloUser = React.createClass({
  render: function(){
    return (
      <div> Hello, {this.props.name}</div>
    )
  }
});

ReactDOM.render(<HelloUser name="Tyler"/>, document.getElementById('app'));

g) Passing a List to a Child Component with a Setter Method

It’s important to understand that wherever the data lives, is the exact place you want to manipulate that data.
All getter/setter method for a certain piece of data will always be in the same component where that data was defined. 
If you needed to manipulate some piece of data outside where the data lives, you’d pass the getter/setter method into 
that component as props. Example:
var FriendsContainer = React.createClass({
  getInitialState: function(){
    return {
      name: 'Tyler McGinnis',
      friends: [
        'Jake Lingwall',
        'Murphy Randall',
        'Merrick Christensen'
      ],
    }
  },
  addFriend: function(friend){
    this.setState({
      friends: this.state.friends.concat([friend])
    });
  },
  render: function(){
    return (
      <div>
        <h3> Name: {this.state.name} </h3>
        <AddFriend addNew={this.addFriend} />
        <ShowList names={this.state.friends} />
      </div>
    )
  }
});

--------
var AddFriend = React.createClass({
  getInitialState: function(){
    return {
      newFriend: ''
    }
  },
  updateNewFriend: function(e){
    this.setState({
      newFriend: e.target.value
    });
  },
  handleAddNew: function(){
    this.props.addNew(this.state.newFriend);
    this.setState({
      newFriend: ''
    });
  },
  render: function(){
    return (
        <div>
          <input
            type="text"
            value={this.state.newFriend}
            onChange={this.updateNewFriend} />
          <button onClick={this.handleAddNew}> Add Friend </button>
        </div>
    );
  }
});
--------
  var ShowList = React.createClass({
  render: function(){
    var listItems = this.props.names.map(function(friend){
      return <li> {friend} </li>;
    });
    return (
      <div>
        <h3> Friends </h3>
        <ul>
          {listItems}
        </ul>
      </div>
    )
  }
});

-----
  g) PropTypes and getDefaultProps
1. propTypes: allow you to control the presence, or types of certain props passed to the child component. With propTypes you can 
 specify that certain props are required or that certain props be a specific type.
  propTypes: {
    addNew: React.PropTypes.func.isRequired
  },

2. getDefaultProps allow you to specify a default (or a backup) value for certain props just in case those props are never passed 
into the component. 
 getDefaultProps: function(){
    return {
      names: []
    }
  },
 
 h) Component LifeCycle:
 
Each component you make will have its own lifecycle events that are useful for various things. For example, if we wanted to make an
ajax request on the initial render and fetch some data, where would we do that? Or, if we wanted to run some logic whenever our props
changed, how would we do that? The different lifecycle events are the answers to both of those. 
var FriendsContainer = React.createClass({
  getInitialState: function(){
    alert('In getInitialState');
    return {
      name: 'Tyler McGinnis'
    }
  },
  // Invoked once before first render
  componentWillMount: function(){
      // Calling setState here does not cause a re-render
      alert('In Component Will Mount');
  },
  // Invoked once after the first render
  componentDidMount: function(){
      // You now have access to this.getDOMNode()
    // the lifecycle event where you’ll be making your AJAX requests to fetch some data
      alert('In Component Did Mount');
  },
  // Invoked whenever there is a prop change
  // Called BEFORE render
  componentWillReceiveProps: function(nextProps){
      // Not called for the initial render
      // Previous props can be accessed by this.props
      // Calling setState here does not trigger an additional re-render
      // called whenever there is a change to props
      alert('In Component Will Receive Props');
  },
  // Called IMMEDIATELY before a component is unmounted
  // This is where you can do necessary clean up  
  componentWillUnmount: function(){},
  render: function(){
    return (
      <div>
        Hello, {this.state.name}
      </div>
    )
  }
});

Good Tutorial link for react+redux: https://spapas.github.io/2016/03/02/react-redux-tutorial/

👌It is great quick tutorial of basic concepts.
Thanks for making these effort.😊