It's become painfully apparent that I don't have the time to maintain this list with the care it needs now.

I see two approaches to fix this:

• Trivially bring on more awesome folks to manually approve / reject link changes
• Or write a GitHub bot (probot?) that can PR links that users provide in Issues

Personally I'm a big fan of the bot approach - could save on a lot of man hours in the future, so we can all spend our time solving more interesting tasks than editing readme files all evening. I'd be happy to work on this task, since I could do this during my live streams I'm trying to start this week, so readers and viewers could follow along and contribute too. 👍

I think this one can definitely be a staff pick, gives a real good insight on how to build a full fledged mobx app

Basically need to outline requirements from this comment: #14 (comment)

mobx-binder is a library for handling form state for React+MobX

thx

Perhaps we should add craco to the boilerplates section for those who want to use mobx + decorators with CRA without ejecting?

Their recipe worked for me on the first try:
https://github.com/sharegate/craco/blob/master/recipes/use-mobx/craco.config.js

I tried using customize-cra first, before finding craco, but my limited attempt to get it working failed.

https://gonehybrid.com/how-to-manage-state-in-ionic-apps-with-mobx-part-1/
https://github.com/ds300/redux-mobx-connect

大家好。 中文翻译有用吗？ 你甚至需要/使用它们吗？

由于即将推出的令人敬畏的mobx机器人在翻译过程中出现了一些问题，所以我打了一个残缺。 **读者在翻译过程中是否找到了很多价值？ 我担心维护它们不再值得付出努力，因为如果我们放弃这些列表，并且允许读者根据需要使用Google翻译之类的内容进行翻译，那么维护此列表几乎可以免费。

这意味着丢弃它们（或者说，将它们归档到另一个回购库中）将使这个列表的管理变得更容易，并且使信息更容易保持最新。

我们的读者对此有何看法？

cc @SangKa, @tsiq-swyx

Due to some issues in translation with the upcoming awesome mobx bot, I've hit a bit of a stump. Do Chinese readers find much value in having these translations? I'm concerned that maintaining them is no longer worth the effort, since maintaining this list could be virtually free if we discarded them and instead allowed readers to translate as needed using something like Google Translate.

This would mean that discarding them (or rather, archiving them in another repo) would make management of this list much easier and allow information to be more easily kept up-to-date.

What do our readers think about this?

https://school.shoutem.com/lectures/hacker-news-app-part-2-upvoting-commenting/
https://medium.com/dazn-tech/cooking-a-strudel-with-react-mobx-c84bffcaf6d
https://www.npmjs.com/package/vue-mobx
https://github.com/sonaye/mobx-apollo
https://blog.heapanalytics.com/migrating-react-mobx-without-rewrite/

I've recently worked on the following project for an interview: Portfolia

Will this be useful as a 'real-world' application?

https://github.com/mass3ff3ct/mobx-react-inject

https://nealbuerger.com/2018/11/getting-started-with-mobx5-react16-and-typescript3.html should be https://www.nealbuerger.com/tech/typescript/2018-11-11-getting-started-with-mobx5-react16-and-typescript3/

The package has been deprecated, now just use the official package.

https://orlandohamsho.com/javascript/introduction-mobx-react/
https://marketplace.visualstudio.com/items?itemName=adamrackis.react-ecosystem-snippets

Staff pick for links the MobX team wants to recognize:

Single	Two-tone

Popular links for ones particularly popular in the wild:

Single	Two-tone

Anyone care to share the preferences between the two styles? I think I personally prefer the "Single" style

See: mobxjs/mobx#681

https://react.rocks/example/mobx-react-form : MobX-based forms validation, independent of UI components

Demo: https://foxhound87.github.io/mobx-react-form-demo/demo

Code: https://github.com/foxhound87/mobx-react-form

Blog: https://medium.com/@foxhound87/automagically-manage-react-forms-state-with-mobx-and-automatic-validation-2b00a32b9769

Docs: https://foxhound87.github.io/mobx-react-form

react-use-mobx

useObservable help update data automatically insteadof setState!

Online Demo

import React, { useState } from 'react';
import { useObservable, observer } from 'react-use-mobx';
import { render } from 'react-dom';

const App = observer(() => {
  const [ count1, setCount ] = useState({a: 1});
  /**
   * initialState must be Object!!!!!!
   */
  const count2 = useObservable({a: 1});
  return (
    <div>
    <h2>useState</h2>
    <button onClick={() => setCount({a: count1.a + 1})}>count: {count1.a}</button>
    <h2>react-use-mobx</h2>
    <button onClick={() => count2.a++}>count: {count2.a}</button>
    </div>
  );
});

render(<App />, document.getElementById('root'));

Not sure if you are interested, but I've built a platform for teaching algorithm

Nice blog on rails + websockets + react + mobx

https://blog.codeship.com/realtime-with-react-and-rails/?utm_content=57605242&utm_medium=social&utm_source=twitter

• MobX Developer Tools https://chrome.google.com/webstore/detail/mobx-developer-tools/pfgnfdagidkfgccljigdamigbcnndkod?hl=en
• computed-async-mobx https://github.com/danielearwicker/computed-async-mobx
• starhackit https://github.com/FredericHeem/starhackit

There are a pretty hefty set of requirements we should aim to match to be added to the official awesome list of awesome lists. This would help publicity and reinforce that this is an awesome list, not just a list of everything (at the moment its somewhere in-between due to how large it is).

I haven't looked too thoroughly at it, but it looks like this will take a bit of work, but increase visibility greatly.

I'm biased, but this is how I use MobX. May be breaking a few best practices I don't know of, but it's how I use it and it works wonderfully for me in electron and web apps! I've used this app's code countless times as a reference when explaining elements like state management in a slightly-more-than-todo-app level of complexity and basic data fetching etc.

https://github.com/hawkins/streamflow

(Didn't check for duplicates)

Firebase + mobx: https://hackernoon.com/a-useful-wrapper-for-mobx-and-firebase-cloud-firestore-3d9f3310ed23
Meteor + mobx: https://medium.com/@swalta/adventures-with-react-mobx-and-meteor-605a133460b3
Ignite + mobx: https://github.com/Appclon/ignite-appclon-mobx/blob/master/readme.md

Server side rendering for mobx-state-tree: https://www.npmjs.com/package/arboris

Context

Multiple years of delightful mobx + react build setup have come to an end.

• React has changed
• Mobx has changed
• React hot loader is kind of dying, react-refresh seems to be the new thing
• Typescript is widespread
• Patterns have changed
• Some tooling libraries have breaking changes

All the above leads to a need for new recipes and articles.
Many articles and boilerplates in this list are kind of outdated, while some up-to-date setup are looking for an answer.

Proposal

• Boilerplate and articles links could have a visible last update date next to them.
• Order the links by date when applicable.
• We can decide on exact steps then I can filter and order links.
• Many example repos haven't been touched in 3 / 4 years. I don't want to remove any link, as they were great contributions at the time, so maybe we could have an "archived section" where links are moved if there was no change in the last 2 / 3 years?

What do you think?

Staff pick: Angular + mobx talk by Adam Klein:
https://www.youtube.com/watch?time_continue=1&v=gvDudVxYk1Y

https://medium.com/@p.le/rebuilding-the-guest-list-manager-with-react-mobx-at-the-knot-e34e32920571
https://www.npmjs.com/package/react-mobx-router5
https://blog.logrocket.com/announcing-logrocket-for-mobx-a9b65d8e6ed7
https://www.lynda.com/React-Native-tutorials/React-Native-Building-Mobile-Apps/547379-2.html

https://www.youtube.com/watch?v=00ys34cvudY

https://github.com/formstate/formstate Cc @mladen107

Trying to find a TypeScript + Mobx boilerplate which works on latest React-native but couldn't find any.
So I created my own one. Link here.
Hope you could add it to the Boilerplates section. Thank you.

cc: @hawkins

I think these pages should be dropped from the official docs, and just point to this repo. Some old or deprecated projects can probably be removed. Ping me if not sure!

Probably there should be a short list in the main readme itself with a:

1. representative real life project
2. a fiddle or sandbox (including react) for bug reporting,
3. A link to how to set up create-react-app with mobx

• https://mobx.js.org/faq/blogs.html
• https://mobx.js.org/faq/related.html
• https://mobx.js.org/faq/examples.html
• https://mobx.js.org/faq/boilerplates.html

Further links I gathered on my short list with potentially interesting stuff:

https://github.com/gothinkster/react-mobx-realworld-example-app
http://engineering.pivotal.io/post/tdd-mobx/
https://logbook.hanno.co/mobx-redux-alternative/?utm_campaign=coschedule&utm_source=twitter&utm_medium=wearehanno&utm_content=MobX:%20a%20Redux%20alternative%20you%20should%20consider
https://blog.mvp-space.com/next-js-meets-firebase-and-mobx-b3ae90d5b879
https://appendto.com/2017/03/mobx-firebase-create-a-twitter-clone-with-simple-state-management-database/?nabe=4834138299564032:1,5488687288942592:1,5685334715400192:0,6035677076783104:1,6118337346273280:2&utm_referrer=https%3A%2F%2Fwww.google.com%2Furl%3Fq%3Dhttps%253A%252F%252Fappendto.com%252F2017%252F03%252Fmobx-firebase-create-a-twitter-clone-with-simple-state-management-database%252F%26sa%3DD%26sntz%3D1%26usg%3DAFQjCNGkNT0S-9k9VWnFG9iQDBaCTaMnhg
https://dannyherran.com/2017/03/react-redux-mobx-takeaways/?utm_campaign=crowdfire&utm_content=crowdfire&utm_medium=social&utm_source=twitter
https://ihatetomatoes.net/how-to-remove-experimentaldecorators-warning-in-vscode
https://blog.uncommon.is/a-simple-introduction-to-state-management-with-mobx-in-react-native-ed749aa2b5d7
https://github.com/motion/mobx-formatters
https://github.com/zeit/next.js/tree/master/examples/with-mobx
https://www.youtube.com/watch?v=rwqwwn_46kA
https://www.youtube.com/watch?v=3J9EJrvqOiM&list=TLGG8kFs45xUMH0xMjA2MjAxNw
https://rasdaniil.gitbooks.io/mobase/content/
Router library: https://github.com/elefanty/offramp
App architecture: https://github.com/danieldunderfelt/mobx-app
Model library: https://github.com/mobxjs/mobx-state-tree/
Model library: https://github.com/danielearwicker/json-mobx
Model library: https://github.com/jeffijoe/libx
Tutorial: https://school.shoutem.com/lectures/build-simple-imgur-client-react-native-mobx-tutorial/
https://github.com/timarney/cra-mobx-reactrouter
Real life example: https://github.com/fcsonline/react-transmission
Example: https://github.com/danielearwicker/baltar
https://jsapp.me/a-social-mobile-messaging-marketplace-app-using-react-native-firebase-mobx-codepush-onesignal-fad105e70fc1
SAPUI integration: https://blogs.sap.com/2017/01/30/advanced-state-management-in-sapui5-via-mobx/?utm_source=dlvr.it&utm_medium=twitter / https://github.com/geekflyer/openui5-mobx-model
Stack: http://yawp.io/blog/2017/01/31/react-mobx-yawp
real life example: https://github.com/lionsharecapital
utility: https://www.npmjs.com/package/mobx-location
utility: https://github.com/ueno-llc/mobx-server-wait
https://appendto.com/2017/01/introduction-to-data-binding-with-mobx/?nabe=4834138299564032:1,5488687288942592:1,5685334715400192:0,6035677076783104:1,6118337346273280:2&utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:%20appendto%20(appendTo)&utm_referrer=https%3A%2F%2Fwww.google.com%2Furl%3Fq%3Dhttps%253A%252F%252Fappendto.com%252F2017%252F01%252Fintroduction-to-data-binding-with-mobx%252F%253Futm_source%253Dfeedburner%2526utm_medium%253Dfeed%2526utm_campaign%253DFeed%25253A%252Bappendto%252B%252528appendTo%252529%26sa%3DD%26sntz%3D1%26usg%3DAFQjCNFidz1j-PPbiVXjrqsGMwo2bhiIfA
https://github.com/jamiewinder/mobx-bind
https://github.com/capaj/mobx-observer
http://danielearwicker.github.io/MobX_Like_React_but_for_Data.html
https://github.com/danielearwicker/computed-async-mobx/
https://gist.github.com/thomasboyt/8cda9c533802a36ee6aac4559c4799b1
utility: https://github.com/farwayer/mobx-decorators
FAQ: mobxjs/mobx#300
https://www.sitepoint.com/universal-react-rendering-sitepoint/?utm_content=buffer7905c&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer
https://hackernoon.com/an-artificial-example-where-mobx-really-shines-and-redux-is-not-really-suited-for-it-1a58313c0c70
https://www.slideshare.net/500Tech/angular-mobx-happiness
Real life example: http://picsrush.com/app/
Tutorial: https://www.codemy.net/posts/react-state-management-with-mobx
SPFX binding: https://github.com/kmees/spfx-react-mobx-webpart-starter
Tutorial: https://swizec.com/blog/livecoding-25-adding-mobx-vanilla-react-project/swizec/7170?utm_content=buffer92a0d&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer
https://blog.wearewizards.io/a-mobx-introduction-and-case-study
Angular 2 bindings: https://www.npmjs.com/package/ng2-mobx
React native boilerplate: https://github.com/hiaw/rn_mobx_template
https://blog.pixelingene.com/2016/10/effective-mobx-patterns-part-1/
https://github.com/mhaagens/react-mobx-react-router4-boilerplate
https://hackernoon.com/if-not-redux-then-what-fc433234f5b4
https://www.sitepoint.com/manage-javascript-application-state-mobx/

Found a neat article about Mobx from Dev.to earlier in the year, I’m curious what the bot will do with it? https://dev.to/swyx/introduction-to-mobx-4-for-reactredux-developers-3k07