Intermediate Code Tutorial: Building TodoMVC
Before you start
In this tutorial we’re making TodoMVC, a standard introductory app. You can play with example implementations across various frameworks/languages at .
This tutorial is focused on just the code, and is an intermediate-level intro to the Plasmic code integration. We’ll provide you with the finished design in Plasmic. From there you will be generating the presentational code and adding the required props, event handlers, etc. to bring the designs to life.
For an end-to-end tutorial that covers how to design new components and builds an even simpler app than TodoMVC, see the .
As you learn Plasmic, please let us know all your questions and feedback! Reach us on our or at .
Plasmic TodoMVC project
Before starting, make sure you have a Plasmic account already, and take a look at the to get a sense of what we’re making. You should make a copy of this project so you can play with it yourself.
We have a that walks through the components that comprise the UI and (more importantly) how they’re modeled in terms of Plasmic’s core concepts. Please have a read to familiarize yourself with the structure of the project and these core concepts.
You can play with a completed codebase implementation on CodeSandbox:
All of the code for this completed implementation is also available on Github:
Follow these steps to set up your project. Refer to +Plasmic Developer Guide for more details.
First, create a brand-new React codebase named “todomvc”. In this tutorial we’ll be showing Typescript, but Plasmic also works with plain JS projects.
npx create-react-app todomvc --typescript
Start the app, which should open up in your browser:
The above gets you a brand-new generic React codebase. The next instructions are Plasmic-specific. You won’t need to remember these; if you just open up the Plasmic project and click on the Codegen toolbar button, you can also see the instructions laid out there:
Now, in a separate terminal, install the plasmic command-line tool:
yarn global add @plasmicapp/cli
npm install -g @plasmicapp/cli
Let's create the initial ~/.plasmic.auth and plasmic.json file with: