bedirhankaradogan

class ClassComponent extends React.Component {
  render() {
   return "I'm the class component";
  }
}

/*
var ClassComponent = function (_React$Component) {
  _inherits(ClassComponent, _React$Component);

bedirhankaradogan

const FunctionalComponent = () => {
  return "I'm the functional component";
}

/*
var FunctionalComponent = function FunctionalComponent() {
  return "I'm the functional component";
};
*/

bedirhankaradogan

shouldComponentUpdate(nextProps, nextState) {
  return nextState.message !== this.state.message;
}

bedirhankaradogan

import React from "react";
import ReactDOM from "react-dom";

class ClassComponent extends React.Component {
  render() {
    console.log("Regular class component has been rendered!");
    return "I'm the class component";
  }
}

bedirhankaradogan

import React from "react";
import ReactDOM from "react-dom";

class ClassComponent extends React.PureComponent {
  render() {
    return "I'm the class component";
  }
}

const RenderClassComponents = () => {

bedirhankaradogan

import React, {Component} from "react";
import ReactDOM from "react-dom";

class ClassComponent extends Component {
  constructor() {
    super();
    
    this.state = {
      message: "Hello"
    }

bedirhankaradogan

import React from "react";
import ReactDOM from "react-dom";

class ClassComponent extends React.Component {
  render() {
    return "I'm the class component";
  }
}

const RenderClassComponents = () => {

bedirhankaradogan

import React from "react";
import ReactDOM from "react-dom";

const Button = (props) => {
  const {
    children,
    onClick
  } = props;
  
  const handleButtonClick = () => {

bedirhankaradogan

import React from "react";
import ReactDOM from "react-dom";

const FunctionalComponentWithProps = (props) => {
  const fullName = `${props.name} ${props.surname}`;
  const handleClick = (event) => {
    alert(fullName);
  };
  
  return (

bedirhankaradogan

import React from "react";
import ReactDOM from "react-dom";

const FunctionalComponentWithProps = (props) => {
  const fullName = `${props.name} ${props.surname}`;
  
  return `Hello ${fullName}`;
};

const RenderFunctionalComponents = () => {