Getting Started

First thing's first. Download Printer from npm.

λ with npm

λ npm install @printerframework/cli --global

λ or with yarn

λ yarn global add @printerframework/cli

After installing Printer. Create a new project and start the dev environment.

λ printer new todo-app

λ cd todo-app

λ yarn

λ yarn dev

Create Slices and State Management

First let's create the “To Do” type. We can do this in a new terminal tab by inputting the following.

λ printer type todo

Then we should update the type to contain our the content that each to do will contain.

From there, we should create the “To Do” slice. We can do this by inputting the following.

λ printer slice todo

Let's now add our state and actions to the new slice. Make sure to add @printer decorations to make it easier to pass state and actions into components.

Design Components and Business Logic

You have successfully designed how state is mapped to redux. Now it's time to start doing the business logic in FC Components. Let's create the components.

λ printer component components/add

λ printer component components/list

Then, add these Components to the index page.

Now let's inject the state and actions into these components.

λ printer inject todo components/todo/add

λ printer inject todo components/todo/list

Your components should now be updated and have the following.

Let's now start working on some business logic to add new todos. The following adds a simple dispatch to add a new task to the To Do array.

Now we need to start working on the list. The following adds mappable list of all the tasks. With a checkbox to turn it on and off.

You're done! Hopefully this Printer tutorial was helpful and will help you prototype applications faster and better.