Complete Part 2 Communicating with server

[deepakgsrn]

Complete the part 2 of the course which walks through how to render a data collection, submitting data using HTML forms, using javascript code in browser to fetch, handle, alter data stored in the backend server and adding styles to react application

[deepakgsrn]

Sections in Part 2 - Communicating with server

Learning outcome : To get familiar with rendering the collection of data dynamically, submitting data using forms, fetching, handling & altering data in the backend server, adding styles to the react application

• [x] Rendering a collection, modules
• [x] Forms
• [ ] Getting data from server
• [ ] Altering data in server
• [ ] Adding styles to React app

[deepakgsrn]

Rendering a collection, modules - 2h

Take Away's :

• map function can be used generate react elements from array of elements
• In React, each list item must have an unique key value through key attribute [eg. <li key={note.id}>{note.content}</li>] which is used by react to determine how to update the view when re rendering. This key attribute should be unique & meaning full, Handling this with array indices may seem to work but could cause unintended side effects.
• .map creates a new array from the elements of the original array by transforming each entry using the callback function given as a parameter to the map function
• in map function, the second parameter holds the index of that entry in the iteration .map((entry, index)
• destructuring props in arguments ({notes})
• Refactor components as it serves single reusable purpose
• Though the whole react application can be written in the same file, it is recommended to declare each component in their own file
• In smaller applications, components are usually placed under the directory called components under src directory, exported at the bottom of the code & imported in whichever module needed using relative path. eg. import Note from './components/Note'
• file name extension .js can be omitted while importing the module.
• PS: Modules have plenty of other uses other than enabling component declarations to be separated in their own files which we will see later
• In case if the application breaks use any number of console.log statements to debug the error
• ~Complete Exercises 2.1.-2.5~ Completed Exercises 2.1.-2.5

[deepakgsrn]

Forms - 3h

Take Away's :

• Handling forms in React Component, Event Handlings onSubmit & onChange, Reading data from input using Controlled Components
• Handling Duplicate check on Arrays, Handling forms & form submissions, multiple states, onChange of states & form elements, Filtering the Data & Rendering, Refactoring Components, exporting & using in App Components
• Completed Exercises 2.6 - 2.10