I want to use react/redux. So I did "create-react-app test" after 5 minutes, I get a directory with 22,538 files and takes 131MB.
Meanwhile if I google, "jsfiddle react redux" and look at the first link I get a jsfiddle with just a few files it loads, all within the browser.
So why should I use create-react-app versus just loading a few dependencies in the browser? Is the overhead worth it? Is it mainly due to webpack?
I use create react app (CRA from now on) since react redux has too much boilerplate to manage things.
CRA is basically a startup-kit: that explains why has so much basic package asset in terms of import.
I can assure you that maybe you'll pay the cost to use redux on large projects (and dependencies...and packaging!!!).
Mostly depends on teams anyways, if you need to standardize how to operate on things and your team is large, Redux should be useful since this way of act avoids unexpected implementations because "there's a way" to do things.
my personal preference is not to use CRA. it was meant to be a starter kit for developers who want to learn react without wasting time on configuration and setting up the environment.
It is a fantastic learning tool if you start from scratch because all the magic is hidden from your view, you just focus on React and let cra take care of the details. but production projects are not that simple to handle. there are a lot of requirements which may come in and your cra may not support it. as it was meant to be a generic tool for learning react. you can eject it but then you should really avoid ejecting it as the config is extremely complicated.
with cra you are missing a very important base of your project. ie the webpack.
The way cra solves this problem is by hiding all the config by default, so after starting your project you are not exposed to Babel, Webpack, dev/prod environment, or any other config.
You start learning with a tool that does everything for you, but when you are ready to know how things really work under all that, what are you supposed to do?
With cra you have an eject script that can uncover all the config that is hidden beneath.
If you feel so adventurous to do it, you will find yourself into a really huge and scary config, meant to do a lot of stuff and designed to not be exposed to the end user.
if you are a senior developer then you must really try to configure your own webpack config according to your project requirement. webpack, babel, etc are very important because they are not just for react. you can use them in any modern javascript project. as a senior developer, you should really know how things are working, in case you decide to remove a library and add another you should know where and how to do it. and really should not rely on a tool that makes things simple for u.
All of this is not a hard rule to follow. but my personal experience .
Related
This may sound like a strange question, but I come from an emacs,xterm background and I am used to work a few files and have total control of what I am doing.
Now, I am going to learn react and vue, but when I examine the number of files that are generated for a project with:
npx create-react-app
vue create app
then it adds upp to 36000 for react and 19000 for vue. That is something that annoys me. Is there any way to create a project in both framework that has significally less files?
What you are referring to is scaffolding. You do not require scaffolding to use vue.
You are also using build components to minify JS code and include all types of things such as fall backs.
If you want to learn it from scratch you can start with the CDN version then move onto learning to use the templating engines and so on.
If you really want to start to learn things from scratch.
Use CDN Versions
Learn Rollup.js
Learn Vue
I am looking to develop a React JS web app, using react-boilerplate for development
https://github.com/react-boilerplate/react-boilerplate
But the above boilerplate doesn't seem to be updated quite often, which boilerplate should be used for building simple web apps
Create React App is pretty much a single command setup with all the basic React boilerplate code for you from the command line.
Although as others have said, ideally you should look into setting up your own boilerplate to suit your own needs and maintain it as you best see fit.
There is not a simple good answer to this problem. Ideally, you should create your own boilerplate and maintain it over time, because only you will know what are your most common needs. There are no perfect boilerplates and almost every boilerplate is opinionated.
You might try to create a boilerplate for yourself from React CRA or other sources that might fit your needs in a great measure. It takes time in the beginning, but after a while you might update it every few months to make sure it is up to date and make it the starting point for all your new projects.
Sometimes a good point of inspiration would be the Yeoman Generators. Take
a look here: Yeoman Generators
React-boilerplate no longer to maintain, it has some library doesn't upgrade yet. You can try this repository, same about structure and way to use.
https://github.com/react-boilerplate/react-boilerplate-cra-template
React-boilerplate is not being maintained. You can use ARc which is a React starter kit based on the Atomic Design methodology, while I'll suggest you use create-react-app which is strongly recommended by the community.
I want to know whether we can use create-react-app for building enterprise level application, does it have any limitations. Or is create-react-app meant for beginners who are learning react.
I always start with create-react-app. Even if im doing work for a client. If you find that you need more control over the pipeline later, there is no shame in going with npm eject. create react app is not just for beginner and often its more than enough for most people.
It has all you need for building production-grade front-end.
Even if you'll need to configure something specific you can always use eject (rarely needed).
It's just very handy way to generate starter boilerplate, so you don't have to bother with config.
We're in the beginning stages of this project, so right now we're just trying to figure out how best to start.
We want to create a UI library of React components, and what we'd like to do is create the library so that you can import just one element directly, so that:
// bad
import {Button} from '#mycompany/uilib'
// good
import Button from '#mycompany/uilib/Button'
That's the big question. So we're looking at a couple of solutions to start - we've taken a look at create-react-library and lerna or storybook might be better starts?
Here's what we're looking for, from a business & engineering perspective.
We all think Typescript is the way to go.
We think that rollup might be better for this type of project than Webpack, but we're not entirely sure. It may be worth a little overhead if it increases dev turnaround and is easier to maintain/configure.
But the big question is that I'm not sure how packages like, say, '#material-ui/core/Button' do it. Googling hasn't helped much, thus the appeal to the StackOverflow gurus. Thanks.
Firstly, I'd suggest sticking with the well-written and supported create-react-app with TypeScript support. This gets a lot of the initial config out of the way.
Then, I'd encourage you to have a look at a combo of Yarn Workspaces and Lerna. Setup can be tricky, but the automated symlinks, and the ability for your individual components (packages) to depend on each other, makes this a powerful combo.
On the dev cycle and "playground" front, Storybook is hard to beat. They have some amazing stuff coming soon around docs, which will be quite powerful (and visually pleasing)
Let me know if you have any more questions - this topic is front-of-mind for me at the moment, so my head is swimming with ideas.
I don't understand why the generator-ionic (along with other ionic + Yeoman project)s are so popular.
I don't see what the advantages are in using a yeomen generator in this case, this is.
I understand why the Ionic framework is useful in a Cordova project (as we all know, the UI, ngCordova plugins, it uses AngularJS, ect) but what specifically does the Yeoman component add that a basic Ionic project doesn't already have or that cannot be easily added with a bower install.
It seems to me that the Yeoman ionic projects just seem to be unnecessary bloat and can lead to more errors and library issues. I just do not see how components like karma and grunt (as opposed to ionic using gulp) fit into help with development.
True, you can set all this up by yourself. However, imagine setting this up on each and every project that you start. Kind of cumbersome, don't you think?
That's why some people tend to create these generators - to save you (if you like) the time of having to scaffold your application every time from beginning. Usually they provide some features (about which you can read on the Github pages) or they may even enforce some kind of project directory layout (which may help with big projects).
All in all, you don't have to use them, or stress about them. For instance, I personally don't use them on every project, but I appreciate the community effort and when I want to try something quick I tend to test them from time to time to see how they've evolved.
Don't hate, donate ;) (Sure sure, I know you're not hating, the statement just seemed appropriate).