React Starter Kit

Add short description of application here....

---

Navigation

• Getting Started
• Environment Setup
• Available Scripts
• Development Guidelines
• Commit Messaging Guidelines
• Project Dependencies
• Learn More

---

Getting Started

Make sure environment is setup in order to run the following scripts.

1. $ npm install

2. $ npm start

3. Start Mock Server

   • Open a new terminal
   • $ npm run mock:start

4. Optional

   • Run storybook docs
   • Open a new terminal
   • $ npm run storybook
   • note: you do not need mock server to run storybook docs

---

Environment Setup

• Install Node.js
• Install git
• Install VS Code *Suggested Code Editor
• Install Suggested Code Editor Plugins

---

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm run commit

Runs Commitizen, a command line utility, to ensure all commits have a uniformed format. All commits will be linted, so this script helps alleviate the pain of failing git commit linting errors.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more > information.

npm run check

Lints and checks for formatting problems using Google Typescript Style configuration.

npm run fix

Automatically fixes formatting and linting problems (if possible) using Google Typescript Style configuration.

npm run clean:dist

Removes output files from npm build

npm run clean:pkg

Removes all node_modules & package-lock.json file in preparation for a fresh install.

npm run storybook

Starts the storybook documentation site Storybook Docs

npm run build-storybook

Builds the storybook documentation site for deployment Storybook Docs

npm run mock-start

Starts a mock server that utilizes json-server to support offline data.

---

Development Guidelines

Keep It Simple

• Clear vs Clever
• Single Responsibility Principle.
• Keep component files small.

Separation of Concerns

• Prioritize creating small / reusable UI components
• Thinking In React (https://reactjs.org/docs/thinking-in-react.html)

Write Self-Documenting Code

• Using declarative programming paradigm
• Descriptive naming conventions

Resist Premature Optimization

DRY Coding Principles

Atomic GIT Commits

• Each commit should be self-contained, related, and fully-functional revolving around a single task or fix.
• "Self-contained, and related" means that commits should contain all changes and files related to the commit in question, and only those changes.
• "Fully-functional" means that each commit along the way should be a fully buildable/passable stopping point.

Fully review own code before notifying reviewers

Utilize ES6 features when applicable:

• Destructure props and/or state
• Spread & Rest operators
• .map, .filter, etc.

Mindfully add code to production:

• Should be as close to production ready as possible.

Organization of import statements:

• Ordered by 3rd party imports, global imports, relative imports.

Prioritize using functional components over class components.

• This is where hooks can help!

---

Commit Messaging Guidelines

We are following the Conventional Commits specification.

Summary:

The Conventional Commits specification is a lightweight convention on top of commit messages. It provides an easy set of rules for creating an explicit commit history; which makes it easier to write automated tools on top of. This convention dovetails with SemVer, by describing the features, fixes, and breaking changes made in commit messages.

The commit message should be structured as follows:

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

The commit contains the following structural elements, to communicate intent to the consumers of your library:

• fix: a commit of the type fix patches a bug in your codebase (this correlates with PATCH in semantic versioning).
• feat: a commit of the type feat introduces a new feature to the codebase (this correlates with MINOR in semantic versioning).
• BREAKING CHANGE: a commit that has a footer BREAKING CHANGE:, or appends a ! after the type/scope, introduces a breaking API change (correlating with MAJOR in semantic versioning). A BREAKING CHANGE can be part of commits of any type.
• types other than fix: and feat: are allowed, for example @commitlint/config-conventional (based on the the Angular convention) recommends build, chore, ci, docs, style, refactor, perf, test, and others.

Additional types are not mandated by the Conventional Commits specification, and have no implicit effect in semantic versioning (unless they include a BREAKING CHANGE).

A scope may be provided to a commit’s type, to provide additional contextual information and is contained within parenthesis, e.g., feat(parser): add ability to parse arrays.

Example:

feat(`Jira-tag`/`story-number`): Added home page routing

Learn More

---

Project Dependencies

Below is a list of libraries & tools that are being leveraged.

Foundation:

• React - A JavaScript library for building user interfaces
• Create React App - React application bootstrap engine.
• Typescript - Adding type safety to Javascript
• git - Git is a distributed version-control system for tracking changes in source code during software development.

Utility:

• Lodash - A modern JavaScript utility library delivering modularity, performance & extras.
• Polished - A lightweight toolset to help styles calculations in JavaScript
• Numeral - A javascript library for formatting and manipulating numbers.
• clsx - A utility for constructing className strings conditionally.
• axios - A utility for creating promise based HTTP client for the browser and node.js
• yup - Dead simple Object schema validation. Pairs with Formik. (examples)
• React Router - Routing utility for React apps.

UI:

• Styled Components - Styling library in Javascript
• Recharts - Charting component library
• React Toastify - Notification component library
• React Modal - Accessible modal dialog component for React
• Formik - React Form Builder library
• Storybook - Playground for developing UI components in isolation as well as showcasing all completed components

Development:

• Json Server - Mock server that creates a full fake REST API.
• Casual - Mock data generator library.
• Google GTS - Google's Typescript Styling standards & cli.
• Prettier - Typescript formatter.
• ESLint + TSLint - Typescript linting.
• Jest - JavaScript Testing Framework.
• React Testing Library - React component testing
• Commitizen - git commit prompting
• Commitlint - Linting git commit messages
• CZ Conventional Changelog - git commit templates
• Husky - git hooks task runner
• Lint Staged - git staged files task runner

---

Suggested Code Editor Plugins

VS Code

Must Haves:

• Prettier - Code formatter
• ESLint
• VSCode Styled Components

Optional:

• Path Intellisense
• File Utils
• Bracket Pair Colorizer
• Material Theme Icons
• Reload

---

Learn More

React Resources

• Repository Video Demos
• React documentation
• Intro To React Tutorial

---

[ ⬆ BACK TO TOP ⬆ ]