Настраивать

  • в терминале введите: npx create-react-app reacthookexample

  • удалить все в src и общей папке
  • добавить index.html в общую папку
  • добавить index.js в папку src

Код

index.js

import React, { useState } from 'react';
import reactdom from 'react-dom';

function Count() 
{
    const [count, setCount] = useState(0);
    
    return (
        <div>
          <p>
                You clicked {count} times
          </p>
          <button onClick={() => setCount(count + 1)}>
                Click me
          </button>
        </div>
    );
}

reactdom.render
(
    <Count/>,
    document.getElementById('root')
);

index.html

<div id="root"></div>

Запуск приложения

  • В папке reacthookexample в терминале
  • введите команду: npm start

Разбивка кода

import React, { useState } from 'react';

UseState

Имя хука, связанного с реакцией

import reactdom from 'react-dom';

Что позволяет реагировать на запись в DOM 1

function Count()
{
.
.
.
}

Повторно используемый компонент реакции, который возвращает некоторый JSX 2

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

объявляет новую переменную, которую мы можем изменять с течением времени.

количество = имя

setCount = состояние 3, которое вы можете установить

return(
.
.
.
);

Передает содержимое функции тому, что ее вызывает.

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

JSX, который будет преобразован в html

reactdom.render
(
.
.
.
);

Помещает JSX в наш index.html с правильным содержимым.

<Count/>,

Вызывает созданную нами функцию под названием Count

document.getElementById('root')

Это контент, который помещает html в наш index.html.

  1. Где живет html. В нашем случае это файл index.html. ↩︎
  2. Javascript вперемешку с html ↩︎
  3. Мне нравится думать о состоянии как о позиции, которую вы хотите достичь, поэтому вы изменяете счетчик в пределах того, к чему вы хотите добраться. ↩︎