React Clicker

A basic React app that allows one to increase, decrease, or reset a counter.

Go here for live demo.

This project also demonstrates:

• a typcial React project layout structure
• babel setup and configuration
• webpack setup and configuration
• eslint setup and configuration
• SCSS setup and configuration
• How to run application in a Docker container

...	...

Developed With

• Node.js - Javascript runtime
• React - A javascript library for building user interfaces
• Babel - A transpiler for javascript
• Webpack - A module bundler
• SCSS - A css metalanguage
• Bootstrap 4 - Bootstrap is an open source toolkit for developing with HTML, CSS, and JS
• Surge - Static web publishing for Front-End Developers
• Docker - A container management system

Related Projects

• react-starter

  A basic template that consists of the essential elements that are required to start building a React application

• 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

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-clicker' repository from GitHub

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

  OR USING SSH

  git clone [email protected]:drminnaar/react-clicker.git

• Install node modules

  cd react-clicker
  npm install

Build

• Build application

  This command will also run ESLint as part of build process.

  npm run build

• Build application and start watching for changes

  This command will also run ESLint as part of build process.

  npm run build:watch

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' npm task

  npm start

• Run webpack dev server

  npm run serve:dev

• Alternatively run live-server (simple development http server with live reload capability)

  npm run serve

Docker Instructions

An alternative to installing and running application on your local machine is to build and run your own Docker container that will host the application. There are 2 files related to Docker setup namely:

• Dockerfile - Used to create Docker Image

• .dockerignore - Used to ignore files in local path that are not required in the container

To get the application up and running in a Docker container, please follow the following instructions:

1. Build Docker Image

   The following command will build a new Docker Image called 'react-clicker' with the tag '1.0.0' using the Docker file found in the application root.

   docker build -t react-clicker:1.0.0 .
   

2. Run Docker Container

   The following command will start a new container based on the Docker image created above. The application within the container runs on port 8080, therefore, as part of command we map container port to local host port. We also give the container a name and run it in the background. The '--rm' switch indicates that the container will be automatically removed once it is stopped.

   docker run --rm --name react-clicker -p 8080:8080 -d react-clicker:1.0.0
   

3. Open application

   By typing the following command, you should see a runing container having the name 'react-clciker'.

   docker container ls
   

   If the container is running, you may navigate to the application using your browser at the following address:

   http://localhost:8080

Lastly, if you're curious to have a look inside container, then you may type the following command:

docker exec -it react-clicker /bin/sh

The above command provides you an interactive shell on the container. Please note that the above command must be executed on a running container.

Versioning

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

Authors

• Douglas Minnaar - Initial work - drminnaar