Use Markdown as React Components by Adding a Webpack Loader to Poi
Poi ships with many webpack loaders included, but you may run into scenarios where you'll need to customize and add your own. This lesson covers adding react-markdown-loader to Poi to load Markdown files as React components.
Instructor: [00:00] Create a markdown file. We'll call this page.md, add some content to it. I'm using markdown page and a content goes here. Then, we can try and load it, we'll say import page from page.md and let it fail, because we don't have a right loader.
[00:22] To add the loader, we'll create our poiconfig.js to our module exports, and there is a property called webpack which passes in the config. Then, we modify the config here and return the config. We want to add a rule on the module, so config module rules, push, and the rule is going to look like this. Test our testing markdown files.
[00:48] The loaders you're going to use are the react-markdown-loader is going to pass into the pebble loader. Make sure and install the react-markdown-loader. We can stop this, start it up again. Now, there are no errors. Instead of just importing it, we can go ahead and use it as a react component. Say, page get save and you can see that my markdown file is being used as a react component.