Full Stack development MERN Practical Notes | B.Sc. (Information Technology) Semester 5 | Mumbai University | munotes

Contents

Module I Frontend Development using React

1. How This Practical Is Examined: the Slip, the Journal and the Viva 1
2. What MERN Is, and What Each of the Four Letters Does 4
3. The Laboratory from Zero: Node.js, npm and Visual Studio Code 7
4. Your First Node.js File, and Running It from the Terminal 11
5. console.log, Variables, and Arithmetic in Node.js 14
6. let, const and var, and Which One to Write 18
7. Variables and Functions in One Short Program 21
8. Operators: Arithmetic, Comparison, Logical and the Ones That Catch You 24
9. Control Statements: if, else if, else and switch 29
10. Loops: for, while, do...while and for...of 32
11. Template Literals, and Why Backticks Replaced the Plus Sign 36
12. What Practical 2 Is For: the JavaScript React and Express Both Assume 39
13. Functions and Parameters, and the Three Ways to Write One 41
14. Arrays: Making Them, Reading Them, Changing Them 44
15. Objects: Keys, Values, Dot and Bracket 48
16. Arrow Functions, and Where They Differ 52
17. map: One Array into Another 56
18. filter and reduce 60
19. Changing an Object Without Breaking It: Spread and Destructuring 64
20. One Program with Functions, Arrays and Objects Together 69
21. Modules: require, import, and the Two Systems You Will Meet 73
22. What React Does, and What a Component Is 77
23. Creating the Project with Vite, and What Each File Is For 80
24. Welcome to MERN Stack Development: the First Page 84
25. JSX: HTML in JavaScript, and the Rules It Adds 87
26. Showing a Value with Curly Braces 90
27. A Function that Adds Two Numbers, on the Page 94
28. Styling: index.css, className, and the style Attribute 97
29. Your Own Functional Component, Rendered from App.jsx 101
30. The Date and Time on the Page, and Why It Does Not Move 105
31. What Practical 4 Adds: Props and State 109
32. Several Components on One Page 112
33. Props: Data from Parent to Child 115
34. Props, Continued: Destructuring, Defaults and children 120
35. useState: the Value React Re-renders For 124
36. Events: onClick, the Event Object and the Handler 131
37. A Controlled Form: value, onChange, and What the User Typed 136
38. A List on the Page with map(), and the key Prop 141
39. The Counter 147
40. The To-Do List 152
41. What Practical 5 Adds: Pages, and Data from Somewhere Else 158
42. Installing and Configuring React Router 160
43. Several Pages, and the Routes that Choose Between Them 164
44. Link and Routes, and Why an Anchor Tag Is Wrong Here 169
45. useEffect, and When a Component Talks to the Outside 174
46. Axios, and Fetching Data from a Public API 181
47. Loading, Errors, and the Three States Every Fetch Has 188
48. Showing Fetched Data as a List and as a Table 194
49. Search and Filter on What Is Shown 200

Module II Backend Development Using Node.js, Express, and MongoDB

1. What the Backend Is, and Why the Browser Cannot Do It 207
2. Node.js as a Web Server, Before Express 210
3. Installing Express, and the Six Lines That Are a Server 214
4. res.send: Answering the Browser 219
5. HTTP: the Method, the Path, the Status Code and the Headers 223
6. Routes in Express: a Path, a Method and a Function 227
7. Route Parameters and Query Strings 231
8. res.json, and the JSON a Program Reads 235
9. Testing a Route: the Browser, curl and Postman 240
10. Running the Server, Reading Its Console, and nodemon 245
11. What MongoDB Is: Documents, Collections and BSON 250
12. Installing MongoDB Community Server and Starting mongod 254
13. mongosh, a Database and a Collection 258
14. insertOne, insertMany, and the _id MongoDB Adds 262
15. find, findOne, and Reading What Came Back 267
16. Query Filters, Projections and sort 270
17. updateOne, $set, and the Update Operators 275
18. deleteOne and deleteMany, and Deleting Carefully 281
19. CRUD: the Four Words and the Four Operations 286
20. Connecting Node.js to MongoDB: the Driver and Mongoose 289
21. The Mongoose Schema and Model 293
22. What Makes an API RESTful 299
23. A REST API in Express: the Five Routes 303
24. A GET Route that Returns Documents 308
25. React Fetching from Our Own API, and the Error in Between 313
26. CORS, and the One Line That Fixes It 319
27. A POST from React, and express.json() Reading the Body 326
28. Saving What Arrived into MongoDB, and What to Send Back 331
29. Showing the Saved Rows in React 338
30. Keeping the Address Out of the Code: .env and the Base URL 344
31. What Practical 9 Is: One Collection, Four Operations, Both Ends 349
32. POST /api/users: the Route, the Model and the Validation 353
33. The React Form That Sends a User to the Backend 359
34. Reading the Users Back Out and Listing Them 366
35. PUT and the Update: Finding a Document by Its id 373
36. The Edit Form in React, and Where the Editing State Lives 380
37. DELETE, and Asking Before You Do It 388
38. Keeping the Page in Step with the Database After Every Change 395
39. Putting the Two Halves Together 402
40. Two Servers, One Address: the Vite Proxy 407
41. Insert, Update and Delete Entirely from the Interface 414
42. The List on the Page Is the Collection in the Database 421
43. Form Validation in the Browser 429
44. Validation on the Server, and Why Both 436
45. Testing Every Route in Postman, in Order 446
46. The End-to-End Run an Examiner Watches 453
47. When It Does Not Work: Eleven Failures and How to Read Each 460

Module J The journal, the viva and the practical examination

1. Keeping the Journal, and What Goes on the Page 471
2. A Worked Practical Slip: Q1, Q2 and Q3 477
3. The Viva: the Questions Asked at the Table 485