Я читаю React уже несколько дней. Я могу понять большую часть того, на что я смотрю, но я не совсем уверен в своей способности написать это. Я работал над небольшим веб-приложением, которое выполняет всю его генерацию html через jQuery и добавляет элементы друг к другу. Я хотел бы попытаться восстановить это с React, потому что я верю, что это будет быстрее. этоJSFiddle это небольшой пример того, над чем я работаю. Как бы вы написали это с React?

JS:

function remove() {
    this.remove();
}

function timed_append_new_element() {
    setTimeout(function () {
        var added_content = $("<span />", {
            class: "added_content",
            text: "Click to close",
            click: remove
        });
        container.append(added_content);
    }, 3000);
}

function append_new_element() {
    var added_content = $("<span />", {
        class: "timed_added_content",
        text: "Click to close",
        click: remove
    });
    container.append(added_content);
}


var container = $("<div />", {
    class: "container"
});
var header = $("<span />", {
    class: "header",
    text: "jQuery to React.js Header"
});
var add_button = $("<button />", {
    class: "add_button",
    text: "Add Element",
    click: append_new_element
});
var timed_add_button = $("<button />", {
    class: "add_button",
    text: "Add Element in 3 seconds",
    click: timed_append_new_element
});
container.append(header);
container.append(add_button);
container.append(timed_add_button);
$("body").append(container);