Как динамически добавить узел в DOM?

Question

[kirillleogky]

Есть файл в котором создаю элемент:
createTodo.js

import React from "react";

export default function createTodo() {
  const todoInput = document.getElementById("input");
  return (
    <li>
      <span className="todos_block-text">{todoInput.value}</span>
      <span className="todos_block-trash"></span>
    </li>
  );
}

Далее я хочу добавить данный компонент в DOM внутри document.querySelector('.todos_block') в самом конце:
addTodo.js

import createTodo from "./";
import React from "react";

export default function addTodo() {
  document.querySelector('.todos_block').append(createTodo());  <----- Пример с append
}

Как мне добавить элемент в DOM динамически в addTodo.js ?

Comments

[Yustas Alexu]

Прямая манипуляция с DOM в Реакте не практикуется, потому что DOM-ом манипулирует сам React. Он сам делает все нужные низкоуровневые операции, разработчику нужно только описать нужные состония в определенный момент времени, это называется декларативное программирование, в отличие от императивного стиля в jQuery.

Answer 1

[G F]

Судя по getElementById и querySelector ты явно не понимаешь как с реактом работать. Начни с простых туториалов, например у Юрия Буры хороший курс.

Comments

[kirillleogky]

G F можно ссылочку?

[G F]

kirillleogky,
https://www.udemy.com/course/pro-react-redux/
Бесплатно тоже есть если загуглишь.
Не смущайся что там на классах, разберись с ними сначала, потом можешь на хуки переходить.
А вообще инет сейчас просто завален курсами по реакту для новичков, просто гугли и сортируй по рейтингу.

[Dima Polos]

Курсы на юдеми стоят 10-20$ зачем бесплатно?

[G F]

Для безработного чела из провинции на 20$ можно неделю прожить)