Rework extensions guides (#1802)

* Rework extensions guides

* Edited MobX guide.
* Changed MobX in mkdocs.yml nav.

Signed-off-by: Paul Williams <pawilliams@mirantis.com>

* split line by sentances

Signed-off-by: Sebastian Malton <sebastian@malton.name>

Co-authored-by: Paul Williams <pawilliams@mirantis.com>
Co-authored-by: Sebastian Malton <sebastian@malton.name>

docs/extensions/guides/working-with-mobx.md

@@ -1,23 +1,26 @@
-# Working with mobx
+# Working with MobX
 
 ## Introduction
 
-Lens uses `mobx` as its state manager on top of React's state management system.
+Lens uses MobX on top of React's state management system.
-This helps with having a more declarative style of managing state, as opposed to `React`'s native `setState` mechanism.
+The result is a more declarative state management style, rather than React's native `setState` mechanism.
-You should already have a basic understanding of how `React` handles state ([read here](https://reactjs.org/docs/faq-state.html) for more information).
-However, if you do not, here is a quick overview.
 
-- A `React.Component` is generic over both `Props` and `State` (with default empty object types).
+You can review how React handles state management [here](https://reactjs.org/docs/faq-state.html).
-- `Props` should be considered read-only from the point of view of the component and is the mechanism for passing in "arguments" to a component.
-- `State` is a component's internal state and can be read by accessing the parent field `state`.
-- `State` **must** be updated using the `setState` parent method which merges the new data with the old state.
-- `React` does do some optimizations around re-rendering components after quick successions of `setState` calls.
 
-## How mobx works:
+The following is a quick overview:
 
-`mobx` is a package that provides an abstraction over `React`'s state management. The three main concepts are:
+* `React.Component` is generic with respect to both `props` and `state` (which default to the empty object type).
-- `observable`: data stored in the component's `state`
+* `props` should be considered read-only from the point of view of the component, and it is the mechanism for passing in arguments to a component.
-- `action`: a function that modifies any `observable` data
+* `state` is a component's internal state, and can be read by accessing the super-class field `state`.
-- `computed`: data that is derived from `observable` data but is not actually stored. Think of this as computing `isEmpty` vs an `observable` field called `count`.
+* `state` **must** be updated using the `setState` parent method which merges the new data with the old state.
+* React does some optimizations around re-rendering components after quick successions of `setState` calls.
 
-Further reading is available from `mobx`'s [website](https://mobx.js.org/the-gist-of-mobx.html).
+## How MobX Works:
+
+MobX is a package that provides an abstraction over React's state management system. The three main concepts are:
+
+* `observable` is a marker for data stored in the component's `state`.
+* `action` is a function that modifies any `observable` data.
+* `computed` is a marker for data that is derived from `observable` data, but that is not actually stored. Think of this as computing `isEmpty` rather than an observable field called `count`.
+
+Further reading is available on the [MobX website](https://mobx.js.org/the-gist-of-mobx.html).

mkdocs.yml

@@ -34,7 +34,7 @@ nav:
       - Main Extension: extensions/guides/main-extension.md
       - Renderer Extension: extensions/guides/renderer-extension.md
       - Stores: extensions/guides/stores.md
-      - Working with mobx: extensions/guides/working-with-mobx.md
+      - Working with MobX: extensions/guides/working-with-mobx.md
     - Testing and Publishing:
       - Testing Extensions: extensions/testing-and-publishing/testing.md
       - Publishing Extensions: extensions/testing-and-publishing/publishing.md