React & Flux: Overview

Courseography's frontend is written in currently being ported to React, using the Flux application architecture. React is a library for composing user interfaces out of reusable components, while Flux is an application architecture: a convention of organizing JavaScript modules & events to make it easier to reason about interactions between the components:

Directory Layout

.
├── /node_modules/              # 3rd-party libraries and utilities
├── /js/                        # The source code of the frontend
│   ├── /actions/               # Action creators that allow to trigger a dispatch to stores
│   ├── /components/            # React components
│   ├── /constants/             # Enumerations used in action creators and stores
│   ├── /dispatcher/            # Flux dispatcher
│   ├── /legacy/                # Temporary: legacy jQuery code
│   ├── /pages/                 # Webpack entry points for each page
│   ├── /stores/                # Stores contain the application state and logic
│   ├── /app.js                 # Client-side startup script
│   ├── preprocessor.js         # ES6 transpiler settings for Jest 
│   └── webpack.config.js       # Webpack configuration for bundling and optimization
└── package.json                # The list of 3rd party libraries and utilities

See also

• Facebook Flux Overview
• Facebook Flux Repository
• Facebook Flux Examples