├── .gitignore
├── CONTRIBUTING.md
├── LICENSE.txt
├── READINGS.md
├── README.md
├── SUMMARY.md
├── anti-patterns
├── 01.props-in-initial-state.md
├── 02.findDOMNode.md
├── 03.mixins.md
├── 04.setState-in-componentWillMount.md
├── 05.mutating-state.md
├── 06.using-indexes-as-key.md
├── 07.spreading-props-dom.md
└── README.md
├── book.json
├── coding-style
└── README.md
├── gotchas
├── 01.pure-render-checks.md
├── 02.synthetic-events.md
└── README.md
├── package.json
├── patterns
├── 1.conditionals-in-jsx.md
├── 10.passing-function-to-setState.md
├── 11.decorators.md
├── 12.feature-flags-using-redux.md
├── 13.component-switch.md
├── 14.reaching-into-a-component.md
├── 15.list-components.md
├── 16.format-text-via-component.md
├── 17.react-fragments.md
├── 18.share-tracking-logic.md
├── 2.async-nature-of-setState.md
├── 3.dependency-injection.md
├── 4.context-wrapper.md
├── 5.event-handlers.md
├── 6.flux-pattern.md
├── 7.one-way-data-flow.md
├── 8.presentational-vs-container.md
└── 9.third-party-integration.md
├── perf-tips
├── 01.shouldComponentUpdate-check.md
├── 02.pure-component.md
├── 03.reselect.md
└── README.md
├── styling
├── 01.stateless-ui-components.md
├── 02.styles-module.md
├── 03.style-functions.md
├── 04.using-npm-modules.md
├── 05.base-component.md
├── 06.layout-component.md
├── 07.typography-component.md
├── 08.HOC-for-styling.md
└── README.md
└── ux-variations
├── 01.composing-variations.md
├── 02.toggle-ui-elements.md
├── 03.HOC-feature-toggles.md
├── 04.HOC-props-proxy.md
├── 05.wrapper-components.md
├── 06.display-order-variations.md
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | _book
2 | node_modules
3 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | > Your contributions are heartily ♡ welcome. (✿◠‿◠)
2 |
--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
1 | Creative Commons Attribution 4.0 International
2 |
3 | =======================================================================
4 |
5 | Creative Commons Corporation ("Creative Commons") is not a law firm and
6 | does not provide legal services or legal advice. Distribution of
7 | Creative Commons public licenses does not create a lawyer-client or
8 | other relationship. Creative Commons makes its licenses and related
9 | information available on an "as-is" basis. Creative Commons gives no
10 | warranties regarding its licenses, any material licensed under their
11 | terms and conditions, or any related information. Creative Commons
12 | disclaims all liability for damages resulting from their use to the
13 | fullest extent possible.
14 |
15 | Using Creative Commons Public Licenses
16 |
17 | Creative Commons public licenses provide a standard set of terms and
18 | conditions that creators and other rights holders may use to share
19 | original works of authorship and other material subject to copyright
20 | and certain other rights specified in the public license below. The
21 | following considerations are for informational purposes only, are not
22 | exhaustive, and do not form part of our licenses.
23 |
24 | Considerations for licensors: Our public licenses are
25 | intended for use by those authorized to give the public
26 | permission to use material in ways otherwise restricted by
27 | copyright and certain other rights. Our licenses are
28 | irrevocable. Licensors should read and understand the terms
29 | and conditions of the license they choose before applying it.
30 | Licensors should also secure all rights necessary before
31 | applying our licenses so that the public can reuse the
32 | material as expected. Licensors should clearly mark any
33 | material not subject to the license. This includes other CC-
34 | licensed material, or material used under an exception or
35 | limitation to copyright. More considerations for licensors:
36 | wiki.creativecommons.org/Considerations_for_licensors
37 |
38 | Considerations for the public: By using one of our public
39 | licenses, a licensor grants the public permission to use the
40 | licensed material under specified terms and conditions. If
41 | the licensor's permission is not necessary for any reason--for
42 | example, because of any applicable exception or limitation to
43 | copyright--then that use is not regulated by the license. Our
44 | licenses grant only permissions under copyright and certain
45 | other rights that a licensor has authority to grant. Use of
46 | the licensed material may still be restricted for other
47 | reasons, including because others have copyright or other
48 | rights in the material. A licensor may make special requests,
49 | such as asking that all changes be marked or described.
50 | Although not required by our licenses, you are encouraged to
51 | respect those requests where reasonable. More_considerations
52 | for the public:
53 | wiki.creativecommons.org/Considerations_for_licensees
54 |
55 | =======================================================================
56 |
57 | Creative Commons Attribution 4.0 International Public License
58 |
59 | By exercising the Licensed Rights (defined below), You accept and agree
60 | to be bound by the terms and conditions of this Creative Commons
61 | Attribution 4.0 International Public License ("Public License"). To the
62 | extent this Public License may be interpreted as a contract, You are
63 | granted the Licensed Rights in consideration of Your acceptance of
64 | these terms and conditions, and the Licensor grants You such rights in
65 | consideration of benefits the Licensor receives from making the
66 | Licensed Material available under these terms and conditions.
67 |
68 |
69 | Section 1 -- Definitions.
70 |
71 | a. Adapted Material means material subject to Copyright and Similar
72 | Rights that is derived from or based upon the Licensed Material
73 | and in which the Licensed Material is translated, altered,
74 | arranged, transformed, or otherwise modified in a manner requiring
75 | permission under the Copyright and Similar Rights held by the
76 | Licensor. For purposes of this Public License, where the Licensed
77 | Material is a musical work, performance, or sound recording,
78 | Adapted Material is always produced where the Licensed Material is
79 | synched in timed relation with a moving image.
80 |
81 | b. Adapter's License means the license You apply to Your Copyright
82 | and Similar Rights in Your contributions to Adapted Material in
83 | accordance with the terms and conditions of this Public License.
84 |
85 | c. Copyright and Similar Rights means copyright and/or similar rights
86 | closely related to copyright including, without limitation,
87 | performance, broadcast, sound recording, and Sui Generis Database
88 | Rights, without regard to how the rights are labeled or
89 | categorized. For purposes of this Public License, the rights
90 | specified in Section 2(b)(1)-(2) are not Copyright and Similar
91 | Rights.
92 |
93 | d. Effective Technological Measures means those measures that, in the
94 | absence of proper authority, may not be circumvented under laws
95 | fulfilling obligations under Article 11 of the WIPO Copyright
96 | Treaty adopted on December 20, 1996, and/or similar international
97 | agreements.
98 |
99 | e. Exceptions and Limitations means fair use, fair dealing, and/or
100 | any other exception or limitation to Copyright and Similar Rights
101 | that applies to Your use of the Licensed Material.
102 |
103 | f. Licensed Material means the artistic or literary work, database,
104 | or other material to which the Licensor applied this Public
105 | License.
106 |
107 | g. Licensed Rights means the rights granted to You subject to the
108 | terms and conditions of this Public License, which are limited to
109 | all Copyright and Similar Rights that apply to Your use of the
110 | Licensed Material and that the Licensor has authority to license.
111 |
112 | h. Licensor means the individual(s) or entity(ies) granting rights
113 | under this Public License.
114 |
115 | i. Share means to provide material to the public by any means or
116 | process that requires permission under the Licensed Rights, such
117 | as reproduction, public display, public performance, distribution,
118 | dissemination, communication, or importation, and to make material
119 | available to the public including in ways that members of the
120 | public may access the material from a place and at a time
121 | individually chosen by them.
122 |
123 | j. Sui Generis Database Rights means rights other than copyright
124 | resulting from Directive 96/9/EC of the European Parliament and of
125 | the Council of 11 March 1996 on the legal protection of databases,
126 | as amended and/or succeeded, as well as other essentially
127 | equivalent rights anywhere in the world.
128 |
129 | k. You means the individual or entity exercising the Licensed Rights
130 | under this Public License. Your has a corresponding meaning.
131 |
132 |
133 | Section 2 -- Scope.
134 |
135 | a. License grant.
136 |
137 | 1. Subject to the terms and conditions of this Public License,
138 | the Licensor hereby grants You a worldwide, royalty-free,
139 | non-sublicensable, non-exclusive, irrevocable license to
140 | exercise the Licensed Rights in the Licensed Material to:
141 |
142 | a. reproduce and Share the Licensed Material, in whole or
143 | in part; and
144 |
145 | b. produce, reproduce, and Share Adapted Material.
146 |
147 | 2. Exceptions and Limitations. For the avoidance of doubt, where
148 | Exceptions and Limitations apply to Your use, this Public
149 | License does not apply, and You do not need to comply with
150 | its terms and conditions.
151 |
152 | 3. Term. The term of this Public License is specified in Section
153 | 6(a).
154 |
155 | 4. Media and formats; technical modifications allowed. The
156 | Licensor authorizes You to exercise the Licensed Rights in
157 | all media and formats whether now known or hereafter created,
158 | and to make technical modifications necessary to do so. The
159 | Licensor waives and/or agrees not to assert any right or
160 | authority to forbid You from making technical modifications
161 | necessary to exercise the Licensed Rights, including
162 | technical modifications necessary to circumvent Effective
163 | Technological Measures. For purposes of this Public License,
164 | simply making modifications authorized by this Section 2(a)
165 | (4) never produces Adapted Material.
166 |
167 | 5. Downstream recipients.
168 |
169 | a. Offer from the Licensor -- Licensed Material. Every
170 | recipient of the Licensed Material automatically
171 | receives an offer from the Licensor to exercise the
172 | Licensed Rights under the terms and conditions of this
173 | Public License.
174 |
175 | b. No downstream restrictions. You may not offer or impose
176 | any additional or different terms or conditions on, or
177 | apply any Effective Technological Measures to, the
178 | Licensed Material if doing so restricts exercise of the
179 | Licensed Rights by any recipient of the Licensed
180 | Material.
181 |
182 | 6. No endorsement. Nothing in this Public License constitutes or
183 | may be construed as permission to assert or imply that You
184 | are, or that Your use of the Licensed Material is, connected
185 | with, or sponsored, endorsed, or granted official status by,
186 | the Licensor or others designated to receive attribution as
187 | provided in Section 3(a)(1)(A)(i).
188 |
189 | b. Other rights.
190 |
191 | 1. Moral rights, such as the right of integrity, are not
192 | licensed under this Public License, nor are publicity,
193 | privacy, and/or other similar personality rights; however, to
194 | the extent possible, the Licensor waives and/or agrees not to
195 | assert any such rights held by the Licensor to the limited
196 | extent necessary to allow You to exercise the Licensed
197 | Rights, but not otherwise.
198 |
199 | 2. Patent and trademark rights are not licensed under this
200 | Public License.
201 |
202 | 3. To the extent possible, the Licensor waives any right to
203 | collect royalties from You for the exercise of the Licensed
204 | Rights, whether directly or through a collecting society
205 | under any voluntary or waivable statutory or compulsory
206 | licensing scheme. In all other cases the Licensor expressly
207 | reserves any right to collect such royalties.
208 |
209 |
210 | Section 3 -- License Conditions.
211 |
212 | Your exercise of the Licensed Rights is expressly made subject to the
213 | following conditions.
214 |
215 | a. Attribution.
216 |
217 | 1. If You Share the Licensed Material (including in modified
218 | form), You must:
219 |
220 | a. retain the following if it is supplied by the Licensor
221 | with the Licensed Material:
222 |
223 | i. identification of the creator(s) of the Licensed
224 | Material and any others designated to receive
225 | attribution, in any reasonable manner requested by
226 | the Licensor (including by pseudonym if
227 | designated);
228 |
229 | ii. a copyright notice;
230 |
231 | iii. a notice that refers to this Public License;
232 |
233 | iv. a notice that refers to the disclaimer of
234 | warranties;
235 |
236 | v. a URI or hyperlink to the Licensed Material to the
237 | extent reasonably practicable;
238 |
239 | b. indicate if You modified the Licensed Material and
240 | retain an indication of any previous modifications; and
241 |
242 | c. indicate the Licensed Material is licensed under this
243 | Public License, and include the text of, or the URI or
244 | hyperlink to, this Public License.
245 |
246 | 2. You may satisfy the conditions in Section 3(a)(1) in any
247 | reasonable manner based on the medium, means, and context in
248 | which You Share the Licensed Material. For example, it may be
249 | reasonable to satisfy the conditions by providing a URI or
250 | hyperlink to a resource that includes the required
251 | information.
252 |
253 | 3. If requested by the Licensor, You must remove any of the
254 | information required by Section 3(a)(1)(A) to the extent
255 | reasonably practicable.
256 |
257 | 4. If You Share Adapted Material You produce, the Adapter's
258 | License You apply must not prevent recipients of the Adapted
259 | Material from complying with this Public License.
260 |
261 |
262 | Section 4 -- Sui Generis Database Rights.
263 |
264 | Where the Licensed Rights include Sui Generis Database Rights that
265 | apply to Your use of the Licensed Material:
266 |
267 | a. for the avoidance of doubt, Section 2(a)(1) grants You the right
268 | to extract, reuse, reproduce, and Share all or a substantial
269 | portion of the contents of the database;
270 |
271 | b. if You include all or a substantial portion of the database
272 | contents in a database in which You have Sui Generis Database
273 | Rights, then the database in which You have Sui Generis Database
274 | Rights (but not its individual contents) is Adapted Material; and
275 |
276 | c. You must comply with the conditions in Section 3(a) if You Share
277 | all or a substantial portion of the contents of the database.
278 |
279 | For the avoidance of doubt, this Section 4 supplements and does not
280 | replace Your obligations under this Public License where the Licensed
281 | Rights include other Copyright and Similar Rights.
282 |
283 |
284 | Section 5 -- Disclaimer of Warranties and Limitation of Liability.
285 |
286 | a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
287 | EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
288 | AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
289 | ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
290 | IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
291 | WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
292 | PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
293 | ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
294 | KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
295 | ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
296 |
297 | b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
298 | TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
299 | NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
300 | INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
301 | COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
302 | USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
303 | ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
304 | DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
305 | IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
306 |
307 | c. The disclaimer of warranties and limitation of liability provided
308 | above shall be interpreted in a manner that, to the extent
309 | possible, most closely approximates an absolute disclaimer and
310 | waiver of all liability.
311 |
312 |
313 | Section 6 -- Term and Termination.
314 |
315 | a. This Public License applies for the term of the Copyright and
316 | Similar Rights licensed here. However, if You fail to comply with
317 | this Public License, then Your rights under this Public License
318 | terminate automatically.
319 |
320 | b. Where Your right to use the Licensed Material has terminated under
321 | Section 6(a), it reinstates:
322 |
323 | 1. automatically as of the date the violation is cured, provided
324 | it is cured within 30 days of Your discovery of the
325 | violation; or
326 |
327 | 2. upon express reinstatement by the Licensor.
328 |
329 | For the avoidance of doubt, this Section 6(b) does not affect any
330 | right the Licensor may have to seek remedies for Your violations
331 | of this Public License.
332 |
333 | c. For the avoidance of doubt, the Licensor may also offer the
334 | Licensed Material under separate terms or conditions or stop
335 | distributing the Licensed Material at any time; however, doing so
336 | will not terminate this Public License.
337 |
338 | d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
339 | License.
340 |
341 |
342 | Section 7 -- Other Terms and Conditions.
343 |
344 | a. The Licensor shall not be bound by any additional or different
345 | terms or conditions communicated by You unless expressly agreed.
346 |
347 | b. Any arrangements, understandings, or agreements regarding the
348 | Licensed Material not stated herein are separate from and
349 | independent of the terms and conditions of this Public License.
350 |
351 |
352 | Section 8 -- Interpretation.
353 |
354 | a. For the avoidance of doubt, this Public License does not, and
355 | shall not be interpreted to, reduce, limit, restrict, or impose
356 | conditions on any use of the Licensed Material that could lawfully
357 | be made without permission under this Public License.
358 |
359 | b. To the extent possible, if any provision of this Public License is
360 | deemed unenforceable, it shall be automatically reformed to the
361 | minimum extent necessary to make it enforceable. If the provision
362 | cannot be reformed, it shall be severed from this Public License
363 | without affecting the enforceability of the remaining terms and
364 | conditions.
365 |
366 | c. No term or condition of this Public License will be waived and no
367 | failure to comply consented to unless expressly agreed to by the
368 | Licensor.
369 |
370 | d. Nothing in this Public License constitutes or may be interpreted
371 | as a limitation upon, or waiver of, any privileges and immunities
372 | that apply to the Licensor or You, including from the legal
373 | processes of any jurisdiction or authority.
374 |
375 |
376 | =======================================================================
377 |
378 | Creative Commons is not a party to its public licenses.
379 | Notwithstanding, Creative Commons may elect to apply one of its public
380 | licenses to material it publishes and in those instances will be
381 | considered the "Licensor." Except for the limited purpose of indicating
382 | that material is shared under a Creative Commons public license or as
383 | otherwise permitted by the Creative Commons policies published at
384 | creativecommons.org/policies, Creative Commons does not authorize the
385 | use of the trademark "Creative Commons" or any other trademark or logo
386 | of Creative Commons without its prior written consent including,
387 | without limitation, in connection with any unauthorized modifications
388 | to any of its public licenses or any other arrangements,
389 | understandings, or agreements concerning use of licensed material. For
390 | the avoidance of doubt, this paragraph does not form part of the public
391 | licenses.
392 |
393 | Creative Commons may be contacted at creativecommons.org.
394 |
--------------------------------------------------------------------------------
/READINGS.md:
--------------------------------------------------------------------------------
1 | # Related Links
2 | - [React in Patterns by krasimir](https://github.com/krasimir/react-in-patterns)
3 | - [React Patterns by planningcenter](https://github.com/planningcenter/react-patterns)
4 | - [reactpatterns.com](https://github.com/chantastic/reactpatterns.com)
5 | - [10 React Mini-patterns](https://hackernoon.com/10-react-mini-patterns-c1da92f068c5)
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # [React Bits](https://vasanthk.gitbooks.io/react-bits)
2 |
3 | A compilation of React Patterns, techniques, tips and tricks.
4 |
5 | **Gitbook format**: https://vasanthk.gitbooks.io/react-bits
6 |
7 | **Github repo**: https://github.com/vasanthk/react-bits
8 |
9 | > Your contributions are heartily ♡ welcome. (✿◠‿◠)
10 |
11 | > **Translations by community:**
12 | > - 中文版 (Chinese): [react-bits-cn](https://github.com/hateonion/react-bits-CN)
13 | > - 한국어 (Korean): [react-bits-ko](https://github.com/rayleighko/react-bits-ko)
14 |
15 |
16 | - Design Patterns and Techniques
17 | - [Conditional in JSX](./patterns/1.conditionals-in-jsx.md)
18 | - [Async Nature Of setState()](./patterns/2.async-nature-of-setState.md)
19 | - [Dependency Injection](./patterns/3.dependency-injection.md)
20 | - [Context Wrapper](./patterns/4.context-wrapper.md)
21 | - [Event Handlers](./patterns/5.event-handlers.md)
22 | - [Flux Pattern](./patterns/6.flux-pattern.md)
23 | - [One Way Data Flow](./patterns/7.one-way-data-flow.md)
24 | - [Presentational vs Container](./patterns/8.presentational-vs-container.md)
25 | - [Third Party Integration](./patterns/9.third-party-integration.md)
26 | - [Passing Function To setState()](./patterns/10.passing-function-to-setState.md)
27 | - [Decorators](./patterns/11.decorators.md)
28 | - [Feature Flags](./patterns/12.feature-flags-using-redux.md)
29 | - [Component Switch](./patterns/13.component-switch.md)
30 | - [Reaching Into A Component](./patterns/14.reaching-into-a-component.md)
31 | - [List Components](./patterns/15.list-components.md)
32 | - [Format Text via Component](./patterns/16.format-text-via-component.md)
33 | - [React Fragments](./patterns/17.react-fragments.md)
34 | - [Share Tracking Logic](./patterns/18.share-tracking-logic.md)
35 | - Anti-Patterns
36 | - [Introduction](./anti-patterns/README.md)
37 | - [Props In Initial State](./anti-patterns/01.props-in-initial-state.md)
38 | - [findDOMNode()](./anti-patterns/02.findDOMNode.md)
39 | - [Mixins](./anti-patterns/03.mixins.md)
40 | - [setState() in componentWillMount()](./anti-patterns/04.setState-in-componentWillMount.md)
41 | - [Mutating State](./anti-patterns/05.mutating-state.md)
42 | - [Using Indexes as Key](./anti-patterns/06.using-indexes-as-key.md)
43 | - [Spreading Props on DOM elements](./anti-patterns/07.spreading-props-dom.md)
44 | - Handling UX Variations
45 | - [Introduction](./ux-variations/README.md)
46 | - [Composing UX Variations](./ux-variations/01.composing-variations.md)
47 | - [Toggle UI Elements](./ux-variations/02.toggle-ui-elements.md)
48 | - [HOC for Feature Toggles](./ux-variations/03.HOC-feature-toggles.md)
49 | - [HOC props proxy](./ux-variations/04.HOC-props-proxy.md)
50 | - [Wrapper Components](./ux-variations/05.wrapper-components.md)
51 | - [Display Order Variations](./ux-variations/06.display-order-variations.md)
52 | - Perf Tips
53 | - [Introduction](./perf-tips/README.md)
54 | - [shouldComponentUpdate() check](./perf-tips/01.shouldComponentUpdate-check.md)
55 | - [Using Pure Components](./perf-tips/02.pure-component.md)
56 | - [Using reselect](./perf-tips/03.reselect.md)
57 | - Styling
58 | - [Introduction](./styling/README.md)
59 | - [Stateless UI Components](./styling/01.stateless-ui-components.md)
60 | - [Styles Module](./styling/02.styles-module.md)
61 | - [Style Functions](./styling/03.style-functions.md)
62 | - [NPM Modules](./styling/04.using-npm-modules.md)
63 | - [Base Component](./styling/05.base-component.md)
64 | - [Layout Component](./styling/06.layout-component.md)
65 | - [Typography Component](./styling/07.typography-component.md)
66 | - [HOC for Styling](./styling/08.HOC-for-styling.md)
67 | - Gotchas
68 | - [Introduction](./gotchas/README.md)
69 | - [Pure render checks](./gotchas/01.pure-render-checks.md)
70 | - [Synthetic Events](./gotchas/02.synthetic-events.md)
71 | - [Related Links](./READINGS.md)
72 |
--------------------------------------------------------------------------------
/SUMMARY.md:
--------------------------------------------------------------------------------
1 | # React Bits
2 | ✨ React patterns, techniques, tips and tricks ✨
3 |
4 | - Design Patterns and Techniques
5 | - [Conditional in JSX](./patterns/18.conditionals-in-jsx.md)
6 | - [Async Nature Of setState()](./patterns/19.async-nature-of-setState.md)
7 | - [Dependency Injection](./patterns/20.dependency-injection.md)
8 | - [Context Wrapper](./patterns/21.context-wrapper.md)
9 | - [Event Handlers](./patterns/22.event-handlers.md)
10 | - [Flux Pattern](./patterns/23.flux-pattern.md)
11 | - [One Way Data Flow](./patterns/24.one-way-data-flow.md)
12 | - [Presentational vs Container](./patterns/25.presentational-vs-container.md)
13 | - [Third Party Integration](./patterns/26.third-party-integration.md)
14 | - [Passing Function To setState()](./patterns/27.passing-function-to-setState.md)
15 | - [Decorators](./patterns/28.decorators.md)
16 | - [Feature Flags](./patterns/29.feature-flags-using-redux.md)
17 | - [Component Switch](./patterns/30.component-switch.md)
18 | - [Reaching Into A Component](./patterns/31.reaching-into-a-component.md)
19 | - [List Components](./patterns/32.list-components.md)
20 | - [Format Text via Component](./patterns/33.format-text-via-component.md)
21 | - [Share Tracking Logic](./patterns/34.share-tracking-logic.md)
22 | - Anti-Patterns
23 | - [Introduction](./anti-patterns/README.md)
24 | - [Props In Initial State](./anti-patterns/01.props-in-initial-state.md)
25 | - [findDOMNode()](./anti-patterns/02.findDOMNode.md)
26 | - [Mixins](./anti-patterns/03.mixins.md)
27 | - [setState() in componentWillMount()](./anti-patterns/04.setState-in-componentWillMount.md)
28 | - [Mutating State](./anti-patterns/05.mutating-state.md)
29 | - [Using Indexes as Key](./anti-patterns/06.using-indexes-as-key.md)
30 | - [Spreading Props on DOM elements](./anti-patterns/07.spreading-props-dom.md)
31 | - Handling UX Variations
32 | - [Introduction](./ux-variations/README.md)
33 | - [Composing UX Variations](./ux-variations/01.composing-variations.md)
34 | - [Toggle UI Elements](./ux-variations/02.toggle-ui-elements.md)
35 | - [HOC for Feature Toggles](./ux-variations/03.HOC-feature-toggles.md)
36 | - [HOC props proxy](./ux-variations/04.HOC-props-proxy.md)
37 | - [Wrapper Components](./ux-variations/05.wrapper-components.md)
38 | - [Display Order Variations](./ux-variations/06.display-order-variations.md)
39 | - Perf Tips
40 | - [Introduction](./perf-tips/README.md)
41 | - [shouldComponentUpdate() check](./perf-tips/01.shouldComponentUpdate-check.md)
42 | - [Using Pure Components](./perf-tips/02.pure-component.md)
43 | - [Using reselect](./perf-tips/03.reselect.md)
44 | - Styling
45 | - [Introduction](./styling/README.md)
46 | - [Stateless UI Components](./styling/01.stateless-ui-components.md)
47 | - [Styles Module](./styling/02.styles-module.md)
48 | - [Style Functions](./styling/03.style-functions.md)
49 | - [npm Modules](./styling/04.using-npm-modules.md)
50 | - [Base Component](./styling/05.base-component.md)
51 | - [Layout Component](./styling/06.layout-component.md)
52 | - [Typography Component](./styling/07.typography-component.md)
53 | - [HOC for Styling](./styling/08.HOC-for-styling.md)
54 | - Gotchas
55 | - [Introduction](./gotchas/README.md)
56 | - [Pure render checks](./gotchas/01.pure-render-checks.md)
57 | - [Synthetic Events](./gotchas/02.synthetic-events.md)
58 | - [Related Links](./READINGS.md)
59 |
--------------------------------------------------------------------------------
/anti-patterns/01.props-in-initial-state.md:
--------------------------------------------------------------------------------
1 | # Props in Initial State
2 | From docs:
3 | > Using props to generate state in getInitialState often leads to duplication of “source of truth”, i.e. where the real data is.
4 | > This is because getInitialState is only invoked when the component is first created.
5 |
6 | The danger is that if the props on the component are changed without the component being ‘refreshed’,
7 | the new prop value will never be displayed because the constructor function (or getInitialState) will never update the current state of the component.
8 | The initialization of state from props only runs when the component is first created.
9 |
10 | #### Bad
11 | ```javascript
12 | class SampleComponent extends Component {
13 | // constructor function (or getInitialState)
14 | constructor(props) {
15 | super(props);
16 | this.state = {
17 | flag: false,
18 | inputVal: props.inputValue
19 | };
20 | }
21 |
22 | render() {
23 | return
64 | )
65 | }
66 | }
67 | ```
68 |
69 | ### Related links:
70 | [React Design Patterns and best practices by Michele Bertoli.](https://github.com/MicheleBertoli/react-design-patterns-and-best-practices)
71 |
--------------------------------------------------------------------------------
/anti-patterns/06.using-indexes-as-key.md:
--------------------------------------------------------------------------------
1 | # Using indexes as keys
2 | Keys should be stable, predictable, and unique so that React can keep track of elements.
3 |
4 | #### Bad
5 | In this snippet each element's key will be based on ordering, rather than tied to the data that is being represented. This limits the optimizations that React can do.
6 | ```javascript
7 | {todos.map((todo, index) =>
8 |
12 | )}
13 | ```
14 |
15 | #### Good
16 | Assuming `todo.id` is unique to this list and stable, React would be able to reorder elements without needing to reevaluate them as much.
17 | ```javascript
18 | {todos.map((todo) =>
19 |
21 | )}
22 | ```
23 |
24 | ### @Reference:
25 | - [React docs](https://reactjs.org/docs/reconciliation.html#tradeoffs)
26 | - [Lin Clark's code cartoon](https://youtu.be/-t8eOoRsJ7M?t=981)
27 |
--------------------------------------------------------------------------------
/anti-patterns/07.spreading-props-dom.md:
--------------------------------------------------------------------------------
1 | # Spreading props on DOM elements
2 | When we spread props we run into the risk of adding unknown HTML attributes, which is a bad practice.
3 |
4 | #### Bad
5 | This will try to add the unknown HTML attribute `flag` to the DOM element.
6 | ```javascript
7 | const Sample = () => ();
8 | const Spread = (props) => (
Test
);
9 | ```
10 | #### Good
11 | By creating props specifically for DOM attribute, we can safely spread.
12 | ```javascript
13 | const Sample = () => ();
14 | const Spread = (props) => (
Test
);
15 | ```
16 |
17 | Or alternatively we can use prop destructuring with `...rest`:
18 | ```javascript
19 | const Sample = () => ();
20 | const Spread = ({ flag, ...domProps }) => (
Test
);
21 | ```
22 |
23 | *Note*
24 |
25 | In [scenarios](https://github.com/vasanthk/react-bits/issues/34) where you use a [PureComponent](../perf-tips/02.pure-component.md), when an update happens it re-renders the component even if `domProps` did not change. This is because PureComponent only [shallowly compares](https://reactjs.org/docs/react-api.html#reactpurecomponent) the objects.
26 |
27 | ### Related links:
28 | - [React Design Patterns and best practices by Michele Bertoli.](https://github.com/MicheleBertoli/react-design-patterns-and-best-practices)
29 | - [In React, children are just props: Kent C. Dodds' Tweet](https://twitter.com/kentcdodds/status/851406788549369856)
30 |
--------------------------------------------------------------------------------
/anti-patterns/README.md:
--------------------------------------------------------------------------------
1 | # Anti-patterns
2 |
3 | Familiarizing ourselves with common anti-patterns will help us understand how React works and describe useful forms of refactoring our code.
4 |
--------------------------------------------------------------------------------
/book.json:
--------------------------------------------------------------------------------
1 | {
2 | "gitbook": ">3.0.0",
3 | "plugins": ["edit-link"],
4 | "pluginsConfig": {
5 | "edit-link": {
6 | "base": "https://github.com/vasanthk/react-bits/blob/master",
7 | "label": "Edit This Page"
8 | },
9 | "github": {
10 | "url": "https://github.com/vasanthk/react-bits/"
11 | }
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/coding-style/README.md:
--------------------------------------------------------------------------------
1 | # Coding Style
2 |
3 | **Disclaimer:**
4 |
5 | This section is purely to familiarize oneself with different coding styles out there. It is not a set of coding standards or conventions!
6 |
--------------------------------------------------------------------------------
/gotchas/01.pure-render-checks.md:
--------------------------------------------------------------------------------
1 | # Pure Render Checks
2 |
3 | In order to preserve performance one needs to consider the creation of new entities in the render method.
4 |
5 | Pure render?
6 |
7 | With React.js pure render I mean components that implement the shouldComponentUpdate method with shallow equality checks.
8 |
9 | Examples of this are the React.PureComponent, PureRenderMixin, recompose/pure and many others.
10 |
11 | #### Case 1
12 |
13 | ##### Bad
14 | ```javascript
15 | class Table extends PureComponent {
16 | render() {
17 | return (
18 |
19 | {this.props.items.map(i =>
20 |
21 | )}
22 |
23 | );
24 | }
25 | }
26 | ```
27 |
28 | **The issue is with ``{this.props.options || []}`` - it caused all the cells to be re-rendered even for a single cell change. Why?**
29 |
30 | You see the options array was passed deep down in the Cell elements. Normally this would not be an issue.
31 | The other Cell elements would not be re-rendered because they can do the cheap shallow equality check and
32 | skip the render entirely but in this case the options prop was null and the default array was used.
33 | As you should know the array literal is the same as new Array() which creates a new array instance.
34 | This completely destroyed every pure render optimization inside the Cell elements.
35 | In Javascript different instances have different identities and thus the shallow equality check always
36 | produces false and tells React to re-render the components.
37 |
38 | ##### Good
39 | ```javascript
40 | const defaultval = []; // <--- The fix (defaultProps could also have been used).
41 | class Table extends PureComponent {
42 | render() {
43 | return (
44 |
45 | {this.props.items.map(i =>
46 |
47 | )}
48 |
49 | );
50 | }
51 | }
52 | ```
53 | #### Case 2
54 | Similar issue with using functions in render() as well
55 |
56 | ##### BAD
57 | ```javascript
58 | class App extends PureComponent {
59 | render() {
60 | return this.props.update(e.target.value)}/>;
62 | }
63 | }
64 | ```
65 | ##### Bad again
66 | ```javascript
67 | class App extends PureComponent {
68 | update(e) {
69 | this.props.update(e.target.value);
70 | }
71 |
72 | render() {
73 | return ;
74 | }
75 | }
76 | ```
77 | ^^In both cases a new function is created with a new identity. Just like with the array literal.
78 | We need to bind the function early
79 |
80 | ##### Good
81 | ```javascript
82 | class App extends PureComponent {
83 | constructor(props) {
84 | super(props);
85 | this.update = this.update.bind(this);
86 | }
87 |
88 | update(e) {
89 | this.props.update(e.target.value);
90 | }
91 |
92 | render() {
93 | return ;
94 | }
95 | }
96 | ```
97 | ##### Bad
98 | ```javascript
99 | class Component extends React.Component {
100 | state = {clicked: false};
101 |
102 | onClick() {
103 | this.setState({clicked: true})
104 | }
105 |
106 | render() {
107 | // Options object created each render if not set
108 | const options = this.props.options || {test: 1};
109 |
110 | return this.onClick(event)
116 | />
117 | }
118 | }
119 | ```
120 | ##### Good
121 | ```javascript
122 | class Component extends React.Component {
123 | state = {clicked: false};
124 | options = {test: 1};
125 |
126 | onClick = () => {
127 | this.setState({clicked: true})
128 | };
129 |
130 | render() {
131 | // Options object created once
132 | const options = this.props.options || this.options;
133 |
134 | return
139 | }
140 | }
141 | ```
142 |
143 | ### Related links:
144 | - https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f
145 | - https://github.com/nfour/js-structures/blob/master/guides/react-anti-patterns.md#pure-render-immutability
146 | - [Optimizing React Rendering](https://flexport.engineering/optimizing-react-rendering-part-1-9634469dca02)
147 |
--------------------------------------------------------------------------------
/gotchas/02.synthetic-events.md:
--------------------------------------------------------------------------------
1 | # Synthetic events in React
2 | Inside React event handlers, the event object is wrapped in a SyntheticEvent object.
3 | These objects are pooled, which means that the objects received at an event handler will be reused for other events to increase performance.
4 | This also means that accessing the event object’s properties asynchronously will be impossible since the event’s properties have been reset due to reuse.
5 |
6 | The following piece of code will log null because event has been reused inside the SyntheticEvent pool:
7 | ```javascript
8 | function handleClick(event) {
9 | setTimeout(function () {
10 | console.log(event.target.name);
11 | }, 1000);
12 | }
13 | ```
14 | To avoid this you need to store the event’s property you are interested in inside its own binding:
15 | ```javascript
16 | function handleClick(event) {
17 | let name = event.target.name;
18 | setTimeout(function () {
19 | console.log(name);
20 | }, 1000);
21 | }
22 | ```
23 |
24 | ### Related links:
25 | - [React/Redux: Best practices & gotchas](https://medium.com/nick-parsons/react-redux-best-practices-gotchas-56cf61c1c415)
26 | - [React events in depth w/ Kent C. Dodds, Ben Alpert, & Dan Abramov](https://www.youtube.com/watch?v=dRo_egw7tBc)
--------------------------------------------------------------------------------
/gotchas/README.md:
--------------------------------------------------------------------------------
1 | # Gotchas
2 |
3 | React is intuitive for the most part, but there are quite a few stumbling points which might catch you by surprise. We'll discuss more on them here.
4 |
5 | ## Articles
6 |
7 | [React Gotchas](https://daveceddia.com/react-gotchas/)
8 |
9 | [Top 5 React Gotchas](http://joelgriffith.net/top-5-react-gotchas/)
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-bits",
3 | "version": "1.0.0",
4 | "repository": "https://github.com/vasanthk/react-bits.git",
5 | "author": "",
6 | "license": "MIT",
7 | "scripts": {
8 | "docs": "gitbook serve"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/patterns/1.conditionals-in-jsx.md:
--------------------------------------------------------------------------------
1 | # Conditionals in JSX
2 |
3 | Instead of
4 | ```javascript
5 | const sampleComponent = () => {
6 | return isTrue ?
14 | };
15 | ```
16 | For Complex scenarios with too many ternaries:
17 |
18 | ```javascript
19 | // Y soo many ternary??? :-/
20 | const sampleComponent = () => {
21 | return (
22 |
23 | {flag && flag2 && !flag3
24 | ? flag4
25 | ?
Blah
26 | : flag5
27 | ?
Meh
28 | :
Herp
29 | :
Derp
30 | }
31 |
32 | )
33 | };
34 | ```
35 |
36 | - Best approach: Move logic to sub-components
37 | - Alternate hacky approach: Use IIFE
38 |
39 | There are some libraries that solve this problem (JSX-Control Statements), but rather than introduce another dependency
40 | use an [IIFE](http://stackoverflow.com/questions/8228281/what-is-the-function-construct-in-javascript) and return values by using if-else statement inside
41 |
42 | ```javascript
43 | const sampleComponent = () => {
44 | return (
45 |
62 | )
63 | };
64 | ```
65 |
66 |
67 | With an appropiate [transpiler](https://babeljs.io/docs/plugins/transform-do-expressions/) you can take advantage of the upcoming [do expression](https://github.com/tc39/proposal-do-expressions) which is currently on [stage-1](https://github.com/tc39/proposal-do-expressions)
68 |
69 |
70 | ```javascript
71 | const sampleComponent = () => {
72 | return (
73 |
74 | {
75 | do => {
76 | if (flag && flag2 && !flag3) {
77 | if (flag4) {
78 |
Blah
79 | } else if (flag5) {
80 |
Meh
81 | } else {
82 |
Herp
83 | }
84 | } else {
85 |
Derp
86 | }
87 | }
88 | }
89 |
90 | )
91 | };
92 | ```
93 |
94 |
95 | Or alternatively simply use early returns
96 |
97 | ```javascript
98 | const sampleComponent = () => {
99 | const basicCondition = flag && flag2 && !flag3;
100 | if (!basicCondition) return
Derp
;
101 | if (flag4) return
Blah
;
102 | if (flag5) return
Meh
;
103 | return
Herp
104 | }
105 | ```
106 |
107 | ### Related links:
108 | - https://engineering.musefind.com/our-best-practices-for-writing-react-components-dec3eb5c3fc8
109 | - [Conditional rendering](https://reactjs.org/docs/conditional-rendering.html)
110 |
111 |
112 |
--------------------------------------------------------------------------------
/patterns/10.passing-function-to-setState.md:
--------------------------------------------------------------------------------
1 | # Passing a function to setState
2 |
3 | Here’s the dirty secret about setState — it’s actually asynchronous.
4 | React batches state changes for performance reasons, so the state may not change immediately after setState is called.
5 | That means you should not rely on the current state when calling setState — since you can’t be sure what that state will be!
6 | Here’s the solution — pass a function to setState, with the previous state as an argument.
7 | Doing so avoids issues with the user getting the old state value on access (due to the asynchrony of setState)
8 |
9 | #### Problem
10 | ```javascript
11 | // assuming this.state.count === 0
12 | this.setState({count: this.state.count + 1});
13 | this.setState({count: this.state.count + 1});
14 | this.setState({count: this.state.count + 1});
15 | // this.state.count === 1, not 3
16 | ```
17 | #### Solution
18 | ```javascript
19 | this.setState((prevState, props) => ({
20 | count: prevState.count + props.increment
21 | }));
22 | ```
23 |
24 | #### Variations
25 | ```javascript
26 | // Passing object
27 | this.setState({ expanded: !this.state.expanded });
28 |
29 | // Passing function
30 | this.setState(prevState => ({ expanded: !prevState.expanded }));
31 | ```
32 |
33 | ### Related links:
34 | - [setState() Gate](https://medium.com/javascript-scene/setstate-gate-abc10a9b2d82)
35 | - [Do I need to use setState(function) overload in this case?](http://stackoverflow.com/questions/43428456/do-i-need-to-use-setstatefunction-overload-in-this-case/43440790#43440790)
36 | - [Functional setState is the future of React](https://medium.freecodecamp.com/functional-setstate-is-the-future-of-react-374f30401b6b)
37 |
--------------------------------------------------------------------------------
/patterns/11.decorators.md:
--------------------------------------------------------------------------------
1 | # Decorators
2 | Decorators (*supported by Babel, in Stage 2 proposal as of 03/17*)
3 |
4 | If you’re using something like mobx, you can decorate your class components — which is the same as passing the component into a function.
5 | Decorators are flexible and readable way of modifying component functionality.
6 |
7 | Non-decorators approach
8 | ```javascript
9 | class ProfileContainer extends Component {
10 | // Component code
11 | }
12 | export default observer(ProfileContainer)
13 | ```
14 | With decorators
15 | ```javascript
16 | @observer
17 | export default class ProfileContainer extends Component {
18 | // Component code
19 | }
20 | ```
21 |
22 | ### Article:
23 | - [Enhancing React components with Decorators](https://medium.com/@gigobyte/enhancing-react-components-with-decorators-441320e8606a)
24 |
25 | ### Related:
26 | - [Decorators != higher ordered components](https://twitter.com/dan_abramov/status/628202050946514944)
27 | - [React Decorator example - Module](https://github.com/gigobyte/react-document-title-decorator)
28 | - [What is the use of Connect(decorator in react-redux)](http://stackoverflow.com/questions/36553814/what-is-the-use-of-connect-decorator-in-react-redux)
29 | - [Decorators with React Components](http://stackoverflow.com/questions/36286384/decorators-with-react-components)
30 | - [Exploring ES7 decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841#.8cbzw5wcl)
31 | - [Understanding Decorators](https://survivejs.com/react/appendices/understanding-decorators/)
32 |
--------------------------------------------------------------------------------
/patterns/12.feature-flags-using-redux.md:
--------------------------------------------------------------------------------
1 | # Feature Flags
2 | Enabling Feature flags in React using Redux
3 |
4 | ```javascript
5 | // createFeatureFlaggedContainer.js
6 | import React from 'react';
7 | import { connect } from 'react-redux';
8 | import { isFeatureEnabled } from './reducers'
9 |
10 | export default function createFeatureFlaggedContainer({
11 | featureName,
12 | enabledComponent,
13 | disabledComponent
14 | }) {
15 | function FeatureFlaggedContainer({ isEnabled, ...props }) {
16 | const Component = isEnabled ? enabledComponent : disabledComponent;
17 |
18 | if (Component) {
19 | return ;
20 | }
21 |
22 | // `disabledComponent` is optional property
23 | return null;
24 | }
25 |
26 | // Having `displayName` is very useful for debugging.
27 | FeatureFlaggedContainer.displayName = `FeatureFlaggedContainer(${ featureName })`;
28 |
29 | return connect((store) => {
30 | isEnabled: isFeatureEnabled(store, featureName)
31 | })(FeatureFlaggedContainer);
32 | }
33 | ```
34 | ```javascript
35 | // EnabledFeature.js
36 | import { connect } from 'react-redux';
37 | import { isFeatureEnabled } from './reducers'
38 |
39 | function EnabledFeature({ isEnabled, children }) {
40 | if (isEnabled) {
41 | return children;
42 | }
43 |
44 | return null;
45 | }
46 |
47 | export default connect((store, { name }) => {
48 | isEnabled: isFeatureEnabled(store, name)
49 | })(EnabledFeature);
50 | ```
51 | ```javascript
52 | // featureEnabled.js
53 | import createFeatureFlaggedContainer from './createFeatureFlaggedContainer'
54 |
55 | // Decorator for "Page" components.
56 | // usage: enabledFeature('unicorns')(UnicornsPage);
57 | export default function enabledFeature(featureName) {
58 | return (Component) => {
59 | return createFeatureFlaggedContainer({
60 | featureName,
61 | enabledComponent: Component,
62 | disabledComponent: PageNotFound, // 404 page or something similar
63 | });
64 | };
65 | };
66 | ```
67 | ```javascript
68 | // features.js
69 | // This is quite simple reducer, containing only an array of features.
70 | // You can attach this data to a `currentUser` or similar reducer.
71 |
72 | // `BOOTSTAP` is global action, which contains the initial data for a page
73 | // Features access usually don't change during user usage of a page
74 | const BOOTSTAP = 'features/receive';
75 |
76 | export default function featuresReducer(state, { type, payload }) {
77 | if (type === BOOTSTAP) {
78 | return payload.features || [];
79 | }
80 |
81 | return state || [];
82 | }
83 |
84 | export function isFeatureEnabled(features, featureName) {
85 | return features.indexOf(featureName) !== -1;
86 | }
87 | ```
88 | ```javascript
89 | // reducers.js
90 | // This is your main reducer.js file
91 | import { combineReducers } from 'redux';
92 |
93 | import features, { isFeatureEnabled as isFeatureEnabledSelector } from './features';
94 | // ...other reducers
95 |
96 | export default combineReducers({
97 | features
98 | // ...other reducers
99 | });
100 |
101 | // This is the important part, access to `features` reducer should only happens
102 | // via this selector.
103 | // Then you can always change where/how the features are stored.
104 | export function isFeatureEnabled({ features }, featureName) {
105 | return isFeatureEnabledSelector(features, featureName);
106 | }
107 | ```
108 | ### Related links:
109 | - [Feature flags in React](http://blog.rstankov.com/feature-flags-in-react/)
110 | - [Gist](https://gist.github.com/RStankov/0e764f27daf38f2fcd81b82360334528)
111 |
--------------------------------------------------------------------------------
/patterns/13.component-switch.md:
--------------------------------------------------------------------------------
1 | # The switching component
2 | A switching component is a component that renders one of many components.
3 |
4 | Use an object to map prop values to components
5 | ```javascript
6 | import HomePage from './HomePage.jsx';
7 | import AboutPage from './AboutPage.jsx';
8 | import UserPage from './UserPage.jsx';
9 | import FourOhFourPage from './FourOhFourPage.jsx';
10 |
11 | const PAGES = {
12 | home: HomePage,
13 | about: AboutPage,
14 | user: UserPage
15 | };
16 |
17 | const Page = (props) => {
18 | const Handler = PAGES[props.page] || FourOhFourPage;
19 |
20 | return
21 | };
22 |
23 | // The keys of the PAGES object can be used in the prop types to catch dev-time errors.
24 | Page.propTypes = {
25 | page: PropTypes.oneOf(Object.keys(PAGES)).isRequired
26 | };
27 | ```
28 |
29 | ### Related links:
30 | - https://hackernoon.com/10-react-mini-patterns-c1da92f068c5
31 |
--------------------------------------------------------------------------------
/patterns/14.reaching-into-a-component.md:
--------------------------------------------------------------------------------
1 | # Reaching into a Component
2 | Accessing a component from the parent.
3 | eg. Autofocus an input (controlled by parent component)
4 |
5 | #### Child Component
6 | An input component with a focus() method that focuses the HTML element
7 | ```javascript
8 | class Input extends Component {
9 | focus() {
10 | this.el.focus();
11 | }
12 |
13 | render() {
14 | return (
15 | { this.el = el; }}
17 | />
18 | );
19 | }
20 | }
21 | ```
22 | #### Parent Component
23 | In the parent component, we can get a reference to the Input component and call its focus() method.
24 | ```javascript
25 | class SignInModal extends Component {
26 | componentDidMount() {
27 | // Note that when you use ref on a component, it’s a reference to
28 | // the component (not the underlying element), so you have access to its methods.
29 | this.InputComponent.focus();
30 | }
31 |
32 | render() {
33 | return (
34 |
40 | )
41 | }
42 | }
43 | ```
44 | ### Reference:
45 | - https://hackernoon.com/10-react-mini-patterns-c1da92f068c5
46 |
47 |
--------------------------------------------------------------------------------
/patterns/15.list-components.md:
--------------------------------------------------------------------------------
1 | # Lists Components
2 | Lists and other things that are almost components
3 |
4 | Instead of making a separate component for lists I can then generate the results like:
5 | ```javascript
6 | const SearchSuggestions = (props) => {
7 | // renderSearchSuggestion() behaves as a pseudo SearchSuggestion component
8 | // keep it self contained and it should be easy to extract later if needed
9 | const renderSearchSuggestion = listItem => (
10 |
One jet is {numberToPrice(jetPrice, { showDecimals: false })}
77 |
Those gumboots will set ya back
78 | {numberToPrice(bootPrice, { showDecimals: false, showSymbol: false })}
79 | bucks.
80 |
81 | );
82 | };
83 | ```
84 |
85 | ### Reference:
86 | - [10 React Mini Patterns](https://hackernoon.com/10-react-mini-patterns-c1da92f068c5)
87 |
88 |
--------------------------------------------------------------------------------
/patterns/17.react-fragments.md:
--------------------------------------------------------------------------------
1 | # React Fragments
2 |
3 | React fragments are used whenever a component needs returned with multiple children.
4 |
5 | Specifically, fragments are useful when I don't want to clutter the DOM with unnecessary `
` tags that are used purely to wrap children in a React render method.
6 |
7 | For example, React fragments are commonly used to render list items:
8 | ```javascript
9 | render() {
10 | return (
11 |
12 |
Table Cell 1
13 |
Table Cell 2
14 |
15 | );
16 | }
17 | ```
18 |
19 | This solves the issue of breaking the DOM HTML table specifications by not adding unnecessary `
` elements around `
` elements.
20 | Do keep in mind, if it is a list being rendered, React does still throw warnings when children don't have the `key={}` prop.
21 |
22 | ### Related links:
23 | - https://reactjs.org/docs/fragments.html
24 |
--------------------------------------------------------------------------------
/patterns/18.share-tracking-logic.md:
--------------------------------------------------------------------------------
1 | # Share Tracking Logic
2 | Using HOC to share tracking logic across various UX components
3 |
4 | eg. Adding analytics tracking across various components.
5 |
6 | - Helps to keep it DRY (Do not Repeat Yourself)
7 | - Removing tracking logic etc. from the presentational component makes it well testable, which is key.
8 |
9 | ```javascript
10 | import tracker from './tracker.js';
11 |
12 | // HOC
13 | const pageLoadTracking = (ComposedComponent) => class HOC extends Component {
14 | componentDidMount() {
15 | tracker.trackPageLoad(this.props.trackingData);
16 | }
17 |
18 | componentDidUpdate() {
19 | tracker.trackPageLoad(this.props.trackingData);
20 | }
21 |
22 | render() {
23 | return
24 | }
25 | };
26 |
27 | // Usage
28 | import LoginComponent from "./login";
29 |
30 | const LoginWithTracking = pageLoadTracking(LoginComponent);
31 |
32 | class SampleComponent extends Component {
33 | render() {
34 | const trackingData = {/** Nested Object **/};
35 | return
36 | }
37 | }
38 | ```
39 |
--------------------------------------------------------------------------------
/patterns/2.async-nature-of-setState.md:
--------------------------------------------------------------------------------
1 | # Async Nature Of setState()
2 | On the Async nature of setState()
3 |
4 | ## Gist:
5 | React batches updates and flushes it out once per frame (perf optimization)
6 | However, in some cases React has no control over batching, hence updates are made synchronously
7 | e.g. eventListeners, Ajax, setTimeout and similar Web APIs.
8 |
9 |
10 | ### Main Idea
11 | setState() does not immediately mutate this.state but creates a pending state transition.
12 | Accessing this.state after calling this method can potentially return the existing value.
13 | There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.
14 |
15 | #### Run the below code and you will make the following observations:
16 |
17 | You can see that in every situation (addEventListener, setTimeout or AJAX call) the state before and the state after are different.
18 | And that render was called immediately after triggering the setState method. But why is that?
19 | Well, it turns out React does not understand and thus cannot control code that doesn't live inside the library.
20 | Timeouts or AJAX calls for example, are developer authored code that executes outside of the context of React.
21 |
22 | So why does React synchronously update the state in these cases? Well, because it's trying to be as defensive as possible.
23 | Not being in control means it's not able to do any performance optimisations so it's better to update the state on spot and
24 | make sure the code that follows has access to the latest information available.
25 |
26 | ```javascript
27 | class TestComponent extends React.Component {
28 | constructor(...args) {
29 | super(...args);
30 | this.state = {
31 | dollars: 10
32 | };
33 | this._saveButtonRef = (btn => { this._btnRef = btn });
34 | [
35 | '_onTimeoutHandler',
36 | '_onMouseLeaveHandler',
37 | '_onClickHandler',
38 | '_onAjaxCallback',
39 | ].forEach(propToBind => {
40 | this[propToBind] = this[propToBind].bind(this);
41 | });
42 | }
43 |
44 | componentDidMount() {
45 | // Add custom event via `addEventListener`
46 | //
47 | // The list of supported React events does include `mouseleave`
48 | // via `onMouseLeave` prop
49 | //
50 | // However, we are not adding the event the `React way` - this will have
51 | // effects on how state mutates
52 | //
53 | // Check the list here - https://reactjs.org/docs/events.html
54 | this._btnRef.addEventListener('mouseleave', this._onMouseLeaveHandler);
55 |
56 | // Add JS timeout
57 | //
58 | // Again,outside React `world` - this will also have effects on how state
59 | // mutates
60 | setTimeout(this._onTimeoutHandler, 10000);
61 |
62 | // Make AJAX request
63 | fetch('https://api.github.com/users')
64 | .then(this._onAjaxCallback);
65 | }
66 |
67 | render() {
68 | console.log('State in render: ' + JSON.stringify(this.state));
69 |
70 | return (
71 |
76 | );
77 | }
78 |
79 | _onClickHandler() {
80 | console.log('State before (_onClickHandler): ' + JSON.stringify(this.state));
81 | this.setState({
82 | dollars: this.state.dollars + 10
83 | });
84 | console.log('State after (_onClickHandler): ' + JSON.stringify(this.state));
85 | }
86 |
87 | _onMouseLeaveHandler() {
88 | console.log('State before (mouseleave): ' + JSON.stringify(this.state));
89 | this.setState({
90 | dollars: this.state.dollars + 20
91 | });
92 | console.log('State after (mouseleave): ' + JSON.stringify(this.state));
93 | }
94 |
95 | _onTimeoutHandler() {
96 | console.log('State before (timeout): ' + JSON.stringify(this.state));
97 | this.setState({
98 | dollars: this.state.dollars + 30
99 | });
100 | console.log('State after (timeout): ' + JSON.stringify(this.state));
101 | }
102 |
103 | _onAjaxCallback(response) {
104 | if (response.status !== 200) {
105 | console.log('Error in AJAX call: ' + response.statusText);
106 | return;
107 | }
108 | console.log('State before (AJAX call): ' + JSON.stringify(this.state));
109 | this.setState({
110 | dollars: this.state.dollars + 40
111 | });
112 | console.log('State after (AJAX call): ' + JSON.stringify(this.state));
113 | }
114 | };
115 |
116 | // Render to DOM
117 | ReactDOM.render(
118 | ,
119 | document.getElementById('app')
120 | );
121 | ```
122 |
123 | ### Possible solution?
124 |
125 | We're used to calling setState with one parameter only, but actually, the method's signature support two.
126 | The second argument that you can pass in is a callback function that will always be executed after the state has been updated (whether it's inside React's known context or outside of it).
127 |
128 | #### An example might be:
129 |
130 | ```javascript
131 | _onClickHandler: function _onClickHandler() {
132 | console.log('State before (_onClickHandler): ' + JSON.stringify(this.state));
133 | this.setState({
134 | dollars: this.state.dollars + 10
135 | }, () => {
136 | console.log('Here state will always be updated to latest version!');
137 | console.log('State after (_onClickHandler): ' + JSON.stringify(this.state));
138 | });
139 | }
140 | ```
141 |
142 | #### A note on the async nature of setstate
143 |
144 | To be politically correct, setState, as a method, is always synchronous.
145 | It's just a function that calls something behind the scenes - enqueueState or enqueueCallback on updater.
146 |
147 | In fact, here's setState taken directly from React source code:
148 |
149 | ```javascript
150 | ReactComponent.prototype.setState = function(partialState, callback) {
151 | invariant(
152 | typeof partialState === 'object' ||
153 | typeof partialState === 'function' ||
154 | partialState == null,
155 | 'setState(...): takes an object of state variables to update or a ' +
156 | 'function which returns an object of state variables.'
157 | );
158 | this.updater.enqueueSetState(this, partialState);
159 | if (callback) {
160 | this.updater.enqueueCallback(this, callback, 'setState');
161 | }
162 | };
163 | ```
164 |
165 | What's actually sync or async are the effects of calling setState in a React application - the reconciliation algorithm, doing the VDOM comparisons and calling render to update the real DOM.
166 |
167 | ## Related links:
168 | - https://medium.com/@wereHamster/beware-react-setstate-is-asynchronous-ce87ef1a9cf3#.jhdhncws3
169 | - https://www.bennadel.com/blog/2893-setstate-state-mutation-operation-may-be-synchronous-in-reactjs.htm
170 |
--------------------------------------------------------------------------------
/patterns/3.dependency-injection.md:
--------------------------------------------------------------------------------
1 | # Dependency Injection
2 |
3 | In React the need of [dependency injection](https://www.youtube.com/watch?v=IKD2-MAkXyQ) is easily visible. Let's consider the following application tree:
4 |
5 | ```javascript
6 | // Title.jsx
7 | export default function Title(props) {
8 | return
{ props.title }
;
9 | }
10 | ```
11 |
12 | ```javascript
13 | // Header.jsx
14 | import Title from './Title.jsx';
15 | export default function Header() {
16 | return (
17 |
18 |
19 |
20 | );
21 | }
22 | ```
23 | ```javascript
24 | // App.jsx
25 | import Header from './Header.jsx';
26 | class App extends React.Component {
27 | constructor(props) {
28 | super(props);
29 | this.state = { title: 'React Dependency Injection' };
30 | }
31 | render() {
32 | return ;
33 | }
34 | }
35 | ```
36 | The string "React Dependency Injection" should somehow reach the Title component.
37 | The direct way of doing this is to pass it from App to Header and then Header to pass it to Title.
38 | However, this may work for these three components but what happens if there are multiple properties and deeper nesting.
39 | Lots of components will have to mention properties that they are not interested in.
40 | It is clear that most React components receive their dependencies via props but the question is how these dependencies reach that point.
41 |
42 |
43 | One way to achieve dependency injection is by using higher-order component to inject data.
44 |
45 | ```javascript
46 | // inject.jsx
47 | var title = 'React Dependency Injection';
48 | export default function inject(Component) {
49 | return class Injector extends React.Component {
50 | render() {
51 | return (
52 |
57 | )
58 | }
59 | };
60 | }
61 | ```
62 | ```javascript
63 | // Title.jsx
64 | export default function Title(props) {
65 | return
{ props.title }
;
66 | }
67 | ```
68 | ```javascript
69 | // Header.jsx
70 | import inject from './inject.jsx';
71 | import Title from './Title.jsx';
72 |
73 | var EnhancedTitle = inject(Title);
74 | export default function Header() {
75 | return (
76 |
77 |
78 |
79 | );
80 | }
81 | ```
82 | The title is hidden in a middle layer (higher-order component) where we pass it as a prop to the original Title component.
83 | That's all nice but it solves only half of the problem.
84 | Now we don't have to pass the title down the tree but how this data will reach the enhance.jsx helper.
85 |
86 | ## Using React's context
87 |
88 | React has the concept of context. The context is something that every component may have access to.
89 | It's something like an event bus but for data. A single model which we can access from everywhere.
90 |
91 | a place where we'll define the context
92 | ```javascript
93 | var context = { title: 'React in patterns' };
94 | class App extends React.Component {
95 | getChildContext() {
96 | return context;
97 | }
98 | // ...
99 | }
100 |
101 | App.childContextTypes = {
102 | title: PropTypes.string
103 | };
104 | ```
105 | A place where we need data
106 | ```javascript
107 | class Inject extends React.Component {
108 | render() {
109 | var title = this.context.title;
110 | // ...
111 | }
112 | }
113 | Inject.contextTypes = {
114 | title: PropTypes.string
115 | };
116 | ```
117 |
118 | ### Related links:
119 | - [What is Dependency Injection?](https://www.youtube.com/watch?v=IKD2-MAkXyQ)
120 | - [The Basics of Dependency Injection](https://www.youtube.com/watch?v=jXhdOTw1q5Q)
121 | - [Dependency injection in JavaScript](http://krasimirtsonev.com/blog/article/Dependency-injection-in-JavaScript)
122 | - [DI In React](https://github.com/krasimir/react-in-patterns/blob/master/book/chapter-10/README.md)
123 |
--------------------------------------------------------------------------------
/patterns/4.context-wrapper.md:
--------------------------------------------------------------------------------
1 | # Context Wrapper
2 | It is a good practice that our context is not just a plain object but it has an interface that allows us to store and retrieve data. For example:
3 |
4 | ```javascript
5 | // dependencies.js
6 | export default {
7 | data: {},
8 | get(key) {
9 | return this.data[key];
10 | },
11 | register(key, value) {
12 | this.data[key] = value;
13 | }
14 | }
15 | ```
16 | Then, if we go back to our example, the very top App component may look like that:
17 | ```javascript
18 | import dependencies from './dependencies';
19 | dependencies.register('title', 'React in patterns');
20 |
21 | class App extends React.Component {
22 | getChildContext() {
23 | return dependencies;
24 | }
25 | render() {
26 | return ;
27 | }
28 | }
29 |
30 | App.childContextTypes = {
31 | data: PropTypes.object,
32 | get: PropTypes.func,
33 | register: PropTypes.func
34 | };
35 | ```
36 | And our Title component gets it's data through the context:
37 | ```javascript
38 | // Title.jsx
39 | export default class Title extends React.Component {
40 | render() {
41 | return
{ this.context.get('title') }
42 | }
43 | }
44 | Title.contextTypes = {
45 | data: PropTypes.object,
46 | get: PropTypes.func,
47 | register: PropTypes.func
48 | };
49 | ```
50 | Ideally we don't want to specify the contextTypes every time when we need an access to the context.
51 | This detail may be wrapped in a higher-order component.
52 | And even more, we may write an utility function that is more descriptive and helps us declare the exact wiring.
53 | ie. instead of accessing the context directly with this.context.get('title') we ask the higher-order component to
54 | get what we need and to pass it as a prop to our component.
55 | For example:
56 | ```javascript
57 | // Title.jsx
58 | import wire from './wire';
59 |
60 | function Title(props) {
61 | return
{ props.title }
;
62 | }
63 |
64 | export default wire(Title, ['title'], function resolve(title) {
65 | return { title };
66 | });
67 | ```
68 | The wire function accepts first a React component, then an array with all the needed dependencies
69 | (which are registered already) and then a function which I like to call mapper.
70 | It receives what's stored in the context as a raw data and returns an object which is the actual
71 | React props for our component (Title). In this example we just pass what we get - a title string variable.
72 | However, in a real app this could be a collection of data stores, configuration or something else.
73 | So, it's nice that we pass exactly what we need and don't pollute the components with data that they don't need.
74 |
75 | Here is how the wire function looks like:
76 | ```javascript
77 | export default function wire(Component, dependencies, mapper) {
78 | class Inject extends React.Component {
79 | render() {
80 | var resolved = dependencies.map(this.context.get.bind(this.context));
81 | var props = mapper(...resolved);
82 |
83 | return React.createElement(Component, props);
84 | }
85 | }
86 | Inject.contextTypes = {
87 | data: PropTypes.object,
88 | get: PropTypes.func,
89 | register: PropTypes.func
90 | };
91 | return Inject;
92 | };
93 | ```
94 | Inject is a higher-order component that gets access to the context and retrieves all the items listed under dependencies array.
95 | The mapper is a function receiving the context data and transforms it to props for our component.
96 |
97 | #### Non-context alternative
98 | Use a singleton to register/fetch all dependencies
99 | ```javascript
100 | var dependencies = {};
101 |
102 | export function register(key, dependency) {
103 | dependencies[key] = dependency;
104 | }
105 |
106 | export function fetch(key) {
107 | if (key in dependencies) return dependencies[key];
108 | throw new Error(`"${ key } is not registered as dependency.`);
109 | }
110 |
111 | export function wire(Component, deps, mapper) {
112 | return class Injector extends React.Component {
113 | constructor(props) {
114 | super(props);
115 | this._resolvedDependencies = mapper(...deps.map(fetch));
116 | }
117 | render() {
118 | return (
119 |
124 | );
125 | }
126 | };
127 | }
128 | ```
129 |
130 | We'll store the dependencies in dependencies global variable (it's global for our module, not at an application level).
131 |
132 | We then export two functions register and fetch that write and read entries.
133 |
134 | It looks a little bit like implementing setter and getter against a simple JavaScript object.
135 |
136 | Then we have the wire function that accepts our React component and returns a higher-order component.
137 |
138 | In the constructor of that component we are resolving the dependencies and later while rendering the original component we pass them as props.
139 |
140 | We follow the same pattern where we describe what we need (deps argument) and extract the needed props with a mapper function.
141 |
142 | Having the di.jsx helper we are again able to register our dependencies at the entry point of our application (app.jsx) and inject them wherever (Title.jsx) we need.
143 |
144 | ```javascript
145 | // app.jsx
146 | import Header from './Header.jsx';
147 | import { register } from './di.jsx';
148 |
149 | register('my-awesome-title', 'React in patterns');
150 |
151 | class App extends React.Component {
152 | render() {
153 | return ;
154 | }
155 | }
156 | ```
157 | ```javascript
158 | // Header.jsx
159 | import Title from './Title.jsx';
160 |
161 | export default function Header() {
162 | return (
163 |
164 |
165 |
166 | );
167 | }
168 | ```
169 | ```javascript
170 | // Title.jsx
171 | import { wire } from './di.jsx';
172 |
173 | var Title = function(props) {
174 | return
{ props.title }
;
175 | };
176 |
177 | export default wire(Title, ['my-awesome-title'], title => ({ title }));
178 | ```
179 | If we look at the `Title.jsx` file we'll see that the actual component and the wiring may live in different files.
180 | That way the component and the mapper function become easily unit testable.
181 |
--------------------------------------------------------------------------------
/patterns/5.event-handlers.md:
--------------------------------------------------------------------------------
1 | # Event Handlers
2 | Binding event handlers in the constructor.
3 |
4 | Most of the times we handle DOM events in the component that contains the elements dispatching the events.
5 | Like in the example below, we have a click handler and we want to run a function or method of the same component:
6 |
7 | ```javascript
8 | class Switcher extends React.Component {
9 | render() {
10 | return (
11 |
14 | );
15 | }
16 | _handleButtonClick() {
17 | console.log('Button is clicked');
18 | }
19 | }
20 | ```
21 | That's all fine because `_handleButtonClick` is a function and we indeed pass a function to the onClick attribute.
22 |
23 | The problem is that as it is the code doesn't keep the scope. So, if we have to use `this` inside `_handleButtonClick` we'll get an error.
24 | ```javascript
25 | class Switcher extends React.Component {
26 | constructor(props) {
27 | super(props);
28 | this.state = { name: 'React in patterns' };
29 | }
30 | render() {
31 | return (
32 |
35 | );
36 | }
37 | _handleButtonClick() {
38 | console.log(`Button is clicked inside ${ this.state.name }`);
39 | // leads to
40 | // Uncaught TypeError: Cannot read property 'state' of null
41 | }
42 | }
43 | ```
44 |
45 | What we normally do is to use bind like so:
46 | ```javascript
47 |
50 | ```
51 | However, this means that the bind function is called again and again because we may render the button many times.
52 | A better approach would be to create the bindings in the constructor of the component:
53 | ```javascript
54 | class Switcher extends React.Component {
55 | constructor(props) {
56 | super(props);
57 | this.state = { name: 'React in patterns' };
58 | this._buttonClick = this._handleButtonClick.bind(this);
59 | }
60 | render() {
61 | return (
62 |
65 | );
66 | }
67 | _handleButtonClick() {
68 | console.log(`Button is clicked inside ${ this.state.name }`);
69 | }
70 | }
71 | ```
72 |
73 | The other alternative is to use arrow functions for the onClick prop function assignment.
74 | Arrow functions don't affect the context at invocation time (`this` value from the surrounding scope is used).
75 |
76 | Facebook by the way recommend the same technique while dealing with functions that need the context of the same component.
77 | The binding in the constructor may be also useful if we pass callbacks down the tree.
78 |
79 | A short hand example using arrow functions and avoid having to use the constructor:
80 |
81 | ```javascript
82 | class Switcher extends React.Component {
83 | state = { name: 'React in patterns' };
84 |
85 | render() {
86 | return (
87 |
90 | );
91 | }
92 | _handleButtonClick = () => {
93 | console.log(`Button is clicked inside ${ this.state.name }`);
94 | }
95 | }
96 | ```
97 |
--------------------------------------------------------------------------------
/patterns/6.flux-pattern.md:
--------------------------------------------------------------------------------
1 | # Flux pattern for data handling
2 |
3 | **Simple dispatcher**
4 | ```javascript
5 | var Dispatcher = function () {
6 | return {
7 | _stores: [],
8 | register: function (store) {
9 | this._stores.push({store: store});
10 | },
11 | dispatch: function (action) {
12 | if (this._stores.length > 0) {
13 | this._stores.forEach(function (entry) {
14 | entry.store.update(action);
15 | });
16 | }
17 | }
18 | }
19 | };
20 | ```
21 | We expect the store to have an update method(), so let's modify register to expect it.
22 | ```javascript
23 | function register(store) {
24 | if (!store || !store.update || typeof store.update !== 'function') {
25 | throw new Error('You should provide a store that has an update method');
26 | } else {
27 | this._stores.push({store: store});
28 | }
29 | }
30 | ```
31 | **Full blown Dispatcher**
32 | ```javascript
33 | var Dispatcher = function () {
34 | return {
35 | _stores: [],
36 | register: function (store) {
37 | if (!store || !store.update) {
38 | throw new Error('You should provide a store that has an `update` method.');
39 | } else {
40 | var consumers = [];
41 | var change = function () {
42 | consumers.forEach(function (l) {
43 | l(store);
44 | });
45 | };
46 | var subscribe = function (consumer, noInit) {
47 | consumers.push(consumer);
48 | !noInit ? consumer(store) : null;
49 | };
50 |
51 | this._stores.push({store: store, change: change});
52 | return subscribe;
53 | }
54 | },
55 | dispatch: function (action) {
56 | if (this._stores.length > 0) {
57 | this._stores.forEach(function (entry) {
58 | entry.store.update(action, entry.change);
59 | });
60 | }
61 | }
62 | }
63 | };
64 |
65 | module.exports = {
66 | create: function () {
67 | var dispatcher = Dispatcher();
68 |
69 | return {
70 | createAction: function (type) {
71 | if (!type) {
72 | throw new Error('Please, provide action\'s type.');
73 | } else {
74 | return function (payload) {
75 | return dispatcher.dispatch({type: type, payload: payload});
76 | }
77 | }
78 | },
79 | createSubscriber: function (store) {
80 | return dispatcher.register(store);
81 | }
82 | }
83 | }
84 | };
85 | ```
86 |
87 | ### Related links:
88 | - https://github.com/krasimir/react-in-patterns/tree/master/patterns/flux
89 |
--------------------------------------------------------------------------------
/patterns/7.one-way-data-flow.md:
--------------------------------------------------------------------------------
1 | # One way data flow
2 |
3 | One-way direction data flow eliminates multiple states and deals with only one which is usually inside the store.
4 | To achieve that our Store object needs logic that allows us to subscribe for changes:
5 | ```javascript
6 | var Store = {
7 | _handlers: [],
8 | _flag: '',
9 | onChange: function (handler) {
10 | this._handlers.push(handler);
11 | },
12 | set: function (value) {
13 | this._flag = value;
14 | this._handlers.forEach(handler => handler())
15 | },
16 | get: function () {
17 | return this._flag;
18 | }
19 | };
20 | ```
21 | Then we will hook our main App component and we'll re-render it every time when the Store changes its value:
22 | ```javascript
23 | class App extends React.Component {
24 | constructor(props) {
25 | super(props);
26 | Store.onChange(this.forceUpdate.bind(this));
27 | }
28 |
29 | render() {
30 | return (
31 |
32 |
35 |
36 | );
37 | }
38 | }
39 | ```
40 | Notice that we are using forceUpdate which is not really recommended.
41 |
42 | Normally a high-order component is used to enable the re-rendering. We used forceUpdate just to keep the example simple.
43 |
44 | Because of this change the Switcher becomes really simple. We don't need the internal state:
45 | ```javascript
46 | class Switcher extends React.Component {
47 | constructor(props) {
48 | super(props);
49 | this._onButtonClick = e => {
50 | this.props.onChange(!this.props.value);
51 | }
52 | }
53 |
54 | render() {
55 | return (
56 |
59 | );
60 | }
61 | }
62 | ```
63 | The benefit that comes with this pattern is that our components become dummy representation of the Store's data.
64 | It's really easy to think about the React components as views (renderers).
65 | We write our application in a declarative way and deal with the complexity in only one place.
66 |
67 | ### Related links:
68 | - https://www.startuprocket.com/articles/evolution-toward-one-way-data-flow-a-quick-introduction-to-redux
69 |
--------------------------------------------------------------------------------
/patterns/8.presentational-vs-container.md:
--------------------------------------------------------------------------------
1 | # Presentational and Container components
2 |
3 | #### Problem
4 | Data and logic together.
5 | ```javascript
6 | class Clock extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | this.state = {time: this.props.time};
10 | this._update = this._updateTime.bind(this);
11 | }
12 |
13 | render() {
14 | var time = this._formatTime(this.state.time);
15 | return (
16 |
17 | );
18 | }
19 |
20 | componentDidMount() {
21 | this._interval = setInterval(this._update, 1000);
22 | }
23 |
24 | componentWillUnmount() {
25 | clearInterval(this._interval);
26 | }
27 |
28 | _formatTime(time) {
29 | var [ hours, minutes, seconds ] = [
30 | time.getHours(),
31 | time.getMinutes(),
32 | time.getSeconds()
33 | ].map(num => num < 10 ? '0' + num : num);
34 |
35 | return {hours, minutes, seconds};
36 | }
37 |
38 | _updateTime() {
39 | this.setState({time: new Date(this.state.time.getTime() + 1000)});
40 | }
41 | }
42 |
43 | ReactDOM.render(, ...);
44 | ```
45 | #### Solution
46 |
47 | Let's split the component into two parts - container and presentation.
48 |
49 | #### Container Component
50 | Containers know about data, it's shape and where it comes from. They know details about how the things work or the so called business logic.
51 | They receive information and format it so it is easy to use by the presentational component. Very often we use higher-order components to create containers.
52 | Their render method contains only the presentational component.
53 |
54 | ```javascript
55 | // Clock/index.js
56 | import Clock from './Clock.jsx'; // <-- that's the presentational component
57 |
58 | export default class ClockContainer extends React.Component {
59 | constructor(props) {
60 | super(props);
61 | this.state = {time: props.time};
62 | this._update = this._updateTime.bind(this);
63 | }
64 |
65 | render() {
66 | return ;
67 | }
68 |
69 | componentDidMount() {
70 | this._interval = setInterval(this._update, 1000);
71 | }
72 |
73 | componentWillUnmount() {
74 | clearInterval(this._interval);
75 | }
76 |
77 | _extract(time) {
78 | return {
79 | hours: time.getHours(),
80 | minutes: time.getMinutes(),
81 | seconds: time.getSeconds()
82 | };
83 | }
84 |
85 | _updateTime() {
86 | this.setState({time: new Date(this.state.time.getTime() + 1000)});
87 | }
88 | };
89 | ```
90 | #### Presentational component
91 | Presentational components are concerned with how the things look. They have the additional markup needed for making the page pretty.
92 | Such components are not bound to anything and have no dependencies.
93 | Very often implemented as a stateless functional components they don't have internal state.
94 |
95 | ```javascript
96 | // Clock/Clock.jsx
97 | export default function Clock(props) {
98 | var [ hours, minutes, seconds ] = [
99 | props.hours,
100 | props.minutes,
101 | props.seconds
102 | ].map(num => num < 10 ? '0' + num : num);
103 |
104 | return
{ hours } : { minutes } : { seconds }
;
105 | };
106 | ```
107 | The nice things about containers is that they encapsulate logic and may inject data into different renderers.
108 | Very often a file that exports a container is not sending out a class directly but a function.
109 | For example, instead of using
110 |
111 | ```javascript
112 | import Clock from './Clock.jsx';
113 | export default class ClockContainer extends React.Component {
114 | render() {
115 | return ;
116 | }
117 | }
118 | ```
119 | We may export a function that accepts the presentational component:
120 | ```javascript
121 | export default function (Component) {
122 | return class Container extends React.Component {
123 | render() {
124 | return ;
125 | }
126 | }
127 | }
128 | ```
129 | Using this technique our container is really flexible in rendering its result.
130 | It will be really helpful if we want to switch from digital to analog clock representation.
131 |
132 | ### Related links:
133 | - https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.mbglcakmp
134 | - https://github.com/krasimir/react-in-patterns/tree/master/patterns/presentational-and-container
135 | - https://medium.com/@learnreact/container-components-c0e67432e005
136 |
--------------------------------------------------------------------------------
/patterns/9.third-party-integration.md:
--------------------------------------------------------------------------------
1 | # Third Party Integration
2 | Mixing 3rd party integrations/libraries with React
3 |
4 | In this example we'll see how to mix React and jQuery's UI plugin.
5 | We pick tag-it jQuery plugin for the example. It transforms an unordered list to input field for managing tags:
6 | ```html
7 |
8 |
JavaScript
9 |
CSS
10 |
11 | ```
12 | To make it work we have to include jQuery, jQuery UI and the tag-it plugin code. It works like that:
13 |
14 | ```javascript
15 | $('').tagit();
16 | ```
17 | We select a DOM element and call tagit().
18 |
19 | The very first thing that we have to do is to force a single-render of the Tags component.
20 | That's because when React adds the elements in the actual DOM we want to pass the control of them to jQuery.
21 | If we skip this both React and jQuery will work on same DOM elements without knowing for each other. To achieve a single-render we have to use the lifecycle method `shouldComponentUpdate`
22 |
23 | Let's say that we want to programmatically add a new tag to the already running tag-it field.
24 | Such action will be triggered by the React component and needs to use the jQuery API.
25 | We have to find a way to communicate data to Tags component but still keep the single-render approach.
26 | To illustrate the whole process we will add an input field to the App class and a button which if clicked will pass a string to Tags component.
27 |
28 | ```javascript
29 | class App extends React.Component {
30 | constructor(props) {
31 | super(props);
32 |
33 | this._addNewTag = this._addNewTag.bind(this);
34 | this.state = {
35 | tags: ['JavaScript', 'CSS'],
36 | newTag: null
37 | };
38 | }
39 |
40 | _addNewTag() {
41 | this.setState({newTag: this.refs.field.value});
42 | }
43 |
44 | render() {
45 | return (
46 |
47 |
Add new tag:
48 |
49 |
50 |
51 |
52 |
53 |
54 | );
55 | }
56 | }
57 | ```
58 | We use the internal state as a data storage for the value of the newly added field.
59 | Every time when we click the button we update the state and trigger re-rendering of Tags component.
60 | However, because of shouldComponentUpdate we update nothing.
61 | The only one change is that we get a value of the newTag prop which may be captured via another lifecycle method - componentWillReceiveProps
62 | ```javascript
63 | class Tags extends React.Component {
64 | componentDidMount() {
65 | this.list = $(this.refs.list);
66 | this.list.tagit();
67 | }
68 |
69 | shouldComponentUpdate() {
70 | return false;
71 | }
72 |
73 | componentWillReceiveProps(newProps) {
74 | this.list.tagit('createTag', newProps.newTag);
75 | }
76 |
77 | render() {
78 | return (
79 |
80 | { this.props.tags.map((tag, i) =>
{ tag }
) }
81 |
82 | );
83 | }
84 | }
85 | ```
86 | ### Related links:
87 | - https://github.com/krasimir/react-in-patterns/tree/master/patterns/third-party
88 |
--------------------------------------------------------------------------------
/perf-tips/01.shouldComponentUpdate-check.md:
--------------------------------------------------------------------------------
1 | # shouldComponentUpdate() check
2 | `shouldComponentUpdate` check to avoid expensive re-renders
3 |
4 | React Components re-render every time their props or state change.
5 | So imagine having to render the entire page every time there in an action. That takes a big load on the browser.
6 | That’s where ShouldComponentUpdate comes in, whenever React is rendering the view it checks to see
7 | if shouldComponentUpdate is returning false/true. So whenever you have a component that’s static do yourself a favor and return false.
8 | Or if is not static check to see if the props/state has changed.
9 |
10 | #### Bad
11 | ```javascript
12 | const AutocompleteItem = (props) => {
13 | const selectedClass = props.selected === true ? "selected" : "";
14 | var path = parseUri(props.url).path;
15 | path = path.length <= 0 ? props.url : "..." + path;
16 |
17 | return (
18 |