11 ms·
What's New in Create React App
- kerojan 9y agoБудил ли встроенная поддержка typescript?
- kerojan 9y agoБудил ли встроенная поддержка typescript?
- thameera 9y agoIt'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 9y agoAfter 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/master/packages/react-scripts/template/src/registerServiceWorker.js#L18-L27 https://github.com/facebookincubator/create-react-app/blob/m...
- thameera 9y agoAwesome, thank you!
- oyvey 9y agoThey 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.
- davedx 9y agoWhere are they pushing flow in create-react-app?
- oyvey 9y agohttps://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md https://github.com/facebookincubator/create-react-app/blob/m... They are supporting flow but not TS. Maybe writing "push" was a bit of an over statement from my side but for how well typescript plays with react and JSX and how much more popular it is compared to flow it should be either supported by them or flow shouldn't be. Currently they are discriminating in favor of flow. Which I mean they have 100% the right to do, its their product but as an end user I simply want to express my desire in that feature being first class.
- danabramov 9y agoThe reality is not that we don’t want to support TS, but that its pipeline is significantly different from what we use at FB, so we neither have the expertise, nor can integrate the other tools we rely on. This might get better as AST interop between tooling improves.
- hzoo 9y agoYep, and we (Babel) are trying to work with TS on integrating it into Babel similar to how flow works with Babel (parser support + a plugin/preset to strip types). Again, limited resources so if the community really wants it, we would appreciate help in reviewing PRs and testing! https://github.com/babel/babylon/issues/320 https://github.com/babel/babylon/issues/320, https://github.com/babel/babylon/issues/523 https://github.com/babel/babylon/issues/523
- Vinnl 9y agoThat's awesome, I didn't even know that was a potentially viable route! Thanks for sharing :)
- cel1ne 9y agoOff 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.
- colinramsay 9y agoWhich plugin would you recommend? Is there editor integration, i.e. With Sublime?
- deleted 9y ago[deleted]
- cel1ne 9y agoI use eslint-plugin-auto-import and eslint-plugin-jsx-import (the latter I have hacked together for myself, it's undocumented and brittle) It get's triggered on each save in TextMate, which I use.
- colinramsay 9y agoThanks!
- coldtea 9y agoWhen 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 9y agoWriting 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.
- Kiro 9y agoWhy do you need a service worker for caching? I thought the browsers did this by default.
- Softcadbury 9y agoThis is offline cache, you can run your application even without internet connection.
- Kiro 9y agoWhat 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).
- danabramov 9y agoIt‘s not just about offline, but about serving assets instantly on repeated visits (while they update in background). You don’t need to wait for request at all.
- coldtea 9y ago>What are some examples where offline works for a web app? Tons of web apps that work in offline mode, which we had since a decade or so -- from games to utility apps. >It seems like the utility is really niche Hardly.
- GeneralMaximus 9y agoIt's also nice to be able to selectively cache some data offline so that users aren't greeted with a "you are offline" screen when they hit your web page without a network connection. For an e-commerce website, this might be the user's shopping cart and favorites. For a note taking app, this might be the last note the user edited. For a Twitter client, this might be the user's drafts and the last 100 tweets on their timeline. This way, the app can say "you're offline, but you can still look at some of this data and do things with it, and we'll sync you up when you get back online". Native apps already do this. E.g, try posting a picture to Instagram while you're offline.
- davedx 9y agoDamn, we just ejected!
- n42 9y agoI'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/1101 https://github.com/facebookincubator/create-react-app/pull/1...
- paradite 9y agoWith 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 9y agoReact 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 9y agoMaybe 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..
- GeneralMaximus 9y agoNot really. You still have to do a some work to make use of PWA features. This release just integrates the sw-precache-webpack-plugin into the build system so it's easier to add a ServiceWorker to your app should you decide to do so. Here's the documentation: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app https://github.com/facebookincubator/create-react-app/blob/m... Also, ServiceWorkers are not just useful on mobile! Applications targeting desktop browsers benefit from them just as much, especially if you're thinking offline-first.
- mhd 9y agoI 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 9y agoThe 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 9y agoYea, 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/master/packages/react-scripts/template/README.md#updating-to-new-releases https://github.com/facebookincubator/create-react-app/blob/m...
- GeneralMaximus 9y agoI 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!
- swah 9y agoI love this and so many command line tools that so many projects are shipping now - actually I have come to expect that projects/frameworks that need multiple files (VueJS, React, etc) have a "component generator" distributed with it, so you can create new components, with the proper up-to-date template, from the command line. I don't remember when this started - Rails maybe? That was not my thing back then, but I really like this now. IIRC Elixir has a great tool as well.
- kuschku 9y agoAt the same time, create-react-app just hides that very awful build system. At some point you will need to make changes — be it to switch to typescript, to add some other cross-compilation tools or modify the build pipeline — an you'll have to fight with the build system. If create-react-app did not exist, maybe the daily pain of working with the build system would be enough that it would actually be improved. Because currently, maven is even nicer to work with than the various js build systems.
- krisdol 9y ago
- nachtigall 9y agoI 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)
- yisheng 9y agoA little aside - does anyone know what's the colorscheme / theme of the editor in that blogpost?
- 18nlknca 9y agoI 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 9y agoOperator Mono + Sublime with Spacegray + Oceanic Next
- kerojan 9y agoБудет ли выбор препроцессоров sass, less и др. при создании приложения в create-react-app ?
- danabramov 9y agoПока вряд ли. В документации написано как их прикрутить если очень надо. )
- sAs59 9y agoI have a project created with old verion of CRA. If new version uses webpack 2, how can I migrate to a new version. Because, I want to be able to use import().
- mleonard 9y agoI'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 agostyled-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 agoWebpack'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 agoWhat 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.
- jasonwilk 9y agoShameless plug but we are hiring React Native developers at Dave.com in Los Angeles if anyone is looking. Email jaaon@dave.com
- tmat 9y agolove 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 9y agoCurious: What makes you need to eject?
- tmat 9y agohaving 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 9y agoWhat things in create-react-app are not the way you like? Maybe we can make them better for everyone. :)
- thinkpadder1 9y agoFirst class typescript support instead of having to rely on https://github.com/Microsoft/TypeScript-React-Starter https://github.com/Microsoft/TypeScript-React-Starter
- awaisraad 9y agoI 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?
- paki123 9y agoPlease submit it!
- danabramov 9y agoAs you like.
- awaisraad 9y agoI have never done this before, so thought should ask.