https://github.com/jahredhope/react-boilerplate-basic

https://github.com/jahredhope/react-boilerplate-basic

Last synced: 16 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/jahredhope/react-boilerplate-basic
• Owner: jahredhope
• Created: 2016-11-08T20:59:45.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-03-16T00:27:44.000Z (over 6 years ago)
• Last Synced: 2024-10-19T02:00:33.437Z (29 days ago)
• Language: JavaScript
• Size: 273 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-boilerplate-basic

## To Run

    npm install

    npm start

    Navigate to localhost:3000

## What is [insert term here]?

  * [React](https://github.com/facebook/react)

  * [React Router](https://github.com/rackt/react-router)

  * [Babel](http://babeljs.io) for ES6 and ES7 magic

  * [Webpack](http://webpack.github.io) for bundling

  * [Webpack Dev Middleware](http://webpack.github.io/docs/webpack-dev-middleware.html)

  * [Webpack Hot Middleware](https://github.com/glenjamin/webpack-hot-middleware)

  * [Redux](https://github.com/rackt/redux)'s futuristic [Flux](https://facebook.github.io/react/blog/2014/05/06/flux.html) implementation

#### Redux Modules... *What the Duck*?

The `src/redux/modules` folder contains "modules" to help

isolate concerns within a Redux application (aka [Ducks](https://github.com/erikras/ducks-modular-redux), a Redux Style Proposal that I came up with). I encourage you to read the

[Ducks Docs](https://github.com/erikras/ducks-modular-redux) and provide feedback.

## Coding Guide

### CSS Variables

Use two levels abstraction where possible.

First define the variable  

E.g. `--light-green: #33ee55`

Then define it's use  

E.g. `--title-color: var(--light-green)`

This allows slight adjusting of the colour palette seperate to adjusting which colours are used where.

### Margins and layout

Where possible

Containers should have top, left, right padding.  

Items in containers should specify bottom margin.  

### Images

The image loader uses base64 encoded strings.  

This is deliberate.

# Testing

### Jest

Connected components should export both their decorated component as the default and their non-decorated component as their name.  

See [Redux Docs/connected components](http://redux.js.org/docs/recipes/WritingTests.html#connected-components) on why this is recommended  

#### Mocks

Mocks for Styles export the parameter used with 'mock-style-' at the start.

Mocks for Files export the simple string 'test-file-stub'