Skip to content
A basic clock that displays the current date and time
JavaScript CSS HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Update Bootstrap to v4 Feb 4, 2018
.eslintignore Initial commit Nov 30, 2017
.eslintrc Initial commit Nov 30, 2017
.gitignore Initial commit Nov 30, 2017
README.md Update README Jan 3, 2018
package-lock.json Update all node packages to latest versions Feb 4, 2018
package.json Update all node packages to latest versions Feb 4, 2018
webpack.config.js Initial commit Nov 30, 2017

README.md

React Clock

A basic clock that displays the current date and time

Go here for live demo.

Component Diagram

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

Screenshots:

... ...

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

Related Projects

  • react-starter

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

  • react-clicker

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

  • 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-clock-basic' repository from GitHub

    git clone https://github.com/drminnaar/react-clock-basic.git

    OR USING SSH

    git clone git@github.com:drminnaar/react-clock-basic.git
  • Install node modules

    cd react-clock-basic
    npm install
    npm dedupe

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

Versioning

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

Authors

You can’t perform that action at this time.