Getting started

Let's get started with using Redux. We will start with basic configurations, and we can take the configurations further in each chapter:

1.  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.

2. 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"
 }
}

3. 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.

4. 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.

5.  Define the entry file:

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.

6. Installing Redux:

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 your app/app.js.