Skip to content

Commit 818ac9d

Browse files
committed
fix a readme typo
1 parent 21bced1 commit 818ac9d

File tree

1 file changed

+44
-44
lines changed

1 file changed

+44
-44
lines changed

README.md

Lines changed: 44 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,18 @@ Simple React state management. Made with :heart: and ES6 Proxies.
1212

1313
<!-- toc -->
1414

15-
* [Introduction](#introduction)
16-
* [Installation](#installation)
17-
* [Usage](#usage)
18-
+ [Creating global stores](#creating-global-stores)
19-
+ [Creating reactive views](#creating-reactive-views)
20-
+ [Creating local stores](#creating-local-stores)
21-
* [Examples with live demos](#examples-with-live-demos)
22-
* [Articles](#articles)
23-
* [Performance](#performance)
24-
* [Platform support](#platform-support)
25-
* [Alternative builds](#alternative-builds)
26-
* [Contributing](#contributing)
15+
- [Introduction](#introduction)
16+
- [Installation](#installation)
17+
- [Usage](#usage)
18+
- [Creating global stores](#creating-global-stores)
19+
- [Creating reactive views](#creating-reactive-views)
20+
- [Creating local stores](#creating-local-stores)
21+
- [Examples with live demos](#examples-with-live-demos)
22+
- [Articles](#articles)
23+
- [Performance](#performance)
24+
- [Platform support](#platform-support)
25+
- [Alternative builds](#alternative-builds)
26+
- [Contributing](#contributing)
2727

2828
<!-- tocstop -->
2929

@@ -40,10 +40,10 @@ React Easy State is a practical state management library with two functions and
4040
import React from 'react'
4141
import { store, view } from 'react-easy-state'
4242

43-
const count = store({ num: 0 })
43+
const counter = store({ num: 0 })
4444
const increment = () => counter.num++
4545

46-
export default view(() => (<button onClick={increment}>{counter.num}</button>))
46+
export default view(() => <button onClick={increment}>{counter.num}</button>)
4747
```
4848

4949
This is enough for it to automatically update your views when needed. It doesn't matter how you structure or mutate your state stores, any syntactically valid code works.
@@ -216,7 +216,7 @@ const counter = store({
216216
}
217217
})
218218

219-
export default view(() => (<div onClick={counter.increment}>{counter.num}</div>))
219+
export default view(() => <div onClick={counter.increment}>{counter.num}</div>)
220220
```
221221

222222
`this.num++` won't work, because `increment` is passed as a callback and loses its `this`. You should use the direct object reference - `counter` - instead of `this`.
@@ -262,11 +262,11 @@ const App = view(() => (
262262
))
263263

264264
// DO THIS
265-
const Profile = view(({ user }) => (<p>Name: {user.name}</p>))
265+
const Profile = view(({ user }) => <p>Name: {user.name}</p>)
266266

267267
// DON'T DO THIS
268268
// This won't re-render on appStore.user.name = 'newName' like mutations
269-
const Profile = ({ user }) => (<p>Name: {user.name}</p>)
269+
const Profile = ({ user }) => <p>Name: {user.name}</p>
270270
```
271271

272272
</details>
@@ -299,9 +299,9 @@ export default view(() => (
299299
<summary><code>view</code> implements an optimal <code>shouldComponentUpdate</code> (or <code>memo</code>) for your components.</summary>
300300
<p></p>
301301

302-
* Using `PureComponent` or `memo` will provide no additional performance benefits.
302+
- Using `PureComponent` or `memo` will provide no additional performance benefits.
303303

304-
* Defining a custom `shouldComponentUpdate` may rarely provide performance benefits when you apply some use case specific heuristics inside it.
304+
- Defining a custom `shouldComponentUpdate` may rarely provide performance benefits when you apply some use case specific heuristics inside it.
305305

306306
</details>
307307
<p></p>
@@ -386,9 +386,9 @@ view(withTheme(Comp))
386386
<summary>Usage with (pre v4.4) React Router.</summary>
387387
<p></p>
388388

389-
* If routing is not updated properly, wrap your `view(Comp)` - with the `Route`s inside - in `withRouter(view(Comp))`. This lets react-router know when to update.
389+
- If routing is not updated properly, wrap your `view(Comp)` - with the `Route`s inside - in `withRouter(view(Comp))`. This lets react-router know when to update.
390390

391-
* The order of the HOCs matter, always use `withRouter(view(Comp))`.
391+
- The order of the HOCs matter, always use `withRouter(view(Comp))`.
392392

393393
This is not necessary if you use React Router 4.4+. You can find more details and some reasoning about this in [this react-router docs page](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md).
394394

@@ -416,7 +416,7 @@ const dataStore = store({
416416
]
417417
})
418418

419-
export default view(() => (<Table data={cloneDeep(dataStore.items)} />))
419+
export default view(() => <Table data={cloneDeep(dataStore.items)} />)
420420
```
421421

422422
</details>
@@ -566,38 +566,38 @@ Instead of returning an object, you should directly mutate the received stores.
566566

567567
#### Beginner
568568

569-
* [Clock Widget](https://solkimicreb.github.io/react-easy-state/examples/clock/build) ([source](/examples/clock/)) ([codesandbox](https://codesandbox.io/s/github/solkimicreb/react-easy-state/tree/master/examples/clock)) ([react-native source](/examples/native-clock/)) ([react-native sandbox](https://snack.expo.io/@git/github.com/solkimicreb/react-easy-state:examples/native-clock)): a reusable clock widget with a tiny local state store.
570-
* [Stopwatch](https://solkimicreb.github.io/react-easy-state/examples/stop-watch/build) ([source](/examples/stop-watch/)) ([codesandbox](https://codesandbox.io/s/github/solkimicreb/react-easy-state/tree/master/examples/stop-watch)) ([tutorial](https://hackernoon.com/introducing-react-easy-state-1210a156fa16)): a stopwatch with a mix of normal and computed state properties.
569+
- [Clock Widget](https://solkimicreb.github.io/react-easy-state/examples/clock/build) ([source](/examples/clock/)) ([codesandbox](https://codesandbox.io/s/github/solkimicreb/react-easy-state/tree/master/examples/clock)) ([react-native source](/examples/native-clock/)) ([react-native sandbox](https://snack.expo.io/@git/github.com/solkimicreb/react-easy-state:examples/native-clock)): a reusable clock widget with a tiny local state store.
570+
- [Stopwatch](https://solkimicreb.github.io/react-easy-state/examples/stop-watch/build) ([source](/examples/stop-watch/)) ([codesandbox](https://codesandbox.io/s/github/solkimicreb/react-easy-state/tree/master/examples/stop-watch)) ([tutorial](https://hackernoon.com/introducing-react-easy-state-1210a156fa16)): a stopwatch with a mix of normal and computed state properties.
571571

572572
#### Advanced
573573

574-
* [TodoMVC](https://solkimicreb.github.io/react-easy-state/examples/todo-mvc/build) ([source](/examples/todo-mvc/)) ([codesandbox](https://codesandbox.io/s/github/solkimicreb/react-easy-state/tree/master/examples/todo-mvc)): a classic TodoMVC implementation with a lot of computed data and implicit reactivity.
575-
* [Contacts Table](https://solkimicreb.github.io/react-easy-state/examples/contacts/build) ([source](/examples/contacts/)) ([codesandbox](https://codesandbox.io/s/github/solkimicreb/react-easy-state/tree/master/examples/contacts)): a data grid implementation with a mix of global and local state.
576-
* [Beer Finder](https://solkimicreb.github.io/react-easy-state/examples/beer-finder/build) ([source](/examples/beer-finder/)) ([codesandbox](https://codesandbox.io/s/github/solkimicreb/react-easy-state/tree/master/examples/beer-finder)) ([tutorial](https://medium.com/@solkimicreb/design-patterns-with-react-easy-state-830b927acc7c)): an app with async actions and a mix of local and global state, which finds matching beers for your meal.
574+
- [TodoMVC](https://solkimicreb.github.io/react-easy-state/examples/todo-mvc/build) ([source](/examples/todo-mvc/)) ([codesandbox](https://codesandbox.io/s/github/solkimicreb/react-easy-state/tree/master/examples/todo-mvc)): a classic TodoMVC implementation with a lot of computed data and implicit reactivity.
575+
- [Contacts Table](https://solkimicreb.github.io/react-easy-state/examples/contacts/build) ([source](/examples/contacts/)) ([codesandbox](https://codesandbox.io/s/github/solkimicreb/react-easy-state/tree/master/examples/contacts)): a data grid implementation with a mix of global and local state.
576+
- [Beer Finder](https://solkimicreb.github.io/react-easy-state/examples/beer-finder/build) ([source](/examples/beer-finder/)) ([codesandbox](https://codesandbox.io/s/github/solkimicreb/react-easy-state/tree/master/examples/beer-finder)) ([tutorial](https://medium.com/@solkimicreb/design-patterns-with-react-easy-state-830b927acc7c)): an app with async actions and a mix of local and global state, which finds matching beers for your meal.
577577

578578
## Articles
579579

580-
* [Introducing React Easy State](https://blog.risingstack.com/introducing-react-easy-state/): making a simple stopwatch.
581-
* [Stress Testing React Easy State](https://medium.com/@solkimicreb/stress-testing-react-easy-state-ac321fa3becf): demonstrating Easy State's reactivity with increasingly exotic state mutations.
582-
* [Design Patterns with React Easy State](https://medium.com/@solkimicreb/design-patterns-with-react-easy-state-830b927acc7c): demonstrating async actions and local and global state management through a beer finder app.
583-
* [The Ideas Behind React Easy State](https://medium.com/dailyjs/the-ideas-behind-react-easy-state-901d70e4d03e): a deep dive under the hood of Easy State.
580+
- [Introducing React Easy State](https://blog.risingstack.com/introducing-react-easy-state/): making a simple stopwatch.
581+
- [Stress Testing React Easy State](https://medium.com/@solkimicreb/stress-testing-react-easy-state-ac321fa3becf): demonstrating Easy State's reactivity with increasingly exotic state mutations.
582+
- [Design Patterns with React Easy State](https://medium.com/@solkimicreb/design-patterns-with-react-easy-state-830b927acc7c): demonstrating async actions and local and global state management through a beer finder app.
583+
- [The Ideas Behind React Easy State](https://medium.com/dailyjs/the-ideas-behind-react-easy-state-901d70e4d03e): a deep dive under the hood of Easy State.
584584

585585
## Performance
586586

587587
You can compare Easy State with plain React and other state management libraries with the below benchmarks. It performs a bit better than MobX and similarly to Redux.
588588

589-
* [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) ([source](https://github.com/krausest/js-framework-benchmark/tree/master/react-v16.1.0-easy-state-v4.0.1-keyed)) ([results](https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html))
589+
- [js-framework-benchmark](https://github.com/krausest/js-framework-benchmark) ([source](https://github.com/krausest/js-framework-benchmark/tree/master/react-v16.1.0-easy-state-v4.0.1-keyed)) ([results](https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html))
590590

591591
## Platform support
592592

593-
* Node: 6 and above
594-
* Chrome: 49 and above
595-
* Firefox: 38 and above
596-
* Safari: 10 and above
597-
* Edge: 12 and above
598-
* Opera: 36 and above
599-
* React Native: iOS 10 and above and Android with [community JSC](https://github.com/SoftwareMansion/jsc-android-buildscripts)
600-
* IE is not supported and never will be
593+
- Node: 6 and above
594+
- Chrome: 49 and above
595+
- Firefox: 38 and above
596+
- Safari: 10 and above
597+
- Edge: 12 and above
598+
- Opera: 36 and above
599+
- React Native: iOS 10 and above and Android with [community JSC](https://github.com/SoftwareMansion/jsc-android-buildscripts)
600+
- IE is not supported and never will be
601601

602602
_This library is based on non polyfillable ES6 Proxies. Because of this, it will never support IE._
603603

@@ -607,10 +607,10 @@ _React Native is supported on iOS and Android is supported with the community Ja
607607

608608
This library detects if you use ES6 or commonJS modules and serve the right format to you. The default bundles use ES6 features, which may not yet be supported by some minifier tools. If you experience issues during the build process, you can switch to one of the ES5 builds from below.
609609

610-
* `react-easy-state/dist/es.es6.js` exposes an ES6 build with ES6 modules.
611-
* `react-easy-state/dist/es.es5.js` exposes an ES5 build with ES6 modules.
612-
* `react-easy-state/dist/cjs.es6.js` exposes an ES6 build with commonJS modules.
613-
* `react-easy-state/dist/cjs.es5.js` exposes an ES5 build with commonJS modules.
610+
- `react-easy-state/dist/es.es6.js` exposes an ES6 build with ES6 modules.
611+
- `react-easy-state/dist/es.es5.js` exposes an ES5 build with ES6 modules.
612+
- `react-easy-state/dist/cjs.es6.js` exposes an ES6 build with commonJS modules.
613+
- `react-easy-state/dist/cjs.es5.js` exposes an ES5 build with commonJS modules.
614614

615615
If you use a bundler, set up an alias for `react-easy-state` to point to your desired build. You can learn how to do it with webpack [here](https://webpack.js.org/configuration/resolve/#resolve-alias) and with rollup [here](https://github.com/rollup/rollup-plugin-alias#usage).
616616

0 commit comments

Comments
 (0)