[React] Create and import React components with Markdown using MDXC
React and with Using create import markdown Components
2023-09-14 08:59:17 时间
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 1 ## Heading 2 <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}
相关文章
- 从React源码分析看useEffect
- TS_React:Hook类型化
- React Error: Failed at the xxx@0.1.0 start script 'react-scripts start'.
- react全家桶包括哪些_react 自定义组件
- 一道React面试题把我整懵了
- 【React】学习笔记(二)——组件的生命周期、React脚手架使用
- 通宵整理的react面试题并附上自己的答案
- react的jsx和React.createElement是什么关系?面试常问_2023-02-27
- React源码学习进阶(七)挂载阶段的commitWork
- React 实现一个markdown[2]
- React和Vue谁会淘汰谁?
- ORA-39322: Cannot use transportable tablespace with TIMESTAMP WITH TIME ZONE columns and different time zone version. ORACLE 报错 故障修复 远程处理
- MySQL中的OR与AND操作符比较(mysqlor和and)
- 深入浅出:MySQL中AND和OR运算符使用方法(mysql中and和or)
- MySQL中AND的使用方法解析(mysql中and的用法)
- Mysql中强大的AND运算符的使用方法探究(mysql中and的使用)
- and的区别Oracle数据库中的OR与AND的差异(oracle中or和)