Install webpack and webpack-dev-server (https://webpack.js.org/)

npm i webpack webpack-dev-server -D

Installing babel transpilers:

npm i babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin -D

Some more webpack plugins:

npm i extract-text-webpack-plugin style-loader js-loader html-webpack-plugin -D npm i extract-text-webpack-plugin@next -D

Installing ReactJS:

npm i react react-dom

• extract-text-webpack-plugin@next plugin extract out the css from js bundle file and make a separate css bundle file.

• style-loader and css-leader: These are for loading CSS files.

• js-loader: A js file loader

• html-webpack-plugin: Moves the index.html file to dist folder with bundle js and css files

If you don't understand the above commands/plugins just install them for the time being.

├── src
├──── index.html
├──── index.js
├── package.json
├── webpack.dev.config.js
├── webpack.prod.config.js
├── .babelrc
└── README.md

The .babelrc contains the code for the presets:

{ "presets": [ "@babel/preset-react", "@babel/preset-env" ] }

Thats it!

Running the movie playlist in development mode-

npm start

Generate production build files:-

npm run build