React I - Elements

Initial Structure

ReactDOM.render(
<div className="header">'ad'</div>,
  mountNode,
);

Function component

const App = ( {title} ) => (
  <div className="header">{title}</div>
);


ReactDOM.render(
<App title="The GitHub Cards App" />,
  mountNode,
);

Class Component

class App extends React.Component {
  render(){
  return(
    <div className="header">{this.props.title}</div>
    );
  }
};


ReactDOM.render(
<App title="The GitHub Cards App" />,
  mountNode,
);

Extends

class Card extends React.Component {
render() {
  return (
    <div className="github-profile">
      <img src="https://placehold.it/75" />
        <div className="info">
          <div className="name">Name here...</div>
          <div className="company">Company here...</div>
        </div>
    </div>
    );
  }
}

class App extends React.Component {
render() {
  return (
    <div>
      <div className="header">{this.props.title}</div>
        <Card />
    </div>
    );
  }
}

ReactDOM.render(
<App title="The GitHub Cards App" />,
  mountNode,
);