citadelgrad/Name Patterns for JS & React.md

## Name Patterns for JS & React.md

      
    Raw
  

              Name Patterns for JS & React.md
            
          
    Name Patterns for JS & React


I'm able to visually identify and understand React components.
However, I do not know the names used to identify them.

Class Component:

class MyList extends React.Component {...}
Function component:

function App() {return (
...
)}
Component definition: function MyList() { return (
...) }
Component instance: 
Element: An HTML Element 

Function delcaration
function () {...}
Arrow function delcaration
const () => {...}
const item => {...}
const (item) => {...}
const (item, index) => {...}
// Synthetic event's wrap around the browser's native event to prevent native browser behavior.
const handleChange = event => {...}
// Function signature: the method name and the number of arguments the function required.
// searchTerm represents the current state. setSearchTerm is the state updater function.
const [searchTerm, setSearchTerm] = React.useState('')
var people = [
{ age: 20, name: 'Scott' },
{ age: 24, name: 'Peter' },
{ age: 56, name: 'Roger' },
{ age: 35, name: 'Sarah' }
];
MyArray.filter(callbackFunction)
people.map(people => people.id)

[20,24,56,35]

people.reduce((accumulator, person) => {...})
people.some( person => { person.age > 50 })

returns true

React Controlled Components: An HTML component controlled by parent React components.
React Lifecycle has three phases: Mounting, Updating, and Unmounting.

Mounting:

built-in methods:

constructor()
getDerivedStateFromProps(): called right before rendering the element
render()
componentDidMount(): called after the component is rendered.

Updating

A component is updated whenever there is a change to components the state or props.

getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate(): allows you to check the props and state from before the update..
componentDidUpdate()

Unmounting


componentWillUnmount(): Called when the component is about to be removed from the DOM.

ES6 Modules


https://exploringjs.com/es6/ch_modules.html#sec_basics-of-es6-modules

Module export

Labeling declarations:

export default function foo() {}
export default class Bar {}

Default exporting
export default foo()
Module import

import localName from 'lib'
import * as myLib from 'lib'
import { localName, name2 } from 'lib'
import { default as foo} from 'lib'