We Keep Coding

What is correct way of passing html tags in React State?

I am in process of creating Blog using React. I am planning to bring main content of blog from server and passed to React Component via Props/State. Blog content can have html tags like :
blockquote
h2 and h3
img, Video, embed code etc etc
I was hoping to store content of blog in Database/json files along with these tags and render the content as it is on page load.
But It seems to be difficult to do it in React. There are three ways we can achieve this :
dangerouslySetInnerHTML
Storing content in form array object [html content] ( pushing a String content to array won't work ).
Passing unicode characters for all html entities.
This Question discuss these approaches pretty well :
Rendering raw html with reactjs
My Queries are :
Should there be change in over all flow/architecture to handle this?
What is best way to insert large html content from ajax call to react component to render ?
What design decisions should be considered to make fully functional and dynamic/scalable Blog ?
How to get SEO on your dynamic content like blog content ( which is stored in some file/database ). ?

There is nothing special about dangerouslySetInnerHTML. Rendering HTML from javascript could always be dangerous, regardless of using React or not, depending on the source of said HTML. For example, if you are rendering a post that you created yourself, and saved to a database, then there is no danger (unless your database has been compromised). But let's say you have comments on a post, and an user sends malicious code as a comment. All other users accessing that page, would fetch the malicious code from the database, and "dangerously" execute it on their browsers. So, what you need to do, is make sure the source of HTML is secure, by sanitizing any user input BEFORE saving to the database. There are libraries you can use to achieve that, example - http://htmlpurifier.org/
Regarding SEO, you can use server side rendering - https://www.smashingmagazine.com/2016/03/server-side-rendering-react-node-express/
Make sure you have all the information you need available on the url, so you don't rely on "state" to render a page, like post id, etc. You can achieve that by using React Router - https://github.com/reactjs/react-router

Writing language choice to jQuery file?

I'm currently programming a website that will be in multiple languages and I was wondering if there is an easy way to program the site only once for all languages.
For example, I have a variable called 'lang'. Basically if the user chooses Spanish then I would like the page to load images (or whatever asset) for buttons with Spanish as opposed to English. So for example, by changing the 'lang' variable, an image called 'home_button_eng.jpg' would instead load 'home_button_spa.jpg'.
I am thinking that this would require 'writing' or 'changing' an external document that contains the 'lang' variable which is then loaded by the page.
In other words, user clicks 'spanish' which makes lang='spa' then a new page loads which is connected to that language_choice.js file. The the appropriate content loads up.
Is there a way of doing this? I would much rather do this than duplicate every English page for Spanish.

Certainly you don't want to duplicate any content or code. I would organise all the assets in subfolders based on their language code:
content\
en\
images\
sp\
images\
This avoids having duplicate named files in a single folder for each language. When changing the language, you could store a session variable in your dynamic language of choice (Python, PHP, Ruby...) and use it to populate all the content with the correct language code.
Depending on how dynamic your content will be, you could implement it using .po and .mo internationalisation files and read them in to get your headings, text and so forth, while still implicitly determining the location of the images and other assets based on the language directory alone.

If all your language specific changes have to do with images you can just dynamically load a language specific CSS file.
If you have text as well you'd probably want to make a localization JSON object for each language you support and load that dynamically. The JSON object would contain the element-ids or element-classes with the language specific text or image source, you would iterating over the objects keys with JavaScript and fill-in the language specific data on the elements references in it.

Admin Panel like Custom CMS Framework

I want to Create a Framework , like Admin panel , which can rule almost all the aspects of what is shown on the frontend.
For an eg (Most basic one): If suppose the links which are to be shown in a Navigation area is passed from the server, with the order and the url , etc.
The whole aim is to save the time on the tedious tasks. U can just start creating Menus and start assigning pages to it. Give Url, Actual files which are to be rendered (in case of static files.), In case of dynamic files , giving the file accordingly.
And this is fully server side manageable using different portlets, sort of things.
So basic Roadmap is having :
Areas like :
Header Area - Which can contain logos , links etc.
Navigation Area - Which can contains links and submenus.
Content Area - Now this is where the tricky part is that that It has Zones like : Left , Center & Right. It contains Order in which it has to be displayed. So, when someday we want to change the way the articles appear on the page, we can do so easily, without any deployments. Now these Zones , can have n no of internal elements, like the word cloud , or the advertisment area.
Footer Area : Again similar as Header Area.
Currently there is a Framework already existing, this is using XSLT files for pulling out data from server sides.
For an eg: If there's a Grid it will be having a tag embedded in the XSLT file. Now whatever might be the source of the data , we serialize this as XML and give it to the XSLT file and the html is derived from this and is appended to the layer in a page.
The problem with this approach is :
The XSLT conversion is occurring on the server side, so the server is responsible for getting the data , running XSLT transform, and append the html generated to the layer div. So, according to me firstly this isn't the server's concern to do so. Secondly for larger applications this might be slower.
Debugging isn't possible for XSLT transformation. So, whenever we face problems with data its always a bit of "Trial & Error method".
Maintaining it is a bit of an eerie job i.e. styling changes, and other stuff.
Adding dynamic values. Like the JavaScript cant be actually very easily used in this. Secondly, we cant use JQuery or any other libraries with this since this is all occurring onto the server.
For now what i have thought about is using Templating - Javascript - JSON combination at the place of XSLT , this will be offloaded to the client and the rendering will take place accordingly.
What could be other ways to implement a Custom CMS ?
What could be the problem with JavaScript based approach ?
Are there any existing frameworks for similar usage ?

How to get jQtree to read the initial tree from the HTML's source

until now I've been using jQuery TreeView for my website's navigation menus, but now since the main navigation menu (on the left pane) has grown too large (Vim reports it takes 40869 bytes out of a typical page's 67054 bytes) I would like to make it less comprehensive in the raw HTML, and populate the remaining parts using AJAX calls that fetch JSON.
However, jQuery Treeview cannot do that (and its author claims it is incomplete), so I'm looking into jqTree. jqTree seems to be able to handle AJAX stuff, but I don't understand from the documentation how I can get it to read an initial tree skeleton from some <ul><li> tags in the HTML, which I want to keep for people whose browsers don't support JavaScript or block it by default (I am using NoScript to blacklist all domains my default and am often irritated that sites don't even display correctly without JavaScript).
I suppose I can write some jQuery code to traverse the <ul><li> structure recursively using jQuery's DOM support and construct some JSON out of it (with some amount of difficulty), but I'm wondering if it is a solved problem?
Thanks in advance,
— Shlomi Fish

Jqtree does not support getting the data from html.
I think that the best way to support browsers without javascript is to generate the tree in html AND initialize a tree with json data. That of course means more work for you. You have to generate the html and the json data.
Jstree, another tree component, does support this. See http://www.jstree.com/documentation/html_data.

What is the best approach for handling a complex form in html?

I need to implement a webform (JSP, struts) featuring loads of checkboxes and textfields. Basically I have a tree made of checkboxes which has to be extendable (like adding a new node). On another page the same data is used, but refined. So you add again child nodes to the mentioned data structure using textboxes etc. I can describe the datastructure in XML:
But contains about 100 rows in reality.
I found 3 approaches:
1. Do a webform in JSP which lowers the user experience because lots of postbacks are necessary (every time i add/edit/delete a node, subnode...)
2. do it in async fashion. -> loads of javascript to handle the structure of the data (keep the XML data in a hidden div and update ui)
3. go for a RIA like OpenLaszlo
What do you suggest?

If you already know OpenLaszlo, go for it. You will end up with a better user experience with less work.
You should target user interface and performance when developing an app. So IMO, plain JSP will be my last approach.

You can consider client side rendering.It allows to build very responsive web apps:
build your JSP pages to deliver JSON data, no HTML here
use a javascript templating engine in the browser to convert the data in HTML client side. I'm the author of PURE but there are plenty of others on the web that may suit better your style
when the user types or press submit, parse the form using a common technique found in many frameworks. i.e: the "name" attribute is the path to set the value in the JSON<input name="employee.name" type="text" ... />
When the form is parsed, post back the JSON to a JSP page that will read it and do the backend work.
You can use XML instead of JSON and XSLT instead of a JS templating engine, but if you target the web browser only, it adds an extra layer of complexity and trouble to parse the XML.