Small React app template with everything you need.
What's inside?
react
cerebral
emotion
and code styles with
standard
prettier-standard
Setup is based on create-react-app (not ejected) and uses react-app-rewire for customization options.
Clone and install deps
git clone git@github.com:tkivela/cerebraltemplate.git
cd cerebraltemplate
yarn
yarn start
Then open http://localhost:3000
and edit ./src/
-files and press save. Webpack
will automagically hot reload you files whenever you make changes.
Majority of code lives in src directory:
src/
├── components
├── index.js
└── modules
└── app
├── actions
├── computes
├── index.js
└── signals
- components: React components
- index.js: Root container component
- modules: Cerebral modules, one example module called app included
- modules/app/index.js: App initial state & signals
- modules/app/actions: Cerebral actions
- modules/app/computes: Cerebral computes which calculate derived state entries
- modules/app/signals: Cerebral signals
yarn build
This will compile your JS and copy your assets to the build
folder which
you can deploy wherever as a webpage.
yarn test
Running tests runs Javascript Standard Style (https://standardjs.com/) linting rules before running unit tests with Jest. I've included example tests for Cerebral signals and computes.
Check for linting errors with
yarn lint
Fix linting errors (& format code with prettier-standard) with
yarn lint-fix
By using Cerebral debugger (https://github.com/cerebral/cerebral-debugger/releases) you can debug state changes & signals by attaching it to port 8585 (port can be changed from controller.js if needed). Otherwise normal debugging (with sourcemaps) can be done from browser's devtools.