The mobx-demo from leighhalliday

mobx-demo's Introduction

Create new react app with create-react-app
Initialize git repository, then add files and do initial commit.
Follow the gist we have for past projects to get sass set up and use concurrently Steps:
- run yarn add concurrently --dev
- create src/css folder, and add styles.scss file
- add these lines to package.json in scripts section
```
"watch-styles": "sass --watch src/css/styles.scss:src/css/styles.css",
"watch": "concurrently --prefix \"[{name}]\" --names \"REACT,SASS\" -c \"bgBlue.bold,bgMagenta.bold\" \"npm run start\" \"npm run watch-styles\""
```
- Change src/index.js to import import './css/styles.css'; not the css it is currently importing.
We need to "eject" from create-react-app... this is because by default it does not support something called "decorators", which is when you see something like @observer or @observable.

For this I followed the article: https://swizec.com/blog/mobx-with-create-react-app/swizec/7158 So, run the command: yarn run eject
Add these files and commit again.
Run this line to install the babel package to support decorators. yarn add babel-plugin-transform-decorators-legacy --dev
We now have to tell babel that we want to use this decorator plugin. In the package.json file, go find the spot which talks about the babel presets... it should end up looking like this once we add the plugins section:
```
"babel": {
  "plugins": [
    "transform-decorators-legacy"
  ],
  "presets": [
    "react-app"
  ]
}
```
Install mobx and mobx-react package with yarn, then commit :)
Create stores folder in src folder... here is where all of our mobx stores will live. Each store will be in its own file. I am creating one called ShoeStore, for tracking info about all my favourite shoes. Review the src/stores/ShoeStore.js file which contains comments about how mobx works.
In the src/index.js file there are comments explaining the changes from a normal create-react-app installation.
In App.js file there are comments explaining how to "inject" and use the store to both display its values and also call its actions.

mobx-demo's People

Contributors

Stargazers

Watchers

mobx-demo's Issues

Can't watch styles

Hello.
I tried to run npm run watch-styles and here is the log that I've got:

/usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js run watch-styles --scripts-prepend-node-path=auto

> [email protected] watch-styles /Volumes/Maze/Work/Test-Tasks/ReactApp
> sass --watch src/css/styles.scss:src/css/styles.css

sh: sass: command not found

npm ERR! Darwin 16.7.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/bin/npm-cli.js" "run" "watch-styles" "--scripts-prepend-node-path=auto"
npm ERR! node v6.11.1
npm ERR! npm  v3.10.10
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] watch-styles: `sass --watch src/css/styles.scss:src/css/styles.css`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] watch-styles script 'sass --watch src/css/styles.scss:src/css/styles.css'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the mobx-demo package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     sass --watch src/css/styles.scss:src/css/styles.css
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs mobx-demo
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls mobx-demo
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Volumes/Maze/Work/Test-Tasks/ReactApp/npm-debug.log

Process finished with exit code 1

Could you, please, help with this?
And, by the way, can I add more Scss files and translate them into css?

Recommend Projects