React: Getting started

React
Node.js
NPM
Install guide
Author

ProtossGP32

Published

April 18, 2023

Introduction

What is React?

According to React official page:

  • React is very easy to use
  • React uses a Component Oriented Programming paradigm
  • Each component returns a fragment

Getting started

Install Node.js and NPM via its official script

Follow the instructions in the Nodesource github repository to execute the installation script:

Node.js installation on Debian-based OS
# As root or sudo user
curl -fsSL https://deb.nodesource.com/setup_18.x | bash - &&\
apt-get install -y nodejs

Each Node.js version has its own installation script.

Install Node.js using NVM

NVM is Nodejs Version Manager, it allows to manage differnt Node.js versions.

Installation guide

Use a custom script to automate NVM and Node.js installation

install_react_framework.sh
#!/bin/bash
#   CIFO Web Applications - Software installation
#   - This script install the required software for the course
#   - Categories:
#       - IDEs
#       - Version Control Sofware
#       - Documentation

NODE_VERSION=0

while getopts n: flag
do
	case "${flag}" in
		n) NODE_VERSION=${OPTARG};;
	esac
done

# Define the installation command
# -qq flag prior to the install command reduces the output messages except for errors
# -y after the install command is for non-interactive/unattended installations
INSTALL="apt-get -qq install -y"
UPDATE="apt-get -qq update"

# Pre-requisites:
# - Install download and GPG binaries
# - Apt installation via HTTPS paths must also be installed
#$INSTALL wget gpg curl apt-transport-https

# NVM installation:
# =================
if [ -x "$(command -v nvm)" ]; then
	echo "Installing NVM..."
	# Download and install NVM
	curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
	# Execute this if NVM is not available after installation script
	export NVM_DIR="${HOME}/.nvm"
	[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
	[ -s "${NVM_DIR}/bash_completion" ] && \. "${NVM_DIR}/bash_completion" # This loads nvm bash_completion

fi

# Node.js installation
# ====================
if [[ ${NODE_VERSION} -ne 0 ]]; then
	# Execute this if NVM is not available after installation script
	export NVM_DIR="${HOME}/.nvm"
	[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
	[ -s "${NVM_DIR}/bash_completion" ] && \. "${NVM_DIR}/bash_completion" # This loads nvm bash_completion
	# Install the desired version
	echo "Node.js version selected: ${NODE_VERSION}"
	nvm install ${NODE_VERSION}
	# Use the installed version
	nvm use ${NODE_VERSION}
	# Check the version
	node -v
	# Install npx
	npm install npx
fi

# (Do not use this if installing NVM)
# ===================================
#if [[ ${NODE_VERSION} -ne 0 ]]; then
#	echo "Node.js version selected: ${NODE_VERSION}"
#
#	# Add Node.js PPA to the system
#	curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -
#
#	# Update repositories
#	# ===================
#	$UPDATE
#
#	# Install packages
#	# ================
#
#	# Node.js
#	$INSTALL nodejs
#fi

Projects

Start a new React project

Official tutorial

We’ll be using npx command to initialize React projects.

Once done, execute npm start from the new project path to launch it and have a live webpage that updates on code changes.

The newly-created react project has the following structure:

  • node_modules: path with all the Node.js dependencies (do not push to Git!)
  • public: includes the public web assets such as the favicon.ico, the manifest.json and the index.html
    • index.html uses the manifest.json to populate some links in the <head> tag
  • src: the source code of our app
    • index.js: our entrypoint, it imports the App component already created
    • App.js: our main app
    • reportWebVitals.js: this defines the exposed metrics of our app for further observability
    • src package also includes App.test.js for the App component

Install dependencies for your Node.js project

We’ll be using NPM (Node Package Manager) to install Node.js dependencies.

Development tools

React project

Install linter

From the React project path, execute:

Install eslint
npm install -g eslint

VS Code extensions

Linting and formatting

ESLint

Follow this guide:

  • Go to the Extensions Marketplace and search eslint by Microsoft.
  • Once installed, go to the Command Palette (Ctrl + Shift + P) and use the command ESLint: Create ESLint configuration
    • The resulting config is saved in the .eslintrc.js file in your project root

ESLint will now analyze open files and shows warnings of anti-patterns, code not following code conventions and more sophisticated analysis.

Prettier

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

CSS tools

Packages cost

This extension will display inline in the editor the size of the imported package. The extension utilizes webpack in order to detect the imported size.

Web browser extensions

Google Chrome

React Developer Tools

Mozilla Firefox

React DevTools

Launch the app

Go to the project root path and execute the following command:

Launch React app
npm start

A browser window will automatically open pointing to the default Node.js port (http://localhost:3000)