5 Calls React Port
This repo holds code for the port of the 5 Calls web site from the Choo front-end framework to React with Redux for state management and Typescript for type safety and documentation.
The current application build is deployed here.
The code for the Choo version of the 5 Calls front-end is located here.
Development Notes
To build the application, you need to install Yarn and run the following commands:
# install dependencies and
# compile .scss files to .css:
yarn
# Run unit tests in watch mode
yarn test
# Run unit tests with a code coverage report
yarn test:coverage
# start the app running in the
# webpack development server:
yarn start
# start the app running in https mode
# (needed for browser geolocation):
yarn start:https
# build the app into build folder
# for server deployment:
yarn build
# any updates to .scss files need
# to be compiled to css using:
yarn clean-build-css
Using yarn add to add new dependencies
will throw an error related to node-sass-chokidar, which can be ignored.
For the best development experience, you should install both the React and Redux Development Tools extensions into your browser. Both browser extensions are available for Chrome and Firefox.
Unit testing
Unit testing in this repository is done using Jest with Enzyme in addition to the redux-mock-store library to support Redux-related tests.
Architecture, Data Flow and Strong Typing
A selection of files in this repository include code comments describing the architecture, data flow and strong typing conventions used in developing the React-Redux-TypeScript version of the 5 Calls application. These include files that illustrate the following (see the individual files for more details):
Use of TypeScript to Strongly Type Request Parameters Passed by React-Router
Also illustrates the use of Redux to loosely couple a component to data passed to its props.
CallPageContainer.tsx
CallPage.tsx
Data Flow through a Component Heirarcy
Also note the TypeScript conventions used in these files.
CallPageContainer.tsx
CallPage.tsx
Why5calls.tsx
Redux Data Flow
See code comments containing the token 'REDUX DATA FLOW'. Also note the use of TypeScript in these files.
CallPageContainer.tsx
redux/callState/action.ts
redux/callState/actionCreator.ts
redux/callState/reducer.ts
Contributor Guidelines
Contributions to this repository are welcome. Please see the Contributing.md file in the 5calls/5calls repository for information on contributing to this repository.
Initial development in this repository should focus on TODOs identified in this wiki page in the 5calls/5calls repo.
Create React App Code Generation
This project was created with create-react-app (CRA, react-scripts ver 1.0.0) using react-scripts-ts (ver 2.2.0) to add TypeScript support. In addition, the node-sass-chokidar library was added for preprocessing of SASS (.scss files) to CSS.
Subsequently, the CRA-created configurations were exposed using the eject command (yarn eject). This created the config and scripts folders and added dependencies and other configurations to package.json.
CRA_README.md is the original README.md file created when the create-react-app command was run.