Nowadays, we can find tons of React boilerplates, using many packages, with a predefined configuration dispatched in multiple files, a complex folder structure etc.
But, I think something is wrong here.
If you start, you don't want to you use this kind of boilerplate. It's way too much overwhelming, you don't understand everything. I was often told "Well thank for the link, but I don't understand a thing in this big boilerplate repository, all the projects it's using, do you have something simpler ?". Basically, someone new doesn't know if he needs all of that, doesn't know how to use all the boilerplate features.
I think those kind of boilerplates are nice for people that do not start, that already understand most things and want to check out how to make this particular package works, or see what are the possibilities.
But even in this case, I was often wondering myself : but why this config ? why this package ? For me, every tiny bit of configuration, bit of code, is important. It's there for a reason, what is this ? Often, you don't want this particular feature/package the boilerplate is including.
This is why I've created this repository. A few days later, Pete Hunt even created something a bit similar : a recap of all the tools and packages a React developer should know or learn because the current ecosystem is overwhelming : https://github.com/petehunt/react-howto. We are just doing the same, technically in-depth.
I'm going to create a full-feature React project/boilerplate running all those projects that are "necessary" nowadays to make something awesome. But I will explain step-by-step how-to.
This repository will have many branches : one by step. The steps are not meant to be long to read. It should be obvious what is the delta between one step and the previous. But, because every bit of changes will be explained, some can be longer.
It starts totally from scratch and little by little, add more packages and configuration (explained in details).
- 1-react-no-npm-no-jsx
- 2-react-express
- 3-react-jsx
- 4-react-es6
- 5-react-webpack
- 6-react-npm-scripts
- 7-react-hot-reloading
- 8-react-structure
- 9-react-content
- 10-react-linting
- stay tuned
Feel free to correct me if I'm wrong, to tell me if some parts make no sense, or to add details anywhere. Thanks !
- redux
- devTools
- propTypes
- css modules
- source mapping
- router
- tests
- universal
- cross-browsers
- scripts cross-environments
- ...
Optional :
- immutability
- graphQL
- flow
- greenkeeper
- gulp
- offline
- docker
- jscs
- ...
Some of those "posts" will be adapted and published in standalone version on my blog : http://ctheu.com/ You can check it out. :-)