VueJS 2 Starter in github


Vuejs is one of popular progressive web application framework developed by community members.

Advantages of using vuejs

  • Very small size – 18–21KB Gzip
  • Virtual DOM like ReactJS
  • Easy to understand when you coming from AngularJS background.
  • Detailed official documentation
  • Two way communication
  • Official store concept vuex & vue-router
  • Vue Router
  • Vuex

Vuejs GitHub Starter

git clone 
cd vuejs-starter
npm install 
npm run serve
npm run build - Production Build Generate

How to change port in GIT

When you clone repository from git using SSH you may get following error message

ssh: connect to host port 22: Bad file number 
ssh: connect to host (some host or IP address) port 22: Bad file number

Solution :

Step 1: open gitbash
Step 2: > touch ~/.ssh/config
Step 3: > Paste following code in config file

   User git
   PreferredAuthentications publickey
   IdentityFile ~/.ssh/id_rsa
   Port 443

Get started with React js – Tutorial for React JS Beginners

Create new reactapp using NPM

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

Advantages using reactJS over AngularJS

  • Component Structured
  • SEO friendly because of virtual DOM
  • JSX and reactNative
  • Used in Facebook and Instagram
  • Virtual Dom in main advanatage of using reactjs

JSX indepth

  • Javascript XML

More on – JXS In Depth

Basic Syntax

createClass in React < 15.0.0

import React from 'react';

const Contacts = React.createClass({
render() {
return (

export default Contacts;

Note : react.createclass is deprecated since react 15.5.0


class Comment extends React.Component {
  constructor(props) {
        this.state = {
            counter: 0
    return <h1>{}</h1>;

React.render(<Comment name={'Comment'}/>, document.getElementById('container'));

Stateless Components

  const Headline = () => {
  return <h1>React Cheat Sheet</h1>

Props – Read only & not be modified

state changes async
can be modidfied using this.setState