Have ideas to improve npm?Join in the discussion! »

    react-app-starterkit

    4.0.0 • Public • Published

    react-app-starterkit

    Dependency Status devDependency Status

    My personal (opiniated) template for React projects. This is very much geared towards what I need in my React project, so it may not fit your use case.

    Btw: I really love red rectangles.

    This is not universal/isomorphic.

    This based on the Yeoman React Webpack generator, but uses Ryan Florence's guide for component structure with a focus on a flat structure and does not include any Flux-relevant stubs.

    Includes:

    • Webpack (with webpack-dev-server and several loaders)
    • React
    • React-Router
    • CSS Modules

    Getting started

    Prerequisite: Node.js needs to be installed.

    1. Clone this repository
    2. Navigate into this repository and do npm install.
    3. npm start starts the development server (with hot module reloading and those kind of things...)
    4. npm run build does a minified build of everything.

    Deployment

    Deployment for Github Pages and Gitlab Pages is integrated.

    • Github Pages: Type npm deploy to deploy to Github Pages.
    • Gitlab Pages: Gitlab CI will automatically pick up the .gitlab-ci.yml file and deploy once it creates a successful build

    Caveats with Gitlab Pages: For some reason, some node modules won't install with Gitlab CI, particularly husky and phantomjs-prebuilt.

    Conventions

    Filenames

    Export name = Filename

    Component structure
    • Folder name like
    • index.js as the entry point to the component which combines the component itself with the styles
    • MyComponent.js is the component itself and should export the React component
    • styles.less that contains the stylesheets for the component

    Tests

    Tests are using AVA + Enzyme, Coverage through NYC

    Loader naming

    babel instead of babel-loader

    Decisions

    • No req.keys for dynamically loading files. It's too Webpack-specific and relies on the fact that everything will be transformed into CommonJS modules. It won't work with Webpack 2's tree shaking and while manually taking care of the dependencies feels like a hassle, it's safer (and can be internally optimized by bundlers) in the long run.

    Where I want to improve

    • Use react-proxy or something similar to enable code splitting for React component and/or screens

    License

    MIT

    Install

    npm i react-app-starterkit

    DownloadsWeekly Downloads

    0

    Version

    4.0.0

    License

    MIT

    Last publish

    Collaborators

    • avatar