When it comes to React projects, there are multiple ways to set up your environment. They differ by their features, size, and time required.
First, there is create-react-app. It sets up the project in a minute and you are ready to go. Tho, over the years it has become bloated with too many depending packages. As of October 2020, it's around 165MB.
Another solution would be to use nano-react-app. It's more barebones as it uses zero-config Parcel and offers no eject, no linting, and no service worker. Still around 130MB after the install.
Surely, there is always an option to set up React app manually by installing Babel, Webpack, and other necessary packages for the specific project and then configure everything for your front-end pipeline to work.
Which is your preferred way to set up React projects?
Top comments (12)
For anyone who hasn't come across it yet, I would highly recommend Next.js because it seems like it is quickly becoming the standard for bootstrapping and developing React.js projects.
It is a super quick set up and provides a fantastic developer experience.
For bootstrapping applications, they have a create-next-app option as well as a TON of Next.js examples to either start from or implement into your existing project.
Not an expert in it, but I like it a lot π
I've been developing with React for about ~3 years now and it is by far the most exciting framework that I have come across. They balance user experience and developer experience very well leading to great productivity and results!
Next.js Conf is actually going on right now (started yesterday) which has a TON of great new features in version 10 if you want to see more.
I did listen a couple of talks yesterday, awesome stuff π―
I use github's template feature with one of my boilerplates:
It automatically creates creates new repo with all the content from the boilerplate
Thanks for sharing! Will check them out for sure π
I set up manually. If it is a small and quick one, I use parcel. If I think I need more customization and flexibility, I use webpack. I once used pnpm too, but it caused some problems with parcel, so I went back to yarn.
I'm a big fan of Parcel! It's easy enough to get started using Parcel without any sort of starter, but I created one anyways for building out test projects. It uses the Parcel 2 beta which adds all sorts of goodies like fast refresh (improved hot loader) and customizable (but optional) config. This starter is Typescript based, but you can easily just rename the files from .tsx/.ts to .js and everything should work fine. Repo is here: github.com/chuckhendo/parcel-react...
I usually just use CRA but it is extremely slow with detecting errors with the linter and all, taking a full restart to actually read the full line properly. I am probably just going to use create next app because it is faster for my apps now.
Just for people who faces problems when they try to run this command in the Command Prompt (CMD) and they get a message something like ERR and any kind of this stuff for my case I searched a lot and at the end the solution was to change from NodeJs to Yarn , Happy hacking ciao ππ»
Manually, Typescript + Webpack.
React libs from CDN to avoid packing them.
I've used to have my own VSCode flavored with React
VSCode - React Flavored
Camilo Martinez γ» Sep 22 γ» 7 min read