Site Analysis

Run React app use NPM, Babel and Webpack 3

react babel webpck

React - javascript library, created in Facebook for developing user interface sites and web-app. Current version - React 16, released 26 September 2017. Official documentation - About different React 15 with React 16 see in react blog.




1 - Include React

Have 2 based methods for include React - include scripts library (local/CDN) or builds file projects with help package manager.


1.1 Use CDN

Quick way - include need scripts use CDN.

For developing:

Or minimized version scripts for production:


1.2 Use NPM

Builds scripts use npm means generated project files increases speed load page web-app and with help implement dependency third-party libraries. For use NPM - need install Node.js (NPM part Node.js), download Node.js.

NPM manual -


2 - Config NPM

After install Node.js, will be allow NPM. For install package use terminal (first go in directory project), command - "npm i name_package" or use config file - package.json


NPM commands

  • "--save" - record in package.json installed package in block - depandence
  • "--save-dev" - record in package.json  installed package in block dev-depandence

Short commands:

Action Command Short command
Install package install i
Remove package uninstall  r
Update package update up
Record in package.json block depandence --save -S
Record in package.json block dev-depandence --save-dev -D

Sample file config npm - package.json:

For builds React.js library you can use npm scripts. But usually use bundler (Webpack, Grunt, Gulp and etc). 


3 - Webpack 3 configure

For configure Webpack use file - webpack.config.js, sample content:

Sample structure Webpack config:

  • Include Webpack;
  • Place source file (main.js);
  • Place output file (bundle.js);
  • Include loaders;
  • Include plugin


4 - Generated files projects

For React.js need use babel pressets (if you will be use JS6 or JSX). Configure babel can in package.json or webpack.config or self config file - ".babelrc". Recommended use .babelrc, this helps config babel third-party libraries. Use next pressets for React app:

For run generated projects files, use command "webpack" in terminal. I usually make it in IDE terminal -

Terminal IDE IDEA


5 - Quick start which helps 

For quick start React use Reacts builds. 


5.1 Create React App

Official builds from React developers - github. All configuration files ready. You must have NPM for run projects:


5.2 React Atlogex - my builds for quick start

Warning - I recommend use official React Quick star - "Create React App". My quick start - github, include React, Babel (preset-env, preset-stage-0), Webpack config and list UI Kit library (Before builds uncommented need UI library). 


Command for clone my project:

git clone .

After use NPM build:

npm i

1 Star2 Stars3 Stars4 Stars5 Stars6 Stars7 Stars8 Stars9 Stars10 Stars (No Ratings Yet)

Leave a Reply