mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
89a4cabbd6
I changed the version to the following files: - [x] - examples/with-next-css/package.json - [x] - examples/with-draft-js/package.json - [x] - examples/custom-server-polka/package.json - [x] - examples/with-cerebral/package.json - [x] - examples/with-zones/package.json - [x] - examples/with-universal-configuration-runtime/package.json - [x] - examples/with-apollo/package.json - [x] - examples/with-higher-order-component/package.json - [x] - examples/with-hashed-statics/package.json - [x] - examples/with-pkg/package.json - [x] - examples/with-jest/package.json - [x] - examples/with-glamorous/package.json - [x] - examples/with-custom-reverse-proxy/package.json - [ ] - examples/with-emotion/package.json - [x] - examples/with-styled-jsx-scss/package.json - [x] - examples/with-styled-jsx-plugins/package.json `with-emotion/package.json` already has the latest, so I guess it's other packabe. BUT I think we need to update this example with the latest version of `emotion` since it changed a little bit (for better). |
||
---|---|---|
.. | ||
components | ||
modules/clock | ||
pages | ||
package.json | ||
README.md |
Declarative State & Side-effect management with CerebralJS
How to use
Using create-next-app
Execute create-next-app
with Yarn or npx to bootstrap the example:
npx create-next-app --example with-cerebral with-cerebral-app
# or
yarn create next-app --example with-cerebral with-cerebral-app
Download manually
Download the example:
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-cerebral
cd with-cerebral
Install it and run:
npm install
npm run dev
# or
yarn
yarn dev
Deploy it to the cloud with now (download)
now
The idea behind the example
Use CerebralJS to manage an apps state and side effects in a declarative manner:
Declarative CerebralJS:
[
setLoading(true),
getUser,
{
success: setUser,
error: setError,
},
setLoading(false),
];
vs imperative JS:
function getUser() {
this.isLoading = true;
ajax
.get("/user")
.then(user => {
this.data = user;
this.isLoading = false;
})
.catch(error => {
this.error = error;
this.isLoading = false;
});
}