Front-End Libraries Project #2 – Markdown Previewer
Today I started building the second front-end libraries project. It allows you to enter markdown text in an editor and see how it looks after markdown.
What is markdown?
Just to clarify, markdown is a markup language used to very quickly and easily format plain text. It lets you create bold or italicized text, headers, ordered and unordered lists, and hyperlinks; all it takes is a few extra characters. It’s also a lot easier to read and write than HTML, which is the entire purpose for using it. Plus, it easily converts to HTML for use on the web.
If you want to nerd out, read more about it on Wikipedia.
So, what am I doing?
As I said, the purpose of this project is to use a front-end framework, like React, to create a previewer that shows you the output of marked-down text. Ideally, my finished project should look something like the one from Free Code Camp’s. It also has to pass 9 tests, which specify the naming convention and functionality requirements.
Requirements / User Stories:
- I can see a <textarea> element with corresponding id=”editor”.
- I can see an element with corresponding id=”preview”.
- If I enter text into the #editor element, the #preview element is updated as I type to display the content of the textarea.
- As I enter GitHub flavored markdown into the #editor element, the text is rendered as HTML in the #preview element as I type (Hint: You don’t need to parse Markdown yourself – you can import the Marked library for this: https://cdnjs.com/libraries/marked).
- When my previewer first loads, the default text in the #editor field should contain valid markdown that represents at least one of each of the following elements: a header (H1 size), a sub header (H2 size), a link, inline code, a code block, a list item, a blockquote, an image, and bolded text.
- When my previewer first loads, the default markdown in the #editor field should be rendered as HTML in the #preview element.
Bonus (Optional) Requirements
- When I click a link rendered by my previewer, the link opens up in a new tab. (HINT: read the Marked.js docs for this one!)
- My previewer interprets carriage returns and renders them as <br> (line break) elements.
My Progress (So Far)
As with the last project, I began by setting up my HTML and CSS. To make things easier, I added my editor and preview elements using plain HTML at first, so I could see how it looked and modify the CSS accordingly. That actually made it even easier to cut and paste those elements into their own react components, leaving just one empty div on the page with which to render the main app component in React.
With this being only my second React project, I was pleasantly surprised by how much I remembered while setting up my components. I even decided to make this one a bit more complicated than the last and I set up multiple components:
- a primary ‘App’ class component (the parent component)
- a ‘Footer’ functional component, which displays my name and a link to my full portfolio
- the ‘Editor’ and ‘Preview’ functional components
There is still a lot of work to do to finish setting the components up and meet the remaining requirements, but so far my page it at least rendering properly. That’s a great start for day 1.