Create a components directory in ./src folder.

Create two components like -

1. RawInputArea.jsx
2. MarkdownSanitized.jsx
   
   

[NOTE: JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.]

And build a UI where user can write things and side-by-side it will render on another side. It is recommended to use FlexLayout concepts.

As you already created the context directory in ./src folder. Create a file to handle the contextual state of your app by using React.createContext(initialState), where as initialState is the default initial value, in this app you can use any good greeting message to show user on initial load.

Now, as you build the context state, it's time to provide the state to the component tree. Wrap up App.js, for example - if your context name is markDownContext then <markDownContext.Provider value={{...}}>

<markDownContext.Provider
      value={{ rawText, getMarkDownAsHTMLOutput, handleChangeRawInputedText }}
    >
      <div className="App">
      // ... deeper inside component tree ...
      </div>
  </markDownContext.Provider>

[NOTE: rawText, getMarkDownAsHTML etc. are as the values coming from custom hooks, do not scare you will cover it in the next milestone.]

Now, in the ./src/hooks/ directory create a file with conventional namespacing for react hooks. If you do not know - useSomething() where use... is basically a naming convention to create custom hooks.

Remember installing dependency remarkable? Time to use that. Initialize a new object of the class.

Create a variable to manage using React.useState() and also create utility functions to manage and handle change of raw inputed text by user and to sanitize the raw input text and convert and render that as HTML functionality having functions.

Use React.useEffect() to allow the sideEffects of the hooks.

Lastly return the necessary things as functional object from the respective functions to be used by the nested component trees.

  const md = new Remarkable();
function useMarkdownEditor() {
    // useState manage React.useState()
    // function handleChangeRawInputedText(){};
    // function getMarkDownAsHTMLOutput(){};

return { rawText, handleChangeRawInputedText, getMarkDownAsHTMLOutput };
}