React JS content:

Topic1 : Setup
1. Downloading node software
2. Downloading Visual Studio (VS) code
software
3. Uninstalling node software
4. Uninstalling VS code software
5. Installing node software and observing of
Auto Path updating
6. Installing VS code software and observing
of Auto Path updating
7. Observing of Auto Path Updates in the
environment variables
8. Checking versions of node, npm and VS
code.
9. Creating React project
10. Starting React project
11. Stopping React project
Topic2: Understanding the project content
12. Walking through the default
files/directories in the React project.
13. Understanding about project.json
14. Understanding software’s version
numbers
15. Understanding caret (^) symbol in the
version
16. Understanding node_modules
17. Understanding package-lock.json
18. Understanding .gitignore
19. Triggering nmp install (or) npm i
20. Understanding about public folder
21. Accessing files of public folder from the
browser
22. Create new files and folders in the public
folder and then accessing from a Brower
without restarting the application
23. What is the Welcome file
24. Understanding index.html
25. Making a request to un available
resources.
26. Renaming project’s title
27. Developer/Programmer code (src)
 28. Understanding index.js
29. What is a component?
30. Different features in the web
component?
31. Different files in the Web component
32. Understanding default App component
33. Modifying App component
34. Using App component multiple times
35. Understanding index.css
36. Understanding usage of logo.svg
through import in the App.js.
37. Understanding Presentation portion in
the App component.
Topic3: Essential concepts of Javascript – part1:
38. Javascript let variable
39. Javascript var variables
40. Javascript const declaration
41. Javascript arrays
42. JSON object
43. Array of JSON objects.
 44. Javascript function through declaration
45. Javascript functions through Expression
46. Javascript functions through arrow
47. Understanding export
48. Understanding default
49. Understanding import
Topic4: Implementing Javascript code and CSS in
the App component
50. Understanding javascript (programming)
portion in the app component
51. Declaring and using javascript variables
inside App component
52. Declaring , Defining and using javascript
functions inside App component
53. Declaring json object and using in the
app component
54. Declaring and using javascript arrays
inside App component
55. Using array’s map method
56. Using array’s forEach method
57. Using array of json objects
 58. Understanding the usage of styles in the
App component from App.css
59. Difference between index.css and
App.css

Topic 5: Component creation and usage

60. Creating a new component and using the
same in the App component (assume
Student component)
61. Adding styles to new component
62. Repeating usage of new component
63. Understanding the order of considering
css files from Our component, App
component and index.css
64. Creating multiple components and using
multiple times
Topic 6: useState and useEffect
65. useState
 66. useEffect
67. create json file
68. access json file from the browser.
69. load json file into the component
70. print json objects from loaded json file
Topic7: Form Fields
71. differences between <input type=’button’
and <button tag with type
72. Component with text fields
73. onChange event
74. onClick event and print the data in the
console
75. placeholder verses value?
76. Component with the password field
77. Component with the textarea
78. Component with date field
79. Component with datetime-local field
80. Component with the select (drop down)
81. Component with text, password, textarea
and select
 82. Reading form data into json object
83. Component with a simple signup form
84. Component with a simple login form
Topic8: Essential concepts of Javascript – part2:
85. javascript arrays revived
86. javascript arrays map method
87. javascript arrays filter function
88. javascript arrays reduce method
89. JSON object revived
90. JSON.parse()
91. JSON.stringify()
92. Object.keys(obj)
93. Object.values(obj)
94. Object.entries(obj)
95. Object.assign(target, source)
96. delete obj.key
97. Spread syntax: {...obj, newKey: 'value'}
Topic9: Complex form fields
98. Component with the radio buttons
 99. Component with the checkboxes
100. Component with the multi select (drop
down)
101. Component with the file upload
102. Component with the multiple files upload
103. Component with the file upload with
multiple
104. Component with the complex signup
form
Topic10: Form validations
105. text field validation
106. password field validation
107. textarea field validation
108. date field validation
109. datetime field validation
110. email field validation
111. radio button validation
112. checkboxes validation
113. select validation
114. multi select validation
 115. file upload validation
116. file with multiple validation
117. simple signup form validation
118. simple signup form validation with focus
119. simple login form validation
120. simple login form validation with the
focus
121. Complex signup form with the validation
and the focus
Topic10: React Routers
122. Install react router library
123. Setup the routers in the index.js
124. Add a new component to the router
125. Add few more components to the router
126. Mapping App component to 404
(resource not found)
127. Mapping New Component (NotFound) to
404
128. Sending parameter to the route
129. Sending multiple parameters to the route
Topic11: Nesting a components
130. A simple child inside a parent
131. Child inside a Child
132. Developing 4 levels of parent to child
133. Sending parameter to the child from a
parent
134. Sending multiple parameters to the child
from a parent
135. Sending an array to the child
136. Sending JSON object to the child
137. Sending array of JSON objects to the
child
138. Sending function itself as an input to the
child and child executing the same function
(callback)
139. Sending state variable to a child
(useState type)
140. Sending state and its setter to a child
(useState type)
141. Declare createContext()
142. Declare useContext()
143. Apply useContext in the child
components.
144. Declare createContext and useContext in
the same file and apply in the child
components.
145. Find the differences between useState()
and useContext()

Topic12: Fetch API (To call to serverside api’s)

146. Get the raw message from the server
147. Get message inside a JSON object
148. Get a raw array from the server
149. Get an array content inside a JSON
object
150. Get list content inside a JSON object
151. Get set content inside a JSON object
152. Get map content inside a JSON object
153. Get Person object inside a JSON object
154. Get array of Person objects inside a
JSON object
155. Get multiple Person objects inside a
HashMap. This HashMap is in the JSON
object
156. Get a List which contains multiple
HashMaps. Each HashMap contains
multiple Persons. Return List in the JSON
object
157. Post a simple form in the form of JSON
to the serverside API
158. Post a simple form in the form of JSON
to the serverside API with validations.
159. Post a simple signup form in the form of
JSON to the serverside API
160. Post a simple signup form in the form of
JSON to the serverside API with a
validations.
161. Post a simple signup form in the form of
FormData to the serverside API
162. Post a simple signup form in the form of
FormData to the serverside API with
validations.

163. Post a simple Login form in the form of

JSON to the serverside API
164. Post a simple Login form in the form of
JSON to the serverside API with validations.
165. Post a simple Login form in the form of
FormData to the serverside API
166. Post a simple Login form in the form of
FormData to the serverside API with a
validations.
167. File upload to the serverside API
168. File upload to the serverside API with the
validation
169. A simple signup form which contains
profile pic through FormData.
170. A simple signup form which contains
profile pic through FormData with
validations.
171. Read Form data and then update (GET
and PUT mappings)
172. Read Form data and then update (PATCH
mapping)
173. Read list of persons and display in the
table format
174. Delete selected record (DELETE
mapping)
Topic13: CRUD operations by using fetch API
175. Set up the backend app (Spring Boot
app)
176. Define Entity, Repositories
177. Define Service Layer for the CRUD
operations
178. Define Controller layer for the CRUD
operations.
179. Setup frontend app (React JS app)
180. Define service layer
181. Create CREATE service
182. Create Read All service
183. Create Read service
184. Create Update service
185. Create delete service
186. Create CREATE component
187. Create Read All component
188. Create Read component
189. Create Update component
190. Create delete component
191. Configure routes for the CRUD operation.
192. Add radio button to the CRUD
operations.
193. Add checkboxes to the CRUD operations.
194. Add select (drop down) to the CRUD
operations.
Topic14: axios library(To call to serverside
api’s)
195. Get the raw message from the server
196. Get message inside a JSON object
197. Get a raw array from the server
198. Get an array content inside a JSON
object
199. Get list content inside a JSON object
200. Get set content inside a JSON object
201. Get map content inside a JSON object
202. Get Person object inside a JSON object
203. Get array of Person objects inside a
JSON object
204. Get multiple Person objects inside a
HashMap. This HashMap is in the JSON
object
205. Get a List which contains multiple
HashMaps. Each HashMap contains
multiple Persons. Return List in the JSON
object
206. Post a simple form in the form of JSON
to the serverside API
207. Post a simple form in the form of JSON
to the serverside API with validations.
208. Post a simple signup form in the form of
JSON to the serverside API
209. Post a simple signup form in the form of
JSON to the serverside API with a
validations.
210. Post a simple signup form in the form of
FormData to the serverside API
211. Post a simple signup form in the form of
FormData to the serverside API with
validations.
212. Post a simple Login form in the form of
JSON to the serverside API
213. Post a simple Login form in the form of
JSON to the serverside API with validations.
214. Post a simple Login form in the form of
FormData to the serverside API
215. Post a simple Login form in the form of
FormData to the serverside API with a
validations.
216. File upload to the serverside API
217. File upload to the serverside API with the
validation
218. A simple signup form which contains
profile pic through FormData.
219. A simple signup form which contains
profile pic through FormData with
validations.
220. Read Form data and then update (GET
and PUT mappings)
221. Read Form data and then update (PATCH
mapping)
222. Read list of persons and display in the
table format
223. Delete selected record (DELETE
mapping)
Topic15: CRUD operations by using axios
Library
224. Set up the backend app (Spring Boot
app)
225. Define Entity, Repositories
226. Define Service Layer for the CRUD
operations
227. Define Controller layer for the CRUD
operations.
228. Setup frontend app (React JS app)
229. Define service layer
230. Create CREATE service
231. Create Read All service
232. Create Read service
233. Create Update service
234. Create delete service
235. Create CREATE component
236. Create Read All component
237. Create Read component
238. Create Update component
239. Create delete component
240. Configure routes for the CRUD operation.
241. Add radio button to the CRUD
operations.
 242. Add checkboxes to the CRUD operations.
243. Add select (drop down) to the CRUD
operations.
Topic15: Essential concepts of Javascript – part3:
244. Call back
245. Call back hell
246. Promises
247. async and await
Topic16: Revamping CRUD operations by using
async and await with axios library
Topic17: Project development
​ Developing Lead Management system from a
scratch.