loading...
Cover image for How do you set up React projects?

How do you set up React projects?

madza profile image Madza ・1 min read

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?

Discussion

pic
Editor guide
Collapse
michaelgee profile image
Michael Gee

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.

Collapse
madza profile image
Madza Author

Not an expert in it, but I like it a lot 😍

Collapse
michaelgee profile image
Michael Gee

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.

Thread Thread
madza profile image
Madza Author

I did listen a couple of talks yesterday, awesome stuff 💯

Collapse
rtivital profile image
Vitaly Rtishchev

I use github's template feature with one of my boilerplates:

It automatically creates creates new repo with all the content from the boilerplate

Collapse
madza profile image
Madza Author

Thanks for sharing! Will check them out for sure 👍

Collapse
ganeshh___ profile image
ganesh

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.

Collapse
chuckhendo profile image
Carl Henderson

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...

Collapse
shadowtime2000 profile image
shadowtime2000

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.

Collapse
yassercher profile image
Yasser Cherfaoui

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 👋🏻

Collapse
nomoredeps profile image
NoMoreDeps

Manually, Typescript + Webpack.
React libs from CDN to avoid packing them.

Collapse
equiman profile image