Santhosh Vijayabaskar SanthoshVijayabaskar

#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

Screencasting Framework

The following document is a written account of the Code School screencasting framework. It should be used as a reference of the accompanying screencast on the topic.

Why you should care about screencasting?

You're probably aren't going to take the time to read this document if you're not interested, but there are a lot of nice side effects caused by learning how to create quality screencasts.

Communicating more effectively - At Envy Labs we produce screencasts for our clients all the time. Whether it's demoing a new feature or for a presentation for an invester, they're often much more effective and pleasent than a phone call or screen sharing.

Hello World Program 🙏

STEP 1: Setup Babel CommandLine Utility [https://babeljs.io/docs/setup/]

``` npm install -g babel-cli ```

STEP 2: Install Babel Preset for ES2015

``` npm install babel-preset-es2015 ```

	import React, {Component} from 'react';
	import {connect} from 'react-redux';
	import {bindActionCreators} from 'redux';

	class DummyTemplatePage extends React.Component {

	constructor(props, context){
	super(props,context);
	}

	{
	"name": "react-redux-demo",
	"version": "1.0.0",
	"description": "CGI React-Redux Training",
	"author": "Santhosh Vijay",
	"license": "MIT",
	"dependencies": {
	"babel-polyfill": "6.8.0",
	"bootstrap": "3.3.6",
	"jquery": "2.2.3",

	import React from 'react';
	import ReactDOM from 'react-dom';
	import {Router, Route, browserHistory } from 'react-router';

	import HomePage from './home-page'
	import MoviePoster from './movie-poster';
	import MovieDetails from './movie-details';

	//ES6 Const Keyword
	const app = document.getElementById('app');

	<nav className="navbar navbar-default navbar-fixed-top">
	<div className="container-fluid">
	<div className="navbar-header">
	<a className="navbar-brand" href="#">
	<img alt="Brand" src="http://jsrocks.org/images/icon-logo-js.png"></img>
	</a>
	</div>

	<div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	<ul className="nav navbar-nav">

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>CGI Dev Central</title>
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
	<style>
	.form-control,
	.btn,
	.badge {

	/**
	* @jsx React.DOM
	*/

	var React = require('react'),
	MyReactComponent = React.createClass({

	// The object returned by this method sets the initial value of this.state
	getInitialState: function(){
	return {};

	html {
	height: 100%;
	}

	body {
	background: #f2f2f2;
	font-family: Roboto;
	display: flex;
	justify-content: center;
	align-items: center;