Version using React

version4.js

console.log("running 4");

const validateRoute = document.getElementById("validateRoute").value;
const createRoute =   document.getElementById("createRoute").value;
const deleteRoute =   document.getElementById("deleteRoute").value;
const addRoute =      document.getElementById("addRoute").value;
const csrfToken =     document.getElementById("csrfToken").value;
const tasksRoute =    document.getElementById("tasksRoute").value;

const ce = React.createElement;

class Version4MainComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {loggedIn: false};
    }

    render() {
        if (this.state.loggedIn) {
            return ce(TaskListComponent, {doLogout: () => this.setState({loggedIn: false})});
        }else {
            return ce(LoginComponent, {doLogin: () => this.setState({loggedIn: true})});
        }
    }
}

class LoginComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loginName: "",
            loginPass: "",
            createName: "",
            createPass: "",
            loginMessage: "",
            createMessage: ""
        };
    }

    render() {
        return ce('div', null,
            ce('h2', null, 'Login:'),
            ce('br'),
            'Username: ',
            ce('input', {
                type: "text",
                id: "loginName",
                value: this.state.loginName,
                onChange: e => this.changerHandler(e)
            }),
            ce('br'),
            'Password: ',
            ce('input', {
                type: "password",
                id: "loginPass",
                value: this.state.loginPass,
                onChange: e => this.changerHandler(e)
            }),
            ce('br'),
            ce('button', {onClick: e => this.login(e)}, 'Login'),
            ce('span', {id: "login-message"}, this.state.loginMessage),
            ce('h2', null, 'Create User:'),
            ce('br'),
            'Username: ',
            ce('input', {
                type: "text",
                id: "createName",
                value: this.state.createName,
                onChange: e => this.changerHandler(e)
            }),
            ce('br'),
            'Password: ',
            ce('input', {
                type: "password",
                id: "createPass",
                value: this.state.createPass,
                onChange: e => this.changerHandler(e)
            }),
            ce('br'),
            ce('button', {onClick: e => this.createUser(e)}, 'Create User'),
            ce('span', {id: "create-message"}, this.state.createMessage)
        );
    }

    login(e) {
        const username = this.state.loginName;
        const password = this.state.loginPass;
        fetch(validateRoute, {
            method: 'POST',
            headers: {'Content-Type': 'application/json', 'Csrf-Token': csrfToken },
            body: JSON.stringify({ username, password })
        }).then(res => res.json()).then(data => {
            if(data) {
                 this.props.doLogin();
            } else {
                this.setState({ loginMessage: "Login Failed" });
            }
        });
    }

    changerHandler(e) {
        this.setState({[e.target['id']]: e.target.value});
    }
}

class TaskListComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {tasks: [], newTask: "", taskMessage: ""};
    }

    componentDidMount() {
        this.loadTasks();
    }

    loadTasks() {
        fetch(tasksRoute).then(res => res.json()).then(tasks => this.setState({ tasks }));
    }

    render() {
        return ce('div', null,
            'Task List',
            ce('br'),
            ce('ul', null,
                this.state.tasks.map((task, index) => ce('li', {key: index}, task))
            ),
            ce('br'),
            ce('div', null,
            ce('input', {type: 'text', value: this.state.newTask, onChange: ev => this.handleChange(ev)}),
            ce('button', {onClick: ev => this.handleClick(ev)}, 'Add Task'),
            this.state.taskMessage
            ),
            ce('br'),
            ce('button', {onClick: e => this.props.doLogout()}, 'Logout')
        );
    };

    handleChange(ev) {
        this.setState({newTask: ev.target.value})
    }

    handleClick(ev) {
        this.addTask()
    }

    addTask() {
        fetch(addRoute, {
            method: 'POST',
            headers: {'Content-Type':'application/json', 'Csrf-Token': csrfToken},
            body: JSON.stringify(this.state.newTask)
        }).then (res => res.json())
            .then (data => {
                if (data) {
                 this.loadTasks()
                    this.setState({taskMessage:  ""})
                }else {
                    this.setState({taskMessage:  "Failed to add"})
                }
            })
    }

}

ReactDOM.render(
    ce(Version4MainComponent, null, null),
    document.getElementById('react-root')
);