React Basics — making a markdown parser

Hello guys, this is a post on react basics. This is a very basic tutorial written for people who are beginner in React.

So, below is what we will be making.

I have created a component named TextArea which is the main and only component. It’s state consists of inputValue and parsedValue of markdown input.


this.state={
inputValue:”# hello, write some `markdown` here”,
parsedValue:””
}

TextArea renders a input element where we will write in markdown and a div which will display the result. handleChange function keeps the state of component and value in input field in sync.


handleChange(e) {
this.setState({
inputValue: e.target.value,
parsedValue: marked(e.target.value)
});
}

I am using a markdown parsing library marked. As input value changes, I pass the input value in marked function which is exposed by marked library and store it in the this.state.parsedValue.

componentDidMount is a react lifecycle function which is run after component is mounted on screen.

I searched for alternative for dangerouslySetInnerHTML but couldn’t find one. The reason for naming it to dangerouslySetInnerHTML is to make developer aware of the risk of XSS attack when they use it. To avoid the risk of XSS attack, we can use DOMPurify which sanitizes the html.

I wrote some other posts on react too. You can give them a visit, if you like,

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.