Create React Apps with No Configuration
facebook.github.io
facebook.github.io
However, it is missing a lot of core features that typically come standard with Webpack/React boilerplates. Directly from their Github:
Some features are currently not supported:
Server rendering.
Testing.
Some experimental syntax extensions (e.g. decorators).
CSS Modules.
LESS or Sass.
Hot reloading of components.
http://andrewhfarmer.com/starter-project/
For those looking to learn more about the ecosystem, the following resource lists might be useful.
More React resources: https://github.com/enaqx/awesome-react
React/Redux resource links: https://github.com/markerikson/react-redux-links
This is not an oversight, we literally developed this project in a single week. We plan to add testing, just need to decide on the runner and good defaults: https://github.com/facebookincubator/create-react-app/issues....
eg; `create-react-app --hot --less`
Including commonly-used defaults first, and adding full community bundling later, would be much appreciated. There are probably <10 such packages which would account for a wide range of the first week or so of any React project.
Good luck with this project and thanks a ton for dreaming it up & getting it out the door!
This is one of the best things about Ember. `ember new`, `ember serve`, ember generate component my-component`, `ember build`, `ember deploy`, `ember install`. It's opinionated but it lets you get productive right off the bat. I tried React but after a couple of days I just couldn't get it working, waaay to many options. So I switched to Ember and haven't looked back.
https://www.ember-fastboot.com/
Also two commands to get server rendering working.
Ember is made by folks who work on / for small and medium companies[1]. They don't have the build infrastructure Facebook does and are able to create an anointed solution in Ember-CLI because they'll use it daily. React is stuck in a place where the environment it's developed in is unique from what any other user will see. It's difficult to solve a problem when you're not in the space.
EDIT:
This leads to things beyond CLIs too. React is still billed as just a view library instead of a solution for building an entire app. There's no official path from view layer -> complete app (no guidance for data flow, how to communicate with the server, server side rendering, routing on the client).
I think the React team needs to take a little more responsibility for the eco-system it created. You can't call it just a view library when most use cases use it to develop entire applications. You have to provide more guidance, you can't fallback to Facebook not using it that way as the default response. In my opinion most of the Great Javascript Fatigue of 2015-16 was caused by users trying to fill in the blanks left by the React team and producing one solution after another (and quickly abandoning ship as something iteratively better was released).
1 - Tom, Yehuda at tilde.io
No, I still fully agree.
We think React is a tool to create great UIs, and UIs definitely include concerns like data fetching, etc. So some of this might make it into React in some form in the future.
(The guy you're responding to is the creator of Redux) :-)
They say that Dan, at Facebook, is one the most active members of the React team.
I agree wholeheartedly with this. And it's also why I love Ember, you get templates, routing, data access all working together with minimal configuration. I love Django and part of the reason why is that it's opinionated, and Ember is the same.
More concepts, it's own CLI and build system, outdated docs. (I used it 2 years ago)
And if we CAN'T "make decisions today based on the state of things years ago", then we're really screwed.
But Ember has likely come a long way in that time - I think this is mcardleliam's point.
Also you're flat out wrong: Ember-cli isn't really anything to do with the framework. You don't need it to write Ember apps, it's just the communities command line tool for managing Ember projects. That's all.
Practically, there are Ember modules/extensions/features that require Ember-CLI to work or are a huge pain to work with, if you don't use the CLI...
for example animation libraries or glimmer.
In particular, LinkedIn has been using Ember (with Ember-CLI) for over a year now and has found a lot of benefits from its adoption. Having a build system and conventions that a community maintains lets us focus on building applications instead of tooling (though we still have our share of internal tools). We also can give back to the community for things which matter more for applications "at scale". LI, for instance, funded a good portion of the FastBoot work and has been a key driver in the Ember Engines effort recently.
All that to say, Ember (and Ember-CLI) can serve the needs of the whole spectrum of company/team sizes. While it still has some issues to sort out for larger applications, to say it isn't being influenced by large companies isn't really accurate any more.
https://github.com/tomdale/rfcs/blob/master/active/0000-engi...
This is the reason I've embraced React. No, Facebook doesn't dictate how React fits into the rest of your app, and yes, it requires more effort up front to fit the pieces together. But judging by the popularity of React vs. kitchen-sink frameworks like Ember/React/etc., many developers seem willing to invest this effort.
Another comment here mentions Django; clearly some developers prefer the batteries included approach, but others don't. Is one preference right and the other wrong? Is any developer that doesn't adhere to your preference not taking "responsibility"?
For example: While React still works for a lot of people who did things in ways advocated early on, the rise of Redux and functional reactive programming has caused the community to move in a direction many library authors weren't aware of when they began.
Is it anyone's fault? No, not really- but taking advantage of stewardship in a community can lead to better tools and resources that help newbies, take some of the work out of your hands, and keep quality for everyone as high as possible.
Every time I've decided to take an afternoon to poke at React this is where I've given up. I totally understand the model and appreciate how useful it can be but I've never been clear about how to actually hook it up to a backend that isn't just the generated demo scenario and what the requirements for my backend would be.
Since then I've used React in conjunction with Django, PHP/Laravel, converted large jQuery codebases to React and created frontend-only sites. I've not yet gone full-on with a NodeJS back-end and isomophic and that's fine for now.
Pass your data into a root component via props. Or use XHR requests to load data from your backend into your root component and manipulate them in your state. Let the data changes in the root component trickle down via props. Keep it simple with React loaded via a <script> tag and work from there.
To clarify, I like old and boring because it generates less JavaScript fatigue.
I know the cool thing amongst us older folk are to say "Oh there goes them darn ole kids chasing their new toys again" but this is a case where very clearly one is much more suited for the job than the other. There's nothing wrong with a winner emerging. All of the "problems" people gripe about here about React can be avoided. I have posted this before, but I'll post it here again -- You wouldn't go to learn how to program Java by first learning how to configure maven, download dependencies, set up your project in an IDE, and then build and deploy your WAR through Jenkins into a J2EE container for "Hello World"
React has all the goodies provided by the community, but React IS just a library. If you want to learn React -- copy and paste the latest CDN, use the in-browser transformer, and freaking learn react. The tutorials are great, and so is the article "Thinking in react"
In any case, I haven't looked at this CLI, but if it's anything like the ember-cli I am sure it will help with the artificial gripes.
That's not really fair, though. It will be a React + x + y + z project, because as you said, React is just a library, and it needs other pieces to fill the gaps provided by some of these other frameworks.
I could be wrong, but it will take a couple years to tell. By then, React will be old news also.
Well there are two ways to modify an Ember project: create a bunch of files in various places by hand, or run `ember whatever` and have it done for you. The CLI is the preferred way of doing it for a lot of (good) reasons but if you want a new component running `ember g my-component` and having it make the component JS file, the template and the tests for you in one fell swoop is awesome.
> so the more difficult you make it to use your stuff with normal web technologies the less I want to have anything to do with it.
I don't understand your point? What's a 'normal web technology'?
I mean, you're commenting on a thread about JS libraries that enable you to write awesome single page apps and saying you... don't want to write JS?
If I get you correctly then I used to be like you. "Eww, javascript". Then I was forced to use Ember for a project where I work and it is amazing, nothing that the app does could even remotely be done with HTML or even a bunch of jQuery spaghetti.
They are saying that they aren't going to make the CLI a requirement and I hope that's the case, but my concern is that "use the CLI" is going to become the quick answer.
But what exactly is wrong with a CLI? I'm sorry but I really don't get your point. I mean, you kind of have to run one or more anyway if you want to do modern JS development because the JS you write isn't the JS that gets served to the browser (and for good reason). A CLI is a requirement and has been for a while now.
It's really not, you can get by fine with a text editor and a web browser only. You can use regular web components (works unmodified in Chrome, there's a polyfill for other browsers) and get modularity and all of the things you need. You can add Polymer which, again, doesn't require anything but an editor and a browser.
I love CLI, I live in vim and tmux as much as I can, but I think point and click interfaces are better for discovery, whereas a command line interface is better for reproducibility and therefore instructional learning.
Currently playing around with the idea of a React app for building React apps.
Basically, it's an admin for specifying routes, models, components, database schemas, views, stores, reducers, etc. They are defined declaratively and serialized. Then can be feed to either a build step or a bootstrap that can load create the app dynamically.
Each type of thing that can be edited has its own dedicated UX.
Not much built yet but I'd be curious if anyone else has similar ideas / solutions.
http://www.reactboilerplate.com/
There's several projects like this. Its an opinionated React startup kit utilizing Redux, React Router and Redux-Sagas. With generators, a server etc.
Because React doesn't provide the whole framework there's a bunch of these to get you started so the space is more complex to navigate then something like Ember.
Is server side rendering basic or necessary in most "tiny" apps?
Isn't it both?
Would appreciate feedback:
One thing I don't see a lot of is opinions in React on deploying. I wrote a blog post on deploying this new boiler using netlify, pretty straight forward. https://www.netlify.com/blog/2016/07/22/deploy-react-in-30-s...
At the end of last summer we started to make the migration from Ember to React, and we removed the last Ember code from our code base in April of this year. It has been a slow process, but it has paid off immensely in productivity. I'd rather write code to solve all my problems than have a solution that solves 90% of my problems out of the box but then makes solving the remaining 10% a hacky, unpredictable process.
So are you saying that, absent a better framework than Ember, you would have recommended migrating to no framework at all?
Since then, I've "reverted" to building things in ES5, working in multiple files without bundling, etc. and I have to say the enjoyment I get out of using React has cranked up considerably.
I am happy to see they are converging on some standards - that will definitely make building new apps much easier from a common starting point. I just hope they can walk the fine line between "opinionated" and "bloated".
Of course, we just spent two days trying to decipher a React/Redux project whose lead dev decided to use every "latest" feature even though it's a good ol' CRUD app.
The problem is the low level tooling around it. This is what we’re trying to fix with this project. Hopefully you’ll give it a go, and maybe it will give you just as much enjoyment as using <script> tags. If not, please let us know how we can improve.
It’s not linting/transpilation/bundling that’s bad, it’s that it’s hard to do them without shooting yourself in the foot.
Do you remember how you were telling people on Twitter that they don't need every single crazy feature and every single thing in the Redux store (or even Redux at all) to do React? The kind of people I am complaining about are the ones that say the opposite.
From there it's easy to think about everything in terms of JavaScript, and not making the Web the intended target for usage.
When doing a SPA I often set up Node.js to serve the index and provide server-side rendering and then never touch it again. Any actual API/WebSockets/RPC interfaces the app needs can be serviced by any plain old Ruby, Python, PHP, etc app backend. Since I usually use PHP from old habits, I use a Symfony API-only application.
I posted about this in a top level comment, but don't forget React can control any element in your DOM and not just the entire body like most SPA's are setup. You can continue using whatever languages/frameworks templating and view systems and augment views as needed that would be better handled by React.
That being said, I'll likely give this a spin tonight for somerandomcrappyidea.js and provide you guys some feedback. Unfortunately, my work at Google has me more focused on Angular so I don't have as much time as I'd like to work on React applications. =<
As an aside, thanks for the work you've done on Redux and the talk that you gave at Hack Reactor!
Kudos to React team for bringing a superior pattern and making it actually practical to use.
Ditto for Redux. They're both low-level building blocks that could benefit from some official "opinions".
I whined a while back on exactly this topic.
"Babel 6 - useless by default - a lesson in how NOT to design software. "
http://fourlightyears.blogspot.com/2016/03/babel-6-useless-b...
The last line of the above griping blog post says: "The right amount of configuration is none."
So it is awesome to see someone who DOES know how to design software.
Dan Abramov's blog post says: "Zero Configuration. It is worth repeating: there are no configuration files or complicated folder structures. "
Babel gets it precisely wrong, this new ReactJS tools aims to correct the Babel complexity error.
In a different note, I think if you write it yourself from scratch you'll have more control and knowledge down the road when it comes to nasty bugs but I won't blame you for choosing this over spending weeks setting up a React app.
Furthermore, the Eject feature (https://github.com/facebookincubator/create-react-app#conver...) allows someone to move from the default configuration to their own when they feel comfortable.
I think most boilerplates add way too much and are overly opinionated. I like that this is simple, and "eject" gives power users an even better starting point.
Right now, I'm going through the Om.next tut series, and it is pretty awesome so far. I think I'm going to pass on datascript, though. This is total skunkworks though, if people at work found out that was using clojurescript on the front end, they would be very concerned about me.
The killer feature for Om.next, imo, is using a reader function to define the relationship between a component and the one application state atom. Combine that with an identifying function that associates a component with a field in the application state, and you enable the framework to make very precise component updates.
React Starter Kit comes with GraphQL as its API layer. I love GraphQL, and have written tons of it when writing Relay code, but I wouldn't ever expect someone getting up to speed on React to use it.
You have to limit the number of things you throw at newcomers.
Off the top of my mind:
- Server or Universal rendering - Hot Module Reloading (refreshing is fine!) - (early stage) proposed JS syntax
The main thing that is missing from this package is testing, but that's a very opinionated kettle of fish.
My workflow for ramping someone up on React and eventually Redux looked like:
- A single React component with React.createClass
- ES6 class React components
- Add a component hierarchy and treat the top level component's state as the entire app state - pass down callbacks to update state. Look how this becomes harder to scale as we get more depth in our component hierarchy!
- Redux without the redux-react bindings. Also stateless function components.
However, it would be nice to be able to tweak some of the configurations (Babel, ESLint, Webpack) without completely "ejecting".
If you have a specific pain point, please file an issue. I think we can make defaults better. It takes more work but is more rewarding in the end because it benefits everyone.
We think in the beginning many will "eject" but we will gradually make the defaults better to cover more and more use cases.
Perhaps exposing a subset of those tools' configuration options would be sufficient.
Alternatively, you could imagine a pretty simple system that allows you to pull newer versions of the "ejected" code and handle merge conflicts using your version control software.
I'd also suggest reducing the amount of non-configuration code that's generated by "eject". I think basically everything in "scripts" could be put into a package ("openChrome.applescript" seems like it should be a feature of opn anyway). That would also reduce the number of devDependencies that need to be added to your project's package.json (rimraf, chalk, opn, etc)
IMO it's the worst choice Facebook could have made for this toolkit, as it breeds some awful habits.
What are the similarities with Grunt that aren't worth the mess and what are some of the awful habits that WebPack breeds?
What are your preferred ways to handle modules and build steps in general?
But they very fact you had to spend time abstracting away WebPack speaks volumes IMO...
>But they very fact you had to spend time abstracting away WebPack speaks volumes IMO...
Speaks volumes about its poor public API. I don’t understand how this this affects create-react-app, really.
But if you can suggest something better that solves the same problems, please do.
Sort of... think UNIX philosophy vs... I dunno, Windows I guess? With the way it currently does it you are always going to have a horrible public API because the approach is fundamentally flawed.
And that's before I even get into how it solves those problems.
Now is it a bad thing it exists? No, obviously not. I'm glad it does, but we can learn what not to do from it as well.
It's config heavy for very little benefit.
Code vs config is a huge bikeshed
Not really. Historically it's been an indication of the quality of a system.
The “stupid arbitrary” system has a number of benefits. It revs your assets for production automatically with content hashes. It saves you from filename typos because all assets (CSS, images) are part of the same build pipeline. It throws on parse errors in CSS as part of your normal dev flow, not at some later stage. It allows for fast hot reloading of styles in development.
The only downside I’m aware of is that it doesn’t work with some other tools without special plugins or configuration. Well, you have to pick your tradeoffs, right? I’d love to talk about technical tradeoffs of both systems but your comment reads more like a knee-jerk reaction than a technical assessment.
Yes, it does. Those features aren't exclusive to webpack though (they're really, really, really old features of webdev) and can be replaced by much less silly systems.
I mean literally everything you just listed is better handled by more mature, developed, tools.
Also, sweet project!!
In the case of reactjs however it is extremely important because the ecosystem is absolutely necessary and absolutely damn complicated.
This is precisely what needs to be done to help people get started. Well done.
The npm-version sits in a feature branch, just look for the corresponding PR if you're keen.
Hope anyone reading this finds it useful :)
PS. Already in /src/App.js , and wow live reloading without gulp or browersync , it is so simple to get started! Thank you!
a) How is this different from getting a custom starter kit/generator from Yeoman. Searching in yeoman, I see several for "React" with the top one having over 9.5k stars http://yeoman.io/generators/
b) Is Facebook planning to maintain and keep this generator current? Why don't they just contribute/recommend an existing generator
Additionally, unlike a generator, it doesn’t expose you to any configs so you can focus on your code. However you can “eject” if you really want to.
[1]: For example, I run my app from within a Vagrant Virtualbox machine that doesn't forward filesystem notifications correctly, so I have to configure Webpack's hot reloader to poll for changes instead of listening for fs events.
> “Ejecting” lets you leave the comfort of Create React App setup at any time. You run a single command, and all the build dependencies, configs, and scripts are moved right into your project. At this point you can customize everything you want, but effectively you are forking our configuration and going your own way. If you’re experienced with build tooling and prefer to fine-tune everything to your taste, this lets you use Create React App as a boilerplate generator.
Configuration makes it very hard to move forward or swap underlying tools. So we’ll stick with no configuration for as long as we can, and try to figure out a way to solve common problems by other means (e.g. smarter detection, platform-specific code, etc).
If a person knows enough to want to configure, then they have learned enough to venture out on their own via eject.
The difference in cognitive load between "zero config" and "some config" is enormous.
"zero configuration" === minimal mental model, no scope for misunderstandings, misconfigurations, minimal documentation, almost no scope for user errors and also minimal learning time
"some configuration" - even one single switch/option === learning the mental model, understanding, version problems with the old way of configuring, documentation of configuration, potential for errors, old & out of date blog posts on the Internt telling how to do it the old way, beginner pain
You will come under constant pressure from people who want to add "just this one teensy option" and will criticize the project for not having it. Resist the criticism - beginners need zero config.
The root of all evil in JavaScript development and build systems is configuration.
> npm install -g react-app-tools
> react-app new
> react-app start
{
"private": true,
"dependencies": {
"react-app": "^1.0.0",
},
"devDependencies": {
"react-app-tools": "^1.0.0",
},
"scripts": {
"build": "react-app build",
"start": "react-app start",
}
}However, I predict that there will be a softer escape hatch than "eject". At least a single option to take the webpack and config and whatever you want with it, at your own peril. This would be completely unnecessary unless you really Know What You're Doing.
Once you have done some coding, found your feet and stepped up a few levels of comfort and understanding, then sure thing, start venturing out into the world of configuration via "eject".
I think it's a good thing that it is pure zero configuration. If you want to configure then you have graduated.
[1]: https://twitter.com/dan_abramov/status/752863664290553856
However I do wish the React team would pick between ES6 classes and `React.createClass`. I think I remember the main React tutorial was rewritten in ES6 at one point, but then switched back. I've read arguments both ways, but I suspect they ES6 is still too much of a barrier to entry.
People who aren't up to speed with ES6 will still be shaving a lot of yaks before actually jumping into React.
We’re going with ES6 classes. Expect createClass() to go into another package some time this year.
(Obviously we’ll provide an automated “codemod” utility to convert your existing code.)
But nevermind me, React is a great tool, and this is a very nice and needed project!
Since ES6+ is now the actual Javascript language standard, it makes sense for React to move away from their homegrown class definition approach, and build on top of the approach that is now standardized in the language. The React community has already eagerly adopted ES6, and while React.createClass() isn't going to be deleted any time soon, it's time to start encouraging people to move away from using it.
Either way, though, React's API _does_ depend on having something "class"-like available.
We don't like classes, but we don't like "pseudo classes" (createClass) even more. Better the devil that's standardized.
We already offer a way to create stateless components with just functions. We will keep exploring that space and eventually might have a class-less solution we like that satisfies all our use cases.
createClass might not have been the answer, but on top of stateless component functions, things like the good old ES3 module syntax honestly would be more flexible/powerful (giving you a closure to do things like private members, etc)
Instead we have people using babel with all sorts of plugins, tacking on 3rd party decorators and utilities, and a bunch of other cruft just to mimic features JavaScript have had from the beginning. And then (talking out of my rear here), it possibly put pressure on the TC39 to waste time discussing features we seriously don't need.
It was a great idea back then, but that was never syntax. This and similar patterns rely on the fact JavaScript is very dynamic and flexible language and enables creating closures and creating objects dynamically.
These are very powerful features of language, but they're dynamic, which is unfortunate because to know what exactly is happening in this code you have to run it. for IDEs/editors it's hard to look at your code and guess "well, it's module pattern, I see! You mean this and that". Tooling operates usually on static analysis of syntax. They use JS parsers to parse code to AST(Abstract Syntax Tree).
And here's the thing: ES6 classes are visible in AST, there is something called ClassDeclaration. This means that every programmer can install some ES6 parser from NPM and analyse ES6 classes. This means that there will be better linting, better autocompletion etc.
On the other hand - JavaScript parsers don't understand module pattern or other homegrown idioms. It's harder to analyse them statically. Especially if they rely on dynamic aspects on language. ES6 parser doesn't run your code. That's why ES6 classes, because they're static, are better for parsers, and consequently, enable better tooling, IDE support, autocomplete etc.
Situation maybe were a little bit different if we had tooling for some sort of dynamic analysis (if tools were running code in sandbox and gathered data in runtime, not from syntax etc.).
But because currently most of tooling is syntax based I think ES6 classes (and e.g. ES6 modules) are just better for analysis.
Well... to contradict what I said early I must say that actually it's often possible to analyse such things like module pattern, createClass etc. But:
1. not always with 100% certainty of the result
2. there are too many idioms. If every framework, every team and every programmer has own way of writing JS, own module syntax, own class syntax etc. it's very hard to support all the frameworks and provide tooling for all people...
In other words, classes in JavaScript are a poor substitute for static types, and should not be used that way. That's why a lot of React people are using flow, and a lot of Angular people are using TypeScript.
class Foo {... }
// then, after class definition
Foo.A = X;
Foo.B = Y;
etc.
So... it seems that every try to make JS more static is doomed to fail... Because people will still use it in dynamic way...
Not sure how to solve this problem. Maybe we really need tooling that would run code in sandbox instead of analysing it via AST (but how to sandbox e.g. NodeJS code that interacts with file system or MongoDB? Mocking everything? Or make complete dev environments/virtual machines with NodeJS code running in it?)
(Maybe I overengineer solution ideas in my head, but I think proper tooling support is important for modern web development. It hurts me when I have to learn new large JS codebase and IDE is not helping)
> That's why a lot of React people are using flow, and a lot of Angular people are using TypeScript.
I don't like the idea of defining types for everything but maybe it's the solution (I'm not sure because I have too little experience with TypeScript to judge).
Several React libraries are already doing that. In spite of all our warnings, people are trying to extend classes for React views, and use `class` in the rest of their code, as well, moving it into the state layer, and modeling their business domains with them instead of using pure functions and Redux.
`class` affords `extends` like balls afford throwing and chairs afford sitting. When you ignore the power of suggestion that comes with the tool affordances, you point users in the direction of trouble.
Sadly, scaling developer education is a lot harder than it seems from inside our ivory towers, surrounded by smart colleagues well-versed in programming wisdom and design patterns.
React really should have gone from createClass to <insert better design pattern that doesn't rely on the class keyword here>. It already supports the module pattern. They easily could have expanded on that.
React.createClass (and angular.directive or similar guerilla solutions) are harder to analyse statically. And without static analysis you won't have proper tooling (IDE autocompletion, "go to definition" feature, dependency graphs, linting etc.).
So. Welcome language standards or goodbye static analysis. I'm seriously happy that both React and Angular go into ES6 classes and resign from guerilla coding...
Almost all SPAs give the entire body over to React but its also possible to choose a smaller DOM node and add React progressively to any existing website view that would benefit from the React paradigm. In this setup (at least) server-side rendering is no longer needed and thus simplifies setting up the build process.
So its not all or nothing, you can pick and choose where to use React based on your needs and requirements.
(If we don't count sharable requirement).
With Ember CLI you get a great testing setup with Qunit. While I prefer Mocha over Qunit, I'm at least glad that testing is a first class citizen in the CLI.
The only thing I disagree with here is not allowing it to be pluggable - IMO it should be flexible and allow users to tweak the setup as desired. Of course, it should focus on getting the core experience right, but in the long term I absolutely think it would be better to have a pluggable CLI.
Your choices for this type of tool are zero configuration with no pain, or configurability with pain.
You can't have it both ways. In the JavaScript world, configuration and pain are synonyms.
This is outright false. There is some relation, but not all configuration results in pain.
Any time anyone thinks about adding a configuration option they should think again and if humanly possible, take the configuration option out.
Developers love making things configurable - it's a way of avoiding tough decisions about what software should and should not be able to do.
The best developers are constantly looking for opportunities to remove configurability without compromising the goals of their software.
I don't disagree that configuration is awful, especially if it isn't well thought out, but some configuration is unavoidable & even preferable in some situations (for example when dealing with differences between production, qa, and dev environments). Dismissing configuration wholesale though is laziness. All things should be considered carefully, and blanket statements serve little good.
https://github.com/olahol/reactpack
Doesn't seem like this project differs that much, although this looks to have the backing of core React developers.
Couldn't they just offer a "facebook-certified" starter pack/bootstrap?
I guess you could just do an immediate eject?
Edit: looks like they contemplated that in the survey: "Yes, and I will run `eject` straight away"
No, because Facebook engineers don't use or need that. Facebook only open sources or releases stuff they use—except for this. This is actually the first and probably only open source project from Facebook that they don't use in production.
npm install -g react-app-tools
react-app new
react-app start
At the moment it's "all or nothing" in that you can decide to let everything be configured, or nothing be configured ("ejecting"). This makes perfect sense, but I think a more ideal solution would be having layers of configurability that let you more gracefully set your preferences without completely abandoning this tool's utility.
I'm not saying that's easy, but it's a direction I'd be excited to see.
It provides you with a base configuration object, which has been setup with any loaders that it has detected in your node_modules. You can then extend and customize as needed.
* No isomorphic rendering
* No hot module replacement
* No generators
* No dockerization
* No Sass support
* No test environment setup
* No code splitting
I'm not saying you need those things for your personal react app going into production, but when dealing with bigger teams for a critical app they really become important tools
But of course many users prefer Sass. But Sass in its CSS syntax (SCSS) is (if I'm correct) just super set of CSS. You can always start project using vanilla CSS and when project will grow, you can add Sass.
There are two approaches to develop new projects: big design up front and YAGNI principle (you ain't gonna need it). I prefer YAGNI and I'm glad that Facebook generator is so minimal. But I don't know what they are planning to do with this project. I think this project would be a lot worse if they forced to use Sass(or Radium or any opinionated CSS solution).
2. code splitting? If I understand correctly it's Webpack feature needed mainly for production, not development. So why to add this on the very beginning of your project?
I think the point of the project is to acknowledge that React requiring transpilation to use is 100% accurate and there needed to be a transpilation / workflow solution to make it easier to adopt. It wasn't let me solve every single problem for you, including setting up your production deployment environment using Docker.
Well yes, because any CSS in JS solution (in PostCSS) is just plain bad for a myriad of reasons.
That would leave you with SASS vs LESS and SASS is massively more popular and supported.
Also - HMR, generators, dockerization, sass, & test environments are not needed for many/most projects initially. When they ARE needed you'll be beyond the point you need this kit anyhow.
Reality: - "Hey, look, this actually BRINGS IN A WHOLE LOT OF OTHER PROBLEMS too!"
:sad:
We configure it for you. You don’t need to think about it.
What other problems does webpack bring in your opinion? File an issue and let us know: https://github.com/facebookincubator/create-react-app/issues...
$ react-cli <>