Напишите React-компонент с нуля
Теперь, когда вы изучили основы компонентов JSX и React, пришло время написать компонент самостоятельно. React- компоненты являются основными строительными блоками приложений React, поэтому важно хорошо ознакомиться с их написанием. Помните, что типичным компонентом React является class-based компонент, который расширяет React.Component . Он имеет метод рендеринга, который возвращает HTML (из JSX) или null . Это основная форма компонента React. Как только вы это хорошо усвоите, вы будете готовы начать строительство более сложных проектов React.
Замечание: На самом деле в настоящий момент class-based компоненты все менее и менее распространены. Сейчас все-таки чаще стали использоваться функциональные компоненты. В основном это обусловлено тем, что, во-первых, в функциональных компонентах меньше требований к пониманию ООП (Объектно-Ориентированного Программирования), ведь здесь просто функции и все. Во-вторых, в Реакте появились базовые хуки, которые значительно расширили функциональность функциональных компонентов (простите за каламбур). То есть в целом, и теми и другими видами компонентов можно добиться одного и того же результата (ведь самое главное - конечный вывод, а этот механизм работает одинаково и там и там), но все же функциональные компоненты сильно проще, чем классовые.
Определите классовый компонент MyComponent, который расширяет React.Component . Его метод render должен возвращать div , содержащий тег h1 с текстом: My First React Component!. Используйте этот текст точно, с учетом пунктуации и регистра. Передайте этот компонент в DOM с помощью ReactDOM.render() . Для вас доступен div с id='challenge-node' .