Yogendra0Sharma/react-training-notes.md

## react-training-notes.md

      
    Raw
  

              react-training-notes.md
            
          
    React JS Introduction
#React JS

is an Open Source library (BSD License)
for 'V' in MVC
developed by Facebook
uses 'Component-Driven' architecture (Web Components)
uses 'Virtual DOM' for Performance
uses 'state' and 'props' for data flow
uses JSX Syntax

#ReactJS Environment Setup
###Hardware Requirements:

Minimum i5 Processor, 4GB RAM, Minimum 50 GB HDD
Windows 7 Operating System

###Software Requirements:


Category
Package


Browser
Google Chrome (https://www.google.co.in/intl/en/chrome/browser/desktop/index.html)


| Mozilla Firefox (https://www.mozilla.org/en-US/firefox/new/)

Environment | NodeJS Latest ((https://nodejs.org/en/)
Editors  | SublimeText Editor (https://www.sublimetext.com/3)
| WebStrom IDE Free Trail (https://www.jetbrains.com/webstorm/download/#section=windows-version)
Developer Tools | Chrome React Developer Tools (https://github.com/facebook/react-devtools)
| React Detector (https://github.com/kentcdodds/react-detector)
Version Control | Git for Windows (https://git-scm.com/downloads)
#ReactJS Training Notes
##2-way data binding (vs) 1-way data binding

#ReactJS Lessons
##Lesson 1: ReactJS 'Hello-World' using Plain JS

Lesson Objectives:


Including React Support in the HTML
Using ReactDOM.reder() method to mount the RAW element in the HTML Mountpoint 'app'
Use React.createElement() way of creating simple components/elements

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title>React Hello World</title>
		<script src="https://fb.me/react-0.14.7.js"></script>
		<script src="https://fb.me/react-dom-0.14.7.js"></script>
	</head>
	<body>
		<div id="app"></div>
		<script>
			ReactDOM.render(
				React.createElement(
					'h1',	// tag
					null, //attributes passed to tag
					'Hello World!'
					),
				document.getElementById('app')
			);
		</script>
	</body>
	</html>
##Lesson 2: 'Movie Box' Widget

Lesson Objectives:


Creating a 'MoviePoster' Component
Use of 'constructor' method to Initialize State
ES6 Destructuring of variables
Use of Render method and return statement
Event Handling in ReactJS
Use of 'state' and 'props'


Reference
Link


CSS
https://gist.github.com/santhoshthepro/f807b145be81d3c131160c9d62f3f003


External JS URL in CodePen
//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js


class MoviePoster extends React.Component {

//new to ES6
constructor(props){
  super(props);//Inherts the parent Obj Properties
  this.state ={
    rating: 0
  };
}

render() {
  var {title,lang,tags, pic} = this.props;
  var {rating} = this.state;
  return (<div className="movie-box">
          <h1>{title} | <span className="badge">{rating}</span></h1>
      
          <img src={pic}/>
          <h4>{lang}</h4>
          <h4>Tags: {tags}</h4>
          <span className="badge"><h6>{rating}</h6></span>
          <button onClick={this.voteDown.bind(this)}>Vote Down</button>
          <button onClick={this.voteUp.bind(this)}>Vote Up</button>
        </div>);
}
voteUp(){
  //console.log(this);
  this.state.rating ++;
  this.setState(this.state);
  
  //or the below style
  //this.setState({rating: this.state.rating ++});
}
voteDown(){
  //console.log(this);
  this.state.rating--;
  this.setState(this.state);
}
}

//props
//state - determines the state of component, if this changes, the UI changes
React.render(<MoviePoster title="Captain America: Civil War" lang="English" tags={['Thriller ',' sci-fi ',' action']} pic="http://bit.ly/1qAkFMf"/>, document.getElementById('app'));

Note:


onClick={voteDown} -> Looks within render method
onClick={this.voteDown} -> looks across component
onClick={this.voteDown.bind(this)} -> Will Pass the Pros and State to the Function - Extending the Scope

##Lesson 3: React Environment Using GULP Tooling


NPM Installation Commands

npm install --g gulp
npm install --save react react-dom
npm install --save-dev gulp browserify babelify vinyl-source-stream babel-preset-es2015 babel-preset-react


Reference
Link


Gulpfile
https://gist.github.com/santhoshthepro/c12f9a3b725ca984303cddb1df25afc9


##Lesson 4: React Environment Using WebPack Tooling


NPM Installation Commands

npm install --save react react-dom
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 webpack webpack-dev-server --save-dev


Reference
Link


Webpack Config
https://gist.github.com/santhoshthepro/44653556270888883d4ad70026b2b57b


##Lesson 5: ReactJS Simple Routing

NPM Installation Commands

npm install --save react react-dom
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 webpack webpack-dev-server --save-dev


Reference
Link


Webpack Config
https://gist.github.com/santhoshthepro/44653556270888883d4ad70026b2b57b


Gulp with Webpack
https://gist.github.com/santhoshthepro/66c827cad2c808cc5f9ff6fab86cc396
Reference	Link
CSS	https://gist.github.com/santhoshthepro/f807b145be81d3c131160c9d62f3f003
External JS URL in CodePen	//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js
Reference	Link
Webpack Config	https://gist.github.com/santhoshthepro/44653556270888883d4ad70026b2b57b
Gulp with Webpack	https://gist.github.com/santhoshthepro/66c827cad2c808cc5f9ff6fab86cc396