VueJS 2 Starter in github

Featured

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 https://github.com/ktrajasekar/vuejs-starter

git clone https://github.com/ktrajasekar/vuejs-starter 
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 github.com 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

Host github.com
   User git
   Hostname ssh.github.com
   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 (
<div></div>
);
}
});

export default Contacts;

Note : react.createclass is deprecated since react 15.5.0

Components

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

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

Stateless Components

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

Props
Props – Read only & not be modified

State
state changes async
can be modidfied using this.setState