Hello,
This is my Index.js:
import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
And this my App.js:
import React from 'react';
import './App.css';
import { sampleText } from './sampleText';
import { marked } from 'marked';
//import DOMPurify from 'dompurify';
class App extends React.Component {
state = {
text: sampleText,
};
handleChange = (event) => {
const text = event.target.value;
this.setState({ text });
};
//renderText = (text) => DOMPurify.sanitize(marked(text));
renderText = (text) => marked(text);
// On souhaite que les modifications soient enregistrée dans le LocalStorage
// du navigateur. Ainsi si l'utilisateur rafréchit la page, ses modifications
// seront sauvegarder.
// On sauvegarde les modifications
componentDidUpdate() {
const { text } = this.state;
localStorage.setItem('text', text);
}
// On réaffiche la sauvegarde lorsque l'App est relancée par le rafréchissement.
// s'il y à eu du text sauvegardé, je rafiche ce text.
// Si tout à été supprimé, je remets le sampleText de départ.
componentDidMount() {
const text = localStorage.getItem('text');
if (text) {
this.setState({ text });
} else {
this.setState({ text: sampleText });
}
}
// Vidéo - Anthony Welc - Ch 03 - 05 Du Markdown avec Marked, time 03:44
render() {
return (
<div className="container">
<div className="row">
<div className="col-sm-6">
<textarea
onChange={this.handleChange}
className="form-control"
rows="35"
value={this.state.text}
></textarea>
</div>
<div className="col-sm-6">
<div
dangerouslySetInnerHTML={{
__html: this.renderText(this.state.text),
}}
></div>
</div>
</div>
</div>
);
}
}
export default App;
And the third “sampleText”:
export const sampleText = `# Welcome to my React Markdown Previewer!
## This is a sub-heading...
### And here's some other cool stuff:
Heres some code, \`<div></div>\`, between 2 backticks.
\`\`\`
// this is multi-line code:
function anotherExample(firstLine, lastLine) {
if (firstLine == '\`\`\`' && lastLine == '\`\`\`') {
return multiLineCode;
}
}
\`\`\`
You can also make text **bold**... whoa!
Or _italic_.
Or... wait for it... **_both!_**
And feel free to go crazy ~~crossing stuff out~~.
There's also [links](https://www.freecodecamp.org), and
> Block Quotes!
And if you want to get really crazy, even tables:
Wild Header | Crazy Header | Another Header?
------------ | ------------- | -------------
Your content can | be here, and it | can be here....
And here. | Okay. | I think we get it.
- And of course there are lists.
- Some are bulleted.
- With different indentation levels.
- That look like this.
1. And there are numbered lists too.
1. Use just 1s if you want!
1. And last but not least, let's not forget embedded images:
`;
How to assemble my three reactJS files in order to put them in JS part of codePen ?
