I'm able to visually identify and understand React components. However, I do not know the names used to identify them.
class MyList extends React.Component {...}
function App() {return (
Component definition: function MyList() { return (
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.
built-in methods:
- constructor()
- getDerivedStateFromProps(): called right before rendering the element
- render()
- componentDidMount(): called after the component is rendered.
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()
- componentWillUnmount(): Called when the component is about to be removed from the DOM.
https://exploringjs.com/es6/ch_modules.html#sec_basics-of-es6-modules
Labeling declarations:
- export default function foo() {}
- export default class Bar {}
Default exporting export default foo()
import localName from 'lib' import * as myLib from 'lib' import { localName, name2 } from 'lib' import { default as foo} from 'lib'