8 ms·

My lessons that I would add to this: lessons 1: there's a good chance, depending on what you are doing, that you do not need Redux - avoid it if you can. much

by hoodoof 10y ago

My lessons that I would add to this: lessons 1: there's a good chance, depending on what you are doing, that you do not need Redux - avoid it if you can. much docunentation seems to imply that it is a necessary hand in hand element of react development - not true. I have never found any situation in which I need redux. lesson 2:' use "create-react-app", and if humanly possible, don't eject from it.

krrishd 10y ago
just curious, why is ejecting from create-react-app bad? some of the symlinking stuff involved with create-react-app feels unnecessary but I still value the amount of boilerplate it takes out
- acemarke 10y ago
  Mostly because you can get the benefit of improvements to the build config just by updating the one `react-scripts` dependency. For example, 0.8 enabled proper sourcemaps support in Webpack (and 0.8.2 bumped the Webpack dependency to fix a problem with not being able to set breakpoints in sourcemapped code). If you eject, you don't get those easy updates, as the config files are now a permanent part of your own project.
  - jowiar 10y ago
    There are a couple dealbreakers for now, but I'm seriously looking forward to the day I can migrate our stack ON to create-react-app largely for this reason. Having other people working to make my dev experience better is a huge plus.
    - chrisweekly 10y ago
      Next.js (built on top of React and Redux, by the ppl who brought us socket.io) is a zero-config option that looks way better to me than CRA.
- hoodoof 10y ago
  The point of create-reaact-app is that your build process is zero configuration. The deepest pain point of JavaScript development is undoubtedly build configuration i.e. webpack and babel. If you stick with create-react-app then you manage to remain in a zero build config world, which is a happy world to live in.
  - krrishd 10y ago
    Right, but even upon ejecting I still retain the ability to build/start/test with one command, the only difference is that the build/start/test scripts become static
  - tomduncalf 10y ago
    > The deepest pain point of JavaScript development is undoubtedly build configuration i.e. webpack and babel. Really? Perhaps I've been doing this too long, but once you get your head round the basics I really don't think it's that bad
    - ccallebs 10y ago
      Is there a resource you can recommend to get your head around all the basics?
      - acemarke 10y ago
        The new Webpack docs are great ([0]). Also, my React/Redux links list ([1]) has a couple sections on Webpack tutorials ([2]) and Webpack advanced techniques ([3]) like Hot Module Reloading, file chunking, and build optimization. [0] https://webpack.js.org/ https://webpack.js.org/ [1] https://github.com/markerikson/react-redux-links https://github.com/markerikson/react-redux-links [2] https://github.com/markerikson/react-redux-links/blob/master/webpack-tutorials.md https://github.com/markerikson/react-redux-links/blob/master... [3] https://github.com/markerikson/react-redux-links/blob/master/webpack-advanced-techniques.md https://github.com/markerikson/react-redux-links/blob/master...
mparr4 10y ago
> lessons 1: there's a good chance, depending on what you are doing, that you do not need Redux I agree > avoid it if you can avoid using it in a project, sure, but don't avoid learning it. It definitely helped me level up as a developer. My favorite resource for learning about redux: https://egghead.io/courses/getting-started-with-redux https://egghead.io/courses/getting-started-with-redux
- afarrell 10y ago
  https://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html https://teropa.info/blog/2015/09/10/full-stack-redux-tutoria... Is my favourite because it includes testing and knowing how to test it is super useful when you are just starting out with a tool.
  - mparr4 10y ago
    this was actually the first resource I used and, while it got me off the ground, I strongly prefer Dan Abramov's egghead course that I linked above. That is the path to redux enlightenment!
- acemarke 10y ago
  On that note: I keep a big list of links to high-quality tutorials on React, Redux, and related topics, at https://github.com/markerikson/react-redux-links https://github.com/markerikson/react-redux-links . Specifically intended to be a great starting point for anyone trying to learn the ecosystem, as well as a solid source of info on more advanced topics.
ajacksified 10y ago
create-react-app doesn't support server side rendering. There are apps that don't need that- but I believe SSR should be the default, not the edge case. create-react-app is a bundle of configuration. Configuration you'll likely need to override eventually. You're advising people new to the ecosystem blindly trust opaque configuration, and not bother understanding the underlying tools? This is terrible advice. (And if your argument is that you shouldn't use a tool without knowing how it works... Why use CRA at all? Write your own config.)
- insin 10y ago
  When you're at the point of needing to configure a tool which handles a base config, you need to learn the underlying tools anyway at that point, but without the experience of having built the base config up. Keeping config directly in a project creates a maintainability issue once you have a number of projects on the go, as you then need to turn it into a module like create-react-app's react-scripts or else it's copy and paste time, which becomes horrible across multiple projects, especially if you're evolving your config as you learn. Has anyone written a guide or supporting tools for creating your own config as a reusable module from the beginning? It feels like there's a gap which needs filled there.
  - cobralibre 10y ago
    > Has anyone written a guide or supporting tools for creating your own config as a reusable module from the beginning? It feels like there's a gap which needs filled there. It looks like you did! https://github.com/insin/ad-hoc-reckons/blob/master/CreatingReusableDevelopmentTooling.md https://github.com/insin/ad-hoc-reckons/blob/master/Creating...
ucarion 10y ago
If you've never used Webpack, don't use create-react-app. The configuration it generates is almost impenetrable if you're not already familiar with Webpack.
- mercer 10y ago
  As a corollary to that I suggest people do some research into Webpack 2. Much as I like rollup's simplicity, Webpack 2 looks like it's here to stay and now that it supports tree shaking, it can replace rollup. It's worth understanding how it works even just because many tools assume the use of Webpack. For example, Preact, which in many cases can be a drop-in replacement for React at a fraction of the size, gives instructions on how to use it with webpack (to alias react and react-dom), but not Rollup. The Webpack 2 guides are not great, but much better than what came before, and I'm sure many blog posts will continue be written on the subject. And ultimately it's not really that difficult to get at least a decent grasp of its concepts, and it pays off in the end.
netghost 10y ago
Is there any sane way to use Sass, Less, or PostCSS without ejecting though? Not having variables available in your CSS seems pretty untenable for anything that has more than a handful of styled components.
- hoodoof 10y ago
  Dunno really. I've never used any of the technologies mentioned and things seem to have held together OK.
- eyko 10y ago
  Not at the moment.
- adambowles 10y ago
  This was the killer for create-react-app for me. I resentfully ejected so I could use SASS.
- davidkpiano 10y ago
  I compile the Sass files separately (using Node-Sass) and require the generated CSS file.
- insin 10y ago
  You can use this fork of react-scripts which adds configuration for enabling new options, including use of style preprocessors: https://github.com/kitze/create-react-app https://github.com/kitze/create-react-app
  - hoodoof 10y ago
    The irony of forking create-react-app to add configuration.
whistlerbrk 10y ago
> much docunentation seems to imply that it is a necessary hand in hand element of react development Sorry, I don't believe this is true. Redux's author himself, has explicitly written 'you might not need redux' (https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367#.viykznp9x https://medium.com/@dan_abramov/you-might-not-need-redux-be4...), ostensibly to combat Javascript fatigue. Redux companion libraries often include similar notes as well.
grrowl 10y ago
To further this point, don't use any library you don't need. Don't pull in Reselect until you need it (and you don't need it), Redux once you're big enough and you're passing a doTheThing() callback prop down 3+ hierarchy levels. The only "best practise" for starting is doing less, then re-evaluate when your app has too many complexities (which is the only thing more libraries will create, or solve)

by hoodoof 10y ago

krrishd 10y ago

just curious, why is ejecting from create-react-app bad? some of the symlinking stuff involved with create-react-app feels unnecessary but I still value the amount of boilerplate it takes out

acemarke 10y ago
Mostly because you can get the benefit of improvements to the build config just by updating the one `react-scripts` dependency. For example, 0.8 enabled proper sourcemaps support in Webpack (and 0.8.2 bumped the Webpack dependency to fix a problem with not being able to set breakpoints in sourcemapped code). If you eject, you don't get those easy updates, as the config files are now a permanent part of your own project.
- jowiar 10y ago
  There are a couple dealbreakers for now, but I'm seriously looking forward to the day I can migrate our stack ON to create-react-app largely for this reason. Having other people working to make my dev experience better is a huge plus.
  - chrisweekly 10y ago
    Next.js (built on top of React and Redux, by the ppl who brought us socket.io) is a zero-config option that looks way better to me than CRA.
hoodoof 10y ago
The point of create-reaact-app is that your build process is zero configuration. The deepest pain point of JavaScript development is undoubtedly build configuration i.e. webpack and babel. If you stick with create-react-app then you manage to remain in a zero build config world, which is a happy world to live in.
- krrishd 10y ago
  Right, but even upon ejecting I still retain the ability to build/start/test with one command, the only difference is that the build/start/test scripts become static
- tomduncalf 10y ago
  > The deepest pain point of JavaScript development is undoubtedly build configuration i.e. webpack and babel. Really? Perhaps I've been doing this too long, but once you get your head round the basics I really don't think it's that bad
  - ccallebs 10y ago
    Is there a resource you can recommend to get your head around all the basics?
    - acemarke 10y ago
      The new Webpack docs are great ([0]). Also, my React/Redux links list ([1]) has a couple sections on Webpack tutorials ([2]) and Webpack advanced techniques ([3]) like Hot Module Reloading, file chunking, and build optimization. [0] https://webpack.js.org/ https://webpack.js.org/ [1] https://github.com/markerikson/react-redux-links https://github.com/markerikson/react-redux-links [2] https://github.com/markerikson/react-redux-links/blob/master/webpack-tutorials.md https://github.com/markerikson/react-redux-links/blob/master... [3] https://github.com/markerikson/react-redux-links/blob/master/webpack-advanced-techniques.md https://github.com/markerikson/react-redux-links/blob/master...

mparr4 10y ago

> lessons 1: there's a good chance, depending on what you are doing, that you do not need Redux I agree > avoid it if you can avoid using it in a project, sure, but don't avoid learning it. It definitely helped me level up as a developer. My favorite resource for learning about redux: https://egghead.io/courses/getting-started-with-redux https://egghead.io/courses/getting-started-with-redux

afarrell 10y ago
https://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html https://teropa.info/blog/2015/09/10/full-stack-redux-tutoria... Is my favourite because it includes testing and knowing how to test it is super useful when you are just starting out with a tool.
- mparr4 10y ago
  this was actually the first resource I used and, while it got me off the ground, I strongly prefer Dan Abramov's egghead course that I linked above. That is the path to redux enlightenment!
acemarke 10y ago
On that note: I keep a big list of links to high-quality tutorials on React, Redux, and related topics, at https://github.com/markerikson/react-redux-links https://github.com/markerikson/react-redux-links . Specifically intended to be a great starting point for anyone trying to learn the ecosystem, as well as a solid source of info on more advanced topics.

ajacksified 10y ago

create-react-app doesn't support server side rendering. There are apps that don't need that- but I believe SSR should be the default, not the edge case. create-react-app is a bundle of configuration. Configuration you'll likely need to override eventually. You're advising people new to the ecosystem blindly trust opaque configuration, and not bother understanding the underlying tools? This is terrible advice. (And if your argument is that you shouldn't use a tool without knowing how it works... Why use CRA at all? Write your own config.)

insin 10y ago
When you're at the point of needing to configure a tool which handles a base config, you need to learn the underlying tools anyway at that point, but without the experience of having built the base config up. Keeping config directly in a project creates a maintainability issue once you have a number of projects on the go, as you then need to turn it into a module like create-react-app's react-scripts or else it's copy and paste time, which becomes horrible across multiple projects, especially if you're evolving your config as you learn. Has anyone written a guide or supporting tools for creating your own config as a reusable module from the beginning? It feels like there's a gap which needs filled there.
- cobralibre 10y ago
  > Has anyone written a guide or supporting tools for creating your own config as a reusable module from the beginning? It feels like there's a gap which needs filled there. It looks like you did! https://github.com/insin/ad-hoc-reckons/blob/master/CreatingReusableDevelopmentTooling.md https://github.com/insin/ad-hoc-reckons/blob/master/Creating...

ucarion 10y ago

If you've never used Webpack, don't use create-react-app. The configuration it generates is almost impenetrable if you're not already familiar with Webpack.

mercer 10y ago
As a corollary to that I suggest people do some research into Webpack 2. Much as I like rollup's simplicity, Webpack 2 looks like it's here to stay and now that it supports tree shaking, it can replace rollup. It's worth understanding how it works even just because many tools assume the use of Webpack. For example, Preact, which in many cases can be a drop-in replacement for React at a fraction of the size, gives instructions on how to use it with webpack (to alias react and react-dom), but not Rollup. The Webpack 2 guides are not great, but much better than what came before, and I'm sure many blog posts will continue be written on the subject. And ultimately it's not really that difficult to get at least a decent grasp of its concepts, and it pays off in the end.

netghost 10y ago

Is there any sane way to use Sass, Less, or PostCSS without ejecting though? Not having variables available in your CSS seems pretty untenable for anything that has more than a handful of styled components.

hoodoof 10y ago
Dunno really. I've never used any of the technologies mentioned and things seem to have held together OK.
eyko 10y ago
Not at the moment.
adambowles 10y ago
This was the killer for create-react-app for me. I resentfully ejected so I could use SASS.
davidkpiano 10y ago
I compile the Sass files separately (using Node-Sass) and require the generated CSS file.
insin 10y ago
You can use this fork of react-scripts which adds configuration for enabling new options, including use of style preprocessors: https://github.com/kitze/create-react-app https://github.com/kitze/create-react-app
- hoodoof 10y ago
  The irony of forking create-react-app to add configuration.

whistlerbrk 10y ago

> much docunentation seems to imply that it is a necessary hand in hand element of react development Sorry, I don't believe this is true. Redux's author himself, has explicitly written 'you might not need redux' (https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367#.viykznp9x https://medium.com/@dan_abramov/you-might-not-need-redux-be4...), ostensibly to combat Javascript fatigue. Redux companion libraries often include similar notes as well.

grrowl 10y ago

To further this point, don't use any library you don't need. Don't pull in Reselect until you need it (and you don't need it), Redux once you're big enough and you're passing a doTheThing() callback prop down 3+ hierarchy levels. The only "best practise" for starting is doing less, then re-evaluate when your app has too many complexities (which is the only thing more libraries will create, or solve)