UPDATES:
- This project has been upgraded to React v0.14 – read the blog post about the upgrade.
- This project now uses redux for state management (it has been renamed to topheman/react-es6-redux) – you can still access the original redux-free version on the v1.x branch.
For the last two years, I’ve heard a lot about ES6 : on blog posts, videos, attending at meetups … It was like I knew it already but never really used it … I felt that it was time to get my hands dirty and get on board with this new version of JavaScript – which will be the one we’ll be using in the next years – as some of you will point out : “are already using …”.
As I also wanted to try React (same : heard a lot about it just as if I knew it, but never really wrote any line of code with it). My POC’s endgoal is to do an isomorphic app (server-side rendering, same code running on client and server), for the moment, I finished the client-side part.
Using Webpack
Webpack takes your modules (and all their dependencies) then creates a bundle out of them. Since you can run multiple transformers, it will be able to handle ES6 modules, jsx, sass/scss … More infos on Webpack.
Setting up .js and .jsx transpiling (turning ES6 to ES5) using Babel was the easy part. But I also wanted sass stylesheets, with sourceMaps support and not having to require them via js (but in a regular link tag). This part of the Webpack documentation lacks informations (I don’t even know if I did it right, though, it works – as well in dev as in build prod …).
Coding in ES6
At first, it feels like you’re coding in a whole new language (at least, not in JavaScript) 😉 . Using import, export, class, extends … But after all, this is only syntactic sugar, which you would have added by yourself with your own tools or a third party library. Now it’s built-in (this may let JavaScript more accessible to Java/C like devs 😉 ).
Using React
I’ve been using Angular for a long time now. We all know its drawbacks … Some devs are even switching to React for its performances. This is why I was interested in the library (that and the server-side rendering part).
One of the good things in React is it forces you to think “Component” (not the first library to do that – a lot of them are converging towards this concept). You need to know where you’ll keep your state, which part of your app will be mutable, which one will be immutable.
Conclusion
I achieved my goal as I finished this part of my project : coding a POC in ES6, using React. You can see more of the steps on the github repository of topheman/react-es6. The next step will be to use this project to make some server-side rendering (since I used npm packages available for front and back such as superagent, I should be able to take the project “as is”).
You should try ES6, it’s fun to code with and we are seeing it more and more in libraries source code – why not in yours ?
Tophe
PS : The backend of topheman/react-es6 is based on topheman-apis-proxy, a project I made to handle my public APIs. Check it out on github if you’re interested in. I hosted it on heroku, so the VM takes about 3s to warm up when it’s asleep …
2 thoughts on “Playing with ES6 (and React)”