### 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

# Getting Started

JSONX is a library that creates React Elements, JSX, and HTML from JSON. JSONX works by converting JSON Objects that follow the JXM spec into the arguments passed into React.createElement. The only required property is the component (which is passed as the `type` argument)

    // React Create Element Example
    React.createElement(
      type,
      [props],
      [...children]
    )

    // Basic JXM
    const JXM = { component:'div', props: { title:'jsonx', }, children:'hello', };

    // JSONX.getReactElement returns a react element
    JSONX.getReactElement(JXM) => React.createElement('div', { title: 'jsonx', }, 'hello');

    // eqivalent to JSX
    <div title="jsonx">hello</div>

## Usages

JSONX is great for:

- Composing UIs programmatically
- Using existing React Component Libraries to compose UIs
- Using React components with transpilers
- Creating simple components with JSON
- Rendering components in existing React Applications

JSONX is not great for:

- building extremely complicated components (although it can be done)

## Example

## Customizing JSONX

The JSONX library has a couple of customization options. The library can be customized by setting the configuration on the `this` property of JSONX methods. The configuration options are:

    type JSONXConfiguration = {
      debug: boolean = false; // used to debug component rendering errors, and will send exceptions to the logError function
      logError: (...args: any[]) => any = console.error; // default(console.error) by default will log errors to console.error but you can define any custom error logging function
      returnJSON: boolean = false; // used to return a JSON object instead of React Components
      disableRenderIndexKey: boolean = true; // used to disable auto assign props.key
      boundedComponents: jsonx[]; // array of components to bind "this" to
      componentLibraries: {
        [index: libraryName as string]: {
          [index: componentName as string]: ReactComponentLike;
        }
      }; // object of custom react components in component library
      reactComponents: { [index: componentName as string]: ReactComponentLike } // custom react components
    }

    //e.g

    jsonx.getReactElementFromJSONX.call(
      { debug:true, reactComponents:{ReactModal}, componentLibraries:{ ReactBootstrap, Antd, } }, //custom options bound to 'this'
      {
        component:'ReactBootstrap.Container', children:'hello world'
      });

## Next: Using Advanced Props

### 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