Skip to content
AkhamJS Example React App
TypeScript CSS HTML JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode Update recommended vscode extensions Jun 29, 2018
src Add hot module replacement Jun 29, 2018
.eslintrc Update packages Jun 22, 2018
.gitignore Add lex Apr 30, 2018
.npmignore Add hot module replacement Jun 29, 2018
.travis.yml Update packages Jun 22, 2018
LICENSE Initial commit Nov 29, 2016
README.md Update docs May 7, 2018
lex.config.js
package.json v1.0.5 Jun 29, 2018
tsconfig.json Update packages Jun 22, 2018
yarn.lock Add hot module replacement Jun 29, 2018

README.md

ArkhamJS React TypeScript Example

A simple base application to start you off on your ReactJS project. Uses the following modules:

Travis TypeScript Issues Gitter MIT license

Getting Started


  • Clone the repo and install the necessary node modules:
$ npm install -g yarn @nlabs/lex  # Install Yarn and Lex
$ yarn                            # Install Node modules listed in ./package.json (may take a while the first time)

Usage


yarn start also yarn development

Runs the webpack build system to compile scripts on the fly. Run local web server. The default webpack dev server can be found at localhost:5000. The port can be changed in the config.

yarn build

Compile your application and copy static files for a production environment.

yarn lint

Lint your app with tslint.

yarn test

Runs all unit tests within your app with Jest.

yarn production

Run tests and then, on success, compile your application for a production environment.

yarn dev

Compile your application for a development environment. Run local development web server. The default web server url is: localhost:8080.

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.

.
├── coverage                 # Unit test coverage reports
├── dist                     # Compiled files
├── src                      # Application source code
│   ├── actions              # 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               # Redux store configuration
│   ├── styles               # SCSS styles
│   ├── views                # React components/views that live at a route
│   └── app.tsx              # Application bootstrap and rendering
│   └── index.html           # Initial HTML

Components vs. Views vs. Layouts

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 .css 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
import `./component.css`;

Testing


To add a unit test, simply create a *.test.ts or *.test.tsx file within the /src directory. Jest will look for these for and test these files.

Troubleshooting


Nothing yet. Having an issue? Report it and We'll get to it as soon as possible!

You can’t perform that action at this time.