HN Explorer

Ask HN: Any suggestions on tech stack for a React focused training course?

5 points by dsiegel2275 ↗ HN
I'm developing a training course on React intended for delivery to other developers internal to my company.

For the course learning material, I do not want to simply put together powerpoint slides. I'd like a technology selection that would allow me to author the material in markdown or html, along with the ability to embed React examples - in runnable form - directly in the material, so that I can show example React code and right next to it show the running component.

For a smaller presentation where I first introduced React to the organization I had success using reveal.js and simply embedded React code directly in the presentation. I fear though that this approach will become unwieldy with the size that I expect this curriculum to grow to. That is unless I simply break down the material into several separate reveal presentations.

I like the look and ergonomics of gitbook documentation (especially after reading the Redux docs), but alas, we cannot put company materials out on the public interwebs. And I don't think that supports executable code as content anyways.

Anyone have any suggestions on a code friendly, easy to author, approach?

4 comments

[ 2.7 ms ] story [ 19.0 ms ] thread
dsiegel2275
I'm not sure how I didn't realize this before, but gitbook is certainly usable locally, that is without having it served on the public Internet...
joshschreuder
I don't have anything to offer for your question but your approach sounds interesting. Is your original Reveal.js presentation available anywhere to view?
dsiegel2275
Unfortunately no, it isn't shareable given company policy.

The approach that I took was very low tech. I literally copy and pasted React code into <pre><code> blocks so that reveal.js would render my example code (and apply the nice source highlighting). In addition, I placed another, identical copy of the code in a script tag and rendered the component into a div on that same reveal slide. So the viewers of the presentation end up seeing the nice highlighted source snippet and the resulting component running live on the slide.

This double copy and paste approach worked fine when I was dealing only with that one presentation, which had maybe six or seven live running examples. But for the curriculum I expect there to be an order of magnitude more examples, so I'm working now on creating a React component that encapsulates inline examples. My idea is to have this React component async fetch the code to display from a .js file on disk. It can then dynamically populate the <pre> and <code> tags and also then babelify, eval, and then render the actual instance of the example component into the dom.

joshschreuder
No worries, thanks for detailing it though. It sounds interesting, I might try to do something similar where I work, or at least have a play around with RevealJS as it sounds pretty cool!