Building a simple Markdown with react and vanilla javascript for beginner

Table Of Contents

1.Javascript Part
2.React Part

Demo of what we are going to build

1. Javascript Part

This is build with vanilla javascript, HTML and some style to look better the same styling was use for react app also.

2. React Part

In React we are using a third party api for using markdown

you'll learn about useState hooks which is use as a trigger to change the value

The command to be fellow to build this application are

• Select a folder where you want to keep this project.

npx create-react-app markdown

npm i react-markdown

This is App.js part which trigger our value to preview.

import React, { useState } from 'react';
import ReactMarkdown from 'react-markdown';
import './App.css';

export default function App() {
  const [markdown, setMarkdown] = useState('# suppppp');

  function handleChange(e) {
    setMarkdown(e.target.value);
  }

  return (
    <div className="app">
      <textarea onChange={handleChange} value={markdown} />

      <ReactMarkdown className="preview" children={markdown} />
    </div>
  );
}

Congrats for reading the blog post and thank you for visiting my site