1437 lines
73 KiB
HTML
1437 lines
73 KiB
HTML
<!doctype html>
|
||
<html class='NoJs' lang='en'><head>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<meta charset='utf-8'>
|
||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||
<meta content='/react.html' name='app:pageurl'>
|
||
|
||
|
||
<title>React.js cheatsheet</title>
|
||
<meta content='React.js cheatsheet' property='og:title'>
|
||
<meta content='React.js cheatsheet' property='twitter:title'>
|
||
<meta content='article' property='og:type'>
|
||
|
||
|
||
|
||
<meta content='https://assets.devhints.io/previews/react.jpg?t=20231011104129' property='og:image'>
|
||
<meta content='https://assets.devhints.io/previews/react.jpg?t=20231011104129' property='twitter:image'>
|
||
<meta content='900' property='og:image:width'>
|
||
<meta content='471' property='og:image:height'>
|
||
|
||
|
||
|
||
<meta content="React.Component · render() · componentDidMount() · props/state · dangerouslySetInnerHTML · React is a JavaScript library for building user interfaces. This guide targets React v15 to v16." name="description">
|
||
<meta content="React.Component · render() · componentDidMount() · props/state · dangerouslySetInnerHTML · React is a JavaScript library for building user interfaces. This guide targets React v15 to v16." property="og:description">
|
||
<meta content="React.Component · render() · componentDidMount() · props/state · dangerouslySetInnerHTML · React is a JavaScript library for building user interfaces. This guide targets React v15 to v16." property="twitter:description">
|
||
|
||
|
||
<link rel="canonical" href="https://devhints.io/react">
|
||
<meta name="og:url" content="https://devhints.io/react">
|
||
|
||
|
||
|
||
|
||
|
||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<meta content='React' property='article:section'>
|
||
|
||
|
||
|
||
|
||
<meta content='Featured' property='article:tag'>
|
||
|
||
|
||
|
||
|
||
<script async src='https://www.googletagmanager.com/gtag/js?id=G-N7TC6B227L'></script>
|
||
<script>
|
||
|
||
window.dataLayer=window.dataLayer||[];
|
||
function gtag(){dataLayer.push(arguments)};
|
||
gtag('js',new Date());
|
||
gtag('config','G-N7TC6B227L');
|
||
</script>
|
||
|
||
|
||
|
||
<meta property='page:depth' content='1'>
|
||
|
||
|
||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||
|
||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&window.Map)return;var js,sc=d.getElementsByTagName(s)[0];js=d.createElement(s);js.src='https://cdn.polyfill.io/v2/polyfill.min.js';sc.parentNode.insertBefore(js, sc);}(document,'script'))</script>
|
||
|
||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||
|
||
|
||
<!-- critical css -->
|
||
<style id='critical-css'>*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{cursor:default;line-height:1.5;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;word-break:break-word}body{margin:0}h1{font-size:2em;margin:.67em 0}dl dl,dl ol,dl ul,ol dl,ol ol,ol ul,ul dl,ul ol,ul ul{margin:0}hr{height:0;overflow:visible}main{display:block}nav ol,nav ul{list-style:none;padding:0}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe,img{border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}table{border-collapse:collapse}button,input,select{margin:0}button{overflow:visible;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}fieldset{border:1px solid #a0a0a0;padding:.35em .75em .625em}input{overflow:visible}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}select{text-transform:none}textarea{margin:0;overflow:auto;resize:vertical}[type=checkbox],[type=radio]{padding:0}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}details,dialog{display:block}dialog{background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}dialog:not([open]){display:none}summary{display:list-item}canvas{display:inline-block}template{display:none}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}[hidden]{display:none}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);position:absolute}body,html{background:#f1f3f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;line-height:1.6;color:#345;overflow-x:hidden}body{font-size:13px;padding:0;margin:0}@media (min-width:480px) and (max-width:768px){body{font-size:calc(13px + 1*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){body{font-size:calc(14px + 0*(100vw - 768px)/512)}}@media (min-width:1280px){body{font-size:14px}}code,pre{font-family:cousine,SFMono-Regular,Consolas,Menlo,Liberation Mono,Ubuntu Mono,Courier,monospace;letter-spacing:-.03em}pre{font-size:.96em}:not(pre):not(code){-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:#26648e}a:visited{color:#15234d}a:hover{color:#3ac1cb}@media (max-width:580px){.hint--bottom:after,.hint--bottom:before{display:none}}html.WithJs .post-content{opacity:0}html.WithJs .intro-content,html.WithJs .pages-list,html.WithJs .post-content.-wrapified{opacity:.98}html.WithJs.LoadDone .intro-content,html.WithJs.LoadDone .pages-list,html.WithJs.LoadDone .post-content.-wrapified{opacity:1;transition:opacity .1s linear .1s}.MarkdownBody.MarkdownBody a+em{opacity:.5}.MarkdownBody code{color:#567;font-size:.96em}.MarkdownBody code,.MarkdownBody pre{font-family:cousine,SFMono-Regular,Consolas,Menlo,Liberation Mono,Ubuntu Mono,Courier,monospace}.MarkdownBody pre.-box-chars{line-height:1.32}.MarkdownBody pre.-figlet{line-height:1;font-size:11px}.MarkdownBody pre{box-shadow:none;border-left:0;overflow:hidden;overflow-x:auto;background:#fff;font-size:.96em;line-height:1.5}.MarkdownBody pre.-wrap{white-space:pre-wrap}.MarkdownBody pre>code{color:#111;max-height:auto;padding:0;background:transparent;overflow:visible;font-size:1em}.MarkdownBody .line-highlight{transform:translate3d(0,2px,0);background:linear-gradient(90deg,rgba(20,175,131,.05) 25%,transparent)}.MarkdownBody .line-highlight[data-end]{margin-top:0}.MarkdownBody .line-highlight:after,.MarkdownBody .line-highlight:before{display:none}.MarkdownBody p.-crosslink,.MarkdownBody p.-setup,.MarkdownBody pre.-setup,.MarkdownBody ul.-setup{background:#f8f9fa}.token.keyword,.token.tag{color:#26648e}.token.tag{color:#1d406e}.token.attr-value,.token.boolean,.token.number,.token.regex,.token.string,.token.value{color:#14af83}.token.attr-name,.token.function{color:#2e90ae}.token.operator,.token.punctuation{color:#669}.token.comment{color:#569}.MarkdownBody h2{padding:0;position:relative;font-size:30.0697899531px;line-height:1.2;font-weight:200;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0 0 24px}@media (max-width:768px){.MarkdownBody h2{margin-bottom:8px;margin-top:32px}}@media (max-width:480px){.MarkdownBody h2{margin-bottom:8px;margin-top:32px}}@media (min-width:480px) and (max-width:768px){.MarkdownBody h2{font-size:calc(30.06979px + 4.03976*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){.MarkdownBody h2{font-size:calc(34.10955px + 1.80275*(100vw - 768px)/512)}}@media (min-width:1280px){.MarkdownBody h2{font-size:35.9122988248px}}.MarkdownBody h2:target{color:#745fb5}.MarkdownBody h3{padding:0;margin:0 0 16px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:17.1925px;font-weight:400;color:#745fb5}@media (min-width:480px) and (max-width:768px){.MarkdownBody h3{font-size:calc(17.1925px + 1.6459*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){.MarkdownBody h3{font-size:calc(18.8384px + 0.3262*(100vw - 768px)/512)}}@media (min-width:1280px){.MarkdownBody h3{font-size:19.1646px}}.MarkdownBody a,.MarkdownBody a:visited{color:#26648e;text-decoration:none}.MarkdownBody a:hover{text-decoration:underline}.MarkdownBody em{font-style:normal;color:#567}.MarkdownBody iframe{border:0;margin:0;width:100%}.local-anchor{margin-left:-.9em;margin-right:.1em;padding:0 .1em}.MarkdownBody .local-anchor,.MarkdownBody .local-anchor:visited{color:#567;text-decoration:inherit;opacity:.5}.MarkdownBody .local-anchor:target,.MarkdownBody :target>.local-anchor{color:#745fb5;opacity:1}.MarkdownBody .local-anchor:focus,.MarkdownBody .local-anchor:hover{color:#fff;background:#745fb5;opacity:1;text-decoration:inherit}.MarkdownBody.MarkdownBody img{max-width:100%}.MarkdownBody.MarkdownBody p.-crosslink>a{display:block;text-decoration:none;color:#745fb5;border-bottom:0;box-shadow:none;margin:-16px;padding:16px}.MarkdownBody.MarkdownBody p.-crosslink>a:visited{color:#745fb5}.MarkdownBody.MarkdownBody p.-crosslink>a:before{content:"";display:inline-block;vertical-align:middle;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cpath fill='%23FFF' d='M85 277.375h259.704L225.002 397.077 256 427l171-171L256 85l-29.922 29.924 118.626 119.7H85v42.75z'/%3E%3C/svg%3E") 50%/16px 16px no-repeat;height:16px;width:16px;margin-right:16px;width:32px;height:32px;line-height:32px;border-radius:50%}.MarkdownBody.MarkdownBody p.-crosslink>a:before,.MarkdownBody.MarkdownBody p.-crosslink>a:visited:before{background-color:#745fb5;color:#fff}.MarkdownBody.MarkdownBody p.-crosslink>a:focus,.MarkdownBody.MarkdownBody p.-crosslink>a:hover{color:#673d85}.MarkdownBody.MarkdownBody p.-crosslink>a:focus:before,.MarkdownBody.MarkdownBody p.-crosslink>a:hover:before{background-color:#673d85}.MarkdownBody table{width:100%}.MarkdownBody table tr+tr{border-top:1px solid rgba(85,102,119,.18)}.MarkdownBody table tbody+tbody{border-top:1px solid rgba(85,102,119,.3)}.MarkdownBody table td,.MarkdownBody table th{padding:8px 16px;vertical-align:top;text-align:left}.MarkdownBody table tr td:last-child,.MarkdownBody table tr th:last-child{text-align:right}.MarkdownBody table td:first-child{white-space:nowrap}.MarkdownBody table td>code{font-size:.96em}.MarkdownBody table td:first-child>code{color:#35a}.MarkdownBody table a,.MarkdownBody table a:visited{color:#35a;text-decoration:none}.MarkdownBody table td:first-child>code~em{font-size:11.3043478261px;font-style:normal;color:#567}@media (min-width:480px) and (max-width:768px){.MarkdownBody table td:first-child>code~em{font-size:calc(11.30435px + 0.76462*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){.MarkdownBody table td:first-child>code~em{font-size:calc(12.06897px + -0.10315*(100vw - 768px)/512)}}@media (min-width:1280px){.MarkdownBody table td:first-child>code~em{font-size:11.9658119658px}}.MarkdownBody table thead{display:none}.MarkdownBody table thead th{font-weight:400;color:#745fb5}.MarkdownBody table.-shortcuts-right td:last-child>code,.MarkdownBody table.-shortcuts td:first-child>code{font-size:1rem;padding:5px 6px 5px 8px;background:#f8f9fa;border-radius:3px;margin-right:2px;letter-spacing:.1em;color:#345}.MarkdownBody table.-left-align tr td,.MarkdownBody table.-left-align tr td:last-child,.MarkdownBody table.-left-align tr th{text-align:left}.MarkdownBody table.-headers thead{display:table-header-group;border-bottom:1px solid rgba(85,102,119,.3)}.MarkdownBody table.-key-values tbody tr td+td code{display:block;text-align:left}.MarkdownBody table.-css-breakdown tr td,.MarkdownBody table.-css-breakdown tr td:last-child,.MarkdownBody table.-css-breakdown tr th{text-align:left}.MarkdownBody table.-css-breakdown tr td{font-size:14.95px;white-space:nowrap}@media (min-width:480px) and (max-width:768px){.MarkdownBody table.-css-breakdown tr td{font-size:calc(14.95px + 1.29*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){.MarkdownBody table.-css-breakdown tr td{font-size:calc(16.24px + 0.14*(100vw - 768px)/512)}}@media (min-width:1280px){.MarkdownBody table.-css-breakdown tr td{font-size:16.38px}}.MarkdownBody table.-css-breakdown tr td:not(:last-child){padding-right:4px}.MarkdownBody table.-css-breakdown tr td:not(:first-child){padding-left:4px}.MarkdownBody table.-css-breakdown tr:last-child{background:#f8f9fa}.MarkdownBody table.-css-breakdown tr:last-child td{font-size:11.3043478261px;color:#567;white-space:auto}@media (min-width:480px) and (max-width:768px){.MarkdownBody table.-css-breakdown tr:last-child td{font-size:calc(11.30435px + 0.76462*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){.MarkdownBody table.-css-breakdown tr:last-child td{font-size:calc(12.06897px + -0.10315*(100vw - 768px)/512)}}@media (min-width:1280px){.MarkdownBody table.-css-breakdown tr:last-child td{font-size:11.9658119658px}}.MarkdownBody table.-bold-first tr>td:first-child{font-weight:700}.MarkdownBody table.-no-wrap td,.MarkdownBody table.-no-wrap th{white-space:nowrap}.MarkdownBody table.-mute-em td em,.MarkdownBody table.-mute-em th em{opacity:.5}.MarkdownBody table.-mute-em td em>code,.MarkdownBody table.-mute-em th em>code{margin-right:.5em}.MarkdownBody table tr.separator>td{padding:0;height:4px;background:rgba(85,102,119,.18);box-shadow:inset 0 1px 0 rgba(85,102,119,.3),inset 0 2px 4px rgba(85,102,119,.18)}.MarkdownBody ul.-six-column{display:flex;flex-wrap:wrap}.MarkdownBody ul.-six-column>li{flex:0 0 16.6666666667%}@media (max-width:480px){.MarkdownBody ul.-six-column>li{flex:0 0 50%}}@media (max-width:768px){.MarkdownBody ul.-six-column>li{flex:0 0 25%}}.MarkdownBody ul.-four-column{display:flex;flex-wrap:wrap}.MarkdownBody ul.-four-column>li{flex:0 0 25%}@media (max-width:480px){.MarkdownBody ul.-four-column>li{flex:0 0 50%}}@media (max-width:768px){.MarkdownBody ul.-four-column>li{flex:0 0 33.3333333333%}}.back-button{text-decoration:none;width:48px;height:48px;line-height:46px;text-align:center;display:inline-block;border-radius:50%;transition:all .1s linear}@media (max-width:480px){.back-button{width:32px;height:32px;line-height:30px}}.back-button,.back-button:visited{color:#567}.back-button:focus,.back-button:hover{color:#fff;background:#745fb5;opacity:1}.back-button:before{content:"";display:inline-block;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cpath fill='%23345' d='M427 234.625H167.296l119.702-119.702L256 85 85 256l171 171 29.922-29.924-118.626-119.7H427v-42.75z'/%3E%3C/svg%3E") 50%/24px 24px no-repeat;height:24px;width:24px;vertical-align:middle}.back-button:focus:before,.back-button:hover:before{display:inline-block;vertical-align:middle;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cpath fill='%23FFF' d='M427 234.625H167.296l119.702-119.702L256 85 85 256l171 171 29.922-29.924-118.626-119.7H427v-42.75z'/%3E%3C/svg%3E") 50%/24px 24px no-repeat;height:24px;width:24px}@media (max-width:480px){.back-button:before{font-size:16px}}.body-area{max-width:1232px;margin:0 auto;padding:16px}@media (max-width:480px){.body-area{padding:16px}}.body-area.-slim{max-width:740px}.h3-section>.body>.gatsby-highlight>pre,.h3-section>.body>pre{margin:0;padding:16px}@media (max-width:768px){.h3-section>.body{overflow-x:auto}}.h3-section>.body{background:#fff;box-shadow:0 6px 8px rgba(85,102,119,.03),0 1px 1px rgba(85,102,119,.4)}@media (max-width:480px){.h3-section>.body{margin:0 -16px;box-shadow:0 1px 1px rgba(85,102,119,.55)}}@media (min-width:481px){.h3-section>.body{border-radius:2px}.h3-section>.body>:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.h3-section>.body>:last-child{border-bottom-left-radius:3px;border-bottom-right-radius:3px}}.h3-section>h3{margin-top:8px;margin-bottom:16px;white-space:nowrap;overflow:hidden}@media (max-width:768px){.h3-section>h3{margin-top:0}}.h3-section>h3:after{margin-left:24px;content:"";display:inline-block;vertical-align:middle;width:100%;height:1px;background:linear-gradient(90deg,rgba(116,95,181,.2),transparent 80%)}.h3-section>.body>ul{margin:0;padding:0;list-style-type:none}.h3-section>.body>ul>li{padding:8px 8px 8px 36px;position:relative}.h3-section>.body>ul>li>p{margin:0;padding:0}.h3-section>.body>ul>li:before{content:"";position:absolute;display:inline-block;width:4px;height:4px;background:#567;border-radius:50%;left:16px;top:18px}.h3-section>.body>ul>li+li{border-top:1px solid rgba(85,102,119,.18)}.h3-section>.body>p{padding:16px;margin:0}.h3-section>.body>h4{font-size:11.3043478261px;margin:0;padding:4px 16px;font-weight:400;background:#f8f9fa;color:#567}@media (min-width:480px) and (max-width:768px){.h3-section>.body>h4{font-size:calc(11.30435px + 0.76462*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){.h3-section>.body>h4{font-size:calc(12.06897px + -0.10315*(100vw - 768px)/512)}}@media (min-width:1280px){.h3-section>.body>h4{font-size:11.9658119658px}}.h3-section>.body>h4+*{border-top:1px solid rgba(85,102,119,.18)}.h3-section>.body p{background:#f8f9fa;color:#345}.h3-section>.body p a,.h3-section>.body p a:visited{color:#345;text-decoration:none;border-bottom:1px solid rgba(85,102,119,.18)}.h3-section>.body p a:hover{color:#26648e}.h3-section>.body>:not(:first-child){border-top:1px solid rgba(85,102,119,.18)}.h3-section>.body>p+p,.h3-section>.body>p+p:not(:first-child){margin-top:-1.5em;border-top:0}@media (min-width:481px){.h3-section.-prime>.body{border-radius:2px;box-shadow:0 6px 8px rgba(85,102,119,.03),0 1px 1px rgba(85,102,119,.4),0 8px 12px rgba(58,193,203,.1)}}ul.-also-see.-also-see.-also-see{display:flex;flex-wrap:wrap;background:#f8f9fa}ul.-also-see.-also-see.-also-see>li{flex:1 0 20%;padding:24px;border-top:1px solid rgba(85,102,119,.3)}ul.-also-see.-also-see.-also-see>li+li{border-left:1px solid rgba(85,102,119,.3)}ul.-also-see.-also-see.-also-see,ul.-also-see.-also-see.-also-see>li{list-style-type:none}ul.-also-see.-also-see.-also-see>li:before{display:none}ul.-also-see.-also-see.-also-see>li>a{font-size:14.95px;display:block}@media (min-width:480px) and (max-width:768px){ul.-also-see.-also-see.-also-see>li>a{font-size:calc(14.95px + 1.29*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){ul.-also-see.-also-see.-also-see>li>a{font-size:calc(16.24px + 0.14*(100vw - 768px)/512)}}@media (min-width:1280px){ul.-also-see.-also-see.-also-see>li>a{font-size:16.38px}}ul.-also-see.-also-see.-also-see>li>em{font-size:11.3043478261px;display:block}@media (min-width:480px) and (max-width:768px){ul.-also-see.-also-see.-also-see>li>em{font-size:calc(11.30435px + 0.76462*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){ul.-also-see.-also-see.-also-see>li>em{font-size:calc(12.06897px + -0.10315*(100vw - 768px)/512)}}@media (min-width:1280px){ul.-also-see.-also-see.-also-see>li>em{font-size:11.9658119658px}}.h3-section.-intro>.body>p{font-size:14.95px}@media (min-width:480px) and (max-width:768px){.h3-section.-intro>.body>p{font-size:calc(14.95px + 1.29*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){.h3-section.-intro>.body>p{font-size:calc(16.24px + 0.14*(100vw - 768px)/512)}}@media (min-width:1280px){.h3-section.-intro>.body>p{font-size:16.38px}}.h3-section.-intro>.body>ul>li{padding-left:16px;position:relative}.h3-section.-intro>.body>ul>li:before{display:none}.h3-section.-intro>.body>ul>li>a{font-size:14.95px;display:block;font-weight:700}@media (min-width:480px) and (max-width:768px){.h3-section.-intro>.body>ul>li>a{font-size:calc(14.95px + 1.29*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){.h3-section.-intro>.body>ul>li>a{font-size:calc(16.24px + 0.14*(100vw - 768px)/512)}}@media (min-width:1280px){.h3-section.-intro>.body>ul>li>a{font-size:16.38px}}.h3-section.-intro>.body>ul>li>a:before{content:"";display:inline-block;vertical-align:middle;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cpath fill='%23969BCF' d='M85 277.375h259.704L225.002 397.077 256 427l171-171L256 85l-29.922 29.924 118.626 119.7H85v42.75z'/%3E%3C/svg%3E") 50%/24px 24px no-repeat;height:24px;width:24px;position:absolute;right:16px;top:50%;margin-top:-12px}.h3-section.-intro>.body>ul>li:hover>a:before{display:inline-block;vertical-align:middle;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cpath fill='%23745FB5' d='M85 277.375h259.704L225.002 397.077 256 427l171-171L256 85l-29.922 29.924 118.626 119.7H85v42.75z'/%3E%3C/svg%3E") 50%/24px 24px no-repeat;height:24px;width:24px}.h3-section.-intro>.body>ul>li>a:after{content:"";position:absolute;display:block;top:0;left:0;bottom:0;right:0}.h3-section.-intro>.body>ul>li em{color:#567}.h3-section-list{margin:0 -16px}@media (max-width:1264px){.h3-section-list{margin-left:-8px;margin-right:-8px}}.h3-section-list:after{content:"";display:table;clear:both;zoom:1}.h3-section-list>.h3-section{padding:16px;float:left;width:100%}@media (max-width:1264px){.h3-section-list>.h3-section{padding:8px}}@media (min-width:769px){.h3-section-list>.h3-section{padding-top:0}}@media (min-width:769px){.h3-section-list.-two-column>.h3-section,.h3-section-list>.h3-section{width:50%}}.h3-section-list.-one-column>.h3-section{width:100%}.h3-section-list.-one-column>.h3-section+.h3-section{margin-top:16px}@media (min-width:769px){.h3-section-list.-three-column>.h3-section{width:50%}}@media (min-width:961px){.h3-section-list.-three-column>.h3-section{width:33.33%}}@media (min-width:769px){.h3-section-list.-left-reference>.h3-section{width:50%}}@media (min-width:961px){.h3-section-list.-left-reference>.h3-section{width:66.67%}.h3-section-list.-left-reference>.h3-section:first-child{width:33.33%}}.HeadlinePub .carbon-img,.HeadlinePub .carbon-poweredby,.HeadlinePub .carbon-text{text-decoration:none}.HeadlinePub .carbon-poweredby,.HeadlinePub .carbon-text{padding-top:4px;padding-bottom:4px}.HeadlinePub .carbon-img>img{width:130px;height:100px;box-shadow:0 6px 8px rgba(85,102,119,.03),0 1px 1px rgba(85,102,119,.4);border-radius:3px;background:rgba(85,102,119,.2);color:transparent}.HeadlinePub .carbon-img:hover img{transform:translate3d(0,-1px,0);box-shadow:0 6px 8px rgba(85,102,119,.03),0 1px 1px rgba(85,102,119,.4),0 8px 12px rgba(58,193,203,.1)}.HeadlinePub .carbon-text,.HeadlinePub .carbon-text:visited{color:#345}.HeadlinePub .carbon-text:after{content:" "}.HeadlinePub .carbon-poweredby:hover,.HeadlinePub .carbon-text:hover{color:#26648e}.HeadlinePub .carbon-poweredby,.HeadlinePub .carbon-poweredby:visited{display:block;margin-top:8px;white-space:nowrap;color:#567}.HeadlinePub{position:relative;display:block;margin-left:auto;margin-right:auto}.HeadlinePub #carbonads~.placeholder{opacity:0;transition:opacity .25s linear;pointer-events:none}.HeadlinePub>.placeholder{background-image:linear-gradient(92deg,rgba(85,102,119,.1),rgba(85,102,119,.17) 15%,rgba(85,102,119,.1) 30%);background-size:450px 100%;animation:placeholder-swish 2.5s ease-in-out infinite;border-radius:3px;position:absolute;display:block}.HeadlinePub>.placeholder.-one{left:0;top:0;width:130px;height:100px}.HeadlinePub>.placeholder.-four,.HeadlinePub>.placeholder.-three,.HeadlinePub>.placeholder.-two{left:154px;top:6px;height:8px;width:226px}.HeadlinePub>.placeholder.-three{top:28px}.HeadlinePub>.placeholder.-four{top:50px;width:63.28px}.HeadlinePub #carbonads{position:relative;z-index:1}.HeadlinePub,.HeadlinePub>div>span{display:block;width:380px;height:100px;text-align:left}.HighlightPubFirstLine .HeadlinePub>div>span:first-line{font-weight:700}.HeadlinePub>div>span:after{content:"";display:table;clear:both;zoom:1}.HeadlinePub .carbon-img{float:left;margin-right:24px}#carbonads{animation:pub-text-enter .5s ease-out}@keyframes placeholder-swish{0%{background-position:-150px 0}50%{background-position:300px 0}to{background-position:300px 0}}@keyframes pub-text-enter{0%{opacity:0;transform:scale(.9)}to{opacity:1}}.main-heading{padding:0;margin:64px 0 24px;position:relative}@media (max-width:768px){.main-heading{margin-bottom:8px;margin-top:32px}}@media (max-width:480px){.main-heading{margin-bottom:8px;margin-top:32px}}.main-heading{margin-top:0;margin-bottom:0}.main-heading>h1{font-size:39.767297213px;line-height:1.2;font-weight:200;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0;text-align:center}@media (min-width:480px) and (max-width:768px){.main-heading>h1{font-size:calc(39.7673px + 6.13051*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){.main-heading>h1{font-size:calc(45.89781px + 3.26254*(100vw - 768px)/512)}}@media (min-width:1280px){.main-heading>h1{font-size:49.1603458612px}}.main-heading>h1>em{font-style:normal;color:#89a}.main-heading>.pubbox{margin-top:16px;text-align:center}@media (min-width:769px){.main-heading>.pubbox{margin-top:24px;margin-bottom:24px}}@media (min-width:769px){.UseCompactHeader .main-heading{display:flex;align-items:flex-end;margin-bottom:32px}.UseCompactHeader .main-heading>h1{flex:1 0 auto;text-align:left;padding-right:32px}.UseCompactHeader .main-heading>.pubbox{flex:0 0 auto;margin-top:0;margin-bottom:0}}.PreviewMode .main-heading{margin-top:16px}.page-actions{margin:0;padding:0;height:32px}.page-actions>.link.link>a{display:inline-block;height:32px;line-height:32px;vertical-align:top;width:auto}.page-actions>li{margin:0;padding:0;list-style-type:none}.page-actions>li>a,.page-actions>li>a:visited{color:#567;text-decoration:none}.page-actions>li>a:focus,.page-actions>li>a:focus>.text,.page-actions>li>a:hover,.page-actions>li>a:hover>.text{color:#745fb5}.page-actions>li>a>.text{font-size:11.3043478261px;display:none}@media (min-width:480px) and (max-width:768px){.page-actions>li>a>.text{font-size:calc(11.30435px + 0.76462*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){.page-actions>li>a>.text{font-size:calc(12.06897px + -0.10315*(100vw - 768px)/512)}}@media (min-width:1280px){.page-actions>li>a>.text{font-size:11.9658119658px}}.page-actions>li>a>.text.-visible{display:inline}.page-actions+.page-actions{margin-left:8px}.page-actions>.facebook>a:before,.page-actions>.github>a:before,.page-actions>.twitter>a:before{content:"";vertical-align:middle}.page-actions>.facebook>a:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23345' d='M426.8 64H85.2C73.5 64 64 73.5 64 85.2v341.6c0 11.7 9.5 21.2 21.2 21.2H256V296h-45.9v-56H256v-41.4c0-49.6 34.4-76.6 78.7-76.6 21.2 0 44 1.6 49.3 2.3v51.8h-35.3c-24.1 0-28.7 11.4-28.7 28.2V240h57.4l-7.5 56H320v152h106.8c11.7 0 21.2-9.5 21.2-21.2V85.2c0-11.7-9.5-21.2-21.2-21.2z'/%3E%3C/svg%3E") 50%/16px 16px no-repeat}.page-actions>.facebook>a:before,.page-actions>.twitter>a:before{display:inline-block;vertical-align:middle;height:16px;width:16px}.page-actions>.twitter>a:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cpath fill='%23345' d='M492 109.5c-17.4 7.7-36 12.9-55.6 15.3 20-12 35.4-31 42.6-53.6-18.7 11.1-39.4 19.2-61.5 23.5C399.8 75.8 374.6 64 346.8 64c-53.5 0-96.8 43.4-96.8 96.9 0 7.6.8 15 2.5 22.1-80.5-4-151.9-42.6-199.6-101.3-8.3 14.3-13.1 31-13.1 48.7 0 33.6 17.2 63.3 43.2 80.7-16-.4-31-4.8-44-12.1v1.2c0 47 33.4 86.1 77.7 95-8.1 2.2-16.7 3.4-25.5 3.4-6.2 0-12.3-.6-18.2-1.8 12.3 38.5 48.1 66.5 90.5 67.3-33.1 26-74.9 41.5-120.3 41.5-7.8 0-15.5-.5-23.1-1.4C62.8 432 113.7 448 168.3 448 346.6 448 444 300.3 444 172.2c0-4.2-.1-8.4-.3-12.5C462.6 146 479 129 492 109.5z'/%3E%3C/svg%3E") 50%/16px 16px no-repeat}.page-actions>.github>a:before{display:inline-block;vertical-align:middle;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cpath fill='%23345' d='M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9 1.4.3 2.6.4 3.8.4 8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1-8.4 1.9-15.9 2.7-22.6 2.7-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1 10.5 0 20-3.4 25.6-6 2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8 0 0 1.6-.5 5-.5 8.1 0 26.4 3.1 56.6 24.1 17.9-5.1 37-7.6 56.1-7.7 19 .1 38.2 2.6 56.1 7.7 30.2-21 48.5-24.1 56.6-24.1 3.4 0 5 .5 5 .5 12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5 1.2 0 2.6-.1 4-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z'/%3E%3C/svg%3E") 50%/16px 16px no-repeat;height:16px;width:16px}.page-actions>.github>a:hover:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cpath fill='%23FFF' d='M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9 1.4.3 2.6.4 3.8.4 8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1-8.4 1.9-15.9 2.7-22.6 2.7-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1 10.5 0 20-3.4 25.6-6 2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8 0 0 1.6-.5 5-.5 8.1 0 26.4 3.1 56.6 24.1 17.9-5.1 37-7.6 56.1-7.7 19 .1 38.2 2.6 56.1 7.7 30.2-21 48.5-24.1 56.6-24.1 3.4 0 5 .5 5 .5 12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5 1.2 0 2.6-.1 4-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z'/%3E%3C/svg%3E")}.page-actions>.facebook>a:before,.page-actions>.twitter>a:before{width:32px;height:32px}.page-actions>.github>a:before{position:relative;top:-2px}.page-actions>.link.-button>a{box-shadow:inset 0 0 0 1px rgba(85,102,119,.3);border-radius:2px;padding:0 16px;margin:0 8px;transition:all .1s linear}.page-actions>.link.-button>a>.text{margin-left:4px;position:relative;top:-1px}.page-actions>.link.-button>a:focus,.page-actions>.link.-button>a:hover{background:linear-gradient(5deg,#745fb5,#9066b8);box-shadow:0 1px 1px rgba(85,102,119,.55)}.page-actions>.link.-button>a:focus,.page-actions>.link.-button>a:focus>.text,.page-actions>.link.-button>a:hover,.page-actions>.link.-button>a:hover>.text{color:#fff}@media (max-width:768px){.page-actions>.link{margin-left:16px}}.page-actions>.link:first-child>a{margin-left:0}.page-actions>.link:last-child>a{margin-right:0}.top-nav,.top-nav>.container{height:64px;line-height:64px;text-align:center;position:relative}@media (max-width:480px){.top-nav>.container{height:32px;line-height:32px;margin-top:8px}.top-nav{height:48px;padding:8px 0;border-bottom:1px solid rgba(85,102,119,.3);margin-bottom:8px}}.top-nav>.container{padding-left:16px;padding-right:16px;max-width:1232px;margin:0 auto}@media (max-width:480px){.top-nav>.container{padding-left:16px;padding-right:16px}}.top-nav>.container{display:flex;align-items:center;position:relative}.top-nav>.container>.left{flex:0 0 auto;line-height:32px}.top-nav>.container>.brand{flex:1 1 auto}.top-nav>.container>.actions{flex:0 0 auto;display:flex}.top-nav>.container>.brand{font-size:11.3043478261px;display:inline-block;font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-decoration:none}@media (min-width:480px) and (max-width:768px){.top-nav>.container>.brand{font-size:calc(11.30435px + 0.76462*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){.top-nav>.container>.brand{font-size:calc(12.06897px + -0.10315*(100vw - 768px)/512)}}@media (min-width:1280px){.top-nav>.container>.brand{font-size:11.9658119658px}}.top-nav>.container>.brand,.top-nav>.container>.brand:visited{color:#345}.top-nav>.container>.brand:hover{color:#745fb5}@media (max-width:480px){.top-nav>.container>.brand{display:none}.top-nav>.container>.actions{margin-left:auto}}@media (min-width:481px){.top-nav>.container>.actions{position:absolute;right:16px;top:16px}}@media (min-width:481px) and (max-width:480px){.top-nav>.container>.actions{right:16px}}@media (min-width:481px){.top-nav>.container>.left{position:absolute;left:16px;top:16px}}@media (min-width:481px) and (max-width:480px){.top-nav>.container>.left{left:16px}}@media (min-width:1232px){.top-nav>.container>.left>.home{position:relative;left:-16px}}</style>
|
||
|
||
<!-- allow disabling critical CSS optimization by passing ?nocrit=1 -->
|
||
<script id='critical-css-disable'>if (~window.location.search.indexOf('nocrit')){;[].slice.call(document.querySelectorAll('#critical-css')).map(function(e){e.parentNode.removeChild(e)})}</script>
|
||
|
||
<!-- deferred css -->
|
||
<script id='deferred-css'>;(function(links){(requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame||(function(fn){window.addEventListener('load',fn)}))(function(){var h=document.getElementsByTagName('head')[0],l,i;for (i=0;i<links.length;i++){l=document.createElement('link');l.rel='stylesheet';l.href=links[i];h.appendChild(l);}})})([
|
||
'https://fonts.googleapis.com/css?family=Cousine',
|
||
'./assets/2017/style.css?t=20231011104129'
|
||
])</script>
|
||
<noscript id='deferred-css-fallback'>
|
||
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Cousine'>
|
||
<link rel='stylesheet' href='./assets/2017/style.css?t=20231011104129'>
|
||
</noscript>
|
||
|
||
<script type='application/ld+json'>
|
||
{
|
||
"@context": "http://schema.org",
|
||
"@type": "NewsArticle",
|
||
"mainEntityOfPage": {
|
||
"@type": "WebPage",
|
||
"@id": "https://google.com/article"
|
||
},
|
||
"headline": "React.js cheatsheet",
|
||
"image": [ "https://assets.devhints.io/previews/react.jpg?t=20231011104129" ],
|
||
"description": "React.Component · render() · componentDidMount() · props/state · dangerouslySetInnerHTML · React is a JavaScript library for building user interfaces. This guide targets React v15 to v16."
|
||
}
|
||
</script>
|
||
<script type='application/ld+json'>
|
||
{
|
||
"@context": "http://schema.org",
|
||
"@type": "BreadcrumbList",
|
||
"itemListElement": [{
|
||
"@type": "ListItem",
|
||
"position": 1,
|
||
"item": {
|
||
"@id": "https://devhints.io/#react",
|
||
"name": "React"
|
||
}
|
||
},{
|
||
"@type": "ListItem",
|
||
"position": 2,
|
||
"item": {
|
||
"@id": "https://devhints.io/react",
|
||
"name": "React.js"
|
||
}
|
||
}]
|
||
}
|
||
</script>
|
||
|
||
|
||
</head><body class='UseCompactHeader HighlightPubFirstLine'>
|
||
|
||
|
||
<nav class='top-nav' data-js-no-preview role='navigation'>
|
||
<div class='container'>
|
||
|
||
<div class='left'>
|
||
<a class='home back-button' href='.'></a>
|
||
</div>
|
||
|
||
|
||
<a class='brand' href='.'>
|
||
Devhints.io
|
||
</a>
|
||
|
||
|
||
<div class='actions'>
|
||
|
||
<ul class="social-list social page-actions">
|
||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/react.html" target="share"><span class="text"></span></a></li>
|
||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20React.js.%20https://devhints.io/react.html" target="share"><span class="text"></span></a></li>
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
<ul class='page-actions'>
|
||
<li class='link github -button hint--bottom' data-hint='Edit this page on GitHub'>
|
||
<a href='https://github.com/rstacruz/cheatsheets/blob/master/react.md'>
|
||
<span class='text -visible'>Edit</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</nav>
|
||
|
||
|
||
<div class='body-area'>
|
||
<header class='main-heading -center' role='banner'>
|
||
<h1 class='h1'>React.js <em>cheatsheet</em></h1>
|
||
|
||
<div class='pubbox' data-js-no-preview>
|
||
|
||
<div class='HeadlinePub' role='complementary'>
|
||
<script async src='https://pubsrv.devhints.io/carbon.js?serve=CE7IK5QM&placement=devhintsio' id="_carbonads_js"></script>
|
||
<span class='placeholder -one'></span>
|
||
<span class='placeholder -two'></span>
|
||
<span class='placeholder -three'></span>
|
||
<span class='placeholder -four'></span>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class='intro-content MarkdownBody'>
|
||
<p><a href="https://reactjs.org/">React</a> is a JavaScript library for building user interfaces. This guide targets React v15 to v16.</p>
|
||
|
||
</div>
|
||
|
||
|
||
<main class='post-content MarkdownBody' data-js-main-body data-js-anchors role='main'>
|
||
|
||
<h2 class="-three-column" id="components">Components</h2>
|
||
|
||
<h3 class="-prime" id="components-1">Components</h3>
|
||
|
||
<pre class="-setup"><code class="language-jsx">import React from 'react'
|
||
import ReactDOM from 'react-dom'
|
||
</code></pre>
|
||
|
||
<pre><code class="language-jsx">class Hello extends React.Component {
|
||
render () {
|
||
return <div className='message-box'>
|
||
Hello {this.props.name}
|
||
</div>
|
||
}
|
||
}
|
||
</code></pre>
|
||
|
||
<pre><code class="language-jsx">const el = document.body
|
||
ReactDOM.render(<Hello name='John' />, el)
|
||
</code></pre>
|
||
|
||
<p>Use the <a href="http://jsfiddle.net/reactjs/69z2wepo/">React.js jsfiddle</a> to start hacking. (or the unofficial <a href="http://jsbin.com/yafixat/edit?js,output">jsbin</a>)</p>
|
||
|
||
<h3 class="-prime" id="import-multiple-exports">Import multiple exports</h3>
|
||
|
||
<pre class="-setup"><code class="language-jsx">import React, {Component} from 'react'
|
||
import ReactDOM from 'react-dom'
|
||
</code></pre>
|
||
|
||
<pre><code class="language-jsx">class Hello extends Component {
|
||
...
|
||
}
|
||
</code></pre>
|
||
|
||
<h3 id="properties">Properties</h3>
|
||
|
||
<pre class="-setup"><code class="language-html"><Video fullscreen={true} autoplay={false} />
|
||
</code></pre>
|
||
|
||
<pre data-line="2,3"><code class="language-jsx">render () {
|
||
this.props.fullscreen
|
||
const { fullscreen, autoplay } = this.props
|
||
···
|
||
}
|
||
</code></pre>
|
||
|
||
<p>Use <code>this.props</code> to access properties passed to the component.</p>
|
||
|
||
<p>See: <a href="https://reactjs.org/docs/tutorial.html#using-props">Properties</a></p>
|
||
|
||
<h3 id="states">States</h3>
|
||
|
||
<pre><code class="language-jsx">constructor(props) {
|
||
super(props)
|
||
this.state = { username: undefined }
|
||
}
|
||
</code></pre>
|
||
|
||
<pre><code class="language-jsx">this.setState({ username: 'rstacruz' })
|
||
</code></pre>
|
||
|
||
<pre data-line="2,3"><code class="language-jsx">render () {
|
||
this.state.username
|
||
const { username } = this.state
|
||
···
|
||
}
|
||
</code></pre>
|
||
|
||
<p>Use states (<code>this.state</code>) to manage dynamic data.</p>
|
||
|
||
<p>With <a href="https://babeljs.io/">Babel</a> you can use <a href="https://github.com/tc39/proposal-class-fields">proposal-class-fields</a> and get rid of constructor</p>
|
||
|
||
<pre><code class="language-jsx">class Hello extends Component {
|
||
state = { username: undefined };
|
||
...
|
||
}
|
||
</code></pre>
|
||
|
||
<p>See: <a href="https://reactjs.org/docs/tutorial.html#reactive-state">States</a></p>
|
||
|
||
<h3 id="nesting">Nesting</h3>
|
||
|
||
<pre><code class="language-jsx">class Info extends Component {
|
||
render () {
|
||
const { avatar, username } = this.props
|
||
|
||
return <div>
|
||
<UserAvatar src={avatar} />
|
||
<UserProfile username={username} />
|
||
</div>
|
||
}
|
||
}
|
||
</code></pre>
|
||
<p>As of React v16.2.0, fragments can be used to return multiple children without adding extra wrapping nodes to the DOM.</p>
|
||
|
||
<pre><code class="language-jsx">import React, {
|
||
Component,
|
||
Fragment
|
||
} from 'react'
|
||
|
||
class Info extends Component {
|
||
render () {
|
||
const { avatar, username } = this.props
|
||
|
||
return (
|
||
<Fragment>
|
||
<UserAvatar src={avatar} />
|
||
<UserProfile username={username} />
|
||
</Fragment>
|
||
)
|
||
}
|
||
}
|
||
</code></pre>
|
||
|
||
<p data-line="5,6,7,8,9,10">Nest components to separate concerns.</p>
|
||
|
||
<p>See: <a href="https://reactjs.org/docs/components-and-props.html#composing-components">Composing Components</a></p>
|
||
|
||
<h3 id="children">Children</h3>
|
||
|
||
<pre data-line="2"><code class="language-jsx"><AlertBox>
|
||
<h1>You have pending notifications</h1>
|
||
</AlertBox>
|
||
</code></pre>
|
||
|
||
<pre data-line="4"><code class="language-jsx">class AlertBox extends Component {
|
||
render () {
|
||
return <div className='alert-box'>
|
||
{this.props.children}
|
||
</div>
|
||
}
|
||
}
|
||
</code></pre>
|
||
|
||
<p>Children are passed as the <code>children</code> property.</p>
|
||
|
||
<h2 id="defaults">Defaults</h2>
|
||
|
||
<h3 id="setting-default-props">Setting default props</h3>
|
||
|
||
<pre data-line="1"><code class="language-jsx">Hello.defaultProps = {
|
||
color: 'blue'
|
||
}
|
||
</code></pre>
|
||
|
||
<p>See: <a href="https://reactjs.org/docs/react-component.html#defaultprops">defaultProps</a></p>
|
||
|
||
<h3 id="setting-default-state">Setting default state</h3>
|
||
|
||
<pre data-line="4"><code class="language-jsx">class Hello extends Component {
|
||
constructor (props) {
|
||
super(props)
|
||
this.state = { visible: true }
|
||
}
|
||
}
|
||
</code></pre>
|
||
|
||
<p>Set the default state in the <code>constructor()</code>.</p>
|
||
|
||
<p>And without constructor using <a href="https://babeljs.io/">Babel</a> with <a href="https://github.com/tc39/proposal-class-fields">proposal-class-fields</a>.</p>
|
||
|
||
<pre data-line="2"><code class="language-jsx">class Hello extends Component {
|
||
state = { visible: true }
|
||
}
|
||
</code></pre>
|
||
|
||
<p>See: <a href="https://reactjs.org/docs/react-without-es6.html#setting-the-initial-state">Setting the default state</a></p>
|
||
|
||
<h2 class="-three-column" id="other-components">Other components</h2>
|
||
|
||
<h3 id="functional-components">Functional components</h3>
|
||
|
||
<pre data-line="1"><code class="language-jsx">function MyComponent ({ name }) {
|
||
return <div className='message-box'>
|
||
Hello {name}
|
||
</div>
|
||
}
|
||
</code></pre>
|
||
|
||
<p>Functional components have no state. Also, their <code>props</code> are passed as the first parameter to a function.</p>
|
||
|
||
<p>See: <a href="https://reactjs.org/docs/components-and-props.html#functional-and-class-components">Function and Class Components</a></p>
|
||
|
||
<h3 id="pure-components">Pure components</h3>
|
||
|
||
<pre data-line="3"><code class="language-jsx">import React, {PureComponent} from 'react'
|
||
|
||
class MessageBox extends PureComponent {
|
||
···
|
||
}
|
||
</code></pre>
|
||
|
||
<p>Performance-optimized version of <code>React.Component</code>. Doesn’t rerender if props/state hasn’t changed.</p>
|
||
|
||
<p>See: <a href="https://reactjs.org/docs/react-api.html#react.purecomponent">Pure components</a></p>
|
||
|
||
<h3 id="component-api">Component API</h3>
|
||
|
||
<pre><code class="language-jsx">this.forceUpdate()
|
||
</code></pre>
|
||
|
||
<pre><code class="language-jsx">this.setState({ ... })
|
||
this.setState(state => { ... })
|
||
</code></pre>
|
||
|
||
<pre><code class="language-jsx">this.state
|
||
this.props
|
||
</code></pre>
|
||
|
||
<p>These methods and properties are available for <code>Component</code> instances.</p>
|
||
|
||
<p>See: <a href="http://facebook.github.io/react/docs/component-api.html">Component API</a></p>
|
||
|
||
<h2 class="-two-column" id="lifecycle">Lifecycle</h2>
|
||
|
||
<h3 id="mounting">Mounting</h3>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Method</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><code>constructor</code> <em>(props)</em></td>
|
||
<td>Before rendering <a href="https://reactjs.org/docs/react-component.html#constructor">#</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>componentWillMount()</code></td>
|
||
<td><em>Don’t use this</em> <a href="https://reactjs.org/docs/react-component.html#componentwillmount">#</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>render()</code></td>
|
||
<td>Render <a href="https://reactjs.org/docs/react-component.html#render">#</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>componentDidMount()</code></td>
|
||
<td>After rendering (DOM available) <a href="https://reactjs.org/docs/react-component.html#componentdidmount">#</a></td>
|
||
</tr>
|
||
</tbody>
|
||
<tbody>
|
||
<tr>
|
||
<td><code>componentWillUnmount()</code></td>
|
||
<td>Before DOM removal <a href="https://reactjs.org/docs/react-component.html#componentwillunmount">#</a></td>
|
||
</tr>
|
||
</tbody>
|
||
<tbody>
|
||
<tr>
|
||
<td><code>componentDidCatch()</code></td>
|
||
<td>Catch errors (16+) <a href="https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html">#</a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<p>Set initial the state on <code>constructor()</code>.
|
||
Add DOM event handlers, timers (etc) on <code>componentDidMount()</code>, then remove them on <code>componentWillUnmount()</code>.</p>
|
||
|
||
<h3 id="updating">Updating</h3>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Method</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><code>componentDidUpdate</code> <em>(prevProps, prevState, snapshot)</em></td>
|
||
<td>Use <code>setState()</code> here, but remember to compare props</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>shouldComponentUpdate</code> <em>(newProps, newState)</em></td>
|
||
<td>Skips <code>render()</code> if returns false</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>render()</code></td>
|
||
<td>Render</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>componentDidUpdate</code> <em>(prevProps, prevState)</em></td>
|
||
<td>Operate on the DOM here</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<p>Called when parents change properties and <code>.setState()</code>. These are not called for initial renders.</p>
|
||
|
||
<p>See: <a href="http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops">Component specs</a></p>
|
||
|
||
<h2 class="-two-column" id="hooks-new">Hooks (New)</h2>
|
||
|
||
<h3 id="state-hook">State Hook</h3>
|
||
|
||
<pre data-line="5,10"><code class="language-jsx">import React, { useState } from 'react';
|
||
|
||
function Example() {
|
||
// Declare a new state variable, which we'll call "count"
|
||
const [count, setCount] = useState(0);
|
||
|
||
return (
|
||
<div>
|
||
<p>You clicked {count} times</p>
|
||
<button onClick={() => setCount(count + 1)}>
|
||
Click me
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
</code></pre>
|
||
|
||
<p>Hooks are a new addition in React 16.8.</p>
|
||
|
||
<p>See: <a href="https://reactjs.org/docs/hooks-overview.html">Hooks at a Glance</a></p>
|
||
|
||
<h3 id="declaring-multiple-state-variables">Declaring multiple state variables</h3>
|
||
|
||
<pre><code class="language-jsx">import React, { useState } from 'react';
|
||
|
||
function ExampleWithManyStates() {
|
||
// Declare multiple state variables!
|
||
const [age, setAge] = useState(42);
|
||
const [fruit, setFruit] = useState('banana');
|
||
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
|
||
// ...
|
||
}
|
||
</code></pre>
|
||
|
||
<h3 id="effect-hook">Effect hook</h3>
|
||
|
||
<pre data-line="6,7,8,9,10"><code class="language-jsx">import React, { useState, useEffect } from 'react';
|
||
|
||
function Example() {
|
||
const [count, setCount] = useState(0);
|
||
|
||
// Similar to componentDidMount and componentDidUpdate:
|
||
useEffect(() => {
|
||
// Update the document title using the browser API
|
||
document.title = `You clicked ${count} times`;
|
||
}, [count]);
|
||
|
||
return (
|
||
<div>
|
||
<p>You clicked {count} times</p>
|
||
<button onClick={() => setCount(count + 1)}>
|
||
Click me
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
</code></pre>
|
||
|
||
<p>If you’re familiar with React class lifecycle methods, you can think of <code>useEffect</code> Hook as <code>componentDidMount</code>, <code>componentDidUpdate</code>, and <code>componentWillUnmount</code> combined.</p>
|
||
|
||
<p>By default, React runs the effects after every render — including the first render.</p>
|
||
|
||
<h3 id="building-your-own-hooks">Building your own hooks</h3>
|
||
|
||
<h4 id="define-friendstatus">Define FriendStatus</h4>
|
||
<pre data-line="11,12,13,14"><code class="language-jsx">import React, { useState, useEffect } from 'react';
|
||
|
||
function FriendStatus(props) {
|
||
const [isOnline, setIsOnline] = useState(null);
|
||
|
||
useEffect(() => {
|
||
function handleStatusChange(status) {
|
||
setIsOnline(status.isOnline);
|
||
}
|
||
|
||
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
|
||
return () => {
|
||
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
|
||
};
|
||
}, [props.friend.id]);
|
||
|
||
if (isOnline === null) {
|
||
return 'Loading...';
|
||
}
|
||
return isOnline ? 'Online' : 'Offline';
|
||
}
|
||
</code></pre>
|
||
|
||
<p>Effects may also optionally specify how to “clean up” after them by returning a function.</p>
|
||
|
||
<h4 id="use-friendstatus">Use FriendStatus</h4>
|
||
|
||
<pre data-line="2"><code class="language-jsx">function FriendStatus(props) {
|
||
const isOnline = useFriendStatus(props.friend.id);
|
||
|
||
if (isOnline === null) {
|
||
return 'Loading...';
|
||
}
|
||
return isOnline ? 'Online' : 'Offline';
|
||
}
|
||
</code></pre>
|
||
|
||
<p>See: <a href="https://reactjs.org/docs/hooks-custom.html">Building Your Own Hooks</a></p>
|
||
|
||
<h3 id="hooks-api-reference">Hooks API Reference</h3>
|
||
|
||
<p>Also see: <a href="https://reactjs.org/docs/hooks-faq.html">Hooks FAQ</a></p>
|
||
|
||
<h4 id="basic-hooks">Basic Hooks</h4>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Hook</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><code>useState</code><em>(initialState)</em></td>
|
||
<td> </td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>useEffect</code><em>(() => { … })</em></td>
|
||
<td> </td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>useContext</code><em>(MyContext)</em></td>
|
||
<td>value returned from <code>React.createContext</code></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<p>Full details: <a href="https://reactjs.org/docs/hooks-reference.html#basic-hooks">Basic Hooks</a></p>
|
||
|
||
<h4 id="additional-hooks">Additional Hooks</h4>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Hook</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><code>useReducer</code><em>(reducer, initialArg, init)</em></td>
|
||
<td> </td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>useCallback</code><em>(() => { … })</em></td>
|
||
<td> </td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>useMemo</code><em>(() => { … })</em></td>
|
||
<td> </td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>useRef</code><em>(initialValue)</em></td>
|
||
<td> </td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>useImperativeHandle</code><em>(ref, () => { … })</em></td>
|
||
<td> </td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>useLayoutEffect</code></td>
|
||
<td>identical to <code>useEffect</code>, but it fires synchronously after all DOM mutations</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>useDebugValue</code><em>(value)</em></td>
|
||
<td>display a label for custom hooks in React DevTools</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<p>Full details: <a href="https://reactjs.org/docs/hooks-reference.html#additional-hooks">Additional Hooks</a></p>
|
||
|
||
<h2 class="-two-column" id="dom-nodes">DOM nodes</h2>
|
||
|
||
<h3 id="references">References</h3>
|
||
|
||
<pre data-line="4,9"><code class="language-jsx">class MyComponent extends Component {
|
||
render () {
|
||
return <div>
|
||
<input ref={el => this.input = el} />
|
||
</div>
|
||
}
|
||
|
||
componentDidMount () {
|
||
this.input.focus()
|
||
}
|
||
}
|
||
</code></pre>
|
||
|
||
<p>Allows access to DOM nodes.</p>
|
||
|
||
<p>See: <a href="https://reactjs.org/docs/refs-and-the-dom.html">Refs and the DOM</a></p>
|
||
|
||
<h3 id="dom-events">DOM Events</h3>
|
||
|
||
<pre data-line="5,9"><code class="language-jsx">class MyComponent extends Component {
|
||
render () {
|
||
<input type="text"
|
||
value={this.state.value}
|
||
onChange={event => this.onChange(event)} />
|
||
}
|
||
|
||
onChange (event) {
|
||
this.setState({ value: event.target.value })
|
||
}
|
||
}
|
||
</code></pre>
|
||
|
||
<p>Pass functions to attributes like <code>onChange</code>.</p>
|
||
|
||
<p>See: <a href="https://reactjs.org/docs/events.html">Events</a></p>
|
||
|
||
<h2 id="other-features">Other features</h2>
|
||
|
||
<h3 id="transferring-props">Transferring props</h3>
|
||
|
||
<pre class="-setup"><code class="language-html"><VideoPlayer src="video.mp4" />
|
||
</code></pre>
|
||
|
||
<pre data-line="3"><code class="language-jsx">class VideoPlayer extends Component {
|
||
render () {
|
||
return <VideoEmbed {...this.props} />
|
||
}
|
||
}
|
||
</code></pre>
|
||
|
||
<p>Propagates <code>src="..."</code> down to the sub-component.</p>
|
||
|
||
<p>See <a href="http://facebook.github.io/react/docs/transferring-props.html">Transferring props</a></p>
|
||
|
||
<h3 id="top-level-api">Top-level API</h3>
|
||
|
||
<pre><code class="language-jsx">React.createClass({ ... })
|
||
React.isValidElement(c)
|
||
</code></pre>
|
||
|
||
<pre><code class="language-jsx">ReactDOM.render(<Component />, domnode, [callback])
|
||
ReactDOM.unmountComponentAtNode(domnode)
|
||
</code></pre>
|
||
|
||
<pre><code class="language-jsx">ReactDOMServer.renderToString(<Component />)
|
||
ReactDOMServer.renderToStaticMarkup(<Component />)
|
||
</code></pre>
|
||
|
||
<p>There are more, but these are most common.</p>
|
||
|
||
<p>See: <a href="https://reactjs.org/docs/react-api.html">React top-level API</a></p>
|
||
|
||
<h2 class="-two-column" id="jsx-patterns">JSX patterns</h2>
|
||
|
||
<h3 id="style-shorthand">Style shorthand</h3>
|
||
|
||
<pre><code class="language-jsx">const style = { height: 10 }
|
||
return <div style={style}></div>
|
||
</code></pre>
|
||
|
||
<pre><code class="language-jsx">return <div style={{ margin: 0, padding: 0 }}></div>
|
||
</code></pre>
|
||
|
||
<p>See: <a href="https://reactjs.org/tips/inline-styles.html">Inline styles</a></p>
|
||
|
||
<h3 id="inner-html">Inner HTML</h3>
|
||
|
||
<pre><code class="language-jsx">function markdownify() { return "<p>...</p>"; }
|
||
<div dangerouslySetInnerHTML={{__html: markdownify()}} />
|
||
</code></pre>
|
||
|
||
<p>See: <a href="https://reactjs.org/tips/dangerously-set-inner-html.html">Dangerously set innerHTML</a></p>
|
||
|
||
<h3 id="lists">Lists</h3>
|
||
|
||
<pre data-line="6,7"><code class="language-jsx">class TodoList extends Component {
|
||
render () {
|
||
const { items } = this.props
|
||
|
||
return <ul>
|
||
{items.map(item =>
|
||
<TodoItem item={item} key={item.key} />)}
|
||
</ul>
|
||
}
|
||
}
|
||
</code></pre>
|
||
|
||
<p>Always supply a <code>key</code> property.</p>
|
||
|
||
<h3 id="conditionals">Conditionals</h3>
|
||
|
||
<pre><code class="language-jsx"><Fragment>
|
||
{showMyComponent
|
||
? <MyComponent />
|
||
: <OtherComponent />}
|
||
</Fragment>
|
||
</code></pre>
|
||
|
||
<h3 id="short-circuit-evaluation">Short-circuit evaluation</h3>
|
||
|
||
<pre><code class="language-jsx"><Fragment>
|
||
{showPopup && <Popup />}
|
||
...
|
||
</Fragment>
|
||
</code></pre>
|
||
|
||
<h2 class="-three-column" id="new-features">New features</h2>
|
||
|
||
<h3 id="returning-multiple-elements">Returning multiple elements</h3>
|
||
|
||
<p>You can return multiple elements as arrays or fragments.</p>
|
||
|
||
<h4 id="arrays">Arrays</h4>
|
||
|
||
<pre data-line="3,4,5,6"><code class="language-js">render () {
|
||
// Don't forget the keys!
|
||
return [
|
||
<li key="A">First item</li>,
|
||
<li key="B">Second item</li>
|
||
]
|
||
}
|
||
</code></pre>
|
||
|
||
<h4 id="fragments">Fragments</h4>
|
||
<pre data-line="3,4,5,6,7,8"><code class="language-js">render () {
|
||
return (
|
||
<Fragment>
|
||
<li>First item</li>
|
||
<li>Second item</li>
|
||
</Fragment>
|
||
)
|
||
}
|
||
</code></pre>
|
||
|
||
<p>See: <a href="https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings">Fragments and strings</a></p>
|
||
|
||
<h3 id="returning-strings">Returning strings</h3>
|
||
|
||
<pre data-line="2"><code class="language-js">render() {
|
||
return 'Look ma, no spans!';
|
||
}
|
||
</code></pre>
|
||
|
||
<p>You can return just a string.</p>
|
||
|
||
<p>See: <a href="https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings">Fragments and strings</a></p>
|
||
|
||
<h3 id="errors">Errors</h3>
|
||
|
||
<pre data-line="3,4,5"><code class="language-js">class MyComponent extends Component {
|
||
···
|
||
componentDidCatch (error, info) {
|
||
this.setState({ error })
|
||
}
|
||
}
|
||
</code></pre>
|
||
|
||
<p>Catch errors via <code>componentDidCatch</code>. (React 16+)</p>
|
||
|
||
<p>See: <a href="https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html">Error handling in React 16</a></p>
|
||
|
||
<h3 id="portals">Portals</h3>
|
||
|
||
<pre data-line="2,3,4,5"><code class="language-js">render () {
|
||
return React.createPortal(
|
||
this.props.children,
|
||
document.getElementById('menu')
|
||
)
|
||
}
|
||
</code></pre>
|
||
|
||
<p>This renders <code>this.props.children</code> into any location in the DOM.</p>
|
||
|
||
<p>See: <a href="https://reactjs.org/docs/portals.html">Portals</a></p>
|
||
|
||
<h3 id="hydration">Hydration</h3>
|
||
|
||
<pre data-line="2"><code class="language-js">const el = document.getElementById('app')
|
||
ReactDOM.hydrate(<App />, el)
|
||
</code></pre>
|
||
|
||
<p>Use <code>ReactDOM.hydrate</code> instead of using <code>ReactDOM.render</code> if you’re rendering over the output of <a href="https://reactjs.org/docs/react-dom-server.html">ReactDOMServer</a>.</p>
|
||
|
||
<p>See: <a href="https://reactjs.org/docs/react-dom.html#hydrate">Hydrate</a></p>
|
||
|
||
<h2 class="-three-column" id="property-validation">Property validation</h2>
|
||
|
||
<h3 id="proptypes">PropTypes</h3>
|
||
|
||
<pre class="-setup"><code class="language-js">import PropTypes from 'prop-types'
|
||
</code></pre>
|
||
|
||
<p>See: <a href="https://reactjs.org/docs/typechecking-with-proptypes.html">Typechecking with PropTypes</a></p>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Key</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><code>any</code></td>
|
||
<td>Anything</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h4 id="basic">Basic</h4>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Key</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><code>string</code></td>
|
||
<td> </td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>number</code></td>
|
||
<td> </td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>func</code></td>
|
||
<td>Function</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>bool</code></td>
|
||
<td>True or false</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h4 id="enum">Enum</h4>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Key</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><code>oneOf</code><em>(any)</em></td>
|
||
<td>Enum types</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>oneOfType</code><em>(type array)</em></td>
|
||
<td>Union</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h4 id="array">Array</h4>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Key</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><code>array</code></td>
|
||
<td> </td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>arrayOf</code><em>(…)</em></td>
|
||
<td> </td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h4 id="object">Object</h4>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Key</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><code>object</code></td>
|
||
<td> </td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>objectOf</code><em>(…)</em></td>
|
||
<td>Object with values of a certain type</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>instanceOf</code><em>(…)</em></td>
|
||
<td>Instance of a class</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>shape</code><em>(…)</em></td>
|
||
<td> </td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h4 id="elements">Elements</h4>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Key</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><code>element</code></td>
|
||
<td>React element</td>
|
||
</tr>
|
||
<tr>
|
||
<td><code>node</code></td>
|
||
<td>DOM node</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h4 id="required">Required</h4>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Key</th>
|
||
<th>Description</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><code>(···).isRequired</code></td>
|
||
<td>Required</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h3 id="basic-types">Basic types</h3>
|
||
|
||
<pre><code class="language-jsx">MyComponent.propTypes = {
|
||
email: PropTypes.string,
|
||
seats: PropTypes.number,
|
||
callback: PropTypes.func,
|
||
isClosed: PropTypes.bool,
|
||
any: PropTypes.any
|
||
}
|
||
</code></pre>
|
||
|
||
<h3 id="required-types">Required types</h3>
|
||
|
||
<pre><code class="language-jsx">MyCo.propTypes = {
|
||
name: PropTypes.string.isRequired
|
||
}
|
||
</code></pre>
|
||
|
||
<h3 id="elements-1">Elements</h3>
|
||
|
||
<pre><code class="language-jsx">MyCo.propTypes = {
|
||
// React element
|
||
element: PropTypes.element,
|
||
|
||
// num, string, element, or an array of those
|
||
node: PropTypes.node
|
||
}
|
||
</code></pre>
|
||
|
||
<h3 id="enumerables-oneof">Enumerables (oneOf)</h3>
|
||
|
||
<pre><code class="language-jsx">MyCo.propTypes = {
|
||
direction: PropTypes.oneOf([
|
||
'left', 'right'
|
||
])
|
||
}
|
||
</code></pre>
|
||
|
||
<h3 id="arrays-and-objects">Arrays and objects</h3>
|
||
|
||
<pre><code class="language-jsx">MyCo.propTypes = {
|
||
list: PropTypes.array,
|
||
ages: PropTypes.arrayOf(PropTypes.number),
|
||
user: PropTypes.object,
|
||
user: PropTypes.objectOf(PropTypes.number),
|
||
message: PropTypes.instanceOf(Message)
|
||
}
|
||
</code></pre>
|
||
|
||
<pre><code class="language-jsx">MyCo.propTypes = {
|
||
user: PropTypes.shape({
|
||
name: PropTypes.string,
|
||
age: PropTypes.number
|
||
})
|
||
}
|
||
</code></pre>
|
||
|
||
<p>Use <code>.array[Of]</code>, <code>.object[Of]</code>, <code>.instanceOf</code>, <code>.shape</code>.</p>
|
||
|
||
<h3 id="custom-validation">Custom validation</h3>
|
||
|
||
<pre><code class="language-jsx">MyCo.propTypes = {
|
||
customProp: (props, key, componentName) => {
|
||
if (!/matchme/.test(props[key])) {
|
||
return new Error('Validation failed!')
|
||
}
|
||
}
|
||
}
|
||
</code></pre>
|
||
|
||
<h2 id="also-see">Also see</h2>
|
||
|
||
<ul>
|
||
<li><a href="https://reactjs.org">React website</a> <em>(reactjs.org)</em></li>
|
||
<li><a href="https://reactcheatsheet.com/">React cheatsheet</a> <em>(reactcheatsheet.com)</em></li>
|
||
<li><a href="https://github.com/enaqx/awesome-react">Awesome React</a> <em>(github.com)</em></li>
|
||
<li><a href="react@0.14">React v0.14 cheatsheet</a> <em>Legacy version</em></li>
|
||
</ul>
|
||
|
||
|
||
</main>
|
||
</div>
|
||
|
||
<div class='pre-footer' data-js-no-preview><i class='icon'></i></div>
|
||
|
||
|
||
|
||
<section class='comments-area' id='comments' data-js-no-preview>
|
||
<div class='container'>
|
||
<details class='comments-details'>
|
||
<summary>
|
||
<strong class='count'>
|
||
<span class='disqus-comment-count' data-disqus-identifier="react" data-disqus-url='https://devhints.io/react'>0 Comments</span>
|
||
</strong>
|
||
<span class='suffix'>for this cheatsheet.</span>
|
||
<span class='fauxlink'>Write yours!</span>
|
||
</summary>
|
||
<div class='comments-section'>
|
||
<div class='comments'>
|
||
<div id='disqus_thread'></div>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
<noscript data-js-disqus='{"host":"devhints.disqus.com","url":"https://devhints.io/react","identifier":"react"}'></noscript>
|
||
</section>
|
||
|
||
|
||
<footer class='search-footer' data-js-no-preview>
|
||
<div class='container'>
|
||
<div class='search-footer-section'>
|
||
<div class='search'>
|
||
<form
|
||
|
||
class='search' action='.' method='get'>
|
||
<label class='search-box -small'>
|
||
<span class='prefix'>devhints.io</span>
|
||
<span class='sep'>/</span>
|
||
<input name='q'
|
||
type='text'
|
||
|
||
|
||
|
||
placeholder='Search 358+ cheatsheets'
|
||
>
|
||
</label>
|
||
</form>
|
||
|
||
</div>
|
||
<div class='links'>
|
||
<a class='home-button' href='.'><i></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
|
||
|
||
|
||
<footer class='related-posts-area' id='related' data-js-no-preview>
|
||
<div class='container'>
|
||
<div class='related-posts-section'>
|
||
<div class='callout'>
|
||
<a class='related-posts-callout' href='.'>
|
||
<div class='text'>
|
||
<i class='icon'></i>
|
||
|
||
<span class='description'>
|
||
Over 358 curated cheatsheets, by developers for developers.
|
||
</span>
|
||
|
||
<span class='push-button -dark'>
|
||
Devhints home
|
||
</span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
<div class='group'>
|
||
<div class='related-posts-group'>
|
||
|
||
<h3>Other React cheatsheets</h3>
|
||
|
||
|
||
<ul class='related-post-list'>
|
||
|
||
<li class='item related-post-item'>
|
||
<a href='./redux'>
|
||
<strong>Redux</strong>
|
||
<span>
|
||
cheatsheet
|
||
|
||
|
||
<abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
|
||
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class='item related-post-item'>
|
||
<a href='./enzyme'>
|
||
<strong>Enzyme</strong>
|
||
<span>
|
||
cheatsheet
|
||
|
||
|
||
<abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
|
||
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class='item related-post-item'>
|
||
<a href='./enzyme@2'>
|
||
<strong>Enzyme v2</strong>
|
||
<span>
|
||
cheatsheet
|
||
|
||
|
||
<abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
|
||
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class='item related-post-item'>
|
||
<a href='./awesome-redux'>
|
||
<strong>Awesome Redux</strong>
|
||
<span>
|
||
cheatsheet
|
||
|
||
|
||
<abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
|
||
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class='item related-post-item'>
|
||
<a href='./flux'>
|
||
<strong>Flux architecture</strong>
|
||
<span>
|
||
cheatsheet
|
||
|
||
|
||
<abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
|
||
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class='item related-post-item'>
|
||
<a href='./react-router'>
|
||
<strong>React-router</strong>
|
||
<span>
|
||
cheatsheet
|
||
|
||
|
||
<abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
|
||
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class='group'>
|
||
<div class='related-posts-group'>
|
||
<h3>Top cheatsheets</h3>
|
||
|
||
<ul class='related-post-list'>
|
||
|
||
<li class='item related-post-item'>
|
||
<a href='./elixir'>
|
||
<strong>Elixir</strong>
|
||
<span>
|
||
cheatsheet
|
||
|
||
|
||
<abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
|
||
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class='item related-post-item'>
|
||
<a href='./es6'>
|
||
<strong>ES2015+</strong>
|
||
<span>
|
||
cheatsheet
|
||
|
||
|
||
<abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
|
||
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class='item related-post-item'>
|
||
<a href='./vim-diff'>
|
||
<strong>Vimdiff</strong>
|
||
<span>
|
||
cheatsheet
|
||
|
||
|
||
<abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
|
||
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class='item related-post-item'>
|
||
<a href='./vim'>
|
||
<strong>Vim</strong>
|
||
<span>
|
||
cheatsheet
|
||
|
||
|
||
<abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
|
||
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class='item related-post-item'>
|
||
<a href='./vimscript'>
|
||
<strong>Vim scripting</strong>
|
||
<span>
|
||
cheatsheet
|
||
|
||
|
||
<abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
|
||
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class='item related-post-item'>
|
||
<a href='./vue'>
|
||
<strong>Vue.js</strong>
|
||
<span>
|
||
cheatsheet
|
||
|
||
|
||
<abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
|
||
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c<t.length;c++)try{f(t[c])}catch(e){i||(i=e)}if(t.length){var l=f(t[t.length-1]);"object"==typeof exports&&"undefined"!=typeof module?module.exports=l:"function"==typeof define&&define.amd?define(function(){return l}):n&&(this[n]=l)}if(parcelRequire=f,i)throw i;return f}({"r6WJ":[function(require,module,exports) {
|
||
function e(e,t){var r=e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.oMatchesSelector;if(r)return r.call(e,t);if(e.parentNode){for(var c=e.parentNode.querySelectorAll(t),o=c.length;o--;0)if(c[o]===e)return!0;return!1}}module.exports=e;
|
||
},{}],"cDuO":[function(require,module,exports) {
|
||
function e(e,r){var n,o,t=e.length;if("number"==typeof t)for(n=0;n<t;n++)r(e[n],n);else for(n in o=0,e)e.hasOwnProperty(n)&&r(e[n],n,o++);return e}module.exports=e;
|
||
},{}],"G20n":[function(require,module,exports) {
|
||
var s=require("./each");function e(i,a){if(a)if(Array.isArray(a))s(a,function(s){e(i,s)});else if(i.classList){var r=a.split(" ").filter(Boolean);s(r,function(s){i.classList.add(s)})}else i.className+=" "+a}module.exports=e;
|
||
},{"./each":"cDuO"}],"THIL":[function(require,module,exports) {
|
||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.appendMany=c,exports.nextUntil=f,exports.before=s,exports.findChildren=d,exports.createDiv=p;var t=e(require("dom101/matches"));function e(t){return t&&t.__esModule?t:{default:t}}function r(t){return u(t)||i(t)||o(t)||n()}function n(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function o(t,e){if(t){if("string"==typeof t)return a(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?a(t,e):void 0}}function i(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}function u(t){if(Array.isArray(t))return a(t)}function a(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}function c(t,e){e.forEach(function(e){t.appendChild(e)})}function f(t,e){return l(t.nextSibling,e,[])}function l(e,n,o){return e?(0,t.default)(e,n)?o:l(e.nextSibling,n,[].concat(r(o),[e])):o}function s(t,e){t.parentNode.insertBefore(e,t)}function d(e,r){return[].slice.call(e.children).filter(function(e){return(0,t.default)(e,r)})}function p(t){var e=document.createElement("div");return Object.keys(t).forEach(function(r){e.setAttribute(r,t[r])}),e}
|
||
},{"dom101/matches":"r6WJ"}],"hE9p":[function(require,module,exports) {
|
||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=f,exports.groupify=p;var r=e(require("dom101/matches")),t=e(require("dom101/add-class")),n=require("../helpers/dom");function e(r){return r&&r.__esModule?r:{default:r}}function o(r){return c(r)||u(r)||i(r)||a()}function a(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function i(r,t){if(r){if("string"==typeof r)return s(r,t);var n=Object.prototype.toString.call(r).slice(8,-1);return"Object"===n&&r.constructor&&(n=r.constructor.name),"Map"===n||"Set"===n?Array.from(r):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?s(r,t):void 0}}function u(r){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(r))return Array.from(r)}function c(r){if(Array.isArray(r))return s(r)}function s(r,t){(null==t||t>r.length)&&(t=r.length);for(var n=0,e=new Array(t);n<t;n++)e[n]=r[n];return e}function f(r){l(r).forEach(function(r){(0,n.findChildren)(r,"[data-js-h3-section-list]").forEach(function(r){d(r)})})}function l(r){return p(r,{tag:"h2",wrapperFn:function(){return(0,n.createDiv)({class:"h2-section"})},bodyFn:function(){return(0,n.createDiv)({class:"body h3-section-list","data-js-h3-section-list":""})}})}function d(r){return p(r,{tag:"h3",wrapperFn:function(){return(0,n.createDiv)({class:"h3-section"})},bodyFn:function(){return(0,n.createDiv)({class:"body"})}})}function p(e,a){var i=a.tag,u=a.wrapperFn,c=a.bodyFn,s=e.children[0],f=[];if(s&&!(0,r.default)(s,i)){var l=(0,n.nextUntil)(s,i);f.push(d(s,null,[s].concat(o(l))))}return(0,n.findChildren)(e,i).forEach(function(r){var t=(0,n.nextUntil)(r,i);f.push(d(r,r,t))}),f;function d(r,e,o){var a=u(),i=r.className;i&&(0,t.default)(a,i),(0,n.before)(r,a);var s=c();return i&&(0,t.default)(s,i),(0,n.appendMany)(s,o),e&&a.appendChild(e),a.appendChild(s),a}}
|
||
},{"dom101/matches":"r6WJ","dom101/add-class":"G20n","../helpers/dom":"THIL"}],"DJ2P":[function(require,module,exports) {
|
||
function n(n,t,e){n.addEventListener?n.addEventListener(t,e):n.attachEvent("on"+t,function(){e.call(n)})}module.exports=n;
|
||
},{}],"eoMl":[function(require,module,exports) {
|
||
"use strict";var e=u(require("./wrapify")),d=u(require("dom101/add-class")),t=u(require("dom101/on"));function u(e){return e&&e.__esModule?e:{default:e}}var a,o=document.querySelector("[data-js-main-body]");function r(){a||((0,d.default)(document.documentElement,"LoadDone"),a=!0)}o&&((0,e.default)(o),(0,d.default)(o,"-wrapified")),(0,t.default)(window,"load",r),setTimeout(r,5e3);
|
||
},{"./wrapify":"hE9p","dom101/add-class":"G20n","dom101/on":"DJ2P"}]},{},["eoMl"], null)</script>
|
||
<script src='./assets/packed/app.js?t=20231011104129'></script>
|
||
|
||
|
||
|
||
</body>
|
||
</html>
|