Essays

|

Notes

Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like if statements, &&, and ? : operators.

&& operator

{ isYes && <A />}

? : operator

isYes ? Yes() : No()

• In React, you control branching logic with JavaScript.
• You can return a JSX expression conditionally with an if statement.
• You can conditionally save some JSX to a variable and then include it inside other JSX by - using the curly braces.
• In JSX, {cond ? <A /> : <B />} means “if cond, render <A />, otherwise <B />.
• In JSX, {cond && <A />} means “if cond, render <A />, otherwise nothing”.
• The shortcuts are common, but you don’t have to use them if you prefer plain if.

References

React Doc

Lifting state up in react means moving data from a child component to some parent component either to use it there or pass it some other child component.

• When you want to coordinate two components, move their state to their common parent.
• Then pass the information down through props from their common parent.
• Finally, pass the event handlers down so that the children can change the parent’s state.
• It’s useful to consider components as “controlled” (driven by props) or “uncontrolled” (driven by state).

There are many default browser actions:

1. mousedown – starts the selection (move the mouse to select).
2. click on <input type="checkbox"> – checks/unchecks the input.
3. submit – clicking an <input type="submit"> or hitting Enter inside a form field causes this event to happen, and the browser submits the form after it.
4. keydown – pressing a key may lead to adding a character into a field, or other actions. contextmenu – the event happens on a right-click, the action is to show the browser context menu.
5. …there are more…

All the default actions can be prevented if we want to handle the event exclusively by JavaScript.

To prevent a default action – use either event.preventDefault() or return false. The second method works only for handlers assigned with on<event>.

The passive: true option of addEventListener tells the browser that the action is not going to be prevented. That’s useful for some mobile events, like touchstart and touchmove, to tell the browser that it should not wait for all handlers to finish before scrolling.

If the default action was prevented, the value of event.defaultPrevented becomes true, otherwise it’s false.

References

javascript info

A component with its own local state is often referred to as uncontrolled.

In contrast, a component is considered controlled when its key data and behavior are managed externally through props, rather than relying on its own local state. This approach allows the parent component to have full control over its behavior and data flow.

When designing a component, carefully consider which pieces of information should be controlled (managed via props) and which should remain uncontrolled (handled by the component’s state). However, keep in mind that you’re not locked into your initial decision—you can always refactor later as the needs of your application evolve.

References

React Doc, Freecodecamp

A module is just a file. One script is one module. As simple as that.

• To make import/export work, browsers need <script type="module">.
• Modules have several differences:
  • Deferred by default.
  • Async works on inline scripts.
  • To load external scripts from another origin (domain/protocol/port), CORS headers are needed.
  • Duplicate external scripts are ignored.
• Modules have their own, local top-level scope and interchange functionality via import/export.
• Modules always use strict.
• Module code is executed only once. Exports are created once and shared between importers.

When we use modules, each module implements the functionality and exports it. Then we use import to directly import it where it’s needed. The browser loads and evaluates the scripts automatically.

In production, people often use bundlers such as Webpack to bundle modules together for performance and other reasons.

References

javascript info

The TIMESTAMP datatype is an extension on the DATE datatype. In addition to the datetime elements of the DATE datatype, the TIMESTAMP datatype holds fractions of a second to a precision between zero and nine decimal places, the default being six. There are also two variants called TIMESTAMP WITH TIME ZONE and TIMESTAMP WITH LOCAL TIME ZONE. As their names imply, these timestamps also store time zone offset information.

create table table_name (
    column_name number,
    column_name2 timestamp default systimestamp);

References

dba-oracle
dba-oracle 2

Material UI uses Emotion as its default styling engine.

Run the following commands to add Material UI to your project:

npm install @mui/material @emotion/react @emotion/styled

Emotion Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.

There are two primary methods of using Emotion. The first is framework agnostic and the second is for use with React.

Styled Components

styled is a way to create React components that have styles attached to them. It’s available from @emotion/styled. styled was heavily inspired by styled-components and glamorous.

import styled from '@emotion/styled'

const Button = styled.button`
  padding: 32px;
  background-color: hotpink;
  font-size: 24px;
  border-radius: 4px;
  color: black;
  font-weight: bold;
  &:hover {
    color: white;
  }
`

render(<Button>This my button component.</Button>)

References

Emotion website

Syntax error
The error occurs when you use a predefined syntax incorrectly.

Reference Error
In a case where a variable reference can’t be found or hasn’t been declared, then a Reference error occurs.

Type Error
An error occurs when a value is used outside the scope of its data type.

RangeError
There is an error when a range of expected values is required

URI Error
When the wrong character(s) are used in a URI function, the error is called.

InternalError
This error occurs internally in the JS engine, especially when it has too much data to handle and the stack grows way over its critical limit.

Evaluation Error
Current JavaScript engines and EcmaScript specifications do not throw this error. However, it is still available for backward compatibility. The error is called when the eval() backward function is used.

References

scaler

To move a table to the recycle bin or remove it entirely from the database, you use the DROP TABLE statement:

DROP TABLE schema_name.table_name
[CASCADE CONSTRAINTS | PURGE];

• First, indicate the table and its schema that you want to drop after the DROP TABLE clause. If you don’t specify the schema name explicitly, the statement assumes that you are removing the table from your own schema.

• Second, specify CASCADE CONSTRAINTS clause to remove all referential integrity constraints which refer to primary and unique keys in the table. In case such referential integrity constraints exist and you don’t use this clause, Oracle returns an error and stops removing the table.

• Third, specify PURGE clause if you want to drop the table and release the space associated with it at once. By using the PURGE clause, Oracle will not place the table and its dependent objects into the recycle bin.

Refernces

oracle tutorial

Collation determines how strings are compared, which has a direct impact on ordering (sorting) and equality tests between strings.

There are two basic types of collation.

• Binary : Ordering and comparisons of string data are based on the numeric value of the characters in the strings.
• Linguistic : Ordering and comparisons of string data are based on the alphabetic sequence of the characters, regardless of their numeric values.

When using binary collations there are three suffixes that alter the behavior of sorts and comparisons.

• “_CI” : Case insensitive, but accent sensitive.
• “_AI” : Both case and accent insensitive.
• “_CS” : Both case and accent sensitive. This is default if no extension is used.

If no collation is specified, directly or via a default setting, the default USING_NLS_COMP pseudo-collation is used, which means the NLS_SORT and NLS_COMP parameters are used to determine the actual collation used.

// Syntax
COLLATE BINARY_CS / BINARY_CI / BINARY_AI

column_name  VARCHAR2(15 CHAR) COLLATE BINARY_CI
create table (...) DEFAULT COLLATION BINARY_CI;
ALTER TABLE t1 DEFAULT COLLATION BINARY_AI;

References

Oracle Base, Oracle Doc