Structure Jotai Atoms and Add Functionality to a React App

InstructorDaishi Kato

Share this video with your friends

Send Tweet

Right now, the app that we have built draws dots on SVG on canvas. As you start applications you'll often find working in one file works the best to build something quickly. There comes a point when you need to move code out of the single file and structure it.

First, we'll see how the app has been refactored into 3 files. We are able to export the atoms and components that are needed throughout our app while keeping internal logic isolated in the file meaning not all atoms are exported.

Next, we'll create a new atom that takes a set of points and generates a path. You'll see how to create new functionality through an atom and import it into another component that's using Jotai atoms.