React, Webpack and Babel from scratch
Hi, my name is Andrey Okhotnikov and I'm JavaScript developer. I develop single page applacations , and in my spare time I help professional developers become even more professional.
_______________________________________________________
Find yourself ejecting CRA? Want to understand Webpack basics and how-to set up your development environment for React from scratch? Webpack may sound daunting, but it's not and this should help. There are several great Webpack courses out there. This is just intended to get you started.
If you are new to React and just getting started, I would suggest turning to create-react-app or Gatsby. This is intended for someone that wishes to roll their own and learn a bit more about Webpack and Babel. This also assumes you are familiar with the CLI.
Setup
From the CLI, create a new directory for your new project (e.g. react-starter)
mkdir react-starter
Change directories into the new project
cd react-starter
Package Management Setup
Initialize your project by running yarn init and answering the questions on the CLI. See an example package.json.
yarn init
name (react-starter): Hit enter or type the name of your project
version (1.0.0): Hit enter or set the version of your choice
description: It's up to you
question entry point: index.jsx
repository URL: If applicable, enter the remote repository URL
author: That's you
license (MIT): Hit enter or UNLICENSED
private: Boolean — true or false
This will have created a new package.json file in the current directory.
Version Control (optional)
Now let's initialize Git for version control
git init
After initializing, you’ll want to create a .gitignore file in the project root and start by adding node_modules/ and build/. You may also want to add other files that you don't want in the repository (e.g .vscode).
Webpack
First, we need to install some Webpack and related/required packages.
yarn add -D webpack webpack-command webpack-dev-server webpack-merge html-webpack-plugin path uglifyjs-webpack-plugin extract-text-webpack-plugin@next react-hot-loader file-loader style-loader css-loader
Now, create a config folder in the project root directory and cd into it.
mkdir config
cd config
Inside the config folder, we need to create five new files. Filenames should be self-explanatory.
touch webpack-dev-config.js webpack-prod-config.js webpack-common-config.js webpack-dev-server.js paths.js
Using your favorite text editor, let's start with the paths.js config file. Paths will export some path variables that we’ll use in other Webpack config and server files.
Next is the development server. The dev-server is responsible for running your project locally. We will include neat features like hot reloading and watchContentBase for a better development experience. There are many other options, these are just a few of the key ones. See inline comments and the official docs.
Now, we’ll create our webpack-common-config.js. This file will contain configuration data that is shared between development and production builds. See inline comments.
⚠️ Aliases can get a bit tricky when we start adding ESLint, Flow, and others. ESLint will complain about the path unless specified in the settings to importthe Webpack config.
The webpack-dev-config.js contains configuration data related specifically to development build. See inline comments.
Lastly, the production config. This file contains configuration data related to production build.
Babel
We use Babel for transpiling JavaScript. Let's add the required packages.
yarn add -D @babel/core @babel/polyfill @babel/preset-env @babel/preset-react babel-loader
Next, we need to create a .babelrc file in the project root. In this file, we will configure babel presets and plugins.
@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms are needed by your target environment.
If you intend on using proposed features like rest, spread and static class properties, you’ll want to add those plugins here too.
yarn add -D @babel/plugin-proposal-object-rest-spread
yarn add -D @babel/plugin-proposal-class-properties
React
Now that our development environment is set up, let’s add React to the project using Yarn.
yarn add react react-dom
Now for some starter files. Let's create a new directory called src in the project root. In the src directory, let's create our index and app files.
index.html
index.jsx
app.jsx
ℹ️ We import our stylesheetapp.css as ‘style’ and use it for the class name as className={style.app}. .app being the class name defined in the stylesheet.
Lastly, let's throw in some CSS starter for testing. Create another file in the src directory call app.css and drop in the following or whatever you like. Just keep in mind that in the app.jsx we are referencing the .app class.
Now let’s add a few scripts to our package.json file. Here is a complete package.json example.
At this point, we can now start the dev server
yarn start:dev
You should see dev server is running: http://localhost:3000 or whatever port you chose. You should also see the output of the compiler. Open the browser and take a look.
If you want to turn off the compiler output, set noInfo: true in the webpack-dev-server.js file.
Ready to build
Now we can simply run yarn build and Webpack will drop the bundle code in the build directory.
If you want to run the production built code locally, install serve and run yarn start:prod
yarn add -D serve yarn start:prod
That's all. I hope you found this helpful and learned how easy it is to use Webpack and Babel. For reference, the completed code can be found here.
Linting?
To add linting with ESLint check out Javascript Linting and Formatting with ESLint, Prettier, and Airbnb, which picks up where we ended here.
_____________________________________________
Email: an.okhotnikov@gmail.com