react-webpack-babel boilerplate

👾 Babel

• Babel is a toolchain that is used to convert ES6+ JS code into backwards compatible versions of JS so that it do not breaks in current as well as in old web browsers.

• .babelrc : It is a config file that is used by us to config, which presets to load, which settings to apply on the react application.

🛫 Webpack

• Our browsers do not understand react, they only understand HTML, CSS & JS, here comes the webpack.

• Webpack is code bundler, which converts our React code into plain HTML, CSS, JS so that it can be interpreted by our browsers, and we do not need to modify/upgrade our browsers to run/view our react code.

• webpack.config.js : It is file, which contains rules for parsing every type of file you want to include and configurations for the build version of react

🏃‍♂️ Run

• To run in development mode

npm run start

• To create build pack for your application

npm run build

• and then go to http://localhost:3010

📂 Directories

• /dist : Folder contains the compiled, minified version of react app

• App.js : It is the starting point of our application, can start developing from there

NOTE : If you are starting with your development, you can delete the /dist folder from the directory, can rebuild a updated build version of your application, later.