The modern man's conceptual art studio, Visual Studio Code
The modern man’s conceptual art studio, Visual Studio Code

My work life and my art life are colliding a bit lately. I have started using ReactJS for small art projects I make for the web after using the framework at work for work-like practical things. I recently wrote Guacamole Tips in ReactJS and a I rewroteShtacks in ReactJS a little while earlier.It’s probably entirely unintended, but the design principles of ReactJS make it a good artistic tool.

When I started tinkering with the idea of making net-art projects I was pretty dedicated to the idea that I should write most things “from scratch“ barring some build tools or similar. Therefore, I didn’t use a framework for anything and wrote my own code to, for example, set up the download link on Shtacks.

In retrospect, this was silly. What I wanted was to write minimal code that was future-proof and broadly compatible with modern browsers. I was worried about the “archival” nature of the work. But the brainy engineers at Facebook care about the same thing when writing the ReactJS framework, so why not profit from their contributions? Besides, it’s not like I grind my own pigments if I want to make a painting.

React is bricks

ReactJS is a popular framework for making web applications, and its popularity is spreading far and wide. If you use Slack at work - you’re actually using a ReactJS application. ReactJS resonates with engineers because it provides just enough tooling to make small components which can be clicked together with other components to do complex things.

Yeah, it’s basically playing with Lego bricks.

Each little component you might write for a React application is small and simple and is completely knowable. When these components are stacked together, complexity emerges. This is like sticking wheels on your Lego castle.

Art is object oriented

In my ReactJS art projects I create components with names that correspond with their subject matter. My web painting “Guacamole Tips” has a Garlic component. It has an Onion component. These objects are the subjects of the painting and they can be stacked and composed with other objects to make a piece.

Like any traditional painting, elements are arranged from background to foreground
Like any traditional painting, elements are arranged from background to foreground

Composition

In visual arts “composition” refers to the visual or graphic arrangement of elements in an artwork. In programming “composition” is a logical arrangement of small units to complex jobs.

In a ReactJS art piece - these ideas are the same.

I compose React components to appear in the art work and do their job together with other components and an artwork emerges.