Using toolkits to jumpstart React development 🛠

Setup a React application in just a few seconds 📦

“A displayed content of a toolkit displayed showing tools like hammer, axe, box cutter, iron and flashlight” by Todd Quackenbush on Unsplash

Setting up a React application can be a nuisance if you’re new and inexperienced. There are just too many moving parts. Babel, Webpack, Hot Reloading and Dev servers are, sometimes, complex things to setup and take their time to learn and master.

By the time you’re done configuring them, you might not even understand what you just did and your will to continue working is drained.

Tools like Babel and Webpack are important and knowing how to configure them is too, don’t get me wrong! If you put yourself in any frontend job you’ll probably deal with these tools or similar ones. So it is always a plus if you invest some time into getting to know these technologies.

My first advice

Use toolkits if you are in any of these situations:

• If you’re just starting out learning React and are only looking to understand the library and get better at it, without all the extra stuff that comes with configuring an application.
• If you’re an experienced React developer and are looking to jump start a project as fast as you can, without losing all the config time (code now, config later).

Config from start to finish your own project if:

• You’re looking tounderstand Webpack or whatever bundler you’re using.
• You need a specific set of configuration options for a specific and detailed project.

What are toolkits?

Kent C. Dodds published a great article discussing Toolkits, have a look at it.

Concerning toolkits 🛠 📦

“A “toolkit” is a set of tools in any form that allows you to create applications with no build configuration” — Rey Ronald — Awesome Toolkits

In sum, toolkits:

• Allow you to keep config updated (One config that works for several projects);
• Allow you to keep tools updated (tools like Babel and Webpack are updated through several projects);
• Allow you to focus on shipping to production (time lost on config is now spent on developing the product);

Let me show you some toolkits

create-react-app

One of the most well known examples in the React world. CRA gives you a client that on the execution of a command creates an entire React application for you.

You don’t need to install or configure tools like Webpack or Babel.
They are preconfigured and hidden so that you can focus on the code.

If you’re using npm 5.1 or earlier you must install it like this:

npm install -g create-react-app

and create an application like this:

create-react-app my-new-react-app

If you’re using npm 5.2 and higher you can just use npx

npx create-react-app my--new-react-app

It will create a functional React application in a few seconds and you can just start coding away really quickly. It uses react-scripts under the hood and comes with built-in support for:

• CSS
• Images
• Code-splitting
• Testing
• etc

You can even add SCSS support with just 2 commands. Their User Guide will surely squash any doubt you might have.

If in the future you need to change something about Webpack or Babel to your liking or specifiction it is super easy. Just run:

npm run eject 

or

yarn eject

And it will eject every configuration that was hidden right into your folder structure. From then on it is your land and you can mess around however you want. It is a good idea to eject if you’re looking to learn how things were configured. 😃

nwb

This is one of my favorites. It allows to easily create React, Preact, Inferno and vanilla Javascript apps in a breeze. It also supports building components and libraries to publish to npm.

If you want to use it has a global command to quickly create apps install it like this:

npm install -g nwb

If you already have an app and want to use nwb’s tools to build and serve your app it’s dead simple aswell. Just install it as a dev dependency and use the commands with npm / yarn scripts.

yarn add --dev nwb // npm install --save-dev nwb

and use it in the scripts on your package.json

{
  "scripts": {
    "start": "nwb serve-react-app",
    "build": "nwb build-react-app"
  }
}

It is easily configurable through a file called nwb.config.js

Just take a look at the configuration options!

insin/nwb

You can config:

• file names
• file directories
• Babel
• Webpack
• Karma
• The build for npm publish
• and even the dev server

All of this without ejecting and with great documentation linked above.

Conclusion

There is nothing wrong by feeling intimidated by the building process of these apps. No one is born with this kind of knowledge.

But I see many people get frustrated by the problems that arise and give up. With these toolkits it makes it easier to first understand React and then go on to dive deep into Webpack and Babel and others. 😄 Hell, it even makes it easier for people who already know all about the build process but just don’t want to keep doing the same thing over and over.

SO NOW IT’S UP TO YOU! 👷 START BUILDING! 🛠 FASTER! WITH TOOLKITS! 📦

Using toolkits it’s pretty much like this

If you want to stay updated on everything I write please feel free to Followme!

João Miguel Cunha — Medium

And if you want to see more stuff from me I can recommend these posts:

Let’s play with Chrome’s Face Detection API 👨 👩

The power of prototyping code