ArkhamJS React Flow Example App
npm install @nlabs/arkhamjs-example-flow-reactAn ArkhamJS React Flow example. A simple base application to start you off on your ReactJS project. Uses the following modules:
- react - A declarative, efficient, and flexible JavaScript library for building user interfaces.
- @nlabs/arkhamjs - A clean, simple Flux framework.
- @nlabs/lex - CLI tool to assist in development. Initialize, test, and compile your apps with zero setup. Using Jest, Webpack, and Flow.
- @nlabs/arkhamjs-storage-browser - ArkhamJS browser storage. Caches state in session or local storage.
- @nlabs/arkhamjs-middleware-logger - ArkhamJS console log middleware.
---------------
- Clone the repo and install the necessary node modules:
``shellInstall Yarn and Lex globally
$ npm install -g yarn @nlabs/lex
Usage
---------------
$3
Runs the webpack build system to compile scripts on the fly. Also runs a local development web server which can be found at
. The port can be changed in the config.$3
Compile your application and copy static files for a production environment.
$3
Clean your app directory. Removes coverage, node_modules, npm-debug.log, package-lock.log, yarn.lock, and yarn-error.log.
$3
Lint your app with tslint.
$3
Runs all unit tests within the app with Jest.
$3
Run tests and then, on success, compile your application for a production environment.
Configuration
---------------
See @nlabs/lex for documentation on custom configuration.
Structure
---------------
The folder structure provided is only meant to serve as a guide, it is by no means prescriptive. It is something that has worked very well for me and my team, but use only what makes sense to you.
`bash
.
├── coverage # Unit test coverage reports
├── dist # Compiled files ready to be deployed
├── src # Application source code
│ ├── actions # ArkhamJS Flux actions
│ ├── components # React components
│ ├── config # App configuration
│ ├── constants # App constants
│ ├── errors # Custom errors
│ ├── fonts # Font files
│ ├── icons # SVG files
│ ├── img # Images
│ ├── services # Helpers and utilities
│ ├── stores # ArkhamJS store configurations
│ ├── styles # CSS styles
│ ├── views # React components/views that live at a route
│ ├── app.css # Entry CSS file
│ ├── index.html # Entry HTML file
│ └── index.js # Entry JS to bootstrap and render
├── .eslintrc # ESLint rules
├── .travis.yml # Travis-CI configuration
├── LICENSE # License details
├── package.json # Package dependencies and configuration
└── README.md # Readme file to detail the app and configurations
`$3
TL;DR: They're all components.
This distinction may not be important for you, but as an explanation: A Layout is something that describes an entire page structure, such as a fixed navigation, viewport, sidebar, and footer. Most applications will probably only have one layout, but keeping these components separate makes their intent clear. Views are components that live at routes, and are generally rendered within a Layout. What this ends up meaning is that, with this structure, nearly everything inside of Components ends up being a dumb component.
Styles
---------------
All
imports will be run through postcss and cssnext, extracted and compiled during builds. CSS features included are nested classes and SASS-like variables. Styles must be imported either directly within the js file or via another stylesheet which has already been imported.`js
// JS
import ./component.css;
`Testing
---------------
To add a unit test, simply create a
file within the /src` directory. Jest will look for these for and test these files.---------------
Nothing yet. Having an issue? Report it and We'll get to it as soon as possible!