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