Get started with plain React

Overview

This covers integrating Plasmic into your existing React codebase in three steps.

Want to generate a new codebase with Plasmic already integrated? Follow this quickstart instead!

Installation

npm install @plasmicapp/loader-react
# or yarn add @plasmicapp/loader-react

Initialization

Initialize Plasmic with the project ID and public API token. Define this in its own module to make it available globally.

src/plasmic-init.ts
import { initPlasmicLoader } from "@plasmicapp/loader-react";
export const PLASMIC = initPlasmicLoader({
projects: [
{
id: "PROJECTID", // ID of a project you are using
token: "APITOKEN" // API token for that project
}
],
// Fetches the latest revisions, whether or not they were unpublished!
// Disable for production to ensure you render only published changes.
preview: true,
})

To find your project’s public API token: open the project in Plasmic Studio, and click the Code toolbar button.

Render a single Plasmic page or component

For client-rendered or single-page apps, we fetch components dynamically at runtime. (These are cached for the lifetime of the application.)

src/MyComponent.tsx
import { PlasmicRootProvider, PlasmicComponent } from '@plasmicapp/loader-react';
import { PLASMIC } from './plasmic-init';
function MyComponent() {
return (
<PlasmicRootProvider loader={PLASMIC}>
<PlasmicComponent component="COMPONENTNAME" />
</PlasmicRootProvider>
);
}

Auto load all Plasmic pages

To automatically render all Plasmic-defined pages at the routes specified in Plasmic, create a catch-all route for your specific routing framework.

Here is an example for react-router:

src/AppRoot.tsx
import { initPlasmicLoader, PlasmicRootProvider, PlasmicComponent, ComponentRenderData } from '@plasmicapp/loader-react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { PLASMIC } from './plasmic-init';
function AppRoot() {
return (
<PlasmicRootProvider loader={PLASMIC}>
<Router>
<Switch>
{/* Your other routes... */}
<Route component={CatchAllPage} />
</Switch>
</Router>
</PlasmicRootProvider>
);
}
// We try loading the Plasmic page for the current route.
// If it doesn't exist, then return "Not found."
export function CatchAllPage() {
const [loading, setLoading] = useState(true);
const [pageData, setPageData] = useState<ComponentRenderData | null>(null);
useEffect(() => {
async function load() {
const pageData = await PLASMIC.maybeFetchComponentData(location.pathname);
setPageData(pageData);
setLoading(false);
}
load();
}, []);
if (loading) {
return <div>Loading...</div>;
}
if (!pageData) {
return <div>Not found</div>;
}
// The page will already be cached from the `load` call above.
return <PlasmicComponent component={location.pathname} />;
}

There’s much more to explore!

  • Bring your own React components into Plasmic.
  • Perform server-side rendering.
  • Render different variants.
  • Override the content or props.
  • Add dynamic behavior.
Continue learning in the docs.