mirror of
https://github.com/namibia/awesome-cheatsheets.git
synced 2024-06-01 20:30:48 +00:00
166 lines
5.9 KiB
JavaScript
166 lines
5.9 KiB
JavaScript
/* *******************************************************************************************
|
||
* REACT.JS CHEATSHEET
|
||
* https://reactjs.org/
|
||
* ******************************************************************************************* */
|
||
|
||
|
||
```
|
||
npm install --save react // declarative and flexible JavaScript library for building UI
|
||
npm install --save react-dom // serves as the entry point of the DOM-related rendering paths
|
||
npm install --save prop-types // runtime type checking for React props and similar objects
|
||
```
|
||
|
||
// notes: don't forget the command lines
|
||
|
||
|
||
/* *******************************************************************************************
|
||
* REACT
|
||
* https://reactjs.org/docs/react-api.html
|
||
* ******************************************************************************************* */
|
||
|
||
|
||
// Create and return a new React element of the given type.
|
||
// Code written with JSX will be converted to use React.createElement().
|
||
// You will not typically invoke React.createElement() directly if you are using JSX.
|
||
React.createElement(
|
||
type,
|
||
[props],
|
||
[...children]
|
||
)
|
||
|
||
// Clone and return a new React element using element as the starting point.
|
||
// The resulting element will have the original element’s props with the new props merged in shallowly.
|
||
React.cloneElement(
|
||
element,
|
||
[props],
|
||
[...children]
|
||
)
|
||
|
||
// Verifies the object is a React element. Returns true or false.
|
||
React.isValidElement(object)
|
||
|
||
React.Children // provides utilities for dealing with the this.props.children opaque data structure.
|
||
|
||
// Invokes a function on every immediate child contained within children with this set to thisArg.
|
||
React.Children.map(children, function[(thisArg)])
|
||
|
||
// Like React.Children.map() but does not return an array.
|
||
React.Children.forEach(children, function[(thisArg)])
|
||
|
||
// Returns the total number of components in children,
|
||
// equal to the number of times that a callback passed to map or forEach would be invoked.
|
||
React.Children.count(children)
|
||
|
||
// Verifies that children has only one child (a React element) and returns it.
|
||
// Otherwise this method throws an error.
|
||
React.Children.only(children)
|
||
|
||
// Returns the children opaque data structure as a flat array with keys assigned to each child.
|
||
// Useful if you want to manipulate collections of children in your render methods,
|
||
// especially if you want to reorder or slice this.props.children before passing it down.
|
||
React.Children.toArray(children)
|
||
|
||
// The React.Fragment component lets you return multiple elements in a render() method without creating an additional DOM element
|
||
// You can also use it with the shorthand <></> syntax.
|
||
React.Fragment
|
||
|
||
|
||
/* *******************************************************************************************
|
||
* REACT.COMPONENT
|
||
* https://reactjs.org/docs/react-component.html
|
||
* ******************************************************************************************* */
|
||
|
||
|
||
|
||
/* *******************************************************************************************
|
||
* TYPECHECKING WITH PROPTYPES
|
||
* https://reactjs.org/docs/typechecking-with-proptypes.html
|
||
* ******************************************************************************************* */
|
||
|
||
|
||
import PropTypes from 'prop-types';
|
||
|
||
MyComponent.propTypes = {
|
||
// You can declare that a prop is a specific JS type. By default, these
|
||
// are all optional.
|
||
optionalArray: PropTypes.array,
|
||
optionalBool: PropTypes.bool,
|
||
optionalFunc: PropTypes.func,
|
||
optionalNumber: PropTypes.number,
|
||
optionalObject: PropTypes.object,
|
||
optionalString: PropTypes.string,
|
||
optionalSymbol: PropTypes.symbol,
|
||
|
||
// Anything that can be rendered: numbers, strings, elements or an array
|
||
// (or fragment) containing these types.
|
||
optionalNode: PropTypes.node,
|
||
|
||
// A React element.
|
||
optionalElement: PropTypes.element,
|
||
|
||
// You can also declare that a prop is an instance of a class. This uses
|
||
// JS's instanceof operator.
|
||
optionalMessage: PropTypes.instanceOf(Message),
|
||
|
||
// You can ensure that your prop is limited to specific values by treating
|
||
// it as an enum.
|
||
optionalEnum: PropTypes.oneOf(['News', 'Photos']),
|
||
|
||
// An object that could be one of many types
|
||
optionalUnion: PropTypes.oneOfType([
|
||
PropTypes.string,
|
||
PropTypes.number,
|
||
PropTypes.instanceOf(Message)
|
||
]),
|
||
|
||
// An array of a certain type
|
||
optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
|
||
|
||
// An object with property values of a certain type
|
||
optionalObjectOf: PropTypes.objectOf(PropTypes.number),
|
||
|
||
// An object taking on a particular shape
|
||
optionalObjectWithShape: PropTypes.shape({
|
||
color: PropTypes.string,
|
||
fontSize: PropTypes.number
|
||
}),
|
||
|
||
// You can chain any of the above with `isRequired` to make sure a warning
|
||
// is shown if the prop isn't provided.
|
||
requiredFunc: PropTypes.func.isRequired,
|
||
|
||
// A value of any data type
|
||
requiredAny: PropTypes.any.isRequired,
|
||
|
||
// You can also specify a custom validator. It should return an Error
|
||
// object if the validation fails. Don't `console.warn` or throw, as this
|
||
// won't work inside `oneOfType`.
|
||
customProp: function(props, propName, componentName) {
|
||
if (!/matchme/.test(props[propName])) {
|
||
return new Error(
|
||
'Invalid prop `' + propName + '` supplied to' +
|
||
' `' + componentName + '`. Validation failed.'
|
||
);
|
||
}
|
||
},
|
||
|
||
// You can also supply a custom validator to `arrayOf` and `objectOf`.
|
||
// It should return an Error object if the validation fails. The validator
|
||
// will be called for each key in the array or object. The first two
|
||
// arguments of the validator are the array or object itself, and the
|
||
// current item's key.
|
||
customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
|
||
if (!/matchme/.test(propValue[key])) {
|
||
return new Error(
|
||
'Invalid prop `' + propFullName + '` supplied to' +
|
||
' `' + componentName + '`. Validation failed.'
|
||
);
|
||
}
|
||
})
|
||
};
|
||
|
||
// Specifies the default values for props:
|
||
MyComponent.defaultProps = {
|
||
name: 'Stranger'
|
||
};
|