
What's New in Create React App - taejavu
https://facebook.github.io/react/blog/2017/05/18/whats-new-in-create-react-app.html
======
GeneralMaximus
I can't emphasize how useful and important create-react-app is for the
ecosystem.

The first and obvious benefit is being able to quickly create new projects
without having to think about build infrastructure, which is honestly the most
painful part of building a modern React project. create-react-app makes all
the hard choices for you and gives you a reasonable set of defaults to work
with. It's convention over configuration, kind of like Rails. It's a huge game
changer.

The less obvious benefit is that it forces developers to fall into the pit of
success by making it easy to do the right thing. Flow is supported out of the
box, so adding type checking to your app is trivial. Jest is set up for you
out of the box, so you have no excuse to not add tests. This new version
includes support for code splitting, so there's no reason to ship bloated JS
bundles to your users. Building a PWA is easy, so you start thinking about
offline-first right at the start of your project.

I can't thank the team behind this little tool enough for making it so easy
and so much fun to build React applications!

~~~
jmkni
This sounds really good.

Quick question, does it include an option for client side routing?

I really want to start using React, but every time I get overwhelmed by the
sheer amount of options (paralysis analysis) and go back to AngularJS (which
is starting to show it's age). Personally I'm not sold on Angular2/4.

Cheers

~~~
kotojo
They don't load a routing solution with this, but the most used router (and my
favorite) is React-Router [0]. To get basic routing setup takes less than an
hour, and has great docs.

[0]: [https://reacttraining.com/react-router](https://reacttraining.com/react-
router)

~~~
idbehold
If you're using redux I would recommend you stay far away from react-router.
Using redux-little-router has been a pleasure to use in comparison:
[https://github.com/FormidableLabs/redux-little-
router](https://github.com/FormidableLabs/redux-little-router)

~~~
mhink
(Disclaimer: I work at Formidable)

Can confirm, I absolutely love `redux-little-router`. It feels so natural to
dispatch Redux actions to change routes rather than dealing with the song and
dance of conditionally rendering <Redirect /> components or trying to figure
out when in the lifecycle to call `router.push(url)`.

I especially like pairing it with `redux-saga`- with a little bit of effort,
you can end up writing mini-applications for each route which start and stop
as the user navigates.

~~~
elzi
Any example repos of this? This sounds fantastic.

------
n42
I've been watching the PR for the error message overlay[1] off and on for
several months, and it has been a stellar example of OSS community working
together to make this feature possible. There were PRs spanning multiple
projects, contributions from many users, and it ended up in a fantastic
feature that seriously helps all users from novice to expert.

This feature really puts React on the next level, in my book. The CRA team is
doing a wonderful job making React accessible to new users.

[1]: [https://github.com/facebookincubator/create-react-
app/pull/1...](https://github.com/facebookincubator/create-react-
app/pull/1101)

------
oyvey
They should finally acknowledge the existence of typescript and not push
everyone to their flow. Second of all: reduce the size of this starter kit.
Other than that I really like the features.

~~~
tomduncalf
See
[https://news.ycombinator.com/item?id=14373433](https://news.ycombinator.com/item?id=14373433)
\- Microsoft have just released an official starter kit which uses create-
react-app. Not tried it myself yet but it looks great and is well documented

~~~
Vinnl
That's pretty sweet, especially because they do so without having to eject.

Direct link: [https://github.com/Microsoft/TypeScript-React-
Starter](https://github.com/Microsoft/TypeScript-React-Starter)

~~~
tomduncalf
Yeah sorry, I linked to the post in the hope that this gains a bit of traction
as really want people to be aware that getting started with TS and React is a
whole lot easier now! I have a fairly popular blog post on the topic of
setting up TS and React that I'll update to point to the Microsoft repo to
help spread the word.

Here's the package that adds the TS functionality to create-react-app FYI:
[https://github.com/wmonk/create-react-app-
typescript](https://github.com/wmonk/create-react-app-typescript)

~~~
Vinnl
No problem, I use TS+React too and definitely support this becoming less of an
oddity. Luckily, it's moving in that direction already, with e.g. Jest being
far easier to use with TypeScript since Jest 20.

------
nachtigall
I would be interested if anybody has tried both CRE and Neutrino.js
([https://neutrino.js.org/](https://neutrino.js.org/)) and could share their
experience with Neutrino? Was it worth it? I'm thinking of using Neutrino.js
for my next project (because with CRE you're running against walls if you need
just one simple customization from the given defaults, which means to eject)

------
mhd
I had to go to the release note to see what version this applies too. But as
usual in JS-land, it's not that easy: This applies to version 1.0.0 of the
create-react-app uber-project, whereas if you install/update your create-
react-app npm, you'll see version number 1.3.1, as that's a separate sub-
package.

Naming that setup after a Greek monster seems apropos.

~~~
exogen
The 1.0.0 version is for the `react-scripts` package that `create-react-app`
puts in your project. That's the dependency that anyone who's actually using
`create-react-app` in a project is actually interested in (since projects
created with `create-react-app` don't actually depend on `create-react-app` –
it's just a simple CLI). `react-scripts` is the bulk of the project.

~~~
danabramov
Yea, sorry this gets confusing. There are good reasons for why we do this, but
it can be annoying in blog posts.

Here is an explanation:

[https://github.com/facebookincubator/create-react-
app/blob/m...](https://github.com/facebookincubator/create-react-
app/blob/master/packages/react-scripts/template/README.md#updating-to-new-
releases)

------
mleonard
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
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
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...](https://github.com/facebookincubator/create-react-
app/issues/93#issuecomment-278625166)

[2] [https://github.com/gaearon/react-hot-
loader](https://github.com/gaearon/react-hot-loader)

------
thameera
It's nice to see built-in offline caching support with service workers. Can
anyone explain how this cache gets invalidated when a change is made to the
code?

~~~
andyeskridge
After the app is loaded, the registerServiceWorker.js is executed. It checks
for updated sources and updates the cache then. For the user to actually see
those changes, the user will need to refresh the page. The relevant lines are
here [0].

[0] [https://github.com/facebookincubator/create-react-
app/blob/m...](https://github.com/facebookincubator/create-react-
app/blob/master/packages/react-
scripts/template/src/registerServiceWorker.js#L18-L27)

~~~
thameera
Awesome, thank you!

------
Kiro
Why do you need a service worker for caching? I thought the browsers did this
by default.

~~~
Softcadbury
This is offline cache, you can run your application even without internet
connection.

~~~
Kiro
What are some examples where offline works for a web app? It seems like the
utility is really niched so I don't understand why they make this default.
None of the things I've made would make sense using offline (completely
anecdotal but still).

~~~
Vinnl
An example is a webmail client, where in offline mode you can schedule new
emails to be sent as soon as you get online again, and where you can still
read the emails you've read before.

~~~
capisce
Isn't it the case that the offline resources are considered "caches" and thus
might be cleaned up if there's not much storage left?

~~~
Vinnl
Yes, as far as I know, storage space is still limited, so you wouldn't want to
be storing GBs of offline emails. I'm not sure how enforcing works nowadays -
it used to be that old offline data would be culled (I think that was for
AppCache), but that might work differently with Service Workers.

------
paradite
With PWA by default, does it mean react app will be mobile friendly by default
and react native is no longer needed to build mobile apps?

~~~
n42
React Native is for building native mobile applications, React is for building
(mobile) websites. So, no, not exactly, but it does make it simpler to create
a nice mobile experience for users if a native app is not required.

~~~
swah
Maybe he means (if OP thinks like me): can I have the app on the home screen
like real apps? The answer is probably no, you still would be the "Add to
desktop" which most users won't use, and the app won't be on the app store..

------
awaisraad
I have found a bug in it, which was in there in its inception. Should I submit
this issue, or simply make a pull request with fix?

~~~
danabramov
As you like.

~~~
awaisraad
I have never done this before, so thought should ask.

------
yisheng
A little aside - does anyone know what's the colorscheme / theme of the editor
in that blogpost?

~~~
18nlknca
I think it's the Atom default dark theme, or similar to it. The font used is
Operator. [https://www.typography.com/blog/introducing-
operator](https://www.typography.com/blog/introducing-operator)

~~~
danabramov
Operator Mono + Sublime with Spacegray + Oceanic Next

~~~
18nlknca
Awesome, thanks for the correction. For the gp, if you haven't seen the base16
stuff there's a lot of similar themes to choose from to get the right one for
you.[https://chriskempson.github.io/base16/](https://chriskempson.github.io/base16/)

~~~
yisheng
Oh cool thanks! useful link too

------
tmat
love create-react-app, to get up and running but I've never liked keeping it
that way.. I've found ejecting and forging forward from the base react app is
best.

~~~
spicyj
Curious: What makes you need to eject?

~~~
tmat
having access to the webpack config to set things up the way I like and such.
I've also had issues with getting SCSS to work before I eject as well pretty
continuously through the versions.. not sure why.

~~~
spicyj
What things in create-react-app are not the way you like? Maybe we can make
them better for everyone. :)

~~~
thinkpadder1
First class typescript support instead of having to rely on
[https://github.com/Microsoft/TypeScript-React-
Starter](https://github.com/Microsoft/TypeScript-React-Starter)

------
davedx
Damn, we just ejected!

~~~
mderazon
Looks like you ejected prematurely

------
jasonwilk
Shameless plug but we are hiring React Native developers at Dave.com in Los
Angeles if anyone is looking. Email jaaon@dave.com

------
cel1ne
Off topic, but whenever I see an animation of someone writing an import-
statement in Javascript by hand I cringe a little.

This stuff costs so much time, use an IDE or some auto-import plugin for
eslint.

~~~
coldtea
When I see overeliance on IDEs I cringe a lot.

If the thing that slows down my programming is writing import statements by
hand, then I have worse QA issues than that.

~~~
paradite
Writing import statements actually slowed down my angular 2 development by a
lot. I was trying to break down functions into tiny components and composite
them together and ended up with lots of components in separate files.

Modularity is good and all, but explicitly declaring each single dependent
component (external libraries and other internal components) when writing new
components and adding new ones as you need more dependencies is quite painful
and tedious.

~~~
coldtea
> _Modularity is good and all_

Up to a point though -- "break[ing] down functions into tiny components"
doesn't seem to be on the good side of modularity, but more like the lpad npm
fiasco.

