A quick experiment to get allow React components in Markdown pages and throughout the site

[chiedo]

This is an experiment to get React components working in markdown pages. Super rough and a proof of concept.

With the goal being to make our codebase more extensible by giving us access to the entire React ecosystem.

Read about how it works here

Todos

• Get static React Components working
• Get server side rendering working
• Get Dynamic React Components working
• Get client side hydration working
• confirm the passing of props works

Todos if we move forward with this experiment

• get tests working again
• Use the production react script for react in production instead of the React development script that's currently in-use in the header

Worth considering in the future

• Consider caching server side rendering of react components in Redis. eg. Rendering the components is not free. eg. the Code tab below was 30ms to render. Although this may not be needed as we already cache page responses

Check off the following:

• All of the tests are passing.
• I have reviewed my changes in staging.

[chiedo]

@JasonEtco would you be down to 🍐 on this at some point? server side rendering is working but I need some help with the webpack and logic to get the react components hydrated client side.

[chiedo]

Thinking we need to do something like this (pseudocode) at the bottom of every component in ./react/*

This should make sure that when in the browser every component gets hydrated

if(window.type){
   const componentContainers = document.querySelectorAll('.unique-class-name-of-component');

   for  (const index of componentContainers){

        componentContainer = componentContainers[index];
        ReactDOM.hydrate(React.createElement(ComponentName), componentContainer);

}

And then part two would be figuring out how to get the react files that work on the server working in the browser. Assuming webpack would be needed for that .

[chiedo]

Did the first part of what I think I will work here: 4d9a6c7

Next need to figure out webpack

[chiedo]

Got it working!

[sarahs]

@chiedo This is really cool! The examples work nicely. ⚡

I did a quick review (since this is still in progress) and left a few early thoughts. I didn't dig into any of the Babel stuff.

One note: this adds a lot of dependencies to the docs app. I wonder if we can shift any of that dependency burden to Primer React components?

[sarahs]

We use http://ghub.io/rehype-highlight (via docs/render-content via hubdown) for syntax highlighting everywhere else. If we use Prism here, we're probably going to get different highlighting?

[chiedo]

Yeah we could! My work was solely to do a proof of concept to make sure we could do whatever we want. I'm not actually recommended the use of any of these specific react components. Just making sure we can render any react component and have it be functional.

[sarahs]

Can we use the Primer component here instead? https://primer.style/components/TabNav

[chiedo]

Same answer as #610 (comment)