Code Monkey home page Code Monkey logo

react-starter's Introduction

react-starter

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


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 [email protected]: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:

bundle-analyzer

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:

webpack-dashboard

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

react-starter's People

Contributors

drminnaar avatar

Watchers

Iam ByeBlog`s avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.