A tool for learning intervals by ear. A SE 390 group project.
You need to have node installed.
Then, in Mac or Linux, run:
git clone [email protected]:jnetterf/intervals.git
cd ./intervals
npm install
To run the app and live-update on changes, run
npm start
Then, open up localhost:8080 in a browser. So far, it's only been tested in Chrome.
To lint and test the app, run
npm test
src/index.tsx
: defines routes and launches applicationsrc/views/...
: individual route components and components the routes use go heresrc/data/actions.ts
: defines the app state and defines all actions that can be done in the app, but does not perform the actions. See the Redux tutorial below.src/data/reducers.ts
: defined functions for performing actions. See the Redux tutorial below.src/satie
: Sheet music rendering. A git subtree of https://github.com/jnetterf/satiesrc/dragon
: MIDI/Audio A git subtree with tools for declarative Audio/MIDI output
Intervals uses a few tools. Links here are for documentation
- React for rendering to the DOM and to audio declaratively.
- TypeScript for ES 2015 and types. See the TypeScript link for an overview of types. Babel provides an excellent ES 2015 guide
- React router for URLs.
- Redux for actions
- React bootstrap for components.
- CSS modules
Please see the ES 2015 guide and TypeScript guides above for a more details.
let
andconst
are blocked-scoped versions ofvar
.const
only means a variable cannot be set. If it points to an object/array, the object/array can still be modified.return (arg) => arg + 4
is shorthand forreturn function(arg) { return arg + 4; }
return (arg) => this.save(arg)
is shorthand forlet self = this; return function(arg) { return self.save(arg); }
let {a} = foo;
is shorthand forlet a = foo.a
.as
is TypeScript's casting operator (soa as number
is like(cast(number) a)
)- The
:
afterlet
orconst
is used to set a variable's type (e.g.,let a: number = null;
). It's not needed when the type can already be determined.
TypeScript provides multiple ways of importing:
import React = require("react");
is used to import CommonJS (old-style) modules with typing.import {isEqual, find, findIndex} from "lodash";
is used to selectively import from CommonJS or ES 6 modules with typing.import Foo from "foo";
is used to import the default export (i.e., the export named "default") from an ES 6 module with typing.const thunkMiddleware = require("redux-thunk");
is used to import CommonJS (old-style) modules without typing.
Visual Studio Code and Atom both have TypeScript +
JSX integration. In Atom, you need atom-typescript
. In Code, to get full language support for TSX files, you
need to install the latest TypeScript 1.6 version (npm install -g [email protected]
) and configure VS Code to use
it with the typescript.tsdk setting (see Code settings)