npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@nlabs/arkhamjs-example-ts-react

v3.28.0

Published

ArkhamJS React Typescript Example App

Downloads

84

Readme

@nlabs/arkhamjs-example-ts-react

An ArkhamJS React TypeScript example. A simple base application to start you off on your ReactJS project. Uses the following modules:

npm version npm downloads Travis Issues TypeScript MIT license Chat

Getting Started


  • Clone the repo and install the necessary node modules:
# Install Yarn and Lex globally
$ npm install -g yarn @nlabs/lex

# Download example app package and install dependencies (may take awhile the first time)
$ lex init exampleApp @nlabs/arkhamjs-example-ts-react -i

Usage


yarn start also yarn development

Runs the webpack build system to compile scripts on the fly. Also runs a local development web server which can be found at localhost:9000. The port can be changed in the config.

yarn build

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

yarn clean

Clean your app directory. Removes coverage, node_modules, npm-debug.log, package-lock.log, yarn.lock, and yarn-error.log.

yarn lint

Lint your app with tslint.

yarn test

Runs all unit tests within the app with Jest.

yarn production

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.

.
├── 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.tsx    # Entry JS to bootstrap and render
├── .eslintrc        # ESLint rules
├── .travis.yml      # Travis-CI configuration
├── lex.config.js    # Optional Lex configuration
├── LICENSE          # License details
├── package.json     # Package dependencies and configuration
├── README.md        # Readme file to detail the app and configurations
└── tsconfig.json    # Typescript configuration (only used for definitions)

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!