Skip to content

Commit

Permalink
add links
Browse files Browse the repository at this point in the history
  • Loading branch information
timwis committed Jul 3, 2016
1 parent 698df56 commit 5ea1cd1
Showing 1 changed file with 22 additions and 17 deletions.
39 changes: 22 additions & 17 deletions your-first-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,14 @@ familiar with a few things:

* The concept of **models** and **views** (as in MVC)
* The concept of **state** (the data your application is currently using)
* A few JavaScript features from ES6 (aka ES2015) like `const`, the [spread
operator](), [object destructuring](), [tagged template literals](), and
[property shorthand]() (But don't worry: they're optional, they don't make
it much harder to understand what's going on, and
[choo works in older browsers]())
* A few JavaScript features from ES6 (aka ES2015) like `const`, the
[spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator),
[destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment),
[tagged template strings](https://github.com/lukehoban/es6features#template-strings), and
[property shorthand](https://github.com/lukehoban/es6features#enhanced-object-literals)
(But don't worry: they're optional, they don't makeit much harder to understand
what's going on, and
[choo supports older browsers](https://github.com/yoshuawuyts/choo/#choo--internet-explorer--safari))
* Importing JavaScript modules using `require(...)`

## Rendering data
Expand Down Expand Up @@ -76,9 +79,10 @@ document.body.appendChild(tree)
```

Now we can run our application to see it in action! Normally, we'd need to bundle
the code using [browserify]() (because we use `require()`) and create an
`index.html` file that pulls in the bundle with a `<script>` tag. To save time,
we'll use [budo](), which bundles the code and runs a development server.
the code using [browserify](http://browserify.org/) (because we use `require()`)
and create an `index.html` file that pulls in the bundle with a `<script>` tag.
To save time, we'll use [budo](https://github.com/mattdesl/budo), which bundles
the code and runs a development server.

```bash
budo index.js --live --open
Expand Down Expand Up @@ -155,9 +159,10 @@ because `send()` calls the **reducer** on your **model**, which updates the
it re-renders, `state.todos` contains the new item you added.

You'll notice that this "re-render" doesn't reset the text in your `<input>`.
That's because choo uses [morphdom](), which only patches the pieces of the DOM
that have changed. That's cool, but we probably want the `<input>` to be reset in
this case. So let's touch up our `onsubmit` code a little.
That's because choo uses [morphdom](https://github.com/patrick-steele-idem/morphdom),
which only patches the pieces of the DOM that have changed. That's cool, but we
probably want the `<input>` to be reset in this case. So let's touch up our
`onsubmit` code a little.

```javascript
const view = (state, prev, send) => {
Expand Down Expand Up @@ -323,12 +328,12 @@ app.model({
})
```
In this reducer, we use [ES6 destructuring]() to create short-hand variables
from the `data` object. We create a copy of the `state.todos` array, then we
identify the item we're updating using the `index` that was passed. We then
create a copy of that item and extend it with our `updates` using
`Object.assign()`. Finally we replace the old item in the array with our new
object.
In this reducer, we use [ES6 destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
to create short-hand variables from the `data` object. We create a copy of the
`state.todos` array, then we identify the item we're updating using the `index`
that was passed. We then create a copy of that item and extend it with our
`updates` using `Object.assign()`. Finally we replace the old item in the array
with our new object.
This may seem like a lot of work relative to simply altering the state directly,
but immutability lets us compare the state across time and helps avoid bugs down
Expand Down

0 comments on commit 5ea1cd1

Please sign in to comment.