A playground to learn Javascript ES6 – Built in React / Redux

Home/javascript, react/A playground to learn Javascript ES6 – Built in React / Redux

A playground to learn Javascript ES6 – Built in React / Redux

I have created an ES6 Playground in which you can play with the latest Javascript versions.


INTRODUCTION

In my Angular and React training courses I spend hours to teach how ES6 and Babel work and I often use the official BabelJS playground to explain all the fundamentals.

After the release of Angular (version 2), I left React for a while, so in order to do some practice again, I decided to replicate the BabelJS editor by using React and, of course, Redux.

Although the BabelJS playground works really well I needed a container to quickly load snippets, transpile and share them with the attendees. I know I could use CodePen, JSBin and so on, but as I said this is mainly an “exercise in style” and anyway I have now a tool I can customize as I need.

It only took a couple of days to be developed, so it’s just a proof of concept, but it should work well and I’ll improve it in the next weeks/months.

I hope it will be useful to the whole JS community.
Enjoy it and please share your ES6 Gist to complete the collection 🙂

OPEN ES6 PLAYGROUND

FEATURES

  • Write ES6 -> Output ES5 Code
  • Resizable panels
  • Output Panel
  • Error output panel
  • Babel settings panel: support for ES2015-2017 versions, stage 0-3 and React/JSX
  • Includes a collection of ES6 snippets you can quickly load into the playground and browse as a gallery by using arrows
  • It also includes mock data to quickly start a new example with some content
  • Snippets are Gist. Click the title of the snippet to open it

SCREENSHOTs and VIDEOs

RESIZABLE PANELS

RESIZABLE PANELS

ERROR HANDLING

TODOs

  • Community -> Receive snippets / Gist from users
  • Render React components in Output panel
  • Include 3rd party libraries such as RxJS, Redux, MobX, Axios, …
  • Other idea or feedback? Please leave a comment 🙂

Would you like to share an interesting ES6 Gist? Send a comment with the URL and a small description 🙂

2017-08-19T01:27:05+00:00 luglio 23rd, 2017|javascript, react|

Leave A Comment