deschool-react v0.0.27

DeSchool-react 包使用说明

安装

npm install deschool-react@latest

引用

第一步：入口文件( react 项目一般是 main.tsx), 引入 DeschoolProvider 和 CourseProvider, 以及默认样式

import { createRoot } from 'react-dom/client'
import { DeSchoolProvider, CourseContextProvider } from 'deschool-react' // 配置请求地址和主题（后续支持）； // 课程学习状态管理需要
import 'deschool-react/dist/styles/index.css'
import RouterObj from './router' // 您自己的路由配置返回的对象，类型一般为JSX.Element

const rootDom = document.getElementById('root')
const root = createRoot(rootDom!) // createRoot(container!) if you use TypeScript

root.render(
  // 此处baseUrl如果在本地代理可以是自定义的字符串，下图为示例，服务端根据开发环境和生产环境不同，按约定填对应的域名地址，如：
  // https://deschool.app/goapiDevelopment
  // 或者直接传入一个AxiosInstance
  <DeSchoolProvider config={{ baseUrl: '/deschool-api' }}>
    <CourseContextProvider>
      <RouterObj />
    </CourseContextProvider>
  </DeSchoolProvider>,
)

第二步：页面中引用学习页面组件

import { Learn } from 'deschool-react'

export function HomePage() {
  const topicId = '您的主题课程id'

  return (
    <div>
      <Learn topicId={topicId}>
    </div>
  )
}

若想自定义布局，可自行引用 Schedule 和 Section 组件，传入 className 和 style 进行定制

import { Schedule } from 'deschool-react'
import { Section } from 'deschool-react'