Fix typos in the docs

packages/docs/src/en/advanced/extending.md

@@ -168,7 +168,7 @@ Let's walk through the above code, line by line.
 let getThingToLog = evaluateLater(expression)
 ```
 
-Here, instead of immediately evaluating `message` and retreiving the result, we will convert the string expression ("message") into an actual JavaScript function that we can run at any time. If you're going to evaluate a JavaScript expression more than once, it is highly recommended to first generate a JavaScript function and use that rather than calling `evaluate()` directly. The reason being that the process to interpret a plain string as a JavaScript function is expensive and should be avoided when unnecessary.
+Here, instead of immediately evaluating `message` and retrieving the result, we will convert the string expression ("message") into an actual JavaScript function that we can run at any time. If you're going to evaluate a JavaScript expression more than once, it is highly recommended to first generate a JavaScript function and use that rather than calling `evaluate()` directly. The reason being that the process to interpret a plain string as a JavaScript function is expensive and should be avoided when unnecessary.
 
 ```js
 effect(() => {
@@ -176,7 +176,7 @@ effect(() => {
 })
 ```
 
-By passing in a callback to `effect()`, we are telling Alpine to run the callback immediately, then track any dependancies it uses (`x-data` properties like `message` in our case). Now as soon as one of the dependancies changes, this callback will be re-run. This gives us our "reactivity".
+By passing in a callback to `effect()`, we are telling Alpine to run the callback immediately, then track any dependencies it uses (`x-data` properties like `message` in our case). Now as soon as one of the dependencies changes, this callback will be re-run. This gives us our "reactivity".
 
 You may recognize this functionality from `x-effect`. It is the same mechanism under the hood.
 

packages/docs/src/en/advanced/reactivity.md

@@ -45,7 +45,7 @@ console.log(reactiveData.count) // 2
 
 What you see here is that because `reactiveData` is a thin wrapper around `data`, any attempts to get or set a property will behave exactly as if you had interacted with `data` directly.
 
-The main difference here is that any time you modify or retreive (get or set) a value from `reactiveData`, Alpine is aware of it and can execute any other logic that depends on this data.
+The main difference here is that any time you modify or retrieve (get or set) a value from `reactiveData`, Alpine is aware of it and can execute any other logic that depends on this data.
 
 `Alpine.reactive` is only the first half of the story. `Alpine.effect` is the other half, let's dig in.
 
@@ -62,7 +62,7 @@ Alpine.effect(() => {
 })
 ```
 
-When this code is firt run, "1" will be logged to the console. Any time `data.count` changes, it's value will be logged to the console again.
+When this code is first run, "1" will be logged to the console. Any time `data.count` changes, it's value will be logged to the console again.
 
 This is the mechanism that unlocks all of the reactivity at the core of Alpine.
 

packages/docs/src/en/alpine-101.md

@@ -262,7 +262,7 @@ The next bit I'd like to draw your attention to is the `items` and `filteredItem
 }
 ```
 
-The `items` property should be self-explanitory. Here we are setting the value of `items` to a JavaScript array of 3 different items (foo, bar, and baz).
+The `items` property should be self-explanatory. Here we are setting the value of `items` to a JavaScript array of 3 different items (foo, bar, and baz).
 
 The interesting part of this snippet is the `filteredItems` property.
 

packages/docs/src/en/directives/effect.md

@@ -5,7 +5,7 @@ title: effect
 
 # `x-effect`
 
-`x-effect` is a useful directive for re-evaluating an expression when one of its dependancies change. You can think of it as a watcher where you don't have to specify what property to watch, it will watch all properties used within it.
+`x-effect` is a useful directive for re-evaluating an expression when one of its dependencies change. You can think of it as a watcher where you don't have to specify what property to watch, it will watch all properties used within it.
 
 If this definition is confusing for you, that's ok. It's better explained through an example:
 

packages/docs/src/en/directives/for.md

@@ -33,7 +33,7 @@ There are two rules worth noting about `x-for`:
 <a name="keys"></a>
 ## Keys
 
-It is important to specificy keys for each `x-for` iteration if you are going to be re-ordering items. Without dynamic keys, Alpine may have a hard time keeping track of what re-orders and will cause odd side-effects.
+It is important to specify keys for each `x-for` iteration if you are going to be re-ordering items. Without dynamic keys, Alpine may have a hard time keeping track of what re-orders and will cause odd side-effects.
 
 ```html
 <ul x-data="{ colors: [