Setup React with webpack 3, babel and NPM – Jakob Lind

How to setup React with webpack 3, babel and NPM  #reactjs #javascript

  • To get started with React you have to learn and configure NPM, webpack, babel AND React.
  • You have probably heard of create-react-app (CRA) which is an official tool to start a new React project.
  • Next, we are going to create our minimal React app and HTML file.
  • Our webpack config file looks like this: – – It contains the following: – – Babel is a highly configurable tool to transpile JavaScript.
  • Our webpack config uses babel-loader to run babel which uses the regular babel config file.

A few years ago jQuery was the best practice for Javascript/frontend development. Getting started with jQuery was as simple as creating an index.html document, include jQuery and start writing code.

A few years ago jQuery was the best practice for Javascript/frontend development. Getting started with jQuery was as simple as creating an index.html document, include jQuery and start writing code.

Today, the frontend ecosystem has evolved. To get started with React you have to learn and configure NPM, webpack, babel AND React.

It is overwhelming to have to learn that many new technologies at once. And when talking to people and reading about webpack/babel, you get the impression it’s difficult.

I want to show you that it is not as complicated as it seems at first. Try out this tutorial step by step to see for yourself!

We are going to set up a simple React project from scratch using the following tools:

webpack for building

Even tough our setup is simple it is going to be a production-ready setup.

You have probably heard of create-react-app (CRA) which is an official tool to start a new React project. The recommended way to get started for newbies is to use CRA, but there are many reason to set up your own build setup with webpack/babel/NPM:

CRA supports ejecting, which gives you a generated webpack config that you can edit. It is well documented but can be a pretty tough start to learn webpack anyway. For me personally, I learn best to code things from scratch!

The underlying technologies of CRA are webpack/babel/NPM. To master…

Setup React with webpack 3, babel and NPM – Jakob Lind