Minimalist React Environment

Minimalist boilerplate project setup for React, React Router, Babel, and Webpack. Best template if you are beginner in using React, Babel, and Webpack and try to learn it.

Feel puzzled with webpack, babel, and react project configuration and have no idea how it works? This project is designed to give you a basic explanation for using webpack and babel configuration in react, react router project with a minimal code base.

You can use this boilerplate as your code base for building bigger application.

Check the explanation below and the comment I attatch on every file.

Feedback and contribution are welcome!

Installation

1. Clone this repository

   git clone https://github.com/jundialwan/minimalist-react.git

2. Install dependency

   npm install

3. Run or Build

   Run:

   npm run dev

   Application running in localhost:8080

   Build:

   npm run build

   Build the app and create bundle.js in /dist folder

Project Structure

root
|
+-- src
|   +-- components
|   |   +-- App.js
|   |   +-- Page1.js
|   |   +-- Page2.js
|   |   \-- Page3.js
|   \-- Router.js
|
+-- webpack
|   +-- webpack.config.js
|   +-- webpack.dev.config.js
|   \-- webpack.prod.config.js
|
+-- index.html
+-- index.js
+-- package.json
+-- package-lock.json
+-- .babelrc
\-- .gitignore

• src: Main folder contain your application
• components: Folder contain your application components
• Router.js: React Router configuration
• index.html: Your base HTML file
• index.js: Your application entry point
• webpack: Folder contain wbpack configuration
• webpack.config.js: Webpack configuration for base config, used by dev and prod config
• webpack.prod.config.js: Webpack configuration for production, for build purpose
• webpack.dev.config.js: Webpack configuration for development
• package.json: NPM Project configuration file, contain list of your application dependency and metadata
• package-lock.json: Automatically generated for any operations where NPM modifies either the node_modules tree or package.json
• .babelrc: Babel configuration file
• .gitignore: Git ignore configuration

Dependency Explanation

Dev Dependency (Only used when development)

• babel-core: Core of babel, clear enough
• babel-loader: Used by webpack to load javascript file with babel
• babel-polyfill: Support new globals such as Promise or new native methods
• babel-preset-env: Babel preset to enable the latest ECMAScript standard (ES2015, ES2016, ES2017)
• babel-preset-react: Babel preset to enable JSX
• webpack: Bundling your app into a single JS file
• webpack-dev-server: Enables dev server for development, support hot reload

Babel

Babel is a transpiler. Used to transform ES2015++ code to ES5 code so that most of all browser with ES5 support could run it. Babel allow you to use new ES syntax without waiting for browser support.

Documentation: babeljs.io

Webpack

Webpack is a static module bundler. Used to bundling all your JS file to a single JS file that will be loaded by index.html. Webpack recursively builds a dependency graph of your file/module then package all of those file into one file.

Documentation: webpack.js.org

React

React is a JavaScript library for building reusable user interfaces. It can be used for web or mobile apps with React Native. React designed to be used for Single Page Application. It allows you to create web applications which can change data without reloading the page.

Documentation: reactjs.org

React Router

React Router is a collection of navigational components that compose declaratively with your application. React Router allows us to enter the address on address bar and render it base on the address, even it is a Single Page Application, the webpage is not reloading!

Documentation: reacttraining.com/react-router