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.

Install:

npm i -D react-markdown-loader

poi.config.js:

module.exports = {
webpack(config) {
config.module.rules.push({
test: '/.md$/',
loaders: [
'babel-loader',
'react-markdown-loader'
]
}) return config;
}
}
import Page from './Page.md'
import {render} from 'react-dom'; render(
<Page></Page>,
document.getElementById('app')
);

[Poi] Use Markdown as React Components by Adding a Webpack Loader to Poi的更多相关文章

  1. [React] Create and import React components with Markdown using MDXC

    In this lesson I demonstrate how to use the library MDXC to create and import React components with ...

  2. [React] Styling React Components With Aphrodite

    Aphrodite is a library styling React components. You get all the benefits of inline styles (encapsul ...

  3. Rendering React components to the document body

    React一个比较好用的功能是其简单的API,一个组件可以简单到一个return了组件结构的render函数.除了一个简单的函数之外,我们还有了一段有用且可复用的代码片段. 问题 不过有时候可能会受到 ...

  4. React Components Template

    React Components Template "use strict"; /** * * @author xgqfrms * @license MIT * @copyrigh ...

  5. React Components之间的通信方式了解下

    先来几个术语: 官方 我的说法 对应代码 React element React元素 let element=<span>A爆了</span> Component 组件 cla ...

  6. [React] Recompose: Theme React Components Live with Context

    SASS Bootstrap allows us to configure theme or branding variables that affect all components (e.g. P ...

  7. React components render order All In One

    React components render order All In One components render order / components lifecycle DOM tree ren ...

  8. 配置React的Babel 6和Webpack 2环境

    Facebook的一帮子工程师在忙碌之余开发除了一套前段UI框架React.这个框架最大的有点就在于让UI的开发都基于组件,这样View都是根据props和state变化的. 项目地址:https:/ ...

  9. 二、react开发环境配置与webpack入门

    Webpack 模块打包工具(module bundler)功能: 将 CSS.图片与其他资源打包 打包之前预处理(Less.CoffeeScript.JSX.ES6 等)档案 依 entry 文件不 ...

随机推荐

  1. HDU 1548 A strange lift【BFS】

    题意:给出一个电梯,给出它的层数f,给出起点s,终点g,以及在每一层能够上或者下w[i]层,问至少需要按多少次按钮到达终点. 和POJ catch that cow一样,直接用了那一题的代码,发现一直 ...

  2. passwd文件

    1.查看/etc/passwd [admin@localhost /]$ cat -n /etc/passwd 1 root:x:0:0:root:/root:/bin/bash 2 bin:x:1: ...

  3. javascript实现自动添加文本框功能

    转自:http://www.cnblogs.com/damonlan/archive/2011/08/03/2126046.html 昨天,我们公司的网络小组决定为公司做一个内部的网站,主要是为员工比 ...

  4. iOS开发——Block使用小结

    Block语法看上去好像很特别,但它实际上是作为极普通的C语言源代码处理的.Block的实质,就是Objective-C的对象. 1.Block的语法 ^ 返回值类型 参数列表 表达式 可省略返回值类 ...

  5. 【BZOJ3678】Wangxz和OJ

    题意: 不想讲 题解: Rope真香! 正解是Splay缩点,访问时再拆成一个序列 代码: //STL dafa good! #include<algorithm> #include< ...

  6. JS脚本代替人工输入

    最近接到了个任务,对某个网页上的1000个item填写相同的text,text的内容相同. 这显然是机械动作呀,干脆写个工具,用脚本代替人工操作. 浏览器按F12,找到console,输入写好的脚本, ...

  7. 洛谷 P1088 火星人 (全排列)

    直接调用next_permutation即可,向前的话可以调用prev_permutation #include<cstdio> #include<cctype> #inclu ...

  8. wipefs进程是啥,占用了百分之90多的cpu

    http://www.cnblogs.com/liuchuyu/p/7490338.html

  9. 洛谷——P2615 神奇的幻方 【Noip2015 day1t1】

    https://www.luogu.org/problem/show?pid=2615 题目描述 幻方是一种很神奇的N*N矩阵:它由数字1,2,3,……,N*N构成,且每行.每列及两条对角线上的数字之 ...

  10. 在VS2013中配置QT5 win7_64

    转自 在VS2013中配置QT5 win7_64 环境: win x64 + vs2013+QT5+vs_addin 下面示例正确配置QT以及VS2013 + QT Addin开发环境: 下载VS20 ...