figure

The vanilla alternative for writing JSX-based React applications.

2023-09-12

---

The figure framework offers a unique approach to writing React applications by leveraging vanilla JavaScript syntax instead of JSX, making it an excellent tool for programmers who prefer to avoid the bloat of the NodeJS/npm ecosystem. With its use of template literals, figure provides a more natural way of writing code, making it ideal for building smaller applications.

If you're looking for a more efficient way to build React applications, figure might just be the tool you need.

%kimport%n figure %kfrom%n %s'https://cdn.typable.dev/figure'%n;

%kconst%n { dict } = %ffigure%n(%gReact%n.%fcreateElement%n);
%kconst%n html = %fdict%n();

%kfunction%n %gApp%n() {
  %kreturn%n %fhtml%s`
    <h1>I figured it out!</h1>
  `%n;
}

Guide

Setup

Import the figure framework (from the CDN or by downloading the lib file).

%kimport%n figure %kfrom%n %s'https://cdn.typable.dev/figure'%n;

Initialize figure by invoking it and passing in React.createElement as a parameter. Then, destructure the dict function from the returned value.

%kconst%n { dict } = %ffigure%n(%gReact%n.%fcreateElement%n);

The figure function returns an object that contains a dict function, which we destructure and assign to const { dict }. The dict function allows us to register React components and bundles to be used in our app.

Create a custom Component

Define your Button component and export it.

%kexport%n %kdefault%n %kfunction%n %gButton%n(props) {
  %kreturn%n %fhtml%s`
    <button
      on:click=%n${props?.%fonClick%n}%s
      class="btn btn--%n${props?.%ftype%n}%s"
    >
      %n${props?.%fchildren%n}%s
    </button>
  `%n;
}

In this step, we define a simple Button component using template literals syntax. This component takes in props as an argument, and renders a <button> element with the provided props. We then export this component using export default so that it can be used in other parts of our app.

Component Registration

Register the Button component in the dict function.

%kconst%n html = %fdict%n({
  el: {
    button: %gButton%n
  }
});

We use the dict function to register our Button component under the el namespace, with the name button. This allows us to use this component later in our app using the syntax <el:button></el:button>.

Component Usage

Create your App component and use the registered Button component.

%kexport%n %kdefault%n %kfunction%n %gApp%n(props) {
  %kreturn%n %fhtml%s`
    <main>
      <el:button
        type="primary"
        on:click=%n${() => console.%flog%n(%s'It works!'%n)}%s
      >
        <span>Click me</span>
      </el:button>
    </main>
  `%n;
}

In this step, we define an App component using template literals syntax, and use the registered Button component by referencing it as <el:button>. We also pass in some props to the Button component, such as type and an onClick function.

Final step

Render your App component using React DOM.

%kconst%n root = document.%fquerySelector%n(%s'#root'%n);
%gReactDOM%n.%frender%n(%gReact%n.%fcreateElement%n(%gApp%n), root);

Finally, we render our App component using ReactDOM.render function. This will render our App component, which includes our registered Button component.

Motivation

As a developer, I am passionate about creating tools that simplify the coding process and make it more enjoyable.

With the figure framework, I aim to do just that. By eliminating the need for JSX and allowing developers to use vanilla JavaScript syntax, figure significantly reduces the complexity of building React applications. This translates into a more efficient and enjoyable programming experience, freeing up developers to focus on the creative aspects of their work.

I believe that figure has the potential to improve the way we build React applications and I am excited to share it with the community.