### JSONX Manual

- Home
- Getting Started
- Using Advanced Props
- External and Custom Components
- Creating React Components and Component Libraries
- JSONX & JXM Spec
- Samples
- Roadmap
- Full API Docs

# Creating new components

“With great power comes great responsibility”. Just because you can create new Class and Function components with JSONX it doesn’t mean you should. Typically, components should be bundled as UMDs and imported as Custom/External components to optimize performance.

- 1. Function Components - Use `jsonx._jsonxComponents.getReactFunctionComponent` and JXM to create React Function Components with JSON. Because JSONX can uses React under the hood, all React features are available (e.g. Hooks, Lazy and Suspense).
- 2. Class Components - Use `jsonx._jsonxComponents.getReactClassComponent` and JXM to create React Class Components with JSON
- 3. Dynamic Components - Use `jsonx._jsonxComponents.DynamicComponent` is a special component that renders components after fetching data.
- 4. Form Components - Use `jsonx._jsonxComponents.FormComponent` is a special component that create forms with react-hook-form.

## 1. Function Components

There are two ways to create function components, either using `jsonx._jsonxComponents.getReactFunctionComponent` or `jsonx._jsonxComponents.makeFunctionComponent`. `makeFunctionComponent` is a shortcut to using `getReactFunctionComponent`. The difference in component creation with `makeFunctionComponent` is you can just call that function by passing a regular JavaScript function and underneath the hood, that function will be decomposed into the arguments to the `getReactFunctionComponent` function.

    function myComponent(){
      const [count,setCount] = useState() // you can use any react function inside your function
      const exposeprops = {count,setCount}; // you have to define what props you want passed to your rendered component
      return {// you need to return JSONX JSON
        component:'div',
        passprops:true, //set to true so you can pass 'count' and 'setCount' to child elements
        children: [
          { component:'span', children:'Clicked Count' },
          {
            component:'input',
            props:{ defaultValue:0 },
            thisprops:{ value:['count'], },
          },
          {
            component:'button',
            __dangerouslyBindEvalProps:{
              onClick(count,setCount){
                setCount(count+1);
              },
            },
            children:'Click me'
          }
        ]
      }
    }

    jsonx._jsonxComponents.makeFunctionComponent(myComponent) // return React Function Component

JSONX exposes the `jsonx._jsonxComponents.getReactFunctionComponent` function that can you can use to create React Function Components.

    export function getReactFunctionComponent(
      reactComponent: JXM_JSON,
      functionBody: string,
      options = {},
    ): ReactComponentLike

`getReactFunctionComponent` takes three arguments:

1. `reactComponent` which contains the JXM JSON for rendering the Function Component.
2. `functionBody` which is a string for the Function component (if you are using hooks or want to expose props from inside of your components, assign the props you want to make available to an `exposeprops` variable)
3. `options` used to customize `getReactFunctionComponent`.

    const hookFunctionComponent = jsonx._jsonxComponents.getReactFunctionComponent(
      //reactComponent
      {
        component:'div',
        passprops:true,
        children:[
          {
            component:'button',
            __dangerouslyBindEvalProps:{
              onClick:function(clicks,set_click){
                set_click(clicks+1);
              },
            },
            thisprops:{
              clicks:['clicks'],
              set_click:['set_click']
            },
            children:'Click Me',
          },
          {
            component:'span',
            children:' Clicks: '
          },
          {
            component:'span',
            thisprops:{
              _children:['clicks'],
            }
          }
        ]
      },
      //functionBody
      `
      const [clicks, set_click] = useState(0);
      const exposeprops = {clicks,set_click};
      `,
      //options
      {
        name:'hookFunctionComponent',
      });

### Example Function Components

## 2. Class Components

JSONX exposes the `jsonx._jsonxComponents.getReactClassComponent` function that can you can use to create React Class Components. `getReactClassComponent` uses `createReactClass` underneath the hood. You can read more about using `createReactClass` in the React docs section about “React Without ES6”.

    export function getReactClassComponent(
      reactComponent = {},
      options = {},
    ): ReactComponentLike

`getReactClassComponent` takes two arguments `reactComponent` which contains the arguments passed to `createReactClass` and an `options` argument.

The only required function in the `reactComponent` parameter object is a render function, the body of the function has to be valid JXM JSON. Each property in the object has two properties a `body` property whose value is the function body and an `arguments` property which defines the parameters for the function.

    const reactComponent = {
      //
      // Initialization function
      //
      getInitialState:{
        body:'return { status:"not-loaded", name:"jsonx test", customNumber:1, }',
        arguments:[],
      },
      getDefaultProps:{
        body:'return { someProp:1, someOtherProp:2, status:"original status" }',
        arguments:[],
      },
      componentDidMount:{
        body:`console.log('mounted', 'this.props',this.props, 'this.state',this.state)`,
        arguments:[],
      },
      componentWillUnmount:{
        body:`console.log('unmounted',this.props)`,
        arguments:[],
      },
      //
      // State change functions
      //
      shouldComponentUpdate:{
        body:'console.log("should update component",{nextProps,nextState}); return true;',
        arguments:['nextProps', 'nextState']
      },
      componentWillUpdate:{
        body:'console.log("will update component",{nextProps,nextState}); return true;',
        arguments:['nextProps', 'nextState']
      },
      componentDidUpdate:{
        body:'console.log("did update component",{prevProps,prevState}); return true;',
        arguments:['prevProps', 'prevState']
      },
      //
      // Prop change functions
      //
      componentWillReceiveProps: {
        body:'console.log("will recieve props",{nextProps}); return true;',
        arguments:['nextProps']
      },
      //
      // RENDER IS THE ONLY ***REQUIRED*** FUNCTION
      //
      render:{
        body:{
          component:'p',
          props:{
            status:'from inline prop'
          },
          passprops:true,
          children:[
            {
              component:'span',
              children: 'My Custom React Component Status: ',
            },
            {
              component:'span',
              thisprops:{
                children:['status']
              }
            }
          ]
        },
      }
    };
    const options = {
      name:'MyCustomComponent',
    };
    const MyCustomComponent = jsonx._jsonxComponents.getReactClassComponent(reactComponent,options);
    const JXM = {
      component:'MyCustomComponent',
      props:{
        status:'Amazing',
      }
    };
    const boundConfig = {
      debug:true,
      reactComponents:{
        MyCustomComponent,
      }
    };

    jsonx.jsonxRender.call(boundConfig, {
      jsonx: JXM,
      querySelector:'#main', });

Console output after mounting

    [Log] mounted (4)
    "this.props"
    {status: "Amazing", children: {}, someProp: 1, someOtherProp: 2}
    "this.state"
    {status: "not-loaded", name: "jsonx test", customNumber: 1}

### Example Class Components

## 3. Dynamic Components

JSONX has a helper component called `DynamicComponent`. Using `DynamicComponent` allows you to create components that load data and render asynchronously.

The typical use case is if you have some kind of dashboard or components that are independently loading data, Dynamic Components are a convenient way to handle dynamic components without Suspense and Lazy Components (they use hooks under the hood).

Once the data is fetched, the `jsonx` object passed is rendered and the resolved data is available as `resourceprops.DynamicComponentData`.

    const JXM = {
      component: 'DynamicComponent',
      props: {
        useCache: boolean;
        cacheTimeout: number;//milliseconds
        loadingJSONX: jsonx;
        loadingErrorJSONX: jsonx;
        cacheTimeoutFunction: () => void,
        jsonx: jsonx;
        transformFunction: (data: any) => any,
        fetchURL: string;
        fetchOptions: any;
        fetchFunction: (fetchURL: string, fetchOptions: any)=>Promise,
      }
    };

    const dynamicComponent = jsonx.getReactElementFromJSONX({
      {
        component:'DynamicComponent',
        props:{
          fetchURL:'/path/to/some/data'
          jsonx:{
            component:'p',
            children:'loaded data',
          }
        }
      },
    });

### Example Dynamic Components

---

## 4. Form Components

JSONX has a helper component called `FormComponent`. Using `FormComponent` allows you to create forms with react-hook-form without needed to add external form libraries.

Form components work by creating a Function Component that uses the `useForm` hook. You can customize `useForm` by adding schema validations via `Yup` or any of the other optional arguments on useForm.

The actual form elements are passed through the formComponent JXM property. By Default FormComponents are wrapped with `form onSubmit={handleSubmit(props.onSubmit)}` but the default wrapper can be overwritten with the `formWrapperComponent`.

FormComponents will add an additional reactComponentLibrary called `ReactHookForm` with the `Controller` and `ErrorMessage` components included. All of the methods returned from the `useForm` hook are bound to the function context on the `this.reactHookForm` property. This is useful when you need to customize and pass registers, errors and other react-hook-form functionality into your JXM JSON Object.

    const JXM = {
      component: 'FormComponent',
      props: {
        hookFormOptions: {},// settings for react-hook-form's useForm hook
        formComponent: jsonx,
        onSubmit:(formdata: any) => any,
        formWrapperComponent: jsonx,
      }
    };

    const dynamicComponent = jsonx.getReactElementFromJSONX({
      {
        component:'FormComponent',
        props:{
          onSubmit: (data) => { console.log({ submitData: data }) },
          formComponent:{
            component: "input",
            props: { type: "text", name: "username", placeholder: "username" },
            thiscontext:{ ref:['reactHookForm','register'] },
          },
        }
      },
    });

### Example Form Components

## JSONX & JXM Spec

### JSONX Manual

- Home
- Getting Started
- Using Advanced Props
- External and Custom Components
- Creating React Components and Component Libraries
- JSONX & JXM Spec
- Samples
- Roadmap
- Full API Docs