Video 160

[Zelechos]

En este video trabajamos con una UI o interfaz basada en los estados @Zelechos

Creamos un objeto para nuestro estado

const state = { 
    todoList : []
}

Tambien creamos un template de HTML ahora conocido como un template de UI

const template = ()=>{
    if(state.todoList.length < 1)return `<p>Empty to do List.</p>`;
    let todos = state.todoList.map( task => `<li>${task}</li>`).join("");
    return todos;
};

Render UI

const render = ()=>{
    console.log(state);
    const $list = d.getElementById('todo-list');
    if(!$list)return;
    
    $list.innerHTML = template();
}

Actualizar el State y UI (ESTO NO ES UN BUENA PRATICA NO PODEMOS ALTERAR EL ESTADO DIRECTAMENTE!!!)

    state.todoList.push($item.value);
    render();

• Estudiar mas sobre reactividad
• Aprender a usar React Js
• Crear una guía técnica sobre reactividad y sus conceptos.