Let's get started with using Redux. We will start with basic configurations, and we can take the configurations further in each chapter:
- Installing
node
and npm
/yarn
is done as follows:
Install the latest version of a node
from https://nodejs.org/. To verify the correct installation, run the following command:
node --version
You can get the latest version of yarn
from https://yarnpkg.com/en/, and npm
from https://www.npmjs.com/get-npm.
- Initialize the project as follows:
The first thing is to initialize the project. In this project, we are going to use yarn
. The easiest way to initialize the project with package.json
is to run the init
command:
yarn init
OR
npm init
Follow the onscreen instructions and provide the details. It will ask about the name of the project, the description, the author name, the version, the license, and the entry point. Most of the information can be customized according to your requirements.
Now, create a source folder, src
, to include all of our code. The next step is to set up webpack
. The minimal package.json
file looks like the following:
{
"name": "gettting-started-with-redux-ch01",
"version": "1.0.0",
"description": "Getting Started With Redux",
"main": "src/app/app.js",
"scripts": {
"start": "webpack-dev-server",
"build": "webpack"
},
"author": "Suresh KUMAR Mukhiya",
"license": "MIT",
"devDependencies": {
"@babel/core": "7.2.0",
"@babel/preset-env": "7.2.0",
"@babel/preset-react": "7.0.0",
"babel-core": "6.26.3",
"babel-loader": "8.0.4",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"webpack": "4.27.1",
"webpack-cli": "3.1.2",
"webpack-dev-server": "3.1.10"
},
"dependencies": {
"redux": "4.0.1"
}
}
- Configuring
webpack
is done as follows:
You can read more about webpack
on their official documentation site (https://webpack.js.org/). The first thing is to install webpack
and webpack-dev-server
:
yarn add webpack webpack-dev-server --dev
Now, we need to configure the webpack
. We can do that in different ways. A lot of information about webpack
configuration can be found on the documentation site (https://webpack.js.org/configuration/). The minimum configuration that we need is as follows:
const path =require('path')
module.exports ={
Mode: ‘development’,
entry:'./app/app.js',
output: {
path: path.resolve('dist'),
filename: 'main.js'
},
Let's place the webpack
configuration files into the webpack
folder and create a base configuration file, called webpack.config.js
. The loaders in the webpack
tell the webpack
what to do with the entry file(s). We are going to use Babel to transpile our JavaScript files; so, let's define the babel-loader
for .js
files, as follows:
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/app/app.js",
output: {
path: path.resolve("dist"),
filename: "main.js"
},
module: {
rules: [
{
test: /\.jsx?$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
}
]
}
};
Generally, what we have is the bare minimum code required for Webpack configuration. However, in a real application, we would like to compile more resources than just the JavaScript files, including JS files, CSS files, fonts, image files, and others. We can configure these with webpack.
The most standard practice is to split the configuration into two types: development configuration and production configuration. By now, you might have already realized the need for separate configurations. A detailed blog article about this need and its process can be found at https://www.hacksoft.io/blog/split-your-webpack-configuration-development-and-production/. To keep the configuration simple and elegant, we have created three files for webpack; namely, webpack.base.babel.js
, webpack.dev.babel.js
, and webpack.prod.babel.js
. You can find a similar configuration in the starter file in the GitHub repository.
- Babel is configured as follows:
We will use Babel to compile JavaScript files. Let's configure it by installing babel
and its related libraries:
yarn add @babel/core @babel/preset-env @babel/preset-react babel-core babel --dev --exact
yarn add babel-loader babel-plugin-transform-object-rest-spread --dev --exact
More configuration related to Babel can be found at https://babeljs.io/docs/usage/api/#options.
For the minimum configuration, we will go with creating a babel.config.js
file and adding an entry, as follows:
module.exports = {
presets: [
[
"@babel/preset-env",
{
modules: false
}
],
"@babel/preset-react"
],
plugins: ["transform-object-rest-spread"]
};
This file just indicates which libraries we are using in order to compile our JavaScript files. For example, we are going to use a transform-object-rest-spread
library to utilize the spread feature. Learn more about this library at https://babeljs.io/docs/en/babel-plugin-proposal-object-rest-spread. We can add other polyfill plugins that we plan to use throughout the project later on. Babel can be configured in multiple ways. We can also create a .babelrc
file to configure it. You will find a working example in Chapter 2, Testing.
The entry file indicates the startup file. We will point our entry file to app/app.js
. This file contains the main entry codes. This file will be transpiled into main.js
by Babel. Secondly, we will create an index.html
file, which acts as the entry file for our application:
<!doctype html>
<html lang="en">
<head>
<!-- The first thing in any HTML file should be the charset -->
<meta charset="utf-8">
<!-- Make the page mobile compatible -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Allow installing the app to the homescreen -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" href="/favicon.ico" />
<title>Redux-Book-starter</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="dist/main.js"></script>
</html>
Also, inside of the app/app.js
, we can try to log some text to verify that the configuration is working fine:
console.log("Welcome to Redux Programming");
Now, the last step is to configure the webpack
script to run the build. This can be done by placing scripts in the package.json
file:
"scripts": {
"start": "webpack-dev-server",
"build": "webpack"
},
The first step is to build the files. To do that, simply run yarn build
from your command line. Now, we can run the webpack
by using the yarn start
command from the command line. Note that this is the minimum configuration required to get started with Redux. Our aim here is for you to learn Redux. So, we are going to use starter files for each of the projects, which can be found in the GitHub repository for this book. The starter files, if preconfigured with Babel, Webpack, and Eslint, are ready to be consumed for further development.
To get started with Redux, we need to add Redux to our dependencies list, as follows:
yarn add redux --exact
Now, from the project root folder, inside of your command line, run yarn start
and open http://localhost:8080
in your favorite browser, checking the console. You should see the log we have in yourapp/app.js
.