4 ms·

I'm currently evaluating using create-react-app. Could someone please confirm the following for me: (1) Without ejecting, it's not possible to use 'styled-compo

I'm currently evaluating using create-react-app. Could someone please confirm the following for me: (1) Without ejecting, it's not possible to use 'styled-components' (2) Would need to eject to do server-side rendering (3) There's no hot module reloading Not saying these things are deal breakers at all, create-react-app is really great. Just making sure I've got my pros and cons list correct! Thanks for any help

denisw 9y ago
styled-components works fine with unejected create-react-app, I use this combination all of the time. Server-side rendering would probably still need ejecting, though, for access to the Webpack and Babel configuration. Same for hot module replacement, which in create-react-app is only enabled for CSS files as far as I know.
- nilliams 9y ago
  Webpack's HMR (hot reloading) of JS does work with create-react-app, but only if you use an external state store (like Redux), see [1]. The 'React Hot Loader' [2] module, which maintains local React component state is not included yet. [1] https://github.com/facebookincubator/create-react-app/issues/93#issuecomment-278625166 https://github.com/facebookincubator/create-react-app/issues... [2] https://github.com/gaearon/react-hot-loader https://github.com/gaearon/react-hot-loader
jczhang 9y ago
What does "ejecting" mean?
- pfranz 9y ago
  (I might be wrong on the specifics) create-react-app abstracts a bunch of things for you. Ejecting bakes out those things (dependency versions and configuration files), but can no longer update create-react-app after that or "unbake." https://github.com/facebookincubator/create-react-app#converting-to-a-custom-setup https://github.com/facebookincubator/create-react-app#conver... Usually, you'd want to do this if you want do implement one of the "limitations" cited or if you had specific things to configure that had been abstracted away. For example, the release notes mention webpack 2 changed their configuration. If you hadn't ejected yet there's nothing to do because they took care of it on the back end, if you had ejected you have to update your webpack config.
  - jczhang 9y ago
    Got it, thanks for the explanation. Not sure what "bake" means either exactly but it seems to read like it fixes versioning or sets up specific configs / changes such that you are not tied to the update / release cycle of the larger app.
    - pfranz 9y ago
      "Bake" would mean write out the config files permanently. Not sure how it works on the back end but imagine create-react-app writes out a config on-the-fly each time you launch it. That means it can update the dependencies and makes sure everything places nice together when changing versions. Writing out config files give you more control, but you'd have to update the tools and config manually and might mess up dependencies. In my experience, setting it all up and getting dependencies is one of the pain points with react, so it's nice to get some sane defaults and get to writing your app. But it is nice to take the time to do everything manually at least once to see what's under the hood.

denisw 9y ago

styled-components works fine with unejected create-react-app, I use this combination all of the time. Server-side rendering would probably still need ejecting, though, for access to the Webpack and Babel configuration. Same for hot module replacement, which in create-react-app is only enabled for CSS files as far as I know.

nilliams 9y ago
Webpack's HMR (hot reloading) of JS does work with create-react-app, but only if you use an external state store (like Redux), see [1]. The 'React Hot Loader' [2] module, which maintains local React component state is not included yet. [1] https://github.com/facebookincubator/create-react-app/issues/93#issuecomment-278625166 https://github.com/facebookincubator/create-react-app/issues... [2] https://github.com/gaearon/react-hot-loader https://github.com/gaearon/react-hot-loader

jczhang 9y ago

What does "ejecting" mean?

pfranz 9y ago
(I might be wrong on the specifics) create-react-app abstracts a bunch of things for you. Ejecting bakes out those things (dependency versions and configuration files), but can no longer update create-react-app after that or "unbake." https://github.com/facebookincubator/create-react-app#converting-to-a-custom-setup https://github.com/facebookincubator/create-react-app#conver... Usually, you'd want to do this if you want do implement one of the "limitations" cited or if you had specific things to configure that had been abstracted away. For example, the release notes mention webpack 2 changed their configuration. If you hadn't ejected yet there's nothing to do because they took care of it on the back end, if you had ejected you have to update your webpack config.
- jczhang 9y ago
  Got it, thanks for the explanation. Not sure what "bake" means either exactly but it seems to read like it fixes versioning or sets up specific configs / changes such that you are not tied to the update / release cycle of the larger app.
  - pfranz 9y ago
    "Bake" would mean write out the config files permanently. Not sure how it works on the back end but imagine create-react-app writes out a config on-the-fly each time you launch it. That means it can update the dependencies and makes sure everything places nice together when changing versions. Writing out config files give you more control, but you'd have to update the tools and config manually and might mess up dependencies. In my experience, setting it all up and getting dependencies is one of the pain points with react, so it's nice to get some sane defaults and get to writing your app. But it is nice to take the time to do everything manually at least once to see what's under the hood.