Bootstrapping a React Project
Sometimes, as a developer, you get an idea for a project (large or small) and you just want to start getting your ideas out. Perhaps create a proof of concept and go from there. What happens a lot of the time though? You end up spending an hour or two deciding which tools to use, configuring those tools, second guessing your decisions, and finally when you are ready ...... you are tired and lost motivation for the idea.
No matter what the project you are working on, no matter the tools (react, angular, node, etc....), it is a good idea to have a boilerplate project at the ready in order to quickly start.
What is a boilerplate project?
A boilerplate project is a set of code that can be reused in many ways with little or no alteration. It is essentially the "base" of a project that you can use and reuse when starting a new project. It takes the monotony out of developing and tries to help focus on solving problems rather than doing the same config/setup work over and over again.
React
React Boilerplate Project
An example of a decent boilerplate project is, called plainly enough, React Boilerplate. Their github page states that this is a highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices. There are instructions on the page to clone, setup, and run the demo app. You can also clear out the demo app and start building your own following the boilerplate opinions of building in react.
There are a lot of nice things built into this boilerplate including Redux Sagas, a starting point of 100% test coverage using Jest and Enzyme, as well as many other features listed on their page.
My favorite takeaway from this project is actually the folder structure/organization. If you go into the containers folder (app/containers), you will notice that each section is its own container. Within each folder you have a self contained unit that includes any files needed for that particular container. This includes a test folder, any actions, reducers, or anything needed for that container to function. AT first this might not seem like a big deal, but when working on a large scale project, you start to notice the benefits very quickly.
There are other boilerplates (too many to cover here) but you can check those out for yourself.
Create React App
While these are great for building projects, I have found that sometimes they can also be opinionated and may have more than you actually need to get started. It is this reason that I suggest giving a project called Create React App a try.
Create react app is a project created by Facebook (the people who actually built react) that essentially extracts all of the setup work away from you and allows you to quickly create a new project with all the updated boilerplate you need. It could not be simpler to start a new project. You basically follow these steps from the terminal:
npm install -g create-react-app
create-react-app my-app
cd my-app/
npm start
You can now start writing your react app. It is fairly straight forward to update to new versions of create react app and adding packages and other tools is the same as you would in any project.
Create react app is basically a wrapper around webpack. It extracts all of that away from you so you can focus on just writing code (for the most part). Testing is built in, eslint is setup, and all kinds of other tooling. You can check out the github for more info.
Thats it! In summary, it is always a good idea to have a good starter project just to get going. You can use something like Create react app to get going even quicker. And then you can use ideas from other boilerplates and bring them into your projects as needed. Node
Since Node is similar (starting with a package.json file), I figured I would add a bit of that here as well. I looked for some boilerplate projects from others. Some seemed either too complex or not complex enough. I ended up creating something on my own in which I took ideas from other projects. Here is a basic package.json that I use.
That is basically it. You pick some packages, using express you can then create a folder structure that works for you (controllers, models, etc) and you are off. Notice that this uses mocha for testing, I also have a version that uses jest. See that here.
No comments: