Basic Usage

React JSONR allows you to render React components from JSON definitions. This guide will walk you through the basics of using the library.

Core Concepts

Before diving into the code, let's understand the core concepts of React JSONR:

JSON Node: A JSON structure describing a component, its props, and children
Component Registry: A mapping of component types to their implementations
Event Handler Mapping: A way to safely map string references to actual functions
Transformation Pipeline: A system to process and modify the JSON before rendering
Plugins: Modular transformers that can alter the JSON tree

Simple Example

Let's start with a simple example of rendering a contact form from JSON:

import React, { useState, useEffect } from 'react';
import { renderNode, transformJsonTree, createRegistry } from 'react-jsonr';
 
// Define your components
const Form = ({ title, children, ...props }) => (
  <form {...props}>
    <h2>{title}</h2>
    <div className="form-body">{children}</div>
  </form>
);
 
const Input = ({ label, name, type = 'text', ...props }) => (
  <div className="form-group">
    <label htmlFor={name}>{label}</label>
    <input id={name} name={name} type={type} {...props} />
  </div>
);
 
const Button = ({ label, ...props }) => (
  <button type="button" {...props}>{label}</button>
);
 
// 1. Create a component registry with your custom components
// (All HTML elements, Fragment, and Portal are already included)
const registry = createRegistry({
  Form,
  Input,
  Button,
});
 
// 2. Define event handlers that can be referenced from JSON
const eventHandlers = {
  submitForm: () => {
    alert('Form submitted!');
  }
};
 
// 3. Define your UI as JSON
const jsonDefinition = {
  type: 'Form',
  props: { title: 'Contact Us' },
  children: [
    { 
      type: 'Input',
      props: { name: 'email', label: 'Email', type: 'email' }
    },
    { 
      type: 'Button',
      props: { label: 'Submit', onClick: 'submitForm' }
    }
  ]
};
 
const transformed = await transformJsonTree(jsonDefinition, []);
 
const element = renderNode(transformed, registry, { eventHandlers });
 
function App() {
  return <div className="app">{element}</div>;
}

Step-by-Step Breakdown

Import the library: Import renderNode and transformJsonTree from react-jsonr
Define or import your components: These are the React components that will be referenced in your JSON
Create a component registry: This maps type names in JSON to actual React components
Define event handlers: Functions that can be referenced by string names in your JSON
Create the JSON definition: Describe your UI structure using JSON nodes
Transform the JSON (optional): Apply plugins to modify the JSON before rendering
Render to React elements: Use renderNode to convert the JSON into React elements
Use the elements: Render the generated elements in your React application

What's Next

Now that you understand the basics, you can:

Learn about using plugins to enhance your JSON
Check out more advanced examples
Explore the API reference

Basic Usage

Core Concepts

Simple Example

Step-by-Step Breakdown

What's Next

On this page