vhbui02

Optional chaining (?.)

Check if the obj accessed or function called, that used this operator, is undefined or null. The expression short circuits and evaluates to undefined instead of throwing an error.

obj.val?.prop
obj.val?.[expresions]
obj.func?.(args)

ALL CAPS

vhbui02

Vite use JSX, but default Vite doesn't know how to

Specify some config

Vite doesn't re-render everything inside a component, just the parts that the changes affects

const [value, setValue] = useState(0);

// changeing
// setValue(value + 1)

vhbui02

Common usage

<i class="fa fa-home fa-fw"></i> https://fontawesome.com/v4/examples/

fa-fw

Set icons at a fixed width

vhbui02

Initial Render and Re-renders

The initial render is the 1st time that the component tree is rendered to the DOM. It happens when the application first loads, or when the root component is first rendered. (also known as "mounting" the components)

Re-renders, on the other hand, happen when the components's state or props change, and the component needs to be updated in the DOM to reflect these changes.

React uses a virtual DOM to optimize the process of updating the actual DOM, so that only the necessary changes are made.

How do you trigger a re-render in a React component?

• changing the component's state or props.
• Parent element re-render => Child also re-render, even though its state or props haven't changed. (need optimization)

vhbui02

Research later

• readConcern
• readPreference
• writeConcern

Return full result set in VSCode playground (default in playground is 20)

db.getCollection('insert collection name here!').find({}).toArray()

Note: could use .hasNext()/.next() to iterate

vhbui02

Capped collection

• fixed size
• circular
• data are placed by their insertion order => sp high performance in CRD
• docs also stored in the order of disk storage
• ensure that docs size NOT increase the size allocated on disk

vhbui02

single docs

insertOne()

multiple docs

insertMany()

NOTE: if Collection does not exist yet. The field specifed inside above will be taken as blueprint to construct a new collection (if _id not specified then it is auto added). After then it could continue to resolve the insert operation at start.

db.people.insertOne( {

vhbui02

Get list of Collection

db.getCollectionInfos() db.getCollectionNames()

MAIN METHOD

db.collection.find()

MATCH NORMAL DATA TYPE

Match Embedded/Nested/Sub Document inside a Document

vhbui02

null + no exist

find({item: null})

only null

find({
	item: { 
  	$type: 10	
  }
})

vhbui02

Update Method

updateOne()
updateMany()
replaceOne() // replace at most, 1 single document that match specified filter, regardless of other matched documents
// replace diff from update, that it overrides the whole document, not just 1 or 2 field.

findAndModify()
findOneAndUpdate()
findOneAndReplace()