saber2pr / react

:diamond_shape_with_a_dot_inside: React-Like in Typescript.

@saber2pr/react

react in typescript.

yarn add @saber2pr/react

Examples

1. CSR

render Component to DOM in browser.

import React, {
  useCallBack,
  useMemo,
  useReducer,
  useRef,
  useState
} from "@saber2pr/react"
import ReactDOM from "@saber2pr/react/lib/client"

function HelloMessage({ name }: { name: string }) {
  return <div>Hello {name}</div>
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById("container")
)

examples

2. SSR

render Component to string.

import React from "@saber2pr/react"
import ReactDOMServer from "@saber2pr/react/lib/server"

const Content = ({ content }: { content: string }) => (
  <div>
    <div style={{ color: "red" }}>{content}</div>
    <button onclick={() => console.log("click")}>click</button>
  </div>
)

const App = () => {
  return (
    <div>
      <div>This is a SSR Demo</div>
      <Content content="has color" />
    </div>
  )
}

console.log(ReactDOMServer.renderToString(<App />))

3. Custom Render

create a custom renderer.

import React from "@saber2pr/react"
import ReactFiberReconciler from "@saber2pr/react/lib/reconciler"

// use your host config.
const Renderer = ReactFiberReconciler(HostConfig)

const Store = {
  state: 0
}

const TestCreateRenderer = () => {
  const state = Store.state
  return (
    <div>
      <hr />
      <div>This is a UpdateContainer Test</div>
      <div>{state}</div>
      <button
        onclick={() => {
          Store.state++
          // update
          Renderer.updateContainer(<TestCreateRenderer />, container)
        }}
      >
        add
      </button>
    </div>
  )
}

// init render
Renderer.createContainer(
  <TestCreateRenderer />,
  document.getElementById("container")
)

---

Dev

yarn install

yarn start

yarn dev

License

MIT

Author: saber2pr

Reference

facebook/react

项目仅用于理解和学习react原理，不可用于生产实践