-1

I am building travel blog using React as frontend Javascript framework along with GraphQL. I am doing this project by myself as a pilot test and I am currently in a phase of translating photoshop design in HTML/CSS/JSX.

What bothers me is what will be the best way to store blog posts in database, fetching them and showing to the end user?

Blog post contains: text, categories, embedded pinterest/instagram/facebook links, images hosted locally, paragraphs, bullets etc.

Database entry should not be coupled with React so if I decide to change frontend framework in the future I could do this more easily. On the other hand, React strongly discourages using .dangerouslysetinnerhtml method which could be very handy in this situation - I would store post content as pure html in db and fetch it using graphql. Let's assume that all blog posts will have the same CSS rules!

Bip
  • 109
  • 1
  • 4

1 Answers1

3

I typically use markdown for blog posts' main content. This sits alongside the blog post's other columns (title, slug, categories, etc). The perks of using markdown is that it can be considered a subset of the visual elements that HTML offers, without giving writers access to the vastness of HTML (<script>, <title>, <style>, etc). As you've duly noted, using React's dangerouslySetInnerHTML is indeed dangerous, sometimes even if you're transpiling markdown into renderable HTML.

There's a React package, react-markdown, that can handle transpiling markdown with a simple React component. There are some things to note when preventing injected HTML using react-markdown, which are discussed in this Github issue.

Daniel Node.js
  • 148
  • 4
  • What is the benefit of using react-markdown comparing with setting inner html? – Bip Sep 10 '18 at 18:26
  • @Bip The benefit is that your giving your blog writers a small subset of the features of HTML. It includes bulleted lists, headings, links, etc. You don't want your blog writers to be able to write ` – Daniel Node.js Sep 10 '18 at 19:22
  • Correct! How can I embed i.e. Facebook post using react-facebook-sdk in markdown to be part of the post? – Bip Sep 10 '18 at 19:23
  • @Bip markdown is used purely for content formatting. It won't help you with any JSX syntax or React components. – Daniel Node.js Sep 10 '18 at 19:32
  • You can handle `react-facebook-sdk` logic alongside `react-facebook-sdk`. Maybe a few new database columns could help with that. – Daniel Node.js Sep 10 '18 at 19:33