{"id":13653927,"url":"https://github.com/badsyntax/react-seed","last_synced_at":"2025-04-05T06:07:32.713Z","repository":{"id":28011481,"uuid":"31506099","full_name":"badsyntax/react-seed","owner":"badsyntax","description":"[not maintained] Seed project for React apps using ES6 \u0026 webpack.","archived":false,"fork":false,"pushed_at":"2017-11-15T20:34:54.000Z","size":2664,"stargazers_count":428,"open_issues_count":20,"forks_count":82,"subscribers_count":16,"default_branch":"master","last_synced_at":"2024-05-10T13:03:07.686Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://badsyntax.github.io/react-seed","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/badsyntax.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-01T18:32:25.000Z","updated_at":"2024-03-20T10:13:28.000Z","dependencies_parsed_at":"2022-09-03T16:50:40.323Z","dependency_job_id":null,"html_url":"https://github.com/badsyntax/react-seed","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badsyntax%2Freact-seed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badsyntax%2Freact-seed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badsyntax%2Freact-seed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/badsyntax%2Freact-seed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/badsyntax","download_url":"https://codeload.github.com/badsyntax/react-seed/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247294538,"owners_count":20915340,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T02:01:20.859Z","updated_at":"2025-04-05T06:07:32.691Z","avatar_url":"https://github.com/badsyntax.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Seed List"],"sub_categories":["React"],"readme":"# React seed [![Build Status](https://travis-ci.org/badsyntax/react-seed.svg?branch=master)](https://travis-ci.org/badsyntax/react-seed)\n\nA boilerplate for building React apps with ES6 and webpack.\n\n**_This is old. You should use [create-react-app](https://github.com/facebookincubator/create-react-app) instead._**\n\n## What you get\n\n* React 0.13\n* ES6, ES7 \u0026 JSX to ES5 via babel\n* webpack with react hot loader, and other useful loaders\n* [Local CSS](https://github.com/webpack/css-loader#local-scope)\n* Karma, mocha, chai \u0026 sinon for testing with mocking examples\n* Basic flux architecture with app actions, stores and example web API usage\n* React router ([feature/react-router](https://github.com/badsyntax/react-seed/tree/feature/react-router))\n* Material UI ([feature/material-ui](https://github.com/badsyntax/react-seed/tree/feature/material-ui))\n\n## Getting started\n\n### Installing with git\n\n```bash\ngit clone --depth=1 https://github.com/badsyntax/react-seed.git my-project\n```\n\n### Installing with yeoman\n\n1. `npm install -g yo`\n2. `npm install -g generator-react-seed`\n3. Use the generator like so: `yo react-seed`\n\n## npm scripts\n\n* `npm start` - Build and start the app in dev mode at http://localhost:8000\n* `npm test` - Run the tests\n* `npm run build` - Run a production build\n\n## Examples\n\n### Writing components:\n\n```js\n// Filename: Menu.jsx\n\n'use strict';\n\nimport styles from './_Menu.scss';\nimport React from 'react';\nimport MenuItem from './MenuItem';\n\nlet { Component, PropTypes } = React;\n\nexport default class Menu extends Component {\n\n  static defaultProps = {\n    items: []\n  };\n\n  static propTypes = {\n    items: PropTypes.array.isRequired\n  };\n\n  render() {\n    return (\n      \u003cul className={styles.menu}\u003e\n        {this.props.items.map((item) =\u003e {\n          return (\u003cMenuItem item={item} /\u003e);\n        }, this)}\n      \u003c/ul\u003e\n    );\n  }\n}\n```\n\n###Writing tests:\n\n```js\n// Filename: __tests__/Menu-test.jsx\n\n'use strict';\n\nimport React from 'react/addons';\nimport { expect } from 'chai';\n\nimport Menu from '../Menu.jsx';\nimport MenuItem from '../MenuItem.jsx';\n\n// Here we create a mocked MenuItem component.\nclass MockedMenuItem extends MenuItem {\n  render() {\n    return (\n      \u003cli className={'mocked-menu-item'}\u003e{this.props.item.label}\u003c/li\u003e\n    );\n  }\n}\n\n// Here we set the mocked MenuItem component.\nMenu.__Rewire__('MenuItem', MockedMenuItem);\n\ndescribe('Menu', () =\u003e {\n\n  let { TestUtils } = React.addons;\n\n  let menuItems = [\n    { id: 1, label: 'Option 1' },\n    { id: 2, label: 'Option 2' }\n  ];\n\n  let menu = TestUtils.renderIntoDocument(\n    \u003cMenu items={menuItems} /\u003e\n  );\n  let menuElem = React.findDOMNode(menu);\n  let items = menuElem.querySelectorAll('li');\n\n  it('Should render the menu items', () =\u003e {\n    expect(items.length).to.equal(2);\n  });\n\n  it('Should render the menu item labels', () =\u003e {\n    Array.prototype.forEach.call(items, (item, i) =\u003e {\n      expect(item.textContent.trim()).to.equal(menuItems[i].label);\n    });\n  })\n\n  it('Should render the mocked menu item', () =\u003e {\n    expect(items[0].className).to.equal('mocked-menu-item');\n  });\n});\n\n```\n\n## Sass, CSS \u0026 webpack\n\n`import` Sass and CSS files from within your JavaScript component files:\n\n```js\n// Filename: app.jsx\nimport 'normalize.css/normalize.css';\nimport styles from './scss/app.scss';\n```\n\n* **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.\n* Sass include paths can be adjusted in the `webpack/loaders.js` file.\n* 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.\n* CSS files are combined in the order in which they are imported in JavaScript, thus\nyou should always import your CSS/Sass before importing any other JavaScript files.\n* If not using local CSS, use an approach like [BEM](http://cssguidelin.es/#bem-like-naming) to avoid specificity\nissues that might exist due to unpredicatable order of CSS rules.\n\n## HTML files\n\nAll required `.html` files are compiled with lodash.template and synced into the `./build` directory:\n\n```js\n// Filename: app.jsx\nimport './index.html';\n```\n\n* You can adjust the lodash template data in the `webpack/loaders.js` file.\n\n## Conventions\n\n* Use fat arrows for anonymous functions\n* Don't use `var`. Use `let` and `const`.\n\n\n## Releasing\n\n1. `npm version patch`\n2. `git push --follow-tags`\n3. `npm login` (Optional)\n4. `npm publish`\n\n## Credits\n\nThis project was initially forked from https://github.com/tcoopman/react-es6-browserify\n\n## License\n\nCopyright (c) 2015 Richard Willis\n\nMIT (http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbadsyntax%2Freact-seed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbadsyntax%2Freact-seed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbadsyntax%2Freact-seed/lists"}