Study-Basic-React-Application/processNotes.txt at master · john-azzaro/Study-Basic-React-Application · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
Process Notes for Basic React Application
=========================================


About Process Notes
===================
"Process Notes" is a step-by-step workflow document that outlines the "phases" of app development which I considered to
be important milestones. Groups of related steps are combined into "phase" modules so that they can be reorganized and refined
in review. Documenting these phases has proven to be EXTREMELY helpful in learning (i.e. Feynman technique
(https://fs.blog/2012/04/feynman-technique/)) and refining workflow so I can improve my process in future projects. It also
 has come in handy for some tricky bug fixes not only for past projects, but this one as well so I would urge you to consider
 at least doing a rough summary for your own benefit.


Project Name
============
Basic React Application


Project Description
===================
Exploration of a basic React application with a single stateless function.


Who is this for?
================
For those who have spent some time in the theoretical phase of learning the React library and want to put thier
knowledge into practical application. This project is means to be EXTREMELY simple


What are the application features?
==================================


Who are the competitors and product insprirations?
==================================================


Process Workflow Summary:
========================

  Phase 1: Project Setup:
    1. Create HTML and JS files.
    2. Add HTML boilerplate and connect JS.

  Phase 2: Add React to the webpage:
    1. Add "application-root" anchor point.
    2. Load the React library code.

  Phase 3: Select "application-root" and add ReactDOM to render app.


Phase 1: Project Setup
===============================================================================
* Standard setup here since its just a simple study, so there's no use of npm or
  node related additions.
===============================================================================

/// Create HTML and JS files...
  =================================================================================
  * Standard setup here, HTML and JS files. No CSS is needed.
  =================================================================================

  1.1: Create HTML and JS files:
    --------------------------------------------------------------------
        index.html   app.js
    --------------------------------------------------------------------

/// Add HTML boilerplate and connect JS...
  =================================================================================
  * You can either create a script tag and insert your code there OR the better way
    would be to create a JS file and link it to the your HTML document.
  =================================================================================
  1.2: Add Boilerplate to HTML and hookup JS file to HTML:
    ---------------------------------------------------------------------
        <!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Basic React Application</title>
          <meta name="Basic React Application" content="Exploration of basic React functionality">
          <script src="app.js" defer></script>
        </head>
        <body>

        </body>
        </html>
    ---------------------------------------------------------------------


Phase 2: Add React to the webpage:
==================================================================================
* In this study, we'll be doing a quick way to create a React application by loading
  the React libraries via CDN we need into the body of the HTML page.
==================================================================================

/// Add "application-root" anchor point...
==============================================================================
* This application-root is what our javascript is going to use to select and
  then render the React application to.
==============================================================================

    2.1: Add an empty div with "application-root" as the ID.
      -------------------------------------------------------------------------------
          <div id="application-root"></div>
      -------------------------------------------------------------------------------


/// Load the React library code...
=============================================================================
* The Two library files create two global variables for us to use in our
  script: React and ReactDOM.
* The react.development.js file is the "non-specific" part which creates the
  global variable React.
* To use React when building webpages, we need the React-DOM part of the library,
  react-dom.development.js.
* The React-DOM part contains methods that live on the global variable ReactDOM,
  which we can use to connect our React code to the DOM.
* Note that using the ".development" versions gives more detailed error messages.
=============================================================================

    2.2: Add "react" and "react-dom" libraries to the HTML file:
      ----------------------------------------------------------------------------------------
          <script src="https://unpkg.com/react@16/umd/react.development.js"></script>               // Library for global React variable.
          <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>       // LIbrary for for connecting React code to the DOM.
      -----------------------------------------------------------------------------------------


Phase 3: Select "application-root" and add ReactDOM to render app to appRoot.
===============================================================================
* After you have added the libraries and the anchor point, you can use React
  inside your JavaScript file.
* In this phase, you need to select the "application-root" element that will be
  used to render the entire application and the ReactDOM.render method to
* ReactDOM will render the app to the webpage, which is the DOM.

    ReactDOM.render(element, container);

    * ".render" accepts TWO arguments: element and container.
    * "element" is the contents of the container.
    * "container" is the DOM element you insert the app into (i.e. appplication-root)

* Essentially, you select the empty div and tell React to render what you want
  to that element.
===============================================================================


/// Select application-root via vanilla JavaScript...
=========================================================================
* Select the application-root id via document.querySelector() and the ID
  and store as a the variable "appRoot".
=========================================================================

  3.1: Select "application-root" and store as "appRoot":
    -----------------------------------------------------------------------------
      const appRoot = document.querySelector('#application-root');                   // select the application-root id and store as a const name appRoot.
    -----------------------------------------------------------------------------


/// Add React.DOM to render app to the webpage (i.e. the DOM)...
===========================================================================
* Once you have the application-root id selected as appRoot, you can use
  ReactDOM.render to render the element to a specified container.
* In this case, we want to render "Hello World" to the appRoot container.
===========================================================================

  3.2: Add ReactDOM.render to render the element to the container:
    --------------------------------------------------------------------------
      const appRoot = document.querySelector('#application-root');

      ReactDOM.render('hello world!', appRoot);                                   // render "hello world" to the container "appRoot".
    --------------------------------------------------------------------------


Phase 4: Write HTML elements with React.createElement.
============================================================================
* Note that HTML elements will NOT render because it is simply writing
  to the page.
* Instead of using a querySelector, you will need to use .createElement.
* To add HTML elements you need to use React.createElement when you create
  a variable.
* React.createElement is assigned to a variable and takes 3 arguments:

  const myVariable = React.createElement('type', props, 'children');
                                            |    |           |
  const myGreeting = React.createElement('h1', null, 'Hello world!');

* Note that you still need to select appRoot since thats the element that
  will be used to render anything you sp[ecify.
============================================================================

  4.1: Create a variable and use the React.createElement method to write HTML to the DOM.
    --------------------------------------------------------------------------------
      const appRoot = document.querySelector('#application-root');
      const myGreeting = React.createElement('h1', null, 'Hello world!');             // create const called "myGreeting" and create an element (React.createElement) with the type, prop,m and children.

      ReactDOM.render(myGreeting, appRoot);                                           // Then when you render to the DOM, call myGreeting as the element and appRoot as the container.
    --------------------------------------------------------------------------------


    Resouces:
    https://reactarmory.com/guides/learn-react-by-itself/react-basics