DEV Community

Cover image for Introduction: react-boilerplate
Marco Streng
Marco Streng

Posted on

Introduction: react-boilerplate

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
Enter fullscreen mode Exit fullscreen mode

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)