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

  1. Components are the future of web development (maybe)
  2. ReactJS is extremely effecient
  3. It makes writing Javascript easier (JSX)
  4. 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

30 Hours React JS Course - #04

By Tarun Sharma

Made with Slides.com

30 Hours React JS Course - #04

react js introduction

  • 479

More from Tarun Sharma