Sign in
Log inSign up

How to generate HTML using JSX, JSON, reactjs in a customised pattern library?

Gopal Kumar's photo
Gopal Kumar
·Mar 3, 2017

My project is basically to create or rather HTMLs from referencing a pattern library created specifically in JSX, JSON and base is reactjs as per my investigation over the web.

I am fairly new in reactjs and concepts of JSX; i tried reading it on the documentation but couldn't really gather that amount of information.

Tried setting up the project with demo items and make it work out; simple project was successful but more than one page routing and others was difficult and not resolvable.

Below is the sample code from the pattern library:

JSX Representation

<Button text="Primary Button" />

JSON Representation

{ "component": "Button", "props": { "text": "Primary Button" } }

Rendered HTML

<button class="\_3\_Oz p barry-b-fg hulk-b-bg barry-b-fg-hover" type="submit"> <span>Primary Button</span> </button>

I need to first setup this environment which i have been doing in process but i really need to know the complexities can be handled using this technique to create modular components which is supported by this tyof development, as we are focusing on

  • Responsive UI
  • CSS implementation
  • Interactions
  • Accessibility standards
  • Usability

Will this approach be feasible enough to built a full-fledged website or there will be some limitations?

Also, if some one has similar pattern library experience, please share the experience and URL and code if possible.

Thanks in advance

3