3 Sep 2019

A story about React

Like everyone in the React world we've been enamored by the new beautiful Hook API. For us it was also the perfect excuse to initiate an overhaul of our courses, and use the mindshift that hooks represent as an excuse to spend time on new teaching tools.

Over the last year I've learned to love Storybook - a beatiful tool that lets you render components in isolation, making it easy to iterate on individual pieces of an app. A bi-product of developing this way is a book of interactive examples that also serve as documentation.

In the React course we have a whole bunch of small demos to illustrate the various ins and outs of the framework. These lived in a home-brewed little platform, but now we thought - why not migrate them to a Storybook? Surely Storybook would do a much better job than our poor home-grown effort?

advancedreact.jpg

So we did, and it worked wondefully well! With one single exception - Storybook didn't have any functionality to display source code, which was one of the most appreciated features of our old system.

But since Storybook is open source and has a plugin system, we simply added it in! I believe it turned out really nice, and am much looking forward to testing it in the field. You can see the result live at https://edument-react-examples.netlify.com.

sourceview.gif

Creating the source code view was quite a journey. If you're geeky enough to be entertained by details on Webpack juggling you can read about them at https://blog.krawaller.se/posts/implementing-a-source-code-view-in-storybook.

Or, better yet - come to one of our courses!

Related courses

  • ReactJS

    With just a single abstraction and a tiny API, React has no right to be as powerful or popular as it is. Take our course to find out both how and why it works so well!

    Duration: 2 days
    Price: 21 500 SEK
  • ReactJS in Prague

    The main idea of React is this; if we rerender instead of mutate when something changes, our components and application as a whole becomes much easier to construct and reason about. There is of course a performance penalty to this, but React mitigates that through an efficient diffing engine, resulting in only the necessary changes actually being made. 

    Duration: 2 days
    Price: 26 500 SEK
  • Advanced React

    So you know and like React, but you'd like to go further and learn it more in depth? If so, then this course is for you!

    Duration: 2 days
    Price: 21 500 SEK