React Starter (with Hooks)

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

The template consists of:

• a typical project layout structure
• babel setup and configuration
• webpack setup and configuration
• eslint setup and configuration
• SCSS setup and configuration
• the main React component with hook to get started

Additionally, 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 10.X - Javascript runtime
• React 16.12+ - A javascript library for building user interfaces, but with React Hooks
• Babel 7.x - A transpiler for javascript
• Webpack 4.x - A module bundler
• SCSS - A css metalanguage
• TypeScript 4.9 - TypeScript is JavaScript with syntax for types.

---

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 10.x
• Npm 6.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

npx degit https://github.com/My-Project-Template/react-starter-16.git <YOUR_PROJECT>

• Install node modules

cd <YOUR_PROJECT>
rm -rf package-lock.json
npm i

Run Build

npm run build

Run Dev Server

npm run dev

---

Versioning

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

---

Authors

• Douglas Minnaar - Initial work - drminnaar

Co-Authors

• Yueb