React

Declarative
Virtual DOM
Reusable Components
One way data flow
Performance
JSX

A JavaScript library for building user interfaces.

React

My First Component

var HelloWorld = React.createClass({
    render: function () {
        return (
            <h1 className="title">
          Hello World! My Name is {this.props.name}</h1>
        );
    }
});

React.render(<HelloWorld name="Mahir" />, document.body);

React

Virtual Dom

Every time you call setState method, a new virtual DOM is generated, this is diffed with the old virtual DOM producing a minimum set of changes on real DOM

React

Virtual Dom

Data Flow - MVC

Traditional Data Flow

Data Flow - React

States and Props

Components can either be passed data (PROPS), or materialize their own state and manage it over time (STATES)
Passed in props are immutable

React Data Flow

Data Flow - React

Components can either be passed data (PROPS), or materialize their own state and manage it over time (STATES)

Data Flow - React

React

has no:

Controllers
Models
Views
Templates
View Models

Only components!

<Components />

Everything is a component

Components are:

Reusable
Maitainable
Testable
Self-contained

var React = require('react');

var MyComponent = React.createClass({

  getInitialState: function() {
    return {
      name: "School Status"
    }
  },

  componentWillMount: function() {
  },

  componentDidMount: function() {
  }, 

  render: function() {
    return (
        <div>{this.state.name}</div>        
    );
  }
});

React.render(MyComponent, document.getElementById('example'));

Example React Component

Now available as <MyComponent />

React uses JSX

JavaScript syntax extension that looks similar to XML

Why use React?

"Because we are smart - and we know what we're doing!" - Facebook Employee, SF

Components are the future of web development (maybe)
ReactJS is extremely effecient
It makes writing Javascript easier (JSX)
The brains behind Facebook are maintaining this project

React

Who's using React?

Atom IDE, Facebook Messenger,

Instagram, Whatsapp web, Yahoo, Airbnb,

Netflix, Hipchat, Paypal, SchoolStatus,

and more...

React Native

A framework for building native apps using React & JavaScript.

Thanks!

Follow me @tkssharma