In this tutorial we’re making TodoMVC, a standard introductory app. You can play with example implementations across various frameworks/languages at todomvc.com.
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 Minitwitter tutorial.
This tutorial targets React with Typescript, but you can also follow along with Javascript(which Plasmic also supports). We're also using the"Blackbox Library" codegen scheme, which we will explain here. For the full documentation for our codegen scheme, refer to the +Plasmic Developer Guide.
As you learn Plasmic, please let us know all your questions and feedback! Reach us on our Slack community or at team@plasmic.app.
Plasmic TodoMVC project
Before starting, make sure you have a Plasmic account already, and take a look at the TodoMVC Plasmic project 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 quick tour of the project 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:
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.
# {shell}
npx create-react-app todomvc --typescript
cd todomvc/
Start the app, which should open up in your browser:
# {shell}
yarn start
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:
# {shell}
yarn global add @plasmicapp/cli
# or
npm install -g @plasmicapp/cli
Let's create the initial ~/.plasmic.auth and plasmic.json file with:
Before you start
Plasmic TodoMVC project
Setup
# {shell}npx create-react-app todomvc --typescriptcd todomvc/# {shell}yarn start# {shell}yarn global add @plasmicapp/cli# ornpm install -g @plasmicapp/cli