Show HN: React-Redux-Sass Starter Kit | Hacker News Reader

Show HN: React-Redux-Sass Starter Kit

github.com

18 pointsGigacore12 comments

Thank you for this! I am still not fully on board with mixing my JS and CSS and when I dove into the source I was eager to see how you were handling it -- The webpack docs and tutorials are lacking when it comes to outputting separate CSS bundles and staying old-school.

This solved all my issues and is doing exactly what I want. Seriously, much appreciated!

Glad you found it helpful! Cheers!

Genuine question, I'm actually interested in the answer and not just implying one way is better than another:

Why would you use Sass with React when styled-components, and to a lesser extent inline css-in-js exist?

Haha! I saw this coming. There's still a lot of developers who don't like the idea of css-in-js. It is a bigger topic to debate on. I have personally tried styled-components and I like the way it works.

https://medium.com/@gajus/stop-using-css-in-javascript-for-w...

https://css-tricks.com/the-debate-around-do-we-even-need-css...

Yeah, I was mostly going after a direct comparison with styled-components.

I used to be quite happy with css-in-js because of its simplicity but found that it doesn't scale very well to large & complex apps.

About a year ago I was introduced to styled-components by a colleague and though initially sceptical (it took me a little while to grok its patterns) I've found it really nice, it solved basically all of the issues I found with scaling styles inside a React app, and I haven't looked back. The only concern I have with it is its not insignificant contribution to bundle size, but that's literally the only thing that would dissuade me from using it on any new project by default.

Since it obviously fits so well with the 'React way', and allows you to colocate styles within components with full access to the power of JS for building complex styles dynamically, I just wonder why you'd go for Sass, which is a great but much more general purpose tool, when it exists?

I think you are missing just one thing to have the perfect starter kit: action types should be in constants that could be reused in your reducers. Otherwise it's to easy to misspell a type.

Thanks for pointing that out. I have moved action types to constants.

Good stuff, can you say how it is different or better than https://github.com/mozilla-neutrino/neutrino-dev or https://github.com/facebookincubator/create-react-app

Thanks!

Sure. While create-react-app is undoubtedly better, this starter kit just let's us create apps using React, Redux and Sass right out of the bat. Though create-react-app can be used to do the same, it doesn't come with Sass pre-installed and to do that, you may have to "eject" the project. More on that here - https://medium.com/@Connorelsea/using-sass-with-create-react...

Neutrino looks great. Comes with an array of packages. I couldn't find Sass again. So that might require additional configuration.

It sure is not better than those two you are referring to, but is different for sure. Because, if all that someone's looking for is React + Redux + Sass to start writing their application without any initial configuration, then this could be their solution.

Why doesn't it build on top of CRA --scripts-version ?

Thanks for the starter kit- I'm always looking for new framework launch and go... Wondering if you could include babble with it?

Yes, comes with Babel included for transpiling ES6 to ES5.

Reply on news.ycombinator.com