React

Creating a Basic Component
React createClass
Component state & props
Getting props.children
React createElement

A JavaScript library for building user interfaces.

what is React Component

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Functional

Component

const Hello = () => {
  return <div>Hellow world</div>
}

React in ES5

"Hello World"

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

ReactDOM.render(<HelloWorld />, document.body);

React

Adding some props

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

React

React.createElement

"use strict";

/*#__PURE__*/
React.createElement("div", null, /*#__PURE__*/React.createElement(Welcome, {
  name: "Sara"
}), /*#__PURE__*/React.createElement(Welcome, {
  name: "Cahal"
}), /*#__PURE__*/React.createElement(Welcome, {
  name: "Edite"
}));

React

Play with JSX https://babeljs.io/repl/#

Data Flow - React

States and Props

Components can either be passed data (props), or materialize their own state and manage it over time (state)
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

Thanks!

Follow me @tkssharma