https://github.com/badsyntax/react-seed

[not maintained] Seed project for React apps using ES6 & webpack.
https://github.com/badsyntax/react-seed

Last synced: 21 days ago
JSON representation

[not maintained] Seed project for React apps using ES6 & webpack.

• Host: GitHub
• URL: https://github.com/badsyntax/react-seed
• Owner: badsyntax
• License: mit
• Created: 2015-03-01T18:32:25.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2017-11-15T20:34:54.000Z (about 7 years ago)
• Last Synced: 2024-05-10T13:03:07.686Z (7 months ago)
• Language: JavaScript
• Homepage: http://badsyntax.github.io/react-seed
• Size: 2.54 MB
• Stars: 428
• Watchers: 16
• Forks: 82
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-seed - React-Seed - Seed project for React apps using ES6 & webpack. (Seed List / React)

README

        
# React seed [![Build Status](https://travis-ci.org/badsyntax/react-seed.svg?branch=master)](https://travis-ci.org/badsyntax/react-seed)

A boilerplate for building React apps with ES6 and webpack.

**_This is old. You should use [create-react-app](https://github.com/facebookincubator/create-react-app) instead._**

## What you get

* React 0.13

* ES6, ES7 & JSX to ES5 via babel

* webpack with react hot loader, and other useful loaders

* [Local CSS](https://github.com/webpack/css-loader#local-scope)

* Karma, mocha, chai & sinon for testing with mocking examples

* Basic flux architecture with app actions, stores and example web API usage

* React router ([feature/react-router](https://github.com/badsyntax/react-seed/tree/feature/react-router))

* Material UI ([feature/material-ui](https://github.com/badsyntax/react-seed/tree/feature/material-ui))

## Getting started

### Installing with git

```bash

git clone --depth=1 https://github.com/badsyntax/react-seed.git my-project

```

### Installing with yeoman

1. `npm install -g yo`

2. `npm install -g generator-react-seed`

3. Use the generator like so: `yo react-seed`

## npm scripts

* `npm start` - Build and start the app in dev mode at http://localhost:8000

* `npm test` - Run the tests

* `npm run build` - Run a production build

## Examples

### Writing components:

```js

// Filename: Menu.jsx

'use strict';

import styles from './_Menu.scss';

import React from 'react';

import MenuItem from './MenuItem';

let { Component, PropTypes } = React;

export default class Menu extends Component {

  static defaultProps = {

    items: []

  };

  static propTypes = {

    items: PropTypes.array.isRequired

  };

  render() {

    return (

      


        {this.props.items.map((item) => {

          return ();

        }, this)}

      

    );

  }

}

```


###Writing tests:

```js

// Filename: __tests__/Menu-test.jsx

'use strict';

import React from 'react/addons';

import { expect } from 'chai';

import Menu from '../Menu.jsx';

import MenuItem from '../MenuItem.jsx';

// Here we create a mocked MenuItem component.

class MockedMenuItem extends MenuItem {

  render() {

    return (

      
{this.props.item.label}

    );

  }

}


// Here we set the mocked MenuItem component.

Menu.__Rewire__('MenuItem', MockedMenuItem);

describe('Menu', () => {

  let { TestUtils } = React.addons;

  let menuItems = [

    { id: 1, label: 'Option 1' },

    { id: 2, label: 'Option 2' }

  ];

  let menu = TestUtils.renderIntoDocument(

    

  );

  let menuElem = React.findDOMNode(menu);

  let items = menuElem.querySelectorAll('li');

  it('Should render the menu items', () => {

    expect(items.length).to.equal(2);

  });

  it('Should render the menu item labels', () => {

    Array.prototype.forEach.call(items, (item, i) => {

      expect(item.textContent.trim()).to.equal(menuItems[i].label);

    });

  })

  it('Should render the mocked menu item', () => {

    expect(items[0].className).to.equal('mocked-menu-item');

  });

});

```

## Sass, CSS & webpack

`import` Sass and CSS files from within your JavaScript component files:

```js

// Filename: app.jsx

import 'normalize.css/normalize.css';

import styles from './scss/app.scss';

```

* **Note:** If you're importing component Sass files from within your JavaScript component files, then each sass file will be compiled as part of a different compile process, and thus you cannot share global references. See [this issue](https://github.com/jtangelder/sass-loader/issues/105) for more information.

* Sass include paths can be adjusted in the `webpack/loaders.js` file.

* All CSS (compiled or otherwise) is run through Autoprefixer and style-loader. Any images/fonts etc referenced in the CSS will be copied to the build dir.

* CSS files are combined in the order in which they are imported in JavaScript, thus

you should always import your CSS/Sass before importing any other JavaScript files.

* If not using local CSS, use an approach like [BEM](http://cssguidelin.es/#bem-like-naming) to avoid specificity

issues that might exist due to unpredicatable order of CSS rules.

## HTML files

All required `.html` files are compiled with lodash.template and synced into the `./build` directory:

```js

// Filename: app.jsx

import './index.html';

```

* You can adjust the lodash template data in the `webpack/loaders.js` file.

## Conventions

* Use fat arrows for anonymous functions

* Don't use `var`. Use `let` and `const`.

## Releasing

1. `npm version patch`

2. `git push --follow-tags`

3. `npm login` (Optional)

4. `npm publish`

## Credits

This project was initially forked from https://github.com/tcoopman/react-es6-browserify

## License

Copyright (c) 2015 Richard Willis

MIT (http://opensource.org/licenses/MIT)