React JS Starter app

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

JUST THE UI Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.

VIRTUAL DOM React abstracts away the DOM from you, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using React Native.

DATA FLOW React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding. Topics

React JS components
React js event handeling
Parent Child Components
Todo app using React
Cart app using React

Application setup

App require NPM Node installed

mkdir DemoApp
cd DemoApp
npm init
or just add this package json
{
  "name": "HelloWorld",
  "version": "0.0.1",
  "description": "HelloWorld",
  "main": "dist/index.js",
  "engines": {
    "node": ">=0.10.32"
  },
  "scripts": {
    "build": "webpack --progress --profile --colors",
    "watch": "webpack-dev-server --hot --inline --progress --colors",
    "test": "echo \"No unit tests and e2e tests yet\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "bugs": {
    "url": ""
  },
  "author": "Richard LOPES",
  "license": "MIT",
  "homepage": "",
  "dependencies": {
    "babel-preset-react": "^6.5.0",
    "babel-runtime": "5.6.18",
    "html-webpack-plugin": "^2.15.0",
    "react": "^15.0.0",
    "react-dom": "^15.0.0"
  },
  "devDependencies": {
    "babel-core": "5.6.18",
    "babel-loader": "5.3.1",
    "html-webpack-plugin": "1.6.0",
    "webpack": "1.12.1",
    "webpack-dev-server": "1.12.1"
  }
}

// In webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin')
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});
module.exports = {
  entry: [
    './app/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    filename: "index_bundle.js"
  },
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
    ]
  },
  plugins: [HTMLWebpackPluginConfig]
};

React JS

Creating components

var HelloWorld = React.createClass({
            render: function() {
                return (
                    <div>
                        <h1>Hello World</h1>
                        <p>This is some text</p>
                    </div>
                    );
            }
        });

        React.render(<HelloWorld />, document.body);

Event Handeling

        var Checkbox = React.createClass({
            getInitialState: function() {
                return {checked: true}
            },
            handleCheck: function() {
                this.setState({checked: !this.state.checked})
            },
            render: function() {
                var msg;
                if(this.state.checked) {
                    msg = "checked";
                }
                else {
                    msg = "unchecked";
                }
                return (

      <div>
        <div>
          <h1 class="container well">hello react</h1>
             
             <input type="checkbox"
              defaultChecked={this.state.checked} onChange={this.handleCheck}/>
                        <p>This box is {msg}.</p>
      </div>
    </div>
   );
            }
        });

        React.render(<Checkbox/>,
            document.getElementById('react-container'));

``

Run the tutorial (each file is numbered)
====================
```Terminal
git clone https://github.com/kumartarun/React-JS-Starter-apps.git
Run index.html files on any local server