-
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 addstyles.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 importimport './css/styles.css';
not the css it is currently importing.
- run
-
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
andmobx-react
package with yarn, then commit :) -
Create
stores
folder insrc
folder... here is where all of our mobx stores will live. Each store will be in its own file. I am creating one calledShoeStore
, for tracking info about all my favourite shoes. Review thesrc/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 Introduction
mobx-demo's People
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
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.