{"media":{"disableImageZooming":false},"overallFeedback":[{"from":0,"to":50,"feedback":"Review the React component lifecycle and try again."},{"from":51,"to":75,"feedback":"Average score. Good attempt!"},{"from":76,"to":100,"feedback":"Great job!"}],"behaviour":{"scoringMode":"transitions","applyPenalties":true,"duplicatesInterchangeable":true,"addButtonsForMovement":true,"enableRetry":true,"enableSolutionsButton":true},"l10n":{"checkAnswer":"Check","submitAnswer":"Submit","tryAgain":"Retry","showSolution":"Show solution","up":"Up","down":"Down","disabled":"Disabled"},"a11y":{"check":"Check the answers. The responses will be marked as correct or incorrect.","showSolution":"Show the solution. The correct solution will be displayed.","retry":"Retry the task. Reset all elements and start the task over again.","yourResult":"You got @score out of @total points","listDescription":"Sortable list of paragraphs.","listDescriptionCheckAnswer":"List of paragraphs with results.","listDescriptionShowSolution":"List of paragraphs with solutions.","paragraph":"Paragraph","correct":"correct","wrong":"wrong","point":"@score point","sevenOfNine":"@current of @total","currentPosition":"Current position in list","instructionsSelected":"Press spacebar to reorder","instructionsGrabbed":"Press up and down arrow keys to change position, spacebar to drop, escape to cancel","grabbed":"Grabbed","moved":"Moved","dropped":"Dropped","reorderCancelled":"Reorder cancelled","finalPosition":"Final position","nextParagraph":"Next paragraph","correctParagraph":"Correct paragraph at position"},"taskDescription":"

Sort the methods in the React component lifecycle from beginning (first entering a user interface) to end (leaving the user interface). For this example, we will imagine that one update to state occurred.<\/strong><\/p>\n","paragraphs":["

constructor():<\/strong> Initializes component state and binds event handlers. A constructor is optional if no local state or event handlers are required.<\/p>\n","

render()<\/strong>: Examines state and returns React element(s) accordingly. Can return a boolean or null (nothing rendered).<\/p>\n","

componentDidMount()<\/strong>: Called when the component has been created and inserted into the DOM.<\/p>\n","

render()<\/strong>: Examines state and returns React element(s) accordingly. Can return a boolean or null (nothing rendered).<\/p>\n","

componentDidUpdate()<\/strong>: Invoked after an update has occurred. Can be used to operate on the DOM or fetch new data after state or props have changed.<\/p>\n","

componentWillUnmount()<\/strong>: The component is about to be unmounted and destroyed. Use this to perform any cleanup operations.<\/p>\n"]}

Ethan Turner