React and Next.js

Introduction

The backbone of the Makeswift frontend is formed by Next.js, a full-stack web application framework built on React and providing features like routing, data fetching, and server-side rendering. This framework is key not only to the public-facing rendering of your content, but also to the application’s integration with the builder interface itself.

Communication flows both ways; Makeswift provides Next.js with a snapshot of the component tree that has been built in the editor for a particular page (or a snapshot of an individual component), while Next.js informs Makeswift of the details of custom components and actually renders a page within the editor.

Having a foundational understanding of these toolsets is important for successfully customizing your Makeswift application.

React

React is a Javascript-powered library for rapidly and easily building user interfaces, and React components are central to the visual design system in Catalyst.

Compared with a templating language like Handlebars in Stencil, React components offer similar capabilities for expressing dynamic data but also encompass much more. React interfaces are a tree of modular components, which are actually JavaScript functions encapsulating both the logic and presentational markup relevant to a specific piece of UI.

React is a large topic. If you’re new to the technology, see the official guide to start. The following are some of the basic concepts.

Functions and JSX

React components are functions that return JSX code - an HTML-like markup that allows mixing in JavaScript expressions.

JavaScript Expressions

Wherever braces appear within JSX, the code within them is a JavaScript expression. This is essential for working with dynamic data.

Referencing dynamic values, conditional output, loops, and similar constructs require no specialized syntax. Familiar JavaScript syntax like object notation, comparison operators, and array functions are used for these tasks.

State

State values provide the “memory” of a React component, tracking data that changes in response to user interaction or external systems.

State is key to creating highly dynamic UI, making it easy to incorporate even very complex combinations of states by simply describing conditional output with JSX.

An Example

The following example demonstrates a straightforward implementation of the concepts we’ve described.

function BlogPost({
  article,
  showTags
}) {
  {/* State to track a user's interaction */}
  const [liked, setLiked] = useState(false);
  const activateLike = () => {
    // ... send request
    setLiked(true);
  }
  return (
    <article>
      {/* Outputting a simple object value */}
      <h1>{article.title}</h1>
      <div>
        {article.body}
      </div>
      {/* Using comparison for an "IF" */}
      {showTags && (article.tags.length > 0) && (
        <ul>
          {/* A simple array function to loop over a value */}
          {article.tags.map(tag => (
            <li>{tag}</li>
          ))}
        </ul>
      )}
      <div>
        {/* Ternary operators work as well
        This time examining state for what to output. */}
        {liked ? (
          <span>You liked this</span>
        ) : (
          <button onClick={activateLike}>Like</button>
        )}
      </div>
    </article>
  );
}

Client vs. Server Components

Given their JavaScript foundation and frequent emphasis on interactivity, React components have traditionally been processed and rendered within the client (the web browser, for example, in a web application).

The Next.js App Router architecture makes it possible to utilize the newer React Server Component pattern. Server components bring their own advantages, allowing server-side logic like data fetching to be tightly coupled with the rendered component. Client and server components each have their purpose, and applications are typically built with a combination of both.

Currently, the custom components you create for the Makeswift builder must be client components. Server components can, however, still be used elsewhere in your application (provided you are using the App Router).

Resources

• React
• React Server Components
• Next.js