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"
}));