Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5574174

Browse files 
2 parents 132d809 + 60bdcc7 commit 5574174

File tree

1 file changed

+59
-1
lines changed

1 file changed

+59
-1
lines changed

‎README.md

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,65 @@ Provides the ability to execute async bootstrapper functions within your React e
1414

1515
## Introduction
1616

17-
> Coming Soon
17+
This library is an abstraction of [`react-tree-walker`](https://github/ctrlplusb/react-tree-walker), that allows you to attach an `asyncBootstrap` member to your React components.
18+
19+
Within the `asyncBootstrap` you can do any work/bootstrapping that you like and then return a `Promise` that should resolve to either `true` (which indicates back to the bootstrapping process that it should continue down the current branch of your application in order to locate and resolve any nested `asyncBootstrap` instances), or `false` (which indicates that traversal of the current branch of your application can stop).
20+
21+
## Naive Example
22+
23+
```jsx
24+
import asyncBootstrapper from 'react-async-bootstrapper'
25+
26+
// Don't do this, do a proper imp
27+
const globalStateManager = {
28+
products: {},
29+
}
30+
31+
class Product extends Component {
32+
// 👇
33+
asyncBootstrap() {
34+
if (globalStateManager.products[this.props.productId]) {
35+
// Already have data, just return true to allow nested
36+
// asyncBootstrap instances to be located/resolved
37+
return true
38+
}
39+
40+
// Fetch our product and load up our state
41+
return fetch(`/api/products/${this.props.productId}`)
42+
.then((response) => {
43+
// store in our global state
44+
globalStateManager.products[this.props.productId] = response.json()
45+
// Indicates our desire to allow for nested asyncBootstrap instances
46+
// to be located/resolved
47+
return true
48+
})
49+
}
50+
51+
render() {
52+
const product = globalStateManager.products[this.props.productId]
53+
return (
54+
<div>
55+
{product.name} - {product.price}
56+
</div>
57+
)
58+
}
59+
}
60+
61+
const app = (
62+
<div>
63+
<h1>My favourite product</h1>
64+
<Product productId={1337} />
65+
</div>
66+
)
67+
68+
// Now for the bootstrapping/rendering process (on a client/server)
69+
asyncBootstrapper(app).then(() => {
70+
// bootstrapping complete
71+
ReactDOM.render(app, document.getElementById('app'))
72+
})
73+
```
74+
75+
Zing. You can do anything you like. And interplay with other libaries that support `react-async-bootstrapper`, such as [`react-async-component`](https://github/ctrlplusb/react-async-component) which provides code splitting support.
1876

1977
## FAQs
2078

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /