ReactFirstday

index.html

<div id="root"></div>

learnings.txt

Key learnings:

1- Every thing in react is deal with components
2- Props is an object through which we can pass arbitrary data to component
3- React insert code into DOM object by calling function
4- We pass props value to those function and then call REactDOM.render to render html value .
5- We pass two things to REACTDOM>render a-) react component to render b-) html document id
6- When creating class that extends reactDOM , state variables value to be set in constructor
7- Super should be called inside constructor which allow props to be modified or available inside class.
8- Class are stateful functions which maintains state of props and we can modify state
9- Modifying state shouldnt be done inside render function
10- roundbrakcet should be in same line with return statement otherwise it will return null which will throw error.

reactfirstday.markdown

ReactFirstday

A Pen by mohammadobaid on CodePen.

License.

script.babel

ReactDOM.render(<div>Welcome to a React.js Tut</div>, document.getElementById('root'));
function Hello(props){
  return <div>{props.name}</div>
}


class Counter extends React.Component {
  constructor(props){
    super(props);
    this.state = { count: this.props.start || 0 }
  this.inc=this.inc.bind(this)
  this.des = this.des.bind(this) 
    
  }
  
   inc(){
    this.setState({
      count:this.state.count + 1
    });
  }
  
  des(){
    this.setState({
      count:this.state.count - 1
    });
  }
  
  render(){
    return (
    <div>
        <button onClick={this.inc}>+</button>
        <button onClick={this.des}>-</button>
        <div>{this.state.count}</div>
   </div>
    );
  }
}  
 function CounterCall() {
 return(<div>
   <Counter />
   </div>
   );  
 } 


ReactDOM.render(<CounterCall />,document.getElementById('root'));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>