Setup React, Babel 7, and Webpack 4
Create react app makes it extremely easy to get up and running with React providing sensible defaults. However, you're going to reach a point where you need to, or might just plain want to, setup from scratch.
Before we begin you must install your package manager of choice, npm ships by default with node.js. I will be using yarn throughout this tutorial.
Lets begin by create a new directory to house our React application and initialize a package.json file to manage our dependencies etc...
mkdir default && cd default && yarn init -y
Babel requires a few packages to transpile JSX code properly.
- @babel/core- the core babel compiler
- @babel/cli- the babel command line
- @babel/preset-env- smart preset that allows targeting browsers via Browserslist
- @babel/preset-react- provides support for JSX etc...
- babel-loader- allows transpiling JS files using Babel and Webpack
yarn add @babel/core @babel/cli @babel/preset-env @babel/preset-react babel-loader -D
Create Babel config file
We are now ready to create a .babelrc config file. This is where we will tell Babel to use the plugins we just installed.
Webpack requires just a couple of packages to get started.
- webpack- self explanatory core package which takes care of bundling your assets
- webpack-cli- provides a set of tools to improve Webpack config setup
- webpack-dev-server- provides a dev server that supports hot reloading
- html-webpack-plugin- generates index.html file including webpack bundle
yarn add webpack webpack-cli webpack-dev-server html-webpack-plugin html-webpack-template -D
Create Webpack config file
Add scripts to package.json
We are now ready to define some npm scripts to run Webpack which is going to use Babel to transpile our code.
Create index.js file inside src
yarn add react react-dom
Finally we need to start our dev server and test our config.
yarn run start:dev