batuhansahan

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

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

batuhansahan

const count = 42;

<p>You clicked {count} times</p>

batuhansahan

// ilk render
function Counter() {
  const count = 0; // useState()'den dönen
  // ..
  <p>You clicked {count} times</p>
  // ..
}

// Click'ten sonra fonksiyonumuz tekrar çağırılır
function Counter() {

batuhansahan

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

  function handleAlertClick() {
    setTimeout(() => {
      alert('You clicked on: ' + count);
    }, 3000);
  }

  return (

batuhansahan

// İlk render
function Counter() {
  const count = 0; // useState()'den dönen
  // ...
  function handleAlertClick() {
    setTimeout(() => {
      alert('You clicked on: ' + count);
    }, 3000);
  }
  // ...

batuhansahan

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>

batuhansahan

// İlk render
function Counter() {
  // ...
  useEffect(
    // Effect ilk render'den
    () => {
      document.title = `You clicked ${0} times`;
    }
  );
  // ...

batuhansahan

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

  useEffect(() => {
    setTimeout(() => {
      console.log(`You clicked ${count} times`);
    }, 3000);
  });

  return (

batuhansahan

import React from "react";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "Reactish"
    };

    this.handleNameChange = this.handleNameChange.bind(this);

batuhansahan

import React from 'react'

export default function App(props){
  const name = 'Reactish';
  const setName = ??

  function handleNameChange(e){
    setName(e.target.value)
  }