[React] Create and import React components with Markdown using MDXC
2024-08-29 02:05:29
In this lesson I demonstrate how to use the library MDXC to create and import React components with Markdown. MDXC converts markdown into JavaScript and supports JSX.
Additional Resources: https://github.com/jamesknelson/mdxc
Create a React app by using 'create-react-app':
// .babelrc {
"presets": ["babel-preset-react-app"]
}
Then, you can import a component from any Markdown file by prepending the filename with !babel-loader!mdx-loader!
. For example:
/* eslint-disable import/no-webpack-loader-syntax */
import DocumentComponent from '!babel-loader!mdx-loader!../pages/index.md'
App.js
/* eslint-disable import/no-webpack-loader-syntax */ import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css"; import HelloWorld from "!babel-loader!mdx-loader!./HelloWorld.md"; class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<HelloWorld text="blah blah blah" />
</div>
);
}
} export default App;
import Bold from "./Bold" import Italic from "!babel-loader!mdx-loader!./Italic.md" prop text # Heading ## Heading <p>{text}</p>
<Bold>This text is Bold</Bold>
<Italic>This text is Italic</Italic>
Bold.js:
import React from "react"; export default function Bold({ children }) {
return <b>{children}</b>;
}
Italic.md
prop children {children}
最新文章
- 应用层之E-mail服务及javaMail邮件发送的知识总结
- mysql delete 使用别名 语法
- exgcd,求乘法逆元
- js随机点名
- 嵌入式实时操作系统μCOS原理与实践+事件部分代码
- CSS3的文字阴影—text-shadow
- 在Java中怎样把数组转换为ArrayList?
- jboss部署出现MarshalOutputStream找不到错误
- Dapper的使用
- 微信JS图片上传与下载功能--微信JS系列文章(三)
- Docker 服务
- 用了 HTTPS 还不安全,问题就出在低版本 TLS 上
- [WC2006]水管局长
- Springboot整合二 集成 rabbitmq
- Log system architecture
- Javascript高级编程学习笔记(7)—— 函数
- C# 自定义承载控件
- qt之菜单栏的创建
- Python 脚本利用adb 进行手机控制
- ububtu16.04下安装protobuf