React

Prerequisite

Node.js will need to be installed. This include the npm CLI.

Pro Tips: Use nvm for Node.js installation. If running Windows, use WSL2 with Windows Terminal.

Getting Started

Here are a couple of options for creating a React application.

1. Create React App

The create-react-app CLI released by facebook in July 2016 is an easy way to spin up a zero configuration React app.

Install the create-react-app CLI globally using npm.

npm i -g create-react-app

Use the create-react-app CLI to create a new React App, e.g.,

npx create-react-app myreactapp

2. Minimal React Boilerplate

Using Git, clone the minimal-react-webpack-babel-setup into your new app directory. e.g.,

git clone https://github.com/jimfrenette/minimal-react-webpack-babel-setup.git myreactapp

In the new application directory, use the npm CLI to install node_modules, then run the start script.

cd myreactapp

npm i

npm start

Resources

Golf Scorecard React App GIR

React Golf Scorecard application updated to show Greens in Regulation (GIR). For this we needed figure out how to trigger an on change event when the input value for GIR is updated dynamically when strokes and putts are entered. It is recommended that you read Part 1 which contains the information on how to install and build this application locally.

You can view a demo of the app here

demo with source code inspection using the Chrome developer tools
demo with source maps

Golf Scorecard React App

This tutorial demonstrates how to create a React application that is used in a great many golf apps, a way to display and edit golf course scorecard data. You can view a demo of the app here

demo with source code inspection using the Chrome developer tools
demo with source, * GIR added 7/2022