nickav / minesweeper

Minesweeper

A simple minesweeper game made in React

Getting started

Install yarn. Then in this project directory run:

yarn

This will install all the project dependencies. When adding new dependencies, be sure to also commit the yarn.lock file. Read more about Managing Dependencies.

Developing

Keep this running in the background:

yarn start

Now navigate to http://localhost:8080 to view the app.

Workflow

Auto-generating files

The following pinkprint commands are available:

yarn g component folder/NewComponent
yarn g store foo
yarn g style fancy
yarn g helper maths

Best Practices

JavaScript

Prefer absolute imports instead of relative, upwards navigation. Relative downwards imports are also fine.

// Good
import Button from '@/components/Button';

// Bad
import Button from '../../components/Button';

// OK but not preferred
import Button from './stuff/Button';

CSS

Any global styles should go directly in the style directory. From an scss file you can import any file in the style/globals directory. For example:

@import 'colors';

Code Formatting

To format your code run:

yarn format

Thanks to Husky, this will be run automatically when you commit. To disable this temporarily, run git commit -n which will skip all git hooks for that commit. Try not to make a habit of it, though.

The commit hooks are defined in the scripts section of the package.json.

Building

Create a production build of the app:

yarn dist

Features

• React with React Hotloader for live previews
• SCSS to keep our CSS sane
• Webpack to build and run the project

Project Structure

├── bin/                    # Webpack builds the static site into this directory
└── public/                 # Public files that get shipped
    ├── fonts/              # Font files
    └── img/                # Images and SVGs
└── src/                    # All source code
    └── components/         # React components
        ├── Component.jsx   # React component file
        └── Component.scss  # Style sheet for react component
    └── helpers/            # Helper files
        ├── history.js      # Browser history singleton
        └── functions.js    # General-purpose helper functions
    └── store/              # Base redux files and reducers
        ├── index.js        # Redux store singleton
        └── reducer.js      # Root reducer
    └── style/              # Common stylesheets
        ├── globals/        # Global variables and mixins
        └── lib/            # 3rd party vendor code
    ├── index.html          # App HTML page using lodash template
    ├── index.jsx           # App entry point
    └── index.scss          # SCSS entry point
├── package.json            # Defines dependencies and build scripts
├── webpack.config.js       # Main build file
└── README.md               # This file