Is there a better way than `const` to store large blocks of text?

Question

I am making a single page web app with React. One of my pages has a large block of text like so:

const ContentText = <p>......huge block of text.......</p>

It looks very ugly in my editor and I was wondering if there was a best practice for storing large blocks of text to render on a page.

Yes - a better practice is to _not_ store large blocks of text. If you need to keep some HTML, it suggests you need a templating solution. If your HTML is too malleable for a templating solution, consider generating an HTML tag in-line and populating it, so you don't have to keep it as text. — VLAZ, Oct 09 '16 at 20:09
@vlaz he said he's using react so he's already using a templating engine. the text has to come from somewhere obviously — azium, Oct 09 '16 at 20:29
@azium in my experience, you store your template text in a template _file_ and then just call that. I suppose you could store it in a variable but it's incredibly ugly, as OP has found out. You can even process your template files and add them to your HTML as ` tags (I'm borrowing Knockout.js thing here, but it's useful) in which case you merely have to fetch them by ID and perform the substitutions then. Sure the text "has to come from somewhere" but it doesn't have to be mixed up with the logic for the page. It's one of the biggest things MVC has been teaching us. — VLAZ, Oct 09 '16 at 22:17
@vlaz But React *is* template files. React is a view library. It's also shown us that MVC is outdated and unidirectional data flow is easier to maintain. — azium, Oct 09 '16 at 23:24
@azium I am confused - at which point does MVC dictate "Thou shalt not have unidirectional data flow"? If it did impose such limitation I have been worryingly unaware of it. I thought that all it said was, essentially, "Separate your views from your logic and your data". — VLAZ, Oct 09 '16 at 23:34
@vlaz I understand that... this question / answer is pretty good. http://stackoverflow.com/questions/33447710/mvc-vs-flux-bidirectional-vs-unidirectional — azium, Oct 09 '16 at 23:37
@vlaz also, it's important to remember that with the coming of react and the newish wave of "components", logic can still be separated by concerns even though everything is javascript (template in a "variable"). separation of concerns over separation of technologies — azium, Oct 09 '16 at 23:43

score 2 · Accepted Answer · answered Oct 09 '16 at 20:32

I would create a module with your text and import it. That way you shouldn't care at all what it looks like in your editor because you're not really touching that file unless you're specifically trying to edit your huge block of text.

export default `
  ....huge block of text....
`

Then where you actually use it:

import hugeText from './text/hugeText'

....

render() {
  return <p>{hugeText}</p>
}

Editors like atom and sublime also have "soft wrap" mode so you don't have a ton of horizontal scrolling.

This text will then get bundled along with JS code, contributing to bundle size. More to download, more to parse by browser. — zgoda, May 24 '21 at 14:51

Is there a better way than `const` to store large blocks of text?

1 Answers1