Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Use Markdown as React Components by Adding a Webpack Loader to Poi

    John LindquistJohn Lindquist

    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.

    reactReact
    webpackwebpack
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss