Why
First of all: I'm a fan of create-react-app. It's a fantastic tool, especially if you use it the way it's intended.
In my case I like to work with styled component and Standard. This is of course also possible with CRA via detours (e.g. react-app-rewired), but CRA loses something of its advantage and concept.
Besides the technologies and tools I like to work with, it's important to me to understand what happens under the hood. I want to know how webpack works, learn, try things out and be flexible.
And I also want something from which I can start a new project super fast — a react-boilerplate.
Motivation & Goals
- keep it simple and lightweight
- understand how things work
- be flexible
- be able to start new projects fast
- keep it maintainable
- Learn, learn, and learn
Scope
When building a boilerplate there is always one question:
What should be the scope of it?
In case of a react-boilerplate, this question for example ends up in thoughts about adding a global state management or not.
As I mentioned before, my goal was to keep it simple and lightweight. So for example I decided against adding global state management (like Redux). Sometimes you build just small project which don't need a global state. And even if you need it, the simplicity and power of the React Context API is often a good solution and implemented quickly.
I was also thinking about adding cypress.io because I like this testing framework so much and it's so super easy to use. But to be realistic, we implement these tests very late in a project.
To put it in a nutshell: Add tools and frameworks only when you really need them.
Frameworks & Tools
Usage
The easiest way to use this boilerplate is the built-in template function from GitHub. This can be done by simply clicking on the green "Use this template" Button on the repository page.
Alternative way:
$ mkdir boilerplate && cd boilerplate
$ curl -fsSL https://github.com/marco-streng/react-boilerplate/archive/master.tar.gz | tar -xz --strip-components 1
Suggestions or feedback
If you got any kind of feedback, suggestions or ideas - feel free! Write a comment below this article or fork/clone from GitHub. There is always space for improvement!
Top comments (0)