[React] Create and import React components with Markdown usi
发布时间:2020-12-15 20:21:45 所属栏目:百科 来源:网络整理
导读: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 R
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? /* 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}
? Github (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |