/simple-react-grid-example

Simple React Grid Example

Primary LanguageJavaScriptMIT LicenseMIT

Simple React Grid Example

Requirements

  • node ^4.5.0
  • npm ^3.0.0

Getting Started

After confirming that your development environment meets the specified requirements, you can create a new project:

Install from source

First, clone the project:

$ git clone
$ cd <my-project-name>

Then install dependencies and check to see it works

$ npm install                   # Install project dependencies
$ npm start                     # Compile and launch

While developing, you will probably rely mostly on npm start; however, there are additional scripts at your disposal:

npm run <script> Description
start Serves your app at localhost:3000. HMR will be enabled in development.
compile Compiles the application to disk (~/dist by default).
dev Same as npm start, but enables nodemon for the server as well.
test Runs unit tests with Karma and generates a coverage report.
test:dev Runs Karma and watches for changes to re-run tests; does not generate coverage reports.
deploy Runs linter, tests, and then, on success, compiles your application to disk.
deploy:dev Same as deploy but overrides NODE_ENV to "development".
deploy:prod Same as deploy but overrides NODE_ENV to "production".
lint Lint all .js files.
lint:fix Lint and fix all .js files. Read more on this.

Application Structure

The application structure presented in this boilerplate is fractal, where functionality is grouped primarily by feature rather than file type.

.
├── bin                      # Build/Start scripts
├── build                    # All build-related configuration
│   └── webpack              # Environment-specific configuration files for webpack
├── config                   # Project configuration settings
├── server                   # Express application that provides webpack middleware
│   └── main.js              # Server application entry point
├── src                      # Application source code
│   ├── index.html           # Main HTML page container for app
│   ├── main.js              # Application bootstrap and rendering
│   ├── components           # Global Reusable Presentational Components
│   ├── containers           # Global Reusable Container Components
│   ├── layouts              # Components that dictate major page structure
│   ├── redux                # "Ducks" location...
│   │   └── modules          # reducer, action, creators not part of a route
│   ├── routes               # Main route definitions and async split points
│   │   ├── index.js         # Bootstrap main application routes with store
│   │   └── Home             # Fractal route
│   │       ├── index.js     # Route definitions and async split points
│   │       ├── assets       # Assets required to render components
│   │       ├── components   # Presentational React Components
│   │       ├── container    # Connect components to actions and store
│   │       ├── modules      # Collections of reducers/constants/actions
│   │       └── routes **    # Fractal sub-routes (** optional)
│   ├── static               # Static assets (not imported anywhere in source code)
│   ├── store                # Redux-specific pieces
│   │   ├── createStore.js   # Create and instrument redux store
│   │   └── reducers.js      # Reducer registry and injection
│   └── styles               # Application-wide styles (generally settings)
└── tests                    # Unit tests