5 ms·

Show HN: React-Redux-Sass Starter Kit

18 points by Gigacore 9y ago

ivthreadp110 9y ago
Thanks for the starter kit- I'm always looking for new framework launch and go... Wondering if you could include babble with it?
- Gigacore 9y ago
  Yes, comes with Babel included for transpiling ES6 to ES5.
fleetfox 9y ago
Why doesn't it build on top of CRA --scripts-version ?
Softcadbury 9y ago
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.
- Gigacore 9y ago
  Thanks for pointing that out. I have moved action types to constants.
zaphirplane 9y ago
Good stuff, can you say how it is different or better than https://github.com/mozilla-neutrino/neutrino-dev https://github.com/mozilla-neutrino/neutrino-dev or https://github.com/facebookincubator/create-react-app https://github.com/facebookincubator/create-react-app
- Gigacore 9y ago
  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-app-7125d6913760 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.
davnicwil 9y ago
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?
- Gigacore 9y ago
  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-web-development-fa32fb873dcc https://medium.com/@gajus/stop-using-css-in-javascript-for-w... https://css-tricks.com/the-debate-around-do-we-even-need-css-anymore/ https://css-tricks.com/the-debate-around-do-we-even-need-css...
  - davnicwil 9y ago
    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?
alexanderdaniel 9y ago
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!
- Gigacore 9y ago
  Glad you found it helpful! Cheers!

18 points by Gigacore 9y ago

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

Gigacore 9y ago
Yes, comes with Babel included for transpiling ES6 to ES5.

fleetfox 9y ago

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

Softcadbury 9y ago

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.

Gigacore 9y ago
Thanks for pointing that out. I have moved action types to constants.

zaphirplane 9y ago

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

Gigacore 9y ago
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-app-7125d6913760 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.

davnicwil 9y ago

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?

Gigacore 9y ago
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-web-development-fa32fb873dcc https://medium.com/@gajus/stop-using-css-in-javascript-for-w... https://css-tricks.com/the-debate-around-do-we-even-need-css-anymore/ https://css-tricks.com/the-debate-around-do-we-even-need-css...
- davnicwil 9y ago
  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?

alexanderdaniel 9y ago

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!

Gigacore 9y ago
Glad you found it helpful! Cheers!