React Starter

A basic template that consists of the essential elements that are required to start building a React (v16.4) application using Webpack (v4).

The template consists of:

a typcial project layout structure
babel setup and configuration
webpack setup and configuration
eslint setup and configuration
SCSS setup and configuration
the main React components to get started

Additionaly, the template provides a development and production webpack configuration.

The template also allows one to include specific plugins as part of build. Please see here for more detail

Developed With

Node.js 8.11 - Javascript runtime
React 16.4 - A javascript library for building user interfaces
Babel 6.26 - A transpiler for javascript
Webpack 4.x - A module bundler
SCSS - A css metalanguage

Related Projects

react-redux-starter

A basic template that consists of the essential elements that are required to start building a Single Page Application using React, React Router, Redux, Bootstrap 4, Sass, and Webpack.
react-clicker

A basic React app that allows one to increase, decrease, or reset a counter
react-clock-basic

A basic clock that displays the current date and time
react-timer-basic

A basic timer that will start a countdown based on an input of time in seconds
react-timer-advanced

A basic countdown timer that offers an advanced UI experience
react-masterminds

A basic game of guessing a number with varying degrees of difficulty
react-movie-cards

A basic application that displays a list of movies as a list of cards
react-calculator-standard

A calculator that provides the essential arithmetic operations, an expression builder, and a complete history of all expressions
react-bitcoin-monitor

An app that monitors changes in the Bitcoin Price Index (BPI)
react-weather-standard

A weather application that displays the current weather, daily forecasts, and hourly forecasts based on your current geolocation
react-redux-quotlify

A quote browser and manager that allows one to search famous quotes and save them to a data store.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

The following software is required to be installed on your system:

Node 8.x
Npm 3.x

Type the following commands in the terminal to verify your node and npm versions

node -v
npm -v

Install

Follow the following steps to get development environment running.

Clone 'react-starter' repository from GitHub

git clone https://github.com/drminnaar/react-starter.git

OR USING SSH

git clone git@github.com:drminnaar/react-starter.git

Install node modules
```
cd react-starter
npm install
```

Build

Build Application

dev	prod
npm run build:dev	npm run build:prod

Build Application And Watch For Changes

dev	prod
npm run build:dev:watch	npm run build:prod:watch

Build Application With BundleAnalayzer Plugin Included

dev	prod
npm run build:dev:bundleanalyze	npm run build:prod:bundleanalyze

After running the above command, a browser window will open displaying an interactive graph resembling the following image:

Run ESlint

Lint Project Using ESLint

npm run lint

Lint Project Using ESLint, and autofix

npm run lint:fix

Run

Run Start

This will run the 'serve:dev' npm task

npm start

Run Dev Server

npm run serve:dev

Run Dev Server With Dashboard

npm run serve:dev:dashboard

The above command will display a dashboard view in your console resembling the following image:

Run Prod Server

This command will build application using production settings and start the application using live-server

npm run serve:prod

Versioning

I use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

Douglas Minnaar - Initial work - drminnaar

yeshancqcq / react-starter