Create a To Do app with Printer in five minutes.
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 dev
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.
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/todo/add
λ printer component components/todo/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.