Commit badf9524f5f9e1de0c15c5d16316367bd34b53de
some more changes
Michael Williams committed on 8/5/2017, 9:57:21 AMParent: cc739adf29428df8628ea59c7c691605e3a9ae71
Files changed
| README.md | changed |
| index.html | changed |
| README.md | |||
|---|---|---|---|
| @@ -332,120 +332,111 @@ | |||
| 332 | 332 … | ### jsx | |
| 333 | 333 … | ||
| 334 | 334 … | ```js | |
| 335 | 335 … | import React from 'react' | |
| 336 … | +import classNames from 'classnames' | ||
| 336 | 337 … | ||
| 337 | -export default function ({ rows }) { | ||
| 338 | - return ( | ||
| 339 | - <Table> | ||
| 340 | - {rows.map(row => | ||
| 341 | - <Row> | ||
| 342 | - {row.map(item => | ||
| 343 | - <Item> | ||
| 344 | - {item} | ||
| 345 | - </Item> | ||
| 346 | - )} | ||
| 347 | - </Row> | ||
| 348 | - )} | ||
| 349 | - </Table> | ||
| 350 | - ) | ||
| 338 … | +export default Todos | ||
| 339 … | + | ||
| 340 … | +const Todos = ({ items }) => ( | ||
| 341 … | + <List>{items.map(item => ( | ||
| 342 … | + <Item item={item} /> | ||
| 343 … | + ))}</List> | ||
| 344 … | +) | ||
| 345 … | + | ||
| 346 … | +const List = ({ children }) => ( | ||
| 347 … | + <div className='list'>{children}</div> | ||
| 348 … | +) | ||
| 349 … | + | ||
| 350 … | +const Item = ({ item: { isActive, text } }) => { | ||
| 351 … | + const className = classNames({ | ||
| 352 … | + item: true, | ||
| 353 … | + active: isActive | ||
| 354 … | + }) | ||
| 355 … | + return <div className={className}>{text}</div> | ||
| 351 | 356 … | } | |
| 352 | 357 … | ``` | |
| 353 | 358 … | ||
| 354 | 359 … | ??? | |
| 355 | 360 … | ||
| 356 | 361 … | - made by Facebook to make React easier to use | |
| 357 | 362 … | - looks friendly on the surface, but underneath has non-obvious edge cases | |
| 358 | - - hides that React is actually `React.createElement` function calls | ||
| 363 … | + - hides that JSX is actually `React.createElement` function calls | ||
| 359 | 364 … | - "why can't i use `if () { first } else { second }`? | |
| 360 | 365 … | - can only use expressions, not statements | |
| 361 | 366 … | ||
| 362 | -```js | ||
| 363 | -function Table ({ children }) { | ||
| 364 | - return <table className='table'>{children}</table> | ||
| 365 | -} | ||
| 367 … | +--- | ||
| 366 | 368 … | ||
| 367 | -function Row ({ children }) { | ||
| 368 | - return <tr className='row'>{children}</tr> | ||
| 369 | -} | ||
| 370 | - | ||
| 371 | -function Item ({ children }) { | ||
| 372 | - return <td className='item'>{children}</td> | ||
| 373 | -}) | ||
| 374 | -``` | ||
| 375 | ---- | ||
| 376 | 369 … | class: success | |
| 377 | 370 … | ||
| 378 | 371 … | ### hyperscript | |
| 379 | 372 … | ||
| 380 | 373 … | ```js | |
| 381 | 374 … | const h = require('react-hyperscript') | |
| 375 … | +const classNames = require('classnames') | ||
| 382 | 376 … | ||
| 383 | -module.exports = Table | ||
| 377 … | +module.exports = Todos | ||
| 384 | 378 … | ||
| 385 | -function Table ({ rows ) { | ||
| 386 | - return h('table', { | ||
| 387 | - className: 'table' | ||
| 388 | - }, rows.map(row => { | ||
| 389 | - h('tr', { | ||
| 390 | - className: 'row' | ||
| 391 | - }, row.map(item => { | ||
| 392 | - h('td', { | ||
| 393 | - className: 'item' | ||
| 394 | - }, Item(item)) | ||
| 395 | - }) | ||
| 379 … | +const Todos = ({ items }) => ( | ||
| 380 … | + h(List, items.map(item => | ||
| 381 … | + h(Item, { item }) | ||
| 382 … | + )) | ||
| 383 … | +) | ||
| 384 … | + | ||
| 385 … | +const List = ({ children }) => ( | ||
| 386 … | + h('div', { className: 'list' }, children) | ||
| 387 … | +) | ||
| 388 … | + | ||
| 389 … | +const Item = ({ item: { isActive, text } }) => { | ||
| 390 … | + const className = classNames({ | ||
| 391 … | + item: true, | ||
| 392 … | + active: isActive | ||
| 396 | 393 … | }) | |
| 397 | -} | ||
| 398 | - | ||
| 394 … | + return h('div', { className }, text) | ||
| 395 … | +) | ||
| 399 | 396 … | ``` | |
| 400 | 397 … | ||
| 401 | 398 … | ??? | |
| 402 | 399 … | ||
| 400 … | +- syntax can be confusing at first | ||
| 403 | 401 … | - `React.createElement` is basically a strict hyperscript | |
| 404 | -- syntax can be confusing at first | ||
| 405 | 402 … | ||
| 406 | -```js | ||
| 407 | -function Table ({ children }) { | ||
| 408 | - return <table className='table'>{children}</table> | ||
| 409 | -} | ||
| 403 … | +see also: | ||
| 410 | 404 … | ||
| 411 | -function Row ({ children }) { | ||
| 412 | - return <tr className='row'>{children}</tr> | ||
| 413 | -} | ||
| 405 … | +- [`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers) | ||
| 406 … | + - `div`, `span`, `ul`, `li`, etc functions | ||
| 407 … | +- [`hyperx`](https://github.com/substack/hyperx) | ||
| 408 … | + - similar to JSX, but uses existing language features: tagged template literals | ||
| 414 | 409 … | ||
| 415 | -function Item ({ children }) { | ||
| 416 | - return <td className='item'>{children}</td> | ||
| 417 | -}) | ||
| 418 | -``` | ||
| 419 | - | ||
| 420 | 410 … | --- | |
| 421 | 411 … | class: success | |
| 422 | 412 … | ||
| 423 | -### hyperx | ||
| 413 … | +### React.createElement | ||
| 424 | 414 … | ||
| 425 | 415 … | ```js | |
| 426 | -const hyperx = require('hyperx') | ||
| 427 | -const React = require('react') | ||
| 428 | -const html = hyperx(React.createElement) | ||
| 416 … | +const h = require('react').createElement | ||
| 417 … | +const classNames = require('classnames') | ||
| 429 | 418 … | ||
| 430 | -module.exports = Table | ||
| 419 … | +module.exports = Todos | ||
| 431 | 420 … | ||
| 432 | -function Table ({ rows ) { | ||
| 433 | - return html`<table class='table'> | ||
| 434 | - ${rows.map(row => { | ||
| 435 | - html`<tr class='row'> | ||
| 436 | - ${row.map(item => { | ||
| 437 | - html`<td class='item'>${item}</td>` | ||
| 438 | - })} | ||
| 439 | - </tr>` | ||
| 440 | - })} | ||
| 441 | - </table>` | ||
| 442 | -} | ||
| 443 | -``` | ||
| 421 … | +const Todos = ({ items }) => ( | ||
| 422 … | + h(List, {}, items.map(item => | ||
| 423 … | + h(Item, { item }) | ||
| 424 … | + )) | ||
| 425 … | +) | ||
| 444 | 426 … | ||
| 445 | -??? | ||
| 427 … | +const List = ({ children }) => ( | ||
| 428 … | + h('div', { className: 'list' }, children) | ||
| 429 … | +) | ||
| 446 | 430 … | ||
| 447 | -- similar to JSX, but uses existing language features: tagged template string | ||
| 431 … | +const Item = ({ item: { isActive, text } }) => { | ||
| 432 … | + const className = classNames({ | ||
| 433 … | + item: true, | ||
| 434 … | + active: isActive | ||
| 435 … | + }) | ||
| 436 … | + return h('div', { className }, text) | ||
| 437 … | +) | ||
| 438 … | +``` | ||
| 448 | 439 … | ||
| 449 | 440 … | --- | |
| 450 | 441 … | class: center, info | |
| 451 | 442 … | ||
| @@ -472,8 +463,12 @@ | |||
| 472 | 463 … | ``` | |
| 473 | 464 … | ||
| 474 | 465 … | ??? | |
| 475 | 466 … | ||
| 467 … | +TODO waterfall | ||
| 468 … | + | ||
| 469 … | +parallel | ||
| 470 … | + | ||
| 476 | 471 … | ```js | |
| 477 | 472 … | module.exports = fetchCats | |
| 478 | 473 … | ||
| 479 | 474 … | function fetchCats ({ cats }) { | |
| @@ -514,19 +509,22 @@ | |||
| 514 | 509 … | ||
| 515 | 510 … | - [`continuable`](https://github.com/Raynos/continuable) | |
| 516 | 511 … | - [`cont`](https://github.com/dominictarr/cont) | |
| 517 | 512 … | ||
| 513 … | +TODO waterfall | ||
| 518 | 514 … | ||
| 515 … | +parallel | ||
| 516 … | + | ||
| 519 | 517 … | ```js | |
| 520 | 518 … | const request = require('request') | |
| 521 | 519 … | const parallel = require('run-parallel') | |
| 522 | 520 … | ||
| 523 | 521 … | module.exports = fetchCats | |
| 524 | 522 … | ||
| 525 | 523 … | function fetchCats ({ cats }) { | |
| 526 | 524 … | return callback => parallel(cats.map(cat => { | |
| 527 | - return request(cat, callback) | ||
| 528 | - })) | ||
| 525 … | + return callback => request(cat, callback) | ||
| 526 … | + }), callback) | ||
| 529 | 527 … | }) | |
| 530 | 528 … | ``` | |
| 531 | 529 … | ||
| 532 | 530 … | --- | |
| index.html | ||
|---|---|---|
| The diff is too large to show. Use a local git client to view these changes. Old file size: 900334 bytes New file size: 901141 bytes |
Built with git-ssb-web