4 ms·

Does anyone have an example of an open source project that uses babel for react + es6? Usually for me the hardest part is setting up the project organization an

Does anyone have an example of an open source project that uses babel for react + es6? Usually for me the hardest part is setting up the project organization and plumbing to make everything work.

dubcanada 11y ago
Atom does I believe, but their build tool is really complicated.
- ssorallen 11y ago
  Atom uses CoffeeScript, but Nuclide[0], Facebook's suite of packages for Atom, uses ES6/7 (including async/await) via Babel. The transpilation and caching of transpiled sources is done in the nuclide-node-transpiler[1] package. [0] https://github.com/facebook/nuclide https://github.com/facebook/nuclide [1] https://github.com/facebook/nuclide/tree/master/pkg/nuclide/node-transpiler https://github.com/facebook/nuclide/tree/master/pkg/nuclide/...
bryanlarsen 11y ago
This one looks pretty reasonable: http://jmfurlott.com/tutorial-setting-up-a-single-page-react-web-app-with-react-router-and-webpack/ http://jmfurlott.com/tutorial-setting-up-a-single-page-react... I recommend avoiding gulp and grunt and any other build systems. They're completely unnecessary. npm and webpack are sufficient. npm works well as a simple task runner, and there are webpack plugins to do pretty much anything you'd ever do with grunt or gulp.
- netcraft 11y ago
  Cheers! this looks very helpful.
k__ 11y ago
I tried the webpack getting started tutorial [0] and just switched the css-loader in the tutorial for the babel-loader. Just took me half an hour from start to getting react+ES6 running. [0] http://webpack.github.io/docs/tutorials/getting-started/
lhecker 11y ago
For a full and complete example take a look at one of my most recent projects :) https://github.com/lhecker/se2-bga https://github.com/lhecker/se2-bga I'm currently studying computer science in germany. In a team of 5 we created the above project for a software engineering assignment. But in the end I wrote the entire code part alone. :D It implements a simulated elevator and displays the internal state in a UML state machine diagram. It features: - Grunt build system - JSX + ES6 to ES5 transpiler using babelify and browserify - LESS to CSS transpiler - karma + jasmine test system - live reloading ("grunt serve") - building a static page from the source code ("grunt dist") - building a nw.js based app from the static page ("grunt build")
mrblueblue 11y ago
I created a quick-start ES6 React repo that takes care of the basic organization and plumbing of Gulp and Webpack. It allows you to immediately start writing ES6 code for React without the spending hours setting everything up. It's a work in progress, and any feedback would be appreciated! https://github.com/mrblueblue/react-quickstart https://github.com/mrblueblue/react-quickstart
jlu 11y ago
Have a look at redux, it showcased both creative approaches and solid examples with ES6/7 features. https://github.com/gaearon/redux/tree/master/examples/todomvc https://github.com/gaearon/redux/tree/master/examples/todomv...
TheAceOfHearts 11y ago
I setup a repo [0] with a boilerplate that actually covers all the bases for a real web app, because I realized just how annoying and difficult it could be to get something setup. [1] It provides an environment for development, testing, and production environments. In development, hotloading / live reload of assets when possible, and refresh otherwise. In production it'll do proper cache busting and asset minification. While testing it generates code coverage! Best part? No gulp or grunt. It's all basically a heavily commented webpack config and a few npm scripts. All of the people that have responded to you so far seem to disregard at least one of the details that I consider important. Mainly, it should have all the tasks needed for a web app that you plan on working on for a period longer than a few days, and it shouldn't make you deal with more build tool bullshit than is necessary. I don't have any examples of big projects using web-app without modifications, however, I have a small example: quad-blog [2], which is my blog. It's written with fluxible, and the webpack config for that project is based on web-app. It takes it a step further and does isomorphic (or universal) javascript, so it'll do server-side rendering and then delegate to the client once it's loaded. One other highlight of the project is that it uses Koa, so you get real middleware (as in, middleware that behaves like a stack). Oh, and it uses Sequelize and shows how you'd do database migrations with an awesome relational database: Postgres, instead of taking the NoSQL shortcut (which is woefully inadequate for a lot of applications). [0] http://github.com/cesarandreu/web-app http://github.com/cesarandreu/web-app [1] https://blog.cesarandreu.com/posts/a_reasonable_starting_point_for_building_a_web_app https://blog.cesarandreu.com/posts/a_reasonable_starting_poi... [2] https://github.com/cesarandreu/quad-blog/ https://github.com/cesarandreu/quad-blog/
djmashko2 11y ago
At Meteor, we're working on solving exactly this problem. We're currently working on a painless integration with React that lets you just add a package to get full-stack data sync, JSX compilation, etc. Check it out: http://react-in-meteor.readthedocs.org/en/latest/ http://react-in-meteor.readthedocs.org/en/latest/ (I work at Meteor)

Does anyone have an example of an open source project that uses babel for react + es6? Usually for me the hardest part is setting up the project organization and plumbing to make everything work.

dubcanada 11y ago

Atom does I believe, but their build tool is really complicated.

ssorallen 11y ago
Atom uses CoffeeScript, but Nuclide[0], Facebook's suite of packages for Atom, uses ES6/7 (including async/await) via Babel. The transpilation and caching of transpiled sources is done in the nuclide-node-transpiler[1] package. [0] https://github.com/facebook/nuclide https://github.com/facebook/nuclide [1] https://github.com/facebook/nuclide/tree/master/pkg/nuclide/node-transpiler https://github.com/facebook/nuclide/tree/master/pkg/nuclide/...

bryanlarsen 11y ago

This one looks pretty reasonable: http://jmfurlott.com/tutorial-setting-up-a-single-page-react-web-app-with-react-router-and-webpack/ http://jmfurlott.com/tutorial-setting-up-a-single-page-react... I recommend avoiding gulp and grunt and any other build systems. They're completely unnecessary. npm and webpack are sufficient. npm works well as a simple task runner, and there are webpack plugins to do pretty much anything you'd ever do with grunt or gulp.

netcraft 11y ago
Cheers! this looks very helpful.

k__ 11y ago

I tried the webpack getting started tutorial [0] and just switched the css-loader in the tutorial for the babel-loader. Just took me half an hour from start to getting react+ES6 running. [0] http://webpack.github.io/docs/tutorials/getting-started/

lhecker 11y ago

For a full and complete example take a look at one of my most recent projects :) https://github.com/lhecker/se2-bga https://github.com/lhecker/se2-bga I'm currently studying computer science in germany. In a team of 5 we created the above project for a software engineering assignment. But in the end I wrote the entire code part alone. :D It implements a simulated elevator and displays the internal state in a UML state machine diagram. It features: - Grunt build system - JSX + ES6 to ES5 transpiler using babelify and browserify - LESS to CSS transpiler - karma + jasmine test system - live reloading ("grunt serve") - building a static page from the source code ("grunt dist") - building a nw.js based app from the static page ("grunt build")

mrblueblue 11y ago

I created a quick-start ES6 React repo that takes care of the basic organization and plumbing of Gulp and Webpack. It allows you to immediately start writing ES6 code for React without the spending hours setting everything up. It's a work in progress, and any feedback would be appreciated! https://github.com/mrblueblue/react-quickstart https://github.com/mrblueblue/react-quickstart

jlu 11y ago

Have a look at redux, it showcased both creative approaches and solid examples with ES6/7 features. https://github.com/gaearon/redux/tree/master/examples/todomvc https://github.com/gaearon/redux/tree/master/examples/todomv...

TheAceOfHearts 11y ago

I setup a repo [0] with a boilerplate that actually covers all the bases for a real web app, because I realized just how annoying and difficult it could be to get something setup. [1] It provides an environment for development, testing, and production environments. In development, hotloading / live reload of assets when possible, and refresh otherwise. In production it'll do proper cache busting and asset minification. While testing it generates code coverage! Best part? No gulp or grunt. It's all basically a heavily commented webpack config and a few npm scripts. All of the people that have responded to you so far seem to disregard at least one of the details that I consider important. Mainly, it should have all the tasks needed for a web app that you plan on working on for a period longer than a few days, and it shouldn't make you deal with more build tool bullshit than is necessary. I don't have any examples of big projects using web-app without modifications, however, I have a small example: quad-blog [2], which is my blog. It's written with fluxible, and the webpack config for that project is based on web-app. It takes it a step further and does isomorphic (or universal) javascript, so it'll do server-side rendering and then delegate to the client once it's loaded. One other highlight of the project is that it uses Koa, so you get real middleware (as in, middleware that behaves like a stack). Oh, and it uses Sequelize and shows how you'd do database migrations with an awesome relational database: Postgres, instead of taking the NoSQL shortcut (which is woefully inadequate for a lot of applications). [0] http://github.com/cesarandreu/web-app http://github.com/cesarandreu/web-app [1] https://blog.cesarandreu.com/posts/a_reasonable_starting_point_for_building_a_web_app https://blog.cesarandreu.com/posts/a_reasonable_starting_poi... [2] https://github.com/cesarandreu/quad-blog/ https://github.com/cesarandreu/quad-blog/

djmashko2 11y ago

At Meteor, we're working on solving exactly this problem. We're currently working on a painless integration with React that lets you just add a package to get full-stack data sync, JSX compilation, etc. Check it out: http://react-in-meteor.readthedocs.org/en/latest/ http://react-in-meteor.readthedocs.org/en/latest/ (I work at Meteor)