Show HN: Reactpack – one command to build your React front end | Hacker News Reader

Show HN: Reactpack – one command to build your React front end

github.com

108 pointsola45 comments

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

To be fair, this is just packaging up a fairly standard webpack config with a nice CLI: https://github.com/olahol/reactpack/blob/master/config.js

So, it can be extended or changed as the whims of the JS community migrate between tools and practices.

They are specifically working on it according to this React.js Conf talk [0].

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/

> the most obnoxious style-guide of all

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/

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 :)

There also exists semistandard, just for you :)

Which this tool doesn't integrate with...? Ultimately, that's always the problem with these "get-started-quickly" tools.

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.

[0]: https://camo.githubusercontent.com/e06d9d72eecca61c1ba39fdf1...

using the name standard is just harmful when your linter doesn't follow a rule (yes semicolons) that 90% of the codebases use.

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.

Honestly... I just just think we need to wait for front end develop-{ment,ers} to mature. Let's give them (us?) 5-10 years to settle this.

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.

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.

No developer left behind.

Would it kill them to write "npm install"?

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.

The diagram here shows a real talent for explaining complex processes in a way that even a two year old could understand.

Thank you :) I made it in gnome-paint, the shrubbery symbolizes okayish development practices.

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.

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.)

We use "bates" https://github.com/luiscarli/bates by our own engineer

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.

Finally, an opinionated build tool.

I've similar plugin for gulp https://github.com/ro31337/gulp-react-easy

react router missing

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.

Plus while redux is an excellent redux it's not everybody's cup of tea. (I currently like both redux and mobx depending)

That is an amazing logo.

I'm a bit confused - this didn't actually install a shell script that can be run ?

installing a 2nd time and it did. well that was unexpected.

It did, `reactpack` - look at the "scripts" section of package.json to see it used

was that...like...a hundred megs for a web page?

177 modules for a Hello World page? Is this satire?

Sigh, that's an absurd way to measure. A "Hello world" is just that: a demo. No-one is:

1) 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

It's not absurd because:

1) Whatever you're making, you're starting out with 177 modules minimum if you use React + Reactpack.

2) See 1.

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.

What is an acceptable number of modules?

Surely the important bit is the size of the code that's served to the end user, not the size of the development environment?

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

That's Node, baby. Deal with it.

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?"

When I try to install it npm just hangs

command:

    npm i --save-dev reactpack

node version:

    v0.12.6

npm version

    2.11.2

uname -a

    Linux gentoo-1 4.4.0-22-generic #40-Ubuntu SMP Thu May 12 22:03:46 UTC 2016 x86_64 Intel(R) Core(TM) i5-2430M CPU @ 2.40GHz GenuineIntel GNU/Linux

Those versions of npm and node are quite old - I imagine the minimum requirements might be higher, though the project should have those outlined.

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!

https://github.com/insin/deduped-babel-presets#babel-6-prese...

    S  E  M  I  C  O  L  O  N  S
    E
    M
    I
    C
    O
    L
    O
    N
    S

These things are always funny to me. By the third or so release, it'll be just as easy to write your own script than to learn how to use this.

Reply on news.ycombinator.com