Just a small utility for people who are tired of remembering what babel presets or Webpack loaders they need to build a relatively up to date React project.
Looks good! We've been working on something similar at reddit, https://github.com/reddit/node-build, to solve the same issue. It has defaults for react/es6, and I'm also using it without react for building es6 libraries for NPM distribution.
But if you're using React you are creating a not-insignificant webapp and the initial install time of 177 modules is totally irrelevant beyond that first install. It doesn't have any reflection on the size of the client JS file (webpack loaders, for example, only live on the dev machine).
Moreover, you can presumably globally install this, so it can cover every React-based project you need to build.
It's just an example to show what type of code `reactpack` builds, ES6 and JSX with style loading in this case. If you want a more minimal React-like build you can switch out React with lightweight alternatives like Preact or React-lite.
For reference, I build a standalone datepicker module with preact + redux at under 20kb (min + gz)... worked out really well. By comparison, went with regular react recently, and the payload quickly got over 200kb, though I needed a couple relatively heavy libraries for the app in question.
Another point worth mentioning is using react-icons individually (svg based), same for component libraries where you are only using a few components... tends to work out much lighter. Also, if you do use bootstrap as a base css library, work from the source instead of monkey patching the .css output.
Most of the modules involved are development side resources that don't end up included in the build. Complaining about the number of modules is like installing visual studio, noticing that it takes several gigs on disk and being like "Gigabytes, for a hello world program?"
likewise redux, redux thunks and wireup for router would probably be beneficial as a starting point. Of course at that point, pretty much wandering into starter project territory.
I wish we had something like this officially backed by the react team. In 30 minutes when a new standard approach comes out, this tool will become obsolete.
would love more "explicit (in code) best practices" if possible even a "recommended default approach"
i understand that a full "framework" is not the way to for the community. but a few default standards would be good as guidance for newcomers and to manage expectations of coders coming into existing projects
What do you mean? I've heard people say that a couple times but they never really elaborated. Do people love their semicolons that much? Are people offended that it's called "standard"? Or something else?
> They are specifically working on it according to this React.js Conf talk
This is very exciting. I prefer React over Vue, but one of the things I love about Vue is vue-cli[0]. Something similar, if not better, for React, would be greatly appreciated.
Tbf I just looked over 'standard' and it's improved a ton since it initially came out. Bar one minor rule, the only rule I still object to is the semicolon one, which I'm obvs not going to get into a discussion about, because I value my sanity. I'll edit my above comment if I still can :)
Semis aside, I take issue with the name and the badge[0], making it seem like _the_ style of writing JS instead of just _a_ style. The contents of the project are fine, but this aspect is misleading for people new to JS.
It's interesting how the Facebook team decided to do a built-in all-in-one opinionated CLI for React Native but never did for regular React. Hope they get around to this soon.
I don't think you're reading the situation accurately. Debating and improving our development tools is a sport across the entire field of programming.
The status quo already is to keep on using what we're using. That doesn't need to be said. But if it wasn't for our endless search for nirvana, people would be stuck on Vim and 4-space tabs.
It could just be spinning - Babel 6 presets install _lots_ of duplicated dependencies with npm2.
I need to move a similar project from Babel 5 to Babel 6 soon and tried manually deduplicating Babel 6 preset dependencies for better npm2 support [1] - doing so reduced the size of node_modules/ from ~120MB to ~6MB!
Nice work! I've been looking for something like this.
I hope to see more tools in this vein emerge from the JavaScript ecosystem - tools that aren't afraid to make some well-reasoned assumptions for the sake of a more minimal interface. (It seems like every tool nowadays wants you to put another dotfile or garbage.json at the root of your project.)
I would love this only for the react stuff. More useful defaults, less opinions. For example: please let me chose my own CSS workflow and please don't force me to write javascript without semicolons like an animal :P.
Update: I just realised that you can bypass the linter and the postcss. I am sorry OP, looks like I'm a lazy jackass.
47 comments
[ 2.9 ms ] story [ 102 ms ] thread1) actually making Hello, World pages that will go anywhere near a user
2) Using React in Hello, World pages (which they don't make)
3) Using Reactpack to build the React-based Hello World pages they aren't making
1) Whatever you're making, you're starting out with 177 modules minimum if you use React + Reactpack.
2) See 1.
Moreover, you can presumably globally install this, so it can cover every React-based project you need to build.
What is an acceptable number of modules?
My Visual Studio install is easily at least 4GB, yet this doesn't matter to the end user as the packages produced are about 6MB total
Another point worth mentioning is using react-icons individually (svg based), same for component libraries where you are only using a few components... tends to work out much lighter. Also, if you do use bootstrap as a base css library, work from the source instead of monkey patching the .css output.
would love more "explicit (in code) best practices" if possible even a "recommended default approach"
i understand that a full "framework" is not the way to for the community. but a few default standards would be good as guidance for newcomers and to manage expectations of coders coming into existing projects
So, it can be extended or changed as the whims of the JS community migrate between tools and practices.
There's also rwb from Pete Hunt [1].
EDIT: Removed comment about 'standard'. Ain't so bad anymore apparently.
[0] https://www.youtube.com/watch?v=-RJf2jYzs8A#t=00h14m25s
[1] https://github.com/petehunt/rwb/
What do you mean? I've heard people say that a couple times but they never really elaborated. Do people love their semicolons that much? Are people offended that it's called "standard"? Or something else?
> They are specifically working on it according to this React.js Conf talk
This is very exciting. I prefer React over Vue, but one of the things I love about Vue is vue-cli[0]. Something similar, if not better, for React, would be greatly appreciated.
[0] https://vuejs.org/2015/12/28/vue-cli/
[0]: https://camo.githubusercontent.com/e06d9d72eecca61c1ba39fdf1...
Meanwhile: Do what you've been doing so far[1] and... stay calm. Stop worrying.
[1] The assumption being that it works for you.
EDIT: Almost everything you hear about in the start of the hype cycle is NOT going to go anywhere. Conclusion: Chill.
The status quo already is to keep on using what we're using. That doesn't need to be said. But if it wasn't for our endless search for nirvana, people would be stuck on Vim and 4-space tabs.
No developer left behind.
command:
node version: npm version uname -aI need to move a similar project from Babel 5 to Babel 6 soon and tried manually deduplicating Babel 6 preset dependencies for better npm2 support [1] - doing so reduced the size of node_modules/ from ~120MB to ~6MB!
https://github.com/insin/deduped-babel-presets#babel-6-prese...
I hope to see more tools in this vein emerge from the JavaScript ecosystem - tools that aren't afraid to make some well-reasoned assumptions for the sake of a more minimal interface. (It seems like every tool nowadays wants you to put another dotfile or garbage.json at the root of your project.)
Update: I just realised that you can bypass the linter and the postcss. I am sorry OP, looks like I'm a lazy jackass.