Today we will be creating a music app where the user can preview songs & add to their favourite list for songs or they can remove it from favourite list, using javascript, Reactjs, Redux, HTML5, CSS3.

Before we begin just to head up with technologies/Framework we are using. FYI I am on mac OS, all steps would be same for others as well if you encounter any error google is your friend.

• Reactjs know more about this awesome front-end library build by facebook. which is a JavaScript library for building user interfaces as mention on their official site.
• Redux is used to maintain application state, in short, it will handle all application data and its current state.
• HTML5
• CSS3

In early days of Reactjs, it was such pain in the neck, to create an app, now the reactjs team has created react CLI tool which is very useful.

I am assuming that you already have node package manager (npm) installed, if not, please install it from here nodejs.org

let’s begin with installing reactjs globally.

npm install -g create-react-app 

Ones install let’s generate base react app from CLI tool

create-react-app itunes-react-redux

It will create an app inside theitunes-react-redux folder. Open it with your IDE you will have below files/folders inside it.

when we open the package.json it will have all default packages, We need to add a couple of more libraries which will be used in our application

We have added below packages into our package.json with modification on "scripts" to do scss file changes watch & re-complie on the fly.

• node-sass-chokidar
• axios
• moment
• react-router-dom
• react-router-redux
• redux
• redux-thunk

We need to install above packages into out project goto terminal/command line and run below code
npm install

It will take a while to install all the packages depend on your internet speed.

We will delete all the files from our src which will give us clean slate to being with. let’s create index.js inside src folder as our entry point to application.

We need to create a couple of other files and folder as below.

cd src/ && mkdir theme store modules containers components 

let’s start with index.js file

In above code, we are importing React render, Provider, ConnectedRouterfrom node_modules folder.

We are importing few other files too which we haven’t created yet such as store, App, themes ,

On line nubmer 10 const target = document.querySelector('#root') we are quering html ID and storing in in const.

On line 12 to 21: it’s reacts render method which will use our react-redux store & react-router-redux history to render our app.

We need to create ./store/Store and ./containers/app along with ./theme/App.css

Part two would be release soon