Robert Tamayo | March 21, 2023

Is React Just a Huge Overreaction?

ES6 javascript has made developing apps using basic javascript much easier. I'm not setting out to "prove React wrong" - I'm setting out to see how far javascript has come in being able to deliver a web app without relying on third party codebases.

Keep in mind that everything I'm doing here is just regular js.

Today, I'm looking at two of React's examples on the site used for demonstrating what the framework can do. I'm going to try to replicate it in simple js in as few lines as possible, with the intention being to keep it readable, accessible, and lightweight.

Conditional Rendering

This is the conditional rendering example from react.dev.

let content;
if (isLoggedIn) {
    content = <AdminPanel />;
} else {
    content = <LoginForm />;
}
return (
    <div>
        {content}
    </div>
);

Here is what I put together using only simple js.

// the logic
const app = (element, data) => {
    app.element = element ? element : app.element;
    app.data = data ? data : app.data;
    const {LoginForm, AdminPanel, isLoggedIn} = app.data;
    let content;
    if (isLoggedIn) {
        content = AdminPanel();
    } else {
        content = LoginForm();
    }
    app.element.innerHTML = `
        <div>
            ${content}
        </div>
    `;
}
// the rest of it
const LoginForm = () => `<button onclick="app.data.login()">Click to login</button>`
const AdminPanel = () => `<div>Admin Panel</div>`
let isLoggedIn = false;
const login = () => {
    console.log('clicked');
    app.data.isLoggedIn = true;
    app(); // reload the app
}
const data = {
    AdminPanel,
    LoginForm,
    isLoggedIn,
    login
}
app(document.getElementById('app'), data);

It's definitely possible, and the only thing I don't like is the need to use a long string for the onclick handler. Other than that, it's very similar, and it's not React.

Updating the Screen

The single button example was too simple; the trick is handling multiple buttons that each hold their own state. Up until now, I've only ever used one "component" in an example, so I found implementing multiple Buttons a bit tricky. In the end, I had to settle with treating them as instances of objects. One cool trick is the use of overriding Object.prototype.toString() in order to handle the rendering. That's a technique I may come back to later as I continue to tackle different use cases in my search for the breaking point.

The react example.

import { useState } from 'react';
export default function MyApp() {
    return (
        <div>
        <h1>Counters that update separately</h1>
        <MyButton />
        <MyButton />
        </div>
    );
}
function MyButton() {
    const [count, setCount] = useState(0);
    function handleClick() {
        setCount(count + 1);
    }
    return (
        <button onClick={handleClick}>
        Clicked {count} times
        </button>
    );
}

My example.

class Button {
    constructor(handler) {
        this.handler = handler;
        this.count = 0;
    }
    handleClick = () => {
        this.count++;
        app(); // reload the app
    }
    toString = () => `
        <button onclick="${this.handler}">
            Clicked ${this.count} times
        </button>
    `
}
const data = {
    firstButton: new Button('app.data.firstButton.handleClick()'),
    secondButton: new Button('app.data.secondButton.handleClick()'),
}
const app = (element, data) => {
    app.element = element ? element : app.element;
    app.data = data ? data : app.data;
    const { firstButton, secondButton } = app.data;
    app.element.innerHTML = `
        <div>
            <h1>Counters that update separately</h1>
            ${firstButton}
            ${secondButton}
        </div>
    `;
}
app(document.getElementById('app'), data);

Conclusion

I still have a long ways to go to find the breaking point. I would say that I'm starting to feel the cracks, but the thing I'm overcoming is not just an entire framework, but an extension of the javascript language itself. Passing in strings for onclick handlers is not exactly "more difficult" than developing an entire new syntax extension for a programming language.

Comments: