Move Feliz before Fable in third party react recipe

Author: Larocceau

docs/recipes/javascript/third-party-react-package.md

@@ -1,60 +1,8 @@
-To use a third-party React library in a SAFE application, you need to write an F# wrapper around it. There are two ways for doing this - using [Fable.React](https://www.nuget.org/packages/Fable.React/) or using [Feliz](https://zaid-ajaj.github.io/Feliz/).
+To use a third-party React library in a SAFE application, you need to write an F# wrapper around it. There are two ways for doing this - using [Feliz](https://zaid-ajaj.github.io/Feliz/) or using [Fable.React](https://www.nuget.org/packages/Fable.React/).
 ## Prerequisites
 
 This recipe uses the [react-d3-speedometer NPM package](https://www.npmjs.com/package/react-d3-speedometer) for demonstration purposes. [Add it to your Client](../package-management/add-npm-package-to-client.md) before continuing.
 
-## Fable.React - Setup
-
-#### 1. Create a new file
-
-Create an empty file named `ReactSpeedometer.fs` in the Client project above `Index.fs` and insert the following statements at the beginning of the file.
-
-```fsharp
-module ReactSpeedometer
-
-open Fable.Core
-open Fable.Core.JsInterop
-open Fable.React
-```
-
-#### 2. Define the Props
-Prop represents the props of the React component. In this recipe, we're using [the props listed here](https://www.npmjs.com/package/react-d3-speedometer) for `react-d3-speedometer`. We model them in Fable.React using a discriminated union.
-
-```fsharp
-type Prop =
-    | Value of int
-    | MinValue of int
-    | MaxValue of int 
-    | StartColor of string
-```
-
-> One difference to note is that we use **P**ascalCase rather than **c**amelCase.
->
-> Note that we can model any props here, both simple values and "event handler"-style ones.
-
-#### 3. Write the Component
-Add the following function to the file. Note that the last argument passed into the `ofImport` function is a list of `ReactElements` to be used as children of the react component. In this case, we are passing an empty list since the component doesn't have children.
-
-```fsharp
-let reactSpeedometer (props : Prop list) : ReactElement =
-    let propsObject = keyValueList CaseRules.LowerFirst props // converts Props to JS object
-    ofImport "default" "react-d3-speedometer" propsObject [] // import the default function/object from react-d3-speedometer
-```
-
-#### 4. Use the Component
-With all these in place, you can use the React element in your client like so:
-
-```fsharp
-open ReactSpeedometer
-
-reactSpeedometer [
-    Prop.Value 10 // Since Value is already decalred in HTMLAttr you can use Prop.Value to tell the F# compiler its of type Prop and not HTMLAttr
-    MaxValue 100
-    MinValue 0 
-    StartColor "red"
-    ]
-```
-
 ## Feliz - Setup
 
 If you don't already have [Feliz](https://www.nuget.org/packages/Feliz/) installed, [add it to your client](../ui/add-feliz.md).
@@ -108,5 +56,54 @@ That's the bare minimum needed to get going!
 Once your component is working you may want to extract out the logic so that it can be used in multiple pages of your app.
 For a full detailed tutorial head over to [this blog post](https://www.compositional-it.com/news-blog/f-wrappers-for-react-components/)!
 
+## Fable.React - Setup
+
+#### 1. Create a new file
+
+Create an empty file named `ReactSpeedometer.fs` in the Client project above `Index.fs` and insert the following statements at the beginning of the file.
+
+```fsharp
+module ReactSpeedometer
+
+open Fable.Core
+open Fable.Core.JsInterop
+open Fable.React
+```
+
+#### 2. Define the Props
+Prop represents the props of the React component. In this recipe, we're using [the props listed here](https://www.npmjs.com/package/react-d3-speedometer) for `react-d3-speedometer`. We model them in Fable.React using a discriminated union.
+
+```fsharp
+type Prop =
+    | Value of int
+    | MinValue of int
+    | MaxValue of int 
+    | StartColor of string
+```
+
+> One difference to note is that we use **P**ascalCase rather than **c**amelCase.
+>
+> Note that we can model any props here, both simple values and "event handler"-style ones.
 
+#### 3. Write the Component
+Add the following function to the file. Note that the last argument passed into the `ofImport` function is a list of `ReactElements` to be used as children of the react component. In this case, we are passing an empty list since the component doesn't have children.
+
+```fsharp
+let reactSpeedometer (props : Prop list) : ReactElement =
+    let propsObject = keyValueList CaseRules.LowerFirst props // converts Props to JS object
+    ofImport "default" "react-d3-speedometer" propsObject [] // import the default function/object from react-d3-speedometer
+```
 
+#### 4. Use the Component
+With all these in place, you can use the React element in your client like so:
+
+```fsharp
+open ReactSpeedometer
+
+reactSpeedometer [
+    Prop.Value 10 // Since Value is already decalred in HTMLAttr you can use Prop.Value to tell the F# compiler its of type Prop and not HTMLAttr
+    MaxValue 100
+    MinValue 0 
+    StartColor "red"
+    ]
+```