UNPKG

13.9 kBHTMLView Raw
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 &amp; 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 <!-- Actions Left -->
228
229
230 <!-- Title -->
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 &amp; data-fetching for universal React applications.</p>
246</blockquote>
247<p>React Resolver lets you <strong>define data requirements <em>per-component</em></strong>
248and will <strong>handle the nested, async rendering on both the server &amp; client for you.</strong></p>
249<p>For example, the following will load &amp; 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">&quot;react-resolver&quot;</span>;
252
253@resolve(<span class="hljs-string">&quot;user&quot;</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
264the component as if it were provided directly:</p>
265<pre><code class="lang-xml"><span class="hljs-tag">&lt;<span class="hljs-title">UserProfile</span> <span class="hljs-attribute">user</span>=<span class="hljs-value">{user}</span> /&gt;</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&amp;utm_medium=badge&amp;utm_campaign=pr-badge&amp;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&apos;t have native <code>Promise</code> support,
273install <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&apos;d like to contribute to this project, all you need to do is clone
288this 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
308with or without fee is hereby granted, provided that the above copyright notice
309and this permission notice appear in all copies.</p>
310<p>THE SOFTWARE IS PROVIDED &quot;AS IS&quot; AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
311REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
312FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
313INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
314OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
315TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
316THIS 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>
356require(["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>