1  #+title: React Rules of Practices
 2  #+author: HaQadosch
 3  #+date: [2025-08-12 Tue]
 4  #+startup: indent
 5  #+property: header-args :results output
 6  #+link course https://ui.dev/c/react/
 7  * Org mode shortcuts
 8  - tangle :: ~org-babel-tangle~, ~C-c C-v C-t~
 9  
10  ** Config
11  - ~C-c C-c~ :: Refresh local setup for that file
12  
13  ** Dates:
14  - ~C-c .~ :: active timestamps
15    creates an entry in the agenda
16  - ~C-c !~ :: inactive timestamps
17    doesn´t create an entry in the agenda
18  - link :: [[https://orgmode.org/orgguide.html#Timestamps][timestamps]]
19  
20  ** Links:
21  - ~C-c C-l~ :: create link
22  - link :: [[https://orgmode.org/orgguide.html#Hyperlinks][hyperlinks]]
23  
24  ** Tables
25  - ~C-c }~ :: display cells references
26  - ~C-c ?~ :: display ref for that cell
27    references are =@ROW$COLUMN=
28  - link :: [[https://orgmode.org/manual/References.html][table references]]
29  - formula :: =@I..II=
30    select all the rows between horizontal lines (hline) 1 and 2
31    =vmean(@I..II);EN= column range mean, treats empty values as null (0)
32  
33  ** Whitespace
34  - ~M-x whitespace-mode~ :: Activates a better whitespace mode
35  - ~M-x auto-fill-mode~ :: Auto-fill, enforce max size limit
36  - ~M-q~ :: Force auto-fill on current paragraph
37  
38  ** Feetnotes
39  - ~C-c C-x f~ :: Creates a footnote, see [[https://orgmode.org/guide/Creating-Footnotes.html][guide]].
40  - ~C-c C-c~ :: to jump between definition and refs.
41  
42  ** Todos
43  - ~C-c C-t~ :: cycling throught the states of the todos
44  - ~C-u C-c C-t~ :: Log the change of status
45  
46  ** Clocking work
47  - ~C-c C-x C-i~ :: Clock in
48  - ~C-c C-x C-o~ :: Clock out
49  - ~C-c C-x C-d~ :: Display clocks
50  
51  ** Includes files
52  Start with the directive ~INCLUDE~ and the location of the file
53    - ~C-c '~ :: Visit the included file
54    - ~C-c &~ :: Go back to the original doc
55    🟡 The included doc start at the hierarchy of the inclusion
56    See [[https://orgmode.org/manual/Include-Files.html][the manual]]
57  
58  ** Code Block - Structure Template
59  - ~C-c C-,~ :: Insert structure template
60  See [[https://orgmode.org/manual/Structure-Templates.html][17.2 Structure Templates]]
61  and [[https://orgmode.org/manual/Structure-of-Code-Blocks.html][16.2 Structure of Code Blocks]]
62  
63  * Emacs Shortcut
64  - Toggle display of quick help buffer :: ~C-h C-q~ or ~M-x cheat-sheet~
65  
66  * Rules
67  
68  ** Rule #0
69  When a component renders, it should do so without running into any
70  side effects.
71  
72  ** Rule #1
73  If a side effect is *triggered* by an event, put that side effect in
74  an event handler.
75  
76  ** Rule #2
77  If a side effect is synchronising your component with some external
78  system, puth that side effect in ~useEffect~.
79  You should not use ~useEffect~ to synchronise based on a variable change.