diff --git a/frontend/react.js b/frontend/react.js index 0ca9fc8..67511c1 100644 --- a/frontend/react.js +++ b/frontend/react.js @@ -1,6 +1,7 @@ /* ******************************************************************************************* * REACT.JS CHEATSHEET - * https://reactjs.org/ + * DOCUMENTATION: https://reactjs.org/docs/ + * FILE STRUCTURE: https://reactjs.org/docs/faq-structure.html * ******************************************************************************************* */ @@ -67,6 +68,8 @@ React.Fragment /* ******************************************************************************************* * REACT.COMPONENT + * React.Component is an abstract base class, so it rarely makes sense to refer to React.Component + * directly. Instead, you will typically subclass it, and define at least a render() method. * https://reactjs.org/docs/react-component.html * ******************************************************************************************* */ @@ -79,6 +82,7 @@ class Component extends React.Component { super(props); // The constructor is also often used to bind event handlers to the class instance. + // Binding makes sure the method has access to component attributes like this.props and this.state this.method = this.method.bind(this); // The constructor is the right place to initialize state. @@ -162,7 +166,12 @@ class Component extends React.Component { // Treat this.state as if it were immutable. console.log(this.state); - return

Hello, {this.props.name}

; + return ( +
+ {/* Comment goes here */} + Hello, {this.props.name}! +
+ ); } } @@ -180,6 +189,39 @@ component = new Component(); component.forceUpdate(callback) +/* ******************************************************************************************* + * REACT.DOM + * The react-dom package provides DOM-specific methods that can be used at the top level of + * your app and as an escape hatch to get outside of the React model if you need to. + * Most of your components should not need to use this module. + * https://reactjs.org/docs/react-dom.html + * ******************************************************************************************* */ + + +// Render a React element into the DOM in the supplied container and return a reference +// to the component (or returns null for stateless components). +ReactDOM.render(element, container[, callback]) + +// Same as render(), but is used to hydrate a container whose HTML contents were rendered +// by ReactDOMServer. React will attempt to attach event listeners to the existing markup. +ReactDOM.hydrate(element, container[, callback]) + +// Remove a mounted React component from the DOM and clean up its event handlers and state. +// If no component was mounted in the container, calling this function does nothing. +// Returns true if a component was unmounted and false if there was no component to unmount. +ReactDOM.unmountComponentAtNode(container) + +// If this component has been mounted into the DOM, this returns the corresponding native browser +// DOM element. This method is useful for reading values out of the DOM, such as form field values +// and performing DOM measurements. In most cases, you can attach a ref to the DOM node and avoid +// using findDOMNode at all. +ReactDOM.findDOMNode(component) + +// Creates a portal. Portals provide a way to render children into a DOM node that exists outside +// the hierarchy of the DOM component. +ReactDOM.createPortal(child, container) + + /* ******************************************************************************************* * TYPECHECKING WITH PROPTYPES * https://reactjs.org/docs/typechecking-with-proptypes.html