{"id":17436390,"url":"https://github.com/aaronleocooper/reactjs-mobx-kit","last_synced_at":"2026-04-15T14:04:50.189Z","repository":{"id":98553651,"uuid":"102480079","full_name":"AaronLeoCooper/reactjs-mobx-kit","owner":"AaronLeoCooper","description":"TDD-focused ReactJS, MobX, React Router starter kit","archived":false,"fork":false,"pushed_at":"2017-10-09T14:47:39.000Z","size":434,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-02T03:27:55.976Z","etag":null,"topics":["babel","boilerplate","component-styleguide","es6","es7","mobx","mobx-react","mocha","react-router-v4","react16","reactjs","starter-kit","styleguide","tdd","tdd-focused-reactjs","webpack","webpack3"],"latest_commit_sha":null,"homepage":null,"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/AaronLeoCooper.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-05T12:44:56.000Z","updated_at":"2017-10-09T01:02:04.000Z","dependencies_parsed_at":"2023-03-14T05:00:36.338Z","dependency_job_id":null,"html_url":"https://github.com/AaronLeoCooper/reactjs-mobx-kit","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AaronLeoCooper%2Freactjs-mobx-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AaronLeoCooper%2Freactjs-mobx-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AaronLeoCooper%2Freactjs-mobx-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AaronLeoCooper%2Freactjs-mobx-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AaronLeoCooper","download_url":"https://codeload.github.com/AaronLeoCooper/reactjs-mobx-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245954628,"owners_count":20699870,"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":["babel","boilerplate","component-styleguide","es6","es7","mobx","mobx-react","mocha","react-router-v4","react16","reactjs","starter-kit","styleguide","tdd","tdd-focused-reactjs","webpack","webpack3"],"created_at":"2024-10-17T10:09:28.226Z","updated_at":"2025-10-19T19:43:21.489Z","avatar_url":"https://github.com/AaronLeoCooper.png","language":"JavaScript","readme":"# Webpack ReactJS Starter Kit\n\n\u003e A TDD-focused ReactJS, MobX, React Router starter kit with component styleguide\n\nThis is (what I consider) an optimial starting point for ReactJS \u0026 MobX projects, using the latest versions of Webpack, Babel, ReactJS, MobX and React Router.\n\n\n## Key Features\n\n- ReactJS v16\n- MobX\n- React Router v4\n- Webpack v3\n- Babel v6\n- Mocha unit tests suite for: components, utils and stores\n- ESLint (Airbnb coding style, plus some tweaks to make it less pedantic)\n- React Styleguidist for a \"living\" component styleguide\n\n\n## Commands\n\nThese are the key commands you'll need:\n\n`npm start` — Run a local development server with Hot Module Reloading\n\n`npm run build` — Compile your app into static, production-ready, optimised files\n\n`npm run sg` — Run local component styleguide server for isloated component development\n\n`npm run sg:build` — Compiles the component styleguide into static files (`styleguide/dist`)\n\n`npm run lint` — Run all linting scripts (ESLint, Stylelint coming soon!)\n\n`npm test` — Run tests with coverage output shown\n\n`npm run test:watch` — Run tests continuously as files inside `src` directory change\n\n\n## Best Practices\n\nSince there are many practices to be learned about and many of them pretty specific\nto various areas of app development, relevant READMEs are present throughout this\nstarter kit.\n\nHere's the guides for each section of the starter kit:\n\n- [Components](src/components/README.md)\n- [Containers](src/containers/README.md)\n- [Stores](src/stores/README.md)\n\nThese will be added to over time, and can be freely deleted once you're comfortable\nwith the practices if you don't like them hanging around in your project. If you\nnotice any corrections or improvements that can be made to these, feel free to open\na pull request!\n\n\n## Component Styleguide\n\nIn a web app project?? _Yes!_\n\nHaving a local development server for your app is one thing, but having a dedicated\none for your components offers a way of working on components entirely separately\nfrom your app to help you in creating truly isolated, reusable components.\n\nI won't go into too much detail here, because this is being achieved using the\namazing [React Styleguidist](https://react-styleguidist.js.org/) that you should\ndefinitely check out the docs for to learn more about. It's very easy to add to an\nexisting React project, too.\n\nThis starter kit already has it set up, just run `npm run sg` to run the local\ndevelopment component styleguide server at `localhost:6060`, then start adding or\nchanging your component markdown files. It's easiest to locate them right next to\nthe component itself:\n\n```\nHeader/\n├── Header.jsx\n├── Header.md  \u003c- this enables the styleguide magic!\n└── etc...\n```\n\nAnd if you want to publish your styleguide to a server, just run: `npm run sg:build`\nand you'll have all the static assets built into `styleguide/dist`.\n\n\n## Unit Tests\n\nAs mentioned, this React MobX starter kit is TDD-focused (Test-Driven Development).\nYou don't have to use TDD with this starting project (and writing unit tests at all\nis entirely your decision), however it's been produced with that in mind.\n\nThe unit tests suite setup includes these libraries:\n\n- Mocha\n- Chai\n- Sinon\n- Enzyme\n\nAs well as a custom Babel environment definition (defined inside `.babelrc`).\n\nMocha is configured mainly in the `test/mocha.opts` file, using the QUnit test\ninterface to enable you to write simple tests without overly-nested code blocks\n(similar to Tape or Ava's flatter unit tests style).\n\nCurrently this project contains a good variety of test samples for you to use as\na basis for your own tests for components, utility functions and MobX stores.\n\nRunning `npm test` runs all tests once, outputting coverage data to the terminal\nand to the `coverage` directory as generated HTML test coverage reports.\n\nRunning `npm run test:watch` continuously runs all your tests, automatically\nre-running when files change. The output is set to minimal to be less distracting,\nthough it can be changed from the script inside `package.json` by modifying\nthe `--reporter` flag.\n\n\n## Project To-dos\n\n- [ ] Add bundle splitting strategies (vendor \u0026 consider dynamic imports)\n- [ ] Add component generator CLI\n\n\n## Suggestions?\n\nSuggestions are **absolutely welcome!**\n\nWhilst I consider myself pretty well-aquainted currently with ReactJS at scale,\nI'm forever on the lookout for ways to improve on the practices I follow when I\narchitect a React-based web app. And ultimately this isn't just for me, this is\nfor anyone out there starting on a React project in need of the basic skeleton and\nstructure already in place for them.\n\nIf you think there's any improvements to be made here or any missing modules you feel\nare downright _essencial_ for building effective ReactJS apps, please don't hesitate\nto raise an issue or a pull request.\n\n\n## About\n\nReactJS is easy to start with (assuming you have a starting boilerplate or if you're\nusing `create-react-app` CLI tool), but difficult to master, and will require a _lot_\nof iterative decision-making as you build your app.\n\nAfter working with some small and some very large-scale ReactJS web apps over the past\ncouple of years, this is the starter kit that _I really wanted_ when I first needed to\nbuild something big using ReactJS.\n\nThis little boilerplate project was created to provide an _opinionated_, _structured_\nstarting point for ReactJS apps of all sizes, with the hope that it will somewhat ease\nthe burdens placed upon you — the engineer — of building scaleable, unit-tested and\nperformant web apps.\n\n**Developed by [Aaron Leo Cooper](http://webdevdiaries.com) @\n[2359Media](https://2359media.com)**\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronleocooper%2Freactjs-mobx-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaronleocooper%2Freactjs-mobx-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronleocooper%2Freactjs-mobx-kit/lists"}