React-Webpack-Babel-Setup

User Info

``` AS developers, It's Always served

US well to have starter code generated

WITH dependencies/dev-Dependencies already in place

SO THAT we can start production and more timely develope the next React project. ```

Features

- Babel/core

- React 16

- Webpack 4

- Hot Module Replacement

Recommended Tools

The following tools are recommended for a React-Webpack-Babel project. Also you will find included below some links for building some complex UI animations and conversion of SVG image into Data URL with the help of Webpack loader.

• ESLint-loader, When using with transpiling loaders (like babel-loader), make sure they are in correct order(bottom to top). Otherwise files will be checked after being processed by babel- loader.
• CSS-Tricks, For building complex UI animations in React.
• Webpack CSS-loaders interprets @import and url() like import/ require() and will resolve them.
• SVG-React-Webpack To utilize an SVG image in your React project, it will have to be transformed into a Data URL. We will need an appropriate webpack loader in our bundler.

Installation

git clone https://github.com/FernandoNunez-Dev/React-Webpack-Babel-Setup

cd React-Webpack-Babel-Setup

npm install

npm start

visit http://localhost:8080/

• Software Utilized

  • Reactjs -16
  • Babel/core
  • Webpack -4
  • Nodejs -LTS
  • ESLint-loader
  • CSS-Tricks
  • Webpack CSS-loaders
  • SVG-React-Webpack