ebrugulec

this.setState ( {
  clicked: true,
  }, () => {
console.log('the state is now', this.state)

ebrugulec

import React, { Component } from 'react';
import Row from './Row'

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      name: 'Ebru',
    }
    // this.handleNameChange = this.handleNameChange.bind(this)

ebrugulec

import React from 'react'

const Row = props => {
    return(
        <div>
            {props.children}
        </div>
    )
}

ebrugulec

import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0,
    };
  }

ebrugulec

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>
        Click me

ebrugulec

class MyComponent extends Component {
  componentDidMount() {
    // verileri çekmek için api listener ekledik
    // mouse hareketleri için event listener ekledik.
  }

  componentWillUnmount() {
    // api listener'ı kaldır
    // event listener'ı kaldır
  }

ebrugulec

//Kim, neden, neyi, ne için extends ediyor?
class Counter extends Component {
  // State'i direk tanımlayabilir miyiz?
  state = { value: 0 };

  // Neden props kullanıyoruz?
  // constructor(props) {
  //
  //  super ne alaka?
  //  super(props);

ebrugulec

const [value, setValue] = useState('initial');

useEffect(() => {
  console.log(value);
}, [value])

ebrugulec

useEffect(() => {
  console.log('mounted');
  return () => console.log('unmounting...');
}, [])

ebrugulec

import React, { useEffect, useState, useRef } from "react";
import ReactDOM from "react-dom";

function App() {
  const inputRef = useRef();
  const [value, setValue] = useState("");

  useEffect(
    () => {
      console.log("render");