Настраивать
- в терминале введите:
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.