At this point, you should have Paperclip configured & ready to start using in your project. If not, head back over to the installation page. If you're all setup, then it's time to started using Paperclip!
Create a new file in your source directory that's called
GroceryList.pc, then add this stuff:
If you're using the VS Code extension, you should be prompted to open a few of this file. If not, you cna run the command:
Paperclip: Open Live Preview.
Paperclip files are just like any ordinary component file, so all we need to do is import PC components into a React component. In the same directory, create a file called
GroceryList.tsx with this content:
You'll notice that all components that are exported from the Paperclip file are now accessible in our React component, and the API is pretty similar to React's. For example, a simple UI like this:
Can be used like this:
Check out the React API for more information on all the things you can do with Paperclip files.
Back to our demo. If you created a new project with
paperclip init, change your
entry.tsx file to this:
Here's a full walkthrough:
And that's it! You've now fully integrated Paperclip into a React app.