├── README.md
├── img
    └── template-placar.PNG
└── react-placar.md


/README.md:
--------------------------------------------------------------------------------
  1 | # 🌈 React Cheat Sheet
  2 | 
  3 | > A simple cheat sheet for facilitate the process in the workshops and event about React. Let me know if you see any problem, I'll love a pull request for improve this document.
  4 | 
  5 | ## Table of contents
  6 | 
  7 | - [x] [Installation](#installation)
  8 | - [x] [No configuration](#no-configuration)
  9 | - [x] [ReactDOM](#reactdom)
 10 | - [x] [Functional Stateless Component](#functional-stateless-component)
 11 | - [x] [Class Component](#class-component)
 12 | - [x] [Composition](#composition)
 13 | - [x] [Module component](#module-component)
 14 | - [x] [Hot Module Replacement](#hot-module-replacement)
 15 | - [x] [Props](#props)
 16 | - [x] [State](#state)
 17 | - [x] [Methods and Events](#methods-and-events)
 18 | - [x] [State manipulation](#state-manipulation)
 19 | - [x] [Bindings](#bindings)
 20 | - [ ] [Refs](#refs)
 21 | - [ ] [Keys](#keys)
 22 | - [ ] [Component Lifecycle](#component-lifecycle)
 23 | - [ ] [Inline Styles](#inline-styles)
 24 | - [ ] [React Router](#react-router)
 25 | - [ ] [Storybook](#storybook)
 26 | - [ ] [Tests](#tests)
 27 | - [ ] [a11y](#a11y)
 28 | - [ ] [API comunication](#api-comunication)
 29 | - [ ] [Flux](#flux)
 30 | - [ ] [Redux](#redux)
 31 | - [ ] [MobX](#mobx)
 32 | - [ ] [Best Practices](#best-practices)
 33 | - [ ] [Concepts](Concepts)
 34 |     - [ ] [Immutable](#immutable)
 35 |     - [ ] [Functionnal programing](#functionnal-programing)
 36 |     - [ ] [Virtual Dom](#virtual-dom)
 37 | - [x] [ES6](#es6)
 38 |     - [x] [Arrow Functions](#arrow-functions)
 39 |         - [x] [Syntax](#syntax)
 40 |         - [x] [Advanced Syntax](#advanced-syntax)
 41 |     - [x] [Spread Operations](#spread-operations)
 42 |         - [x] [Spread in array literals](#spread-in-array-literals)
 43 |         - [x] [Spread in object literals](#spread-in-object-literals)
 44 | 
 45 | ---
 46 | 
 47 | ## Installation
 48 | 
 49 | * Add the tags in your HTML
 50 |     ```HTML
 51 |     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
 52 |     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
 53 |     ```
 54 | * Run this scripts in your terminal
 55 |     ```SSH
 56 |     $ npm install react react-dom
 57 |     ```
 58 |  
 59 |  **[⬆ back to top](#table-of-contents)**
 60 | ---
 61 |  
 62 | ## No configuration
 63 | 
 64 | Just start with React no configuration (run the scripts bellow in your terminal)
 65 | * Install the React
 66 |     ```SSH
 67 |     $ npm install -g create-react-app
 68 |     ```
 69 | * Create your application (change `myApp` to your application name)
 70 |     ```
 71 |     $ create-react-app myApp
 72 |     ```
 73 | * Go to the application folder and install the dependencies
 74 |     ```
 75 |     $ cd myApp
 76 |     $ npm install
 77 |     ```
 78 | * Start your application
 79 |     ```
 80 |     $ npm start
 81 |     ```
 82 | * Go to the browser by `URL` bellow and see your beautiful application   
 83 |     - [localhost:8080](http://localhost:8080)
 84 | 
 85 | **[⬆ back to top](#table-of-contents)** 
 86 | ---
 87 | 
 88 | ## ReactDOM
 89 | 
 90 | ```JS
 91 | import React, { Component } from 'react';
 92 | import ReactDOM from 'react-dom';
 93 | 
 94 | ReactDOM.render( <h1>Hello React Ladies</h1>, document.getElementById('root') );
 95 | ```
 96 | 
 97 | **[⬆ back to top](#table-of-contents)**
 98 | ---
 99 | 
100 | ## Functional Stateless Component
101 | 
102 | ```JS
103 | import React from 'react';
104 | 
105 | const Button = () =>
106 |     <button> Apply</button>
107 | 
108 | export default Button;
109 | ```
110 | 
111 | ```JS
112 | import React from 'react';
113 | 
114 | const Button = ({ onClick, className = 'button', children  }) =>
115 |     <button
116 |         onClick={ onClick }
117 |         className={ className }
118 |         type='button'
119 |     >
120 |         { children }
121 |     </button>
122 | 
123 | export default Button;
124 | ```
125 | 
126 | **[⬆ back to top](#table-of-contents)**
127 | ---
128 | 
129 | ## Class Component
130 | 
131 | ```JS
132 | import React, { Component } from 'react';
133 | 
134 | class MyComponent extends Component {
135 |     render() {
136 |         return (
137 |             <div className="main">
138 |                 <h1>Helo Devas</h1>
139 |             </div>
140 |         );
141 |     }
142 | }
143 | 
144 | export default MyComponent;
145 | ```
146 | 
147 | ```JS
148 | import React, { Component } from 'react';
149 | 
150 | class MyComponent () extends Compnent {
151 |     constructor ( props ) {
152 |     super(props);
153 |     this.state = { message: 'Helo Devas' }
154 |     };
155 | 
156 |     render() {
157 |         return (
158 |             <div className="main">
159 |                 <h1>{ this.state.message }</h1>
160 |             </div>
161 |         );
162 |     }
163 | }
164 | 
165 | export default MyComponent;
166 | 
167 | ```
168 | 
169 | **[⬆ back to top](#table-of-contents)**
170 | --- 
171 | 
172 | ## Composition
173 | 
174 | ```JS
175 | import React, { Component } from 'react';
176 | import ReactDOM from 'react-dom';
177 | 
178 | class Love extends Component {
179 |     render() {
180 |         return (
181 |             <div clssName="love">
182 |                 <h1>My love</h1>
183 |             </div>
184 |         );
185 |     }
186 | }
187 | 
188 | class LoveList extends Component {
189 |     render() {
190 |         return (
191 |             <div>
192 |                 <Love />
193 |                 <Love />
194 |                 <Love />
195 |                 <Love />
196 |             </>
197 |         );
198 |     }
199 | }
200 | 
201 | ReactDOM.render(
202 |     <Love />,
203 |     document.getElementById(´root´)
204 | );
205 | 
206 | **[⬆ back to top](#table-of-contents)**
207 | ```
208 | 
209 | ## Module component
210 | 
211 | ```JS
212 | //App.js
213 | import React, { Component } from 'react';
214 | 
215 | class App extends Component {
216 |     render() {
217 |         return (
218 |             <div className="app">
219 |                 <p>My App</p>
220 |             </div>
221 |         );
222 |     }
223 | }
224 | 
225 | export default App
226 | ```
227 | 
228 | ```JS
229 | //Index.js
230 | import React, { Component } from 'react';
231 | import ReactDOM from 'react-dom';
232 | import App from './App.js';
233 | 
234 | class Index extends Component {
235 |     render() {
236 |         return (
237 |             <div className="app">
238 |                 <App />
239 |             </div>
240 |         );
241 |     }
242 | }
243 | 
244 | 
245 | ReactDOM.render (
246 |     <Index />,
247 |     document.getElementById('root')
248 | );
249 | 
250 | ```
251 | 
252 | **[⬆ back to top](#table-of-contents)**
253 | ---
254 | 
255 | ## Hot Module Replacement
256 | * Retain application state which is lost during a full reload.
257 | * Save valuable development time by only updating what's changed.
258 | * Tweak styling faster -- almost comparable to changing styles in the browser's debugger.
259 | 
260 | ```JS
261 | import React, { Component } from 'react';
262 | import ReactDOM from 'react-dom';
263 | import MyComponent from './MyComponent';
264 | 
265 | ReactDOM.render( <MyComponent />, document.getElementById('root') );
266 | 
267 | if (module.hot) {
268 |     module.hot.accept();
269 | }
270 | ```
271 | 
272 | **[⬆ back to top](#table-of-contents)**
273 | ---
274 | 
275 | ## Props
276 | 
277 | ```JS
278 | import React, { Component } from 'react';
279 | 
280 | class App extends Component {
281 |     render() {
282 |         return (
283 |             <div className="app">
284 |                 <p>My App {this.props.name}</p>
285 |             </div>
286 |         );
287 |     }
288 | }
289 | 
290 | class Index extends Component {
291 |     render() {
292 |         return (
293 |             <div className="app">
294 |                 <App name="Simone"/>
295 |             </div>
296 |         );
297 |     }
298 | }
299 | 
300 | export default Index;
301 | ```
302 | 
303 | **[⬆ back to top](#table-of-contents)**
304 | ---
305 | 
306 | ## State
307 | 
308 | ```JS
309 | import React, { Component } from 'react';
310 | 
311 | class App extends Component {
312 |     constructor(props) {
313 |         super(props);
314 |         this.state = {messages: 0};
315 |     } 
316 | 
317 |     render() {
318 |         return (
319 |             <div className="app">
320 |                 <p>My messages: {this.state.messages}</p>
321 |             </div>
322 |         );
323 |     }
324 | }
325 | 
326 | export default App;
327 | ```
328 | 
329 | **[⬆ back to top](#table-of-contents)**
330 | ---
331 | 
332 | ## Methods and Events
333 | 
334 | ```JS
335 | import React, { Component } from 'react';
336 | 
337 | class App extends Component {
338 | 
339 |     escreve() {
340 |       console.log("Eu te amo");
341 |     }
342 | 
343 |     render() {
344 |         return (
345 |             <div className="app">
346 |                 <button onClick={this.escreve}>save</button>
347 |             </div>
348 |         );
349 |     }
350 | }
351 | 
352 | export default App;
353 | ```
354 | 
355 | **[⬆ back to top](#table-of-contents)**
356 | ---
357 | 
358 | ## State manipulation
359 | 
360 | ```JS
361 | import React, { Component } from 'react';
362 | 
363 | class App extends Component {
364 |     constructor() {
365 |         super();
366 |         this.state = { like: 0 };
367 |     } 
368 | 
369 |     isLiked = () => {
370 |       this.setState({ like: this.state.like + 1});
371 |     }
372 | 
373 |     render() {
374 |         return (
375 |             <div className="app">
376 |                 <button onClick={ this.isLiked }>{ this.state.like }</button>
377 |             </div>
378 |         );
379 |     }
380 | }
381 | 
382 | export default App;
383 | ```
384 | 
385 | ```JS
386 | import React, { Component } from 'react';
387 | 
388 | class App extends Component {
389 |     constructor() {
390 |         super();
391 |         this.state = { messages: ['JS', 'React'] };
392 |     } 
393 | 
394 |     addMessages = () => {
395 |         const updateMessages = [...this.state.messages, 'Polymer']
396 |         this.setState({ messages: [...updateMessages] })
397 |     }
398 | 
399 |     render() {
400 |         return (
401 |             <div className="app">
402 |                 <button onClick={this.addMessages}>add</button>
403 |                 {console.log(this.state.messages) /* ['JS', 'React', 'Polymer'] */}
404 |             </div>
405 |         );
406 |     }
407 | }
408 | 
409 | export default App;
410 | ```
411 | 
412 | 
413 | **[⬆ back to top](#table-of-contents)**
414 | ---
415 | d
416 | ## Bindings
417 | 
418 | ```JS
419 | import React, { Component } from 'react';
420 | 
421 | class MyComponent extends Component {
422 |     constructor () {
423 |     super();
424 | 
425 |     this.state = { list: list };
426 | 
427 |     this.doSomethingElse = this.doSomethingElse.bind(this);
428 |     };
429 | 
430 |     doSomething = () => {
431 |         // do something
432 |         /* if don't have a parameter, you can use arrow function
433 |            and don't need to use bind */
434 |     }
435 | 
436 |     doSomethingElse ( itemId ) {
437 |         // do something else
438 |     }
439 | 
440 |     render() {
441 |         return (
442 |             <div className="main">
443 |                 {this.state.list.map( item =>
444 |                 ...
445 |                     <button 
446 |                         onClick={ this.doSomething } 
447 |                         type="button"
448 |                     >
449 |                         Some Thing
450 |                     </button>
451 | 
452 |                     <button 
453 |                         onClick={ () => this.doSomethingElse( item.objectID ) } 
454 |                         type="button"
455 |                     >
456 |                         Some Thing Else
457 |                     </button>
458 |                 ...
459 |                 )}
460 |             </div>
461 |         );
462 |     }
463 | }
464 | 
465 | export default MyComponent;
466 | ```
467 | 
468 | ---
469 | 
470 | # ES6
471 | 
472 | ## Arrow Functions
473 | 
474 | ### Syntax
475 | 
476 |   #### Basic syntax
477 |     ```JS
478 |     ( param1, param2, ..., paramN ) => { statements }
479 | 
480 |     ( param1, param2, ..., paramN ) =>  expression
481 | 
482 |     ( singleParam ) => { statements }
483 | 
484 |     singleParam => { statements }
485 | 
486 |     () => { statements }
487 |     ```
488 |   #### Advanced Syntax
489 |     ```JS
490 |     params => ({ foo: bar }) /* return an object literal expression */
491 | 
492 |     ( param1, param2, ...ladies ) =>  { statements } /* rest parameters */
493 | 
494 |     ( language = JS, ladies, ..., framework = React ) => { statements } /* default parameters */
495 | 
496 |     const sum = ( [num1, num2] = [1, 2], { x: num3 } = { x : num1 + num2 } ) => num1 + num2 + num3  /*  destructuring within the parameter list */
497 |     sum() /* 6 */
498 |     ```
499 | 
500 | ---
501 | 
502 | ## Spread Operations
503 | 
504 | ### Spread in array literals
505 | ```JS
506 | const basics = [ 'JS', 'HTML', 'CSS' ];
507 | const frameworks = [ 'React', 'Vue' ];
508 | const web = [ ...basics, ...frameworks ]; 
509 | console.log(web); /* ['JS', 'HTML', 'CSS', 'React', 'Vue'] */
510 | 
511 | const addWeb = [ ...web, 'al11' ];
512 | console.log(addWeb); /* ['JS', 'HTML', 'CSS', 'React', 'Vue', 'al11'] */
513 | ```
514 | 
515 | ### Spread in object literals
516 | ```JS
517 | const basics = { behavior: 'JS', markup: 'HTML' };
518 | const style = 'CSS';
519 | const web = { ...basics, style }; 
520 | console.log(web); /* { behavior: "JS", markup: "HTML", style: "CSS" } */
521 | 
522 | const devFront = { framework: 'react', event: 'React Conf' };
523 | const devBack = { framework: 'django', state: 'cool' };
524 | 
525 | const cloneDev = { ...devFront };
526 | console.log(cloneDev); /* { framework: 'react', event: 'React Conf' } */
527 | 
528 | const merged = { ...devFront, ...devBack };
529 | console.log(cloneDev); /* { framework: 'django', event: 'React Conf', state: 'cool' } */
530 | ```


--------------------------------------------------------------------------------
/img/template-placar.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/simoneas02/react-cheatsheet/4127a157fe61e248ee4fd3cdc98d1b07f202ffb9/img/template-placar.PNG


--------------------------------------------------------------------------------
/react-placar.md:
--------------------------------------------------------------------------------
  1 | 
  2 | ![template-placar](img/template-placar.PNG)
  3 | 
  4 | # React Placar
  5 | 
  6 | > Um Simples exemplo de uso da biblioteca React.js by [Aprendendo React na prática - Props (Parte 8)](https://www.youtube.com/watch?v=eQV-UV0oz9k)
  7 | 
  8 | Passos dos componentes:
  9 | - Tudo começa no `App.js` que é o componente que possui os dados
 10 | - Esses dados são passados como propriedade para o componente `PlacarContainer`
 11 | - O componente `PlacarContainer` contém dois estados `gols_casa` e `gols_visitante` que são manipulados pelos métodos `marcarGolCasa` e `marcarGolVisitante`
 12 | - O componente `PlacarContainer` contém mais dois componentes `Partida` e `Time` que recebem as propriedades que o componente `PlacarContainer` herdou do componente  `App.js`
 13 | - O componente `Time` utiliza a informação recebida por `PlacarContainer`, renderiza e repassa uma função para o componente `BotaoGol` informando como ele deve marcar um gol
 14 | - O componente `BotaoGol` recebe a informação através de propriedade e segue os comandos repassados, que na verdade altera o estada do componente `PlacarContainer`
 15 | 
 16 | ```JS
 17 | `src/app.js`
 18 | 
 19 | import React from 'react';
 20 | import ReactDOM from 'react-dom';
 21 | import App from './src/components/App';
 22 | 
 23 | ReactDOM.render(<App />, document.getElementById('root'));
 24 | ```
 25 | 
 26 | ```JS
 27 | `src/components/App.js`
 28 | 
 29 | import React, { Component } from 'react';
 30 | import PlacarContainer from './src/components/PlacarContainer';
 31 | 
 32 | class App extends Component {
 33 | 
 34 | const dados = {
 35 |   partida: {
 36 |     estadio: "Maracanã/RJ",
 37 |     data: "22/05/2017",
 38 |     horario: "19h"
 39 |   },
 40 |   casa: {
 41 |     nome: "Vasco"
 42 |   },
 43 |   visitante: {
 44 |     nome: "Flamengo"
 45 |   }
 46 | }
 47 | 
 48 |   render() {
 49 |     //- passando as propriedades do componente `App` para o componente `PlacarContainer`
 50 |     return <PlacarContainer partida={ dados.partida}
 51 |                             casa={ dados.casa}
 52 |                             visitante={ dados.visitante} />;
 53 | }
 54 | 
 55 | export default App;
 56 | ```
 57 | 
 58 | ```JS
 59 | `src/components/PlacarContainer.js`
 60 | 
 61 | import React, { Component } from 'react';
 62 | import Time from './src/components/Time';
 63 | import Partida from './src/components/Partida';
 64 | 
 65 | class PlacarContainer extends Component {
 66 |   constructor() {
 67 |     super();
 68 |     this.state = {
 69 |       gols_casa: 0,
 70 |       gols_visitante: 0
 71 |     }
 72 | 
 73 |     marcarGolCasa() {
 74 |       this.setState({
 75 |         gols_casa: this.setState.gols_casa + 1
 76 |       })
 77 |     }
 78 | 
 79 |     marcarGolVisitante() {
 80 |       this.setState({
 81 |         gols_visitante: this.setState.gols_visitante + 1
 82 |       })
 83 |     }
 84 |   }
 85 | 
 86 |   render() {
 87 |     return (
 88 |       <div>
 89 |         <div>
 90 |           <h3>casa</h3>
 91 |           <Time nome={this.props.casa.nome} 
 92 |                 gols={this.state.gols_casa}
 93 |                 marcarGol={this.marcarGolCasa.bind(this)} />
 94 |         </div>
 95 |         <div>
 96 |           <Partida estadio={this.props.partida.estadio} 
 97 |                    data={this.props.partida.data}
 98 |                    horario={this.props.partida.horario />
 99 |         </div>
100 |         <div>
101 |           <h3>Visitante</h3>
102 |           <Time nome={this.props.visitante.nome} 
103 |                 gols={this.state.gols_visitante}
104 |                 marcarGol={this.marcarGolvisitante.bind(this)} />
105 |         </div>
106 |       </div>
107 |     )
108 | }
109 | 
110 | export default PlacarContainer;
111 | ```
112 | 
113 | ```JS
114 | `src/components/Time.js`
115 | 
116 | import React, { Component } from 'react';
117 | import BotaoGol from './src/components/BotaoGol';
118 | 
119 | class Time extends Component {
120 | 
121 |   render() {
122 |     return (
123 |       <div>
124 |         <h1>{this.props.nome}</h1>
125 |         <h1>{this.props.gols}</h1>
126 |         <BotaoGol marcarGol={this.props.marcarGol} />
127 |       </div>
128 |     )
129 | }
130 | 
131 | export default Time;
132 | ```
133 | 
134 | ```JS
135 | `src/components/Partida.js`
136 | 
137 | import React, { Component } from 'react';
138 | 
139 | class Partida extends Component {
140 | 
141 |   render() {
142 |     return (
143 |       <div>
144 |         h2>{this.props.estadio}</h2>
145 |         <div>
146 |           <span>{this.props.data}</span>
147 |           <span>-</span>
148 |           <span>{this.props.horario}</span>
149 |         </div>
150 |       </div>
151 |     )
152 | }
153 | 
154 | export default Partida;
155 | ```
156 | 
157 | ```JS
158 | `src/components/BotaoGol.js`
159 | 
160 | import React, { Component } from 'react';
161 | 
162 | class BotaoGol extends Component {
163 |   thishandleClick(event) {
164 |     event.preventDefault(); //- ação para cancelar o evento padrão do botão.
165 |     this.props.marcarGol(); //- ao clicar irá acionar esse método  que pertence ao componente PlacarContainer 
166 |   }
167 | 
168 |   render() {
169 |     return (
170 |       <button onClick={thishandleClick.bind(this)}><button>
171 |     )
172 | }
173 | 
174 | export default BotaoGol;
175 | ```


--------------------------------------------------------------------------------