1 | <!DOCTYPE HTML>
|
2 | <html lang="en" >
|
3 |
|
4 | <head>
|
5 |
|
6 | <meta charset="UTF-8">
|
7 | <meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
8 | <title>README | React Resolver https://img.shields.io/npm/v/react-resolver.svg </title>
|
9 | <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
10 | <meta name="description" content="Async-rendering & data-fetching for universal React applications.">
|
11 | <meta name="generator" content="GitBook 2.6.7">
|
12 |
|
13 |
|
14 | <meta name="HandheldFriendly" content="true"/>
|
15 | <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
16 | <meta name="apple-mobile-web-app-capable" content="yes">
|
17 | <meta name="apple-mobile-web-app-status-bar-style" content="black">
|
18 | <link rel="apple-touch-icon-precomposed" sizes="152x152" href="gitbook/images/apple-touch-icon-precomposed-152.png">
|
19 | <link rel="shortcut icon" href="gitbook/images/favicon.ico" type="image/x-icon">
|
20 |
|
21 | <link rel="stylesheet" href="gitbook/style.css">
|
22 |
|
23 |
|
24 | <link rel="stylesheet" href="gitbook/plugins/gitbook-plugin-highlight/website.css">
|
25 |
|
26 |
|
27 |
|
28 | <link rel="stylesheet" href="gitbook/plugins/gitbook-plugin-search/search.css">
|
29 |
|
30 |
|
31 |
|
32 | <link rel="stylesheet" href="gitbook/plugins/gitbook-plugin-fontsettings/website.css">
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 | <link rel="next" href="./docs/introduction/Motivation.html" />
|
41 |
|
42 |
|
43 |
|
44 |
|
45 | </head>
|
46 | <body>
|
47 |
|
48 |
|
49 | <div class="book"
|
50 | data-level="0"
|
51 | data-chapter-title="README"
|
52 | data-filepath="README.md"
|
53 | data-basepath="."
|
54 | data-revision="Tue Mar 01 2016 10:13:08 GMT-0800 (PST)"
|
55 | data-innerlanguage="">
|
56 |
|
57 |
|
58 | <div class="book-summary">
|
59 | <nav role="navigation">
|
60 | <ul class="summary">
|
61 |
|
62 |
|
63 |
|
64 |
|
65 |
|
66 |
|
67 |
|
68 |
|
69 |
|
70 | <li class="chapter active" data-level="0" data-path="index.html">
|
71 |
|
72 |
|
73 | <a href="./index.html">
|
74 |
|
75 | <i class="fa fa-check"></i>
|
76 |
|
77 | README
|
78 | </a>
|
79 |
|
80 |
|
81 | </li>
|
82 |
|
83 | <li class="chapter " data-level="1" data-path="docs/introduction.html">
|
84 |
|
85 | <span><b>1.</b> Introduction</span>
|
86 |
|
87 |
|
88 | <ul class="articles">
|
89 |
|
90 |
|
91 | <li class="chapter " data-level="1.1" data-path="docs/introduction/Motivation.html">
|
92 |
|
93 |
|
94 | <a href="./docs/introduction/Motivation.html">
|
95 |
|
96 | <i class="fa fa-check"></i>
|
97 |
|
98 | <b>1.1.</b>
|
99 |
|
100 | Motivation
|
101 | </a>
|
102 |
|
103 |
|
104 | </li>
|
105 |
|
106 | <li class="chapter " data-level="1.2" data-path="docs/inroduction/UniversalArchitecture.html">
|
107 |
|
108 | <span><b>1.2.</b> Universal Architecture</span>
|
109 |
|
110 |
|
111 | </li>
|
112 |
|
113 | <li class="chapter " data-level="1.3" data-path="docs/introduction/SimilarProjects.html">
|
114 |
|
115 | <span><b>1.3.</b> Similar Projects</span>
|
116 |
|
117 |
|
118 | </li>
|
119 |
|
120 |
|
121 | </ul>
|
122 |
|
123 | </li>
|
124 |
|
125 | <li class="chapter " data-level="2" data-path="docs/getting-started.html">
|
126 |
|
127 | <span><b>2.</b> Getting Started</span>
|
128 |
|
129 |
|
130 | <ul class="articles">
|
131 |
|
132 |
|
133 | <li class="chapter " data-level="2.1" data-path="docs/getting-started/DecoratingComponents.html">
|
134 |
|
135 |
|
136 | <a href="./docs/getting-started/DecoratingComponents.html">
|
137 |
|
138 | <i class="fa fa-check"></i>
|
139 |
|
140 | <b>2.1.</b>
|
141 |
|
142 | Decorating Components
|
143 | </a>
|
144 |
|
145 |
|
146 | </li>
|
147 |
|
148 | <li class="chapter " data-level="2.2" data-path="docs/getting-started/ClientRendering.html">
|
149 |
|
150 |
|
151 | <a href="./docs/getting-started/ClientRendering.html">
|
152 |
|
153 | <i class="fa fa-check"></i>
|
154 |
|
155 | <b>2.2.</b>
|
156 |
|
157 | Client Rendering
|
158 | </a>
|
159 |
|
160 |
|
161 | </li>
|
162 |
|
163 | <li class="chapter " data-level="2.3" data-path="docs/getting-started/ServerRendering.html">
|
164 |
|
165 |
|
166 | <a href="./docs/getting-started/ServerRendering.html">
|
167 |
|
168 | <i class="fa fa-check"></i>
|
169 |
|
170 | <b>2.3.</b>
|
171 |
|
172 | Server Rendering
|
173 | </a>
|
174 |
|
175 |
|
176 | </li>
|
177 |
|
178 |
|
179 | </ul>
|
180 |
|
181 | </li>
|
182 |
|
183 | <li class="chapter " data-level="3" data-path="docs/api.html">
|
184 |
|
185 | <span><b>3.</b> API Reference</span>
|
186 |
|
187 |
|
188 | <ul class="articles">
|
189 |
|
190 |
|
191 | <li class="chapter " data-level="3.1" data-path="docs/api/Client.html">
|
192 |
|
193 | <span><b>3.1.</b> client</span>
|
194 |
|
195 |
|
196 | </li>
|
197 |
|
198 |
|
199 | </ul>
|
200 |
|
201 | </li>
|
202 |
|
203 | <li class="chapter " data-level="4" data-path="docs/Troubleshooting.html">
|
204 |
|
205 | <span><b>4.</b> Troubleshooting</span>
|
206 |
|
207 |
|
208 | </li>
|
209 |
|
210 |
|
211 |
|
212 |
|
213 | <li class="divider"></li>
|
214 | <li>
|
215 | <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
|
216 | Published with GitBook
|
217 | </a>
|
218 | </li>
|
219 |
|
220 | </ul>
|
221 | </nav>
|
222 | </div>
|
223 |
|
224 | <div class="book-body">
|
225 | <div class="body-inner">
|
226 | <div class="book-header" role="navigation">
|
227 |
|
228 |
|
229 |
|
230 |
|
231 | <h1>
|
232 | <i class="fa fa-circle-o-notch fa-spin"></i>
|
233 | <a href="./" >React Resolver https://img.shields.io/npm/v/react-resolver.svg </a>
|
234 | </h1>
|
235 | </div>
|
236 |
|
237 | <div class="page-wrapper" tabindex="-1" role="main">
|
238 | <div class="page-inner">
|
239 |
|
240 |
|
241 | <section class="normal" id="section-">
|
242 |
|
243 | <h1 id="react-resolver----">React Resolver <img src="https://img.shields.io/npm/v/react-resolver.svg?style=flat-square" alt="https://img.shields.io/npm/v/react-resolver.svg"> <a href="https://github.com/ericclemmons/react-resolver/issues" target="_blank"><img src="https://img.shields.io/github/issues-raw/ericclemmons/react-resolver.svg?style=flat-square" alt=""></a> <a href="https://travis-ci.org/ericclemmons/react-resolver" target="_blank"><img src="https://img.shields.io/travis/ericclemmons/react-resolver/master.svg?style=flat-square" alt=""></a> <a href="https://david-dm.org/ericclemmons/react-resolver#info=dependencies" target="_blank"><img src="https://img.shields.io/david/ericclemmons/react-resolver.svg?style=flat-square" alt=""></a></h1>
|
244 | <blockquote>
|
245 | <p>Async-rendering & data-fetching for universal React applications.</p>
|
246 | </blockquote>
|
247 | <p>React Resolver lets you <strong>define data requirements <em>per-component</em></strong>
|
248 | and will <strong>handle the nested, async rendering on both the server & client for you.</strong></p>
|
249 | <p>For example, the following will load & provide <code>this.props.user</code> for the
|
250 | <code>UserProfile</code> component:</p>
|
251 | <pre><code class="lang-js"><span class="hljs-keyword">import</span> { resolve } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-resolver"</span>;
|
252 |
|
253 | @resolve(<span class="hljs-string">"user"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">props</span>) </span>{
|
254 | <span class="hljs-keyword">return</span> http.get(<span class="hljs-string">`/api/users/<span class="hljs-subst">${props.params.userId}</span>`</span>);
|
255 | })
|
256 | <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">UserProfile</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
|
257 | render() {
|
258 | <span class="hljs-keyword">const</span> { user } = <span class="hljs-keyword">this</span>.props;
|
259 | ...
|
260 | }
|
261 | }
|
262 | </code></pre>
|
263 | <p>This is the equivalent to asynchronously loading <code>user</code> and providing it to
|
264 | the component as if it were provided directly:</p>
|
265 | <pre><code class="lang-xml"><span class="hljs-tag"><<span class="hljs-title">UserProfile</span> <span class="hljs-attribute">user</span>=<span class="hljs-value">{user}</span> /></span>
|
266 | </code></pre>
|
267 | <p>This makes components <em>pure</em>, <em>stateless</em>, and <em>easy to test</em> as a result.</p>
|
268 | <p><a href="http://www.reactiflux.com" target="_blank"><img src="https://img.shields.io/badge/slack-@react--resolver-61DAFB.svg?style=flat-square" alt=""></a>
|
269 | <a href="https://gitter.im/ericclemmons/react-resolver?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge" target="_blank"><img src="https://img.shields.io/badge/GITTER-join%20chat-green.svg?style=flat-square" alt=""></a></p>
|
270 | <hr>
|
271 | <h3 id="installation">Installation</h3>
|
272 | <p><em>For environments that don't have native <code>Promise</code> support,
|
273 | install <a href="https://github.com/jakearchibald/es6-promise" target="_blank">ES6 Promise</a>.</em></p>
|
274 | <pre><code class="lang-shell">$ npm install --save react-resolver
|
275 | </code></pre>
|
276 | <h2 id="documentation">Documentation</h2>
|
277 | <p>Complete documentation can be found here:</p>
|
278 | <blockquote>
|
279 | <p><a href="http://ericclemmons.github.io/react-resolver/" target="_blank">http://ericclemmons.github.io/react-resolver/</a></p>
|
280 | </blockquote>
|
281 | <ul>
|
282 | <li><a href="docs/introduction">Introduction</a></li>
|
283 | <li><a href="docs/getting-started">Getting Started</a></li>
|
284 | </ul>
|
285 | <hr>
|
286 | <h2 id="development">Development</h2>
|
287 | <p>If you'd like to contribute to this project, all you need to do is clone
|
288 | this project and run:</p>
|
289 | <pre><code class="lang-shell">$ npm install
|
290 | $ npm test
|
291 | </code></pre>
|
292 | <h2 id="contributors"><a href="https://github.com/ericclemmons/react-resolver/graphs/contributors" target="_blank">Contributors</a></h2>
|
293 | <ul>
|
294 | <li><a href="mailto:eric@smarterspam.com" target="_blank">Eric Clemmons</a> (<a href="https://twitter.com/ericclemmons/" target="_blank">@ericclemmons</a>)</li>
|
295 | <li><a href="https://github.com/srph" target="_blank">Kier Borromeo</a></li>
|
296 | <li><a href="https://github.com/iamdustan" target="_blank">Dustan Kasten</a></li>
|
297 | <li><a href="https://github.com/adri" target="_blank">Adrian Philipp</a></li>
|
298 | <li><a href="https://github.com/Daniel15" target="_blank">Daniel Lo Nigro</a></li>
|
299 | <li><a href="https://github.com/bioball" target="_blank">Daniel Chao</a></li>
|
300 | <li><a href="https://github.com/frederickfogerty" target="_blank">Frederick Fogerty</a></li>
|
301 | <li><a href="https://github.com/goatslacker" target="_blank">Josh Perez</a></li>
|
302 | </ul>
|
303 | <h2 id="license"><a href="https://github.com/ericclemmons/react-resolver/blob/master/LICENSE" target="_blank">License</a></h2>
|
304 | <blockquote>
|
305 | <h1 id="internet-systems-consortium-license">Internet Systems Consortium license</h1>
|
306 | <p>Copyright (c) 2015 Eric Clemmons</p>
|
307 | <p>Permission to use, copy, modify, and/or distribute this software for any purpose
|
308 | with or without fee is hereby granted, provided that the above copyright notice
|
309 | and this permission notice appear in all copies.</p>
|
310 | <p>THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
311 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
|
312 | FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
313 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
|
314 | OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
|
315 | TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
|
316 | THIS SOFTWARE.</p>
|
317 | </blockquote>
|
318 | <h2 id="collaboration">Collaboration</h2>
|
319 | <p>If you have questions or issues, please <a href="https://github.com/ericclemmons/react-resolver/issues/new" target="_blank">open an issue</a>!</p>
|
320 |
|
321 |
|
322 | </section>
|
323 |
|
324 |
|
325 | </div>
|
326 | </div>
|
327 | </div>
|
328 |
|
329 |
|
330 |
|
331 | <a href="./docs/introduction/Motivation.html" class="navigation navigation-next navigation-unique" aria-label="Next page: Motivation"><i class="fa fa-angle-right"></i></a>
|
332 |
|
333 | </div>
|
334 | </div>
|
335 |
|
336 |
|
337 | <script src="gitbook/app.js"></script>
|
338 |
|
339 |
|
340 | <script src="gitbook/plugins/gitbook-plugin-search/lunr.min.js"></script>
|
341 |
|
342 |
|
343 |
|
344 | <script src="gitbook/plugins/gitbook-plugin-search/search.js"></script>
|
345 |
|
346 |
|
347 |
|
348 | <script src="gitbook/plugins/gitbook-plugin-sharing/buttons.js"></script>
|
349 |
|
350 |
|
351 |
|
352 | <script src="gitbook/plugins/gitbook-plugin-fontsettings/buttons.js"></script>
|
353 |
|
354 |
|
355 | <script>
|
356 | require(["gitbook"], function(gitbook) {
|
357 | var config = {"fontSettings":{"family":"sans"},"include":{},"include-highlight":{},"todo":{},"highlight":{},"search":{"maxIndexSize":1000000},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2}};
|
358 | gitbook.start(config);
|
359 | });
|
360 | </script>
|
361 |
|
362 |
|
363 | </body>
|
364 |
|
365 | </html>
|