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