Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save Yogendra0Sharma/0aa9323b28a5e6d99186c4ba40d6f665 to your computer and use it in GitHub Desktop.
Save Yogendra0Sharma/0aa9323b28a5e6d99186c4ba40d6f665 to your computer and use it in GitHub Desktop.
ReactJS Training Notes - A comprehensive guide - Course Author: Santhosh Vijay

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 1way

#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

gulpfile-setup

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

webpack

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment