Tina is a toolkit for building visual editing into your site. This tutorial will walk you through Tina's fundamental building blocks by setting up editing on a basic create-react-app
demo. To get the most from Tina, you should have a good working knowledge of JavaScript and React.
Tina's UI is built with React. Using Tina in a plain React App is the simplest way to get familiar with Tina without relying on helper packages or meta-frameworks. Understanding the core concepts introduced in this tutorial will set you up for success later down the line.
If this is your first time working with Tina, we suggest going through this short tutorial.
These are the general steps we will cover.
tinacms
TinaProvider
To get started, clone the demo, install its dependencies, and start the dev server.
git clone git@github.com:tinacms/tina-intro-tutorial.git my-tina-app
cd my-tina-app
yarn install
yarn start
If at any point you feel lost or confused during this tutorial, checkout the Tina Community Forum to get answers, help, and llama-humor.
Last Edited: November 26, 2020