diff --git a/docs/src/components/home/NutshellSection.tsx b/docs/src/components/home/NutshellSection.tsx new file mode 100644 index 00000000..69fa0b53 --- /dev/null +++ b/docs/src/components/home/NutshellSection.tsx @@ -0,0 +1,93 @@ +import { Section } from './Section'; +import { NutshellListItem } from './NutshellListItem'; +import CodeBlock from '@theme/CodeBlock'; +import React from 'react'; +import counterSource from '!!raw-loader!../../../../mobx_examples/lib/counter/without_codegen.dart'; + +export function NutshellSection() { + return ( +
+
+ MobX is a state-management library that makes it simple to connect the + reactive data of your application with the UI (or any observer). This + wiring is completely automatic and feels very natural. As the + application-developer, you focus purely on what reactive-data needs to + be consumed without worrying about keeping the two in sync. +
+ +
+
+ + Observables store the reactive state of your application. + It will notify the associated reactions whenever the state + changes. Observables can be simple primitives like numbers, + strings, booleans to List, Map, Stream and Future. +
+ } + /> + + Actions are responsible for mutating the reactive state. + When the mutations happen, the notifications are fired + immediately, causing all the reactions to execute. An action + acts as an intentionally-named operation that changes the state + of the application. +
+ } + /> + + Reactions, as the name suggests are responsible for{' '} + reacting to the state changes. These can be anything from + a simple console log, API calls to rendering the Flutter UI. + Reaction (aka "side-effect") is the only element that can + take you out of the MobX reactivity loop. + + } + /> + + +
+ MobX Triad +
+ + +

Let's see in code...

+ + {counterSource} + + +

+ Read more about building the Counter example, using an alternative + approach, involving the mobx_codegen package. +

+ + Read more... + +
+ ); +} diff --git a/docs/src/components/home/code.mdx b/docs/src/components/home/code.mdx deleted file mode 100644 index 2dc3a4ba..00000000 --- a/docs/src/components/home/code.mdx +++ /dev/null @@ -1,58 +0,0 @@ -## The Classic Counter, in MobX - -The code below has an `observable` that tracks the count, increments using the -`increment` action and renders with an `Observer` widget (the `reaction`). - -```dart -import 'package:flutter/material.dart'; -import 'package:flutter_mobx/flutter_mobx.dart'; -import 'package:mobx/mobx.dart'; - -class SimpleCounter { - final count = Observable(0); - - void increment() { - runInAction(() => count.value++); - } -} - -class CounterView extends StatefulWidget { - const CounterView({Key? key}) : super(key: key); - - @override - CounterExampleState createState() => CounterExampleState(); -} - -class CounterExampleState extends State { - final SimpleCounter counter = SimpleCounter(); - - @override - Widget build(BuildContext context) => Scaffold( - appBar: AppBar( - backgroundColor: Colors.blue, - title: const Text('MobX Counter'), - ), - body: Center( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const Text( - 'You have pushed the button this many times:', - ), - Observer( - builder: (_) => Text( - '${counter.count.value}', - style: const TextStyle(fontSize: 40), - )), - ], - ), - ), - floatingActionButton: FloatingActionButton( - onPressed: counter.increment, - tooltip: 'Increment', - child: const Icon(Icons.add), - ), - ); -} - -``` diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index 5ad931ae..eb0eff2d 100644 --- a/docs/src/pages/index.tsx +++ b/docs/src/pages/index.tsx @@ -13,10 +13,8 @@ import { TestimonialList } from '../components/home/Testimonial'; import React from 'react'; import Layout from '@theme/Layout'; import Spline from '@splinetool/react-spline'; -import { NutshellListItem } from '../components/home/NutshellListItem'; import { Section } from '../components/home/Section'; -import CodeBlock from '@theme/CodeBlock'; -import counterSource from '!!raw-loader!../../../mobx_examples/lib/counter/without_codegen.dart'; +import { NutshellSection } from '../components/home/NutshellSection'; export default function () { return ( @@ -124,81 +122,6 @@ function BadgesSection() { ); } -function NutshellSection() { - return ( -
-
- MobX is a state-management library that makes it simple to connect the - reactive data of your application with the UI (or any observer). This - wiring is completely automatic and feels very natural. As the - application-developer, you focus purely on what reactive-data needs to - be consumed without worrying about keeping the two in sync. -
- -
-
- - Observables store the reactive state of your application. - It will notify the associated reactions whenever the state - changes. Observables can be simple primitives like numbers, - strings, booleans to List, Map, Stream and Future. -
- } - /> - - Actions are responsible for mutating the reactive state. - When the mutations happen, the notifications are fired - immediately, causing all the reactions to execute. An action - acts as an intentionally-named operation that changes the state - of the application. -
- } - /> - - Reactions, as the name suggests are responsible for{' '} - reacting to the state changes. These can be anything from - a simple console log, API calls to rendering the Flutter UI. - Reaction (aka "side-effect") is the only element that can - take you out of the MobX reactivity loop. - - } - /> - - -
- MobX Triad -
- - -

Let's see in code...

- - {counterSource} - -
- ); -} - function SponsorSection() { return (