mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
56 lines
91 KiB
HTML
56 lines
91 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<meta name="generator" content="Docusaurus v2.0.0-alpha.70">
|
||
<link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="React Native Blog RSS Feed">
|
||
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="React Native Blog Atom Feed">
|
||
<link rel="preconnect" href="https://www.google-analytics.com">
|
||
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41298772-2","auto"),ga("send","pageview")</script>
|
||
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
||
<link rel="preconnect" href="https://www.google-analytics.com">
|
||
<link rel="preconnect" href="https://www.googletagmanager.com">
|
||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-41298772-2"></script>
|
||
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-41298772-2",{})</script>
|
||
<link rel="search" type="application/opensearchdescription+xml" title="React Native" href="/opensearch.xml">
|
||
<link rel="icon" href="/img/pwa/manifest-icon-512.png">
|
||
<link rel="manifest" href="/manifest.json">
|
||
<meta name="theme-color" content="#20232a">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="#20232a">
|
||
<link rel="apple-touch-icon" href="/img/pwa/manifest-icon-512.png">
|
||
<link rel="mask-icon" href="/img/pwa/manifest-icon-512.png" color="#06bcee">
|
||
<meta name="msapplication-TileImage" href="/img/pwa/manifest-icon-512.png">
|
||
<meta name="msapplication-TileColor" content="#20232a">
|
||
<script src="https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js" defer="defer"></script>
|
||
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">React Fundamentals · React Native</title><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:version" content="0.63"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="docs-default-0.63"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" property="og:title" content="React Fundamentals · React Native"><meta data-react-helmet="true" name="description" content="To understand React Native fully, you need a solid foundation in React. This short introduction to React can help you get started or get refreshed."><meta data-react-helmet="true" property="og:description" content="To understand React Native fully, you need a solid foundation in React. This short introduction to React can help you get started or get refreshed."><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/docs/intro-react"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link data-react-helmet="true" rel="canonical" href="https://reactnative.dev/docs/intro-react"><link rel="stylesheet" href="/styles.f56da522.css">
|
||
<link rel="stylesheet" href="/main.3de2b5ef.css">
|
||
<link rel="preload" href="/styles.69e4b76b.js" as="script">
|
||
<link rel="preload" href="/runtime~main.a7562795.js" as="script">
|
||
<link rel="preload" href="/main.b86b035f.js" as="script">
|
||
<link rel="preload" href="/1.de054a96.js" as="script">
|
||
<link rel="preload" href="/2.d28ff3f3.js" as="script">
|
||
<link rel="preload" href="/929.d078dd2b.js" as="script">
|
||
<link rel="preload" href="/ee5b3385.efdac311.js" as="script">
|
||
<link rel="preload" href="/17896441.a6fe599d.js" as="script">
|
||
<link rel="preload" href="/0a17ef92.d704545d.js" as="script">
|
||
</head>
|
||
<body>
|
||
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
||
<nav aria-label="Skip navigation links"><button type="button" tabindex="0" class="skipToContent_3aLp">Skip to main content</button></nav><nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg aria-label="Menu" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img src="/img/header_logo.svg" alt="React Native" class="themedImage_phiS themedImage--light_VJaY navbar__logo"><img src="/img/header_logo.svg" alt="React Native" class="themedImage_phiS themedImage--dark_1NF3 navbar__logo"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/intro-react">Next</a></li><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/docs/intro-react">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/intro-react">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/intro-react">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/intro-react">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link navbar__link--active" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_Bh6k"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_1UDy">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_1UDy">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img src="/img/header_logo.svg" alt="React Native" class="themedImage_phiS themedImage--light_VJaY navbar__logo"><img src="/img/header_logo.svg" alt="React Native" class="themedImage_phiS themedImage--dark_1NF3 navbar__logo"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link navbar__link--active" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a class="menu__link" href="/blog">Blog</a></li><li class="menu__list-item"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/intro-react">Next</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" href="/docs/intro-react">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/intro-react">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/intro-react">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/intro-react">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_1mVJ"><div class="docSidebarContainer_uPTz" role="complementary"><div class="sidebar_M-Lc"><div class="menu menu--responsive thin-scrollbar menu_tgpy"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_1e05" width="24" height="24" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">The Basics</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/intro-react-native-components">Core Components and Native Components</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/docs/intro-react">React Fundamentals</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/handling-text-input">Handling Text Input</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/using-a-scrollview">Using a ScrollView</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/using-a-listview">Using List Views</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/troubleshooting">Troubleshooting</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/platform-specific-code">Platform Specific Code</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/more-resources">More Resources</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Environment setup</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/environment-setup">Setting up the development environment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/building-for-tv">Building For TV Devices</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/out-of-tree-platforms">Out-of-Tree Platforms</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Workflow</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/running-on-device">Running On Device</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/fast-refresh">Fast Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/debugging">Debugging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/testing-overview">Testing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/libraries">Using Libraries</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/typescript">Using TypeScript</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/upgrading">Upgrading to new React Native versions</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Design</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/style">Style</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/height-and-width">Height and Width</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/flexbox">Layout with Flexbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/images">Images</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/colors">Color Reference</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Interaction</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/handling-touches">Handling Touches</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/navigation">Navigating Between Screens</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/animations">Animations</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/gesture-responder-system">Gesture Responder System</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Inclusion</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/accessibility">Accessibility</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Performance</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/performance">Performance Overview</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/optimizing-flatlist-configuration">Optimizing Flatlist Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/ram-bundles-inline-requires">RAM Bundles and Inline Requires</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/profiling">Profiling</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">JavaScript Runtime</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/javascript-environment">JavaScript Environment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/timers">Timers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/hermes">Using Hermes</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Connectivity</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/network">Networking</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/security">Security</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Native Modules</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-modules-intro">Native Modules Intro</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-modules-android">Android Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-modules-ios">iOS Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-modules-setup">Native Modules NPM Package Setup</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Native Components</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-components-android">Android Native UI Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/native-components-ios">iOS Native UI Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/direct-manipulation">Direct Manipulation</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guides (Android)</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/headless-js-android">Headless JS</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/signed-apk-android">Publishing to Google Play Store</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/removing-default-permissions">Removing Default Permissions</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guides (iOS)</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/linking-libraries-ios">Linking Libraries</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/running-on-simulator-ios">Running On Simulator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/communication-ios">Communication between native and React Native</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/app-extensions">App Extensions</a></li></ul></li></ul></div></div></div><main class="docMainContainer_1zi2"><div class="container padding-vert--lg docItemWrapper_1hMI"><div class="row"><div class="col docItemCol_2AGf"><div class="docItemContainer_1tAC"><article><header><h1 class="docTitle_cWlf">React Fundamentals</h1></header><div class="markdown"><p>React Native runs on <a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer">React</a>, a popular open source library for building user interfaces with JavaScript. To make the most of React Native, it helps to understand React itself. This section can get you started or can serve as a refresher course.</p><p>We’re going to cover the core concepts behind React:</p><ul><li>components</li><li>JSX</li><li>props</li><li>state</li></ul><p>If you want to dig deeper, we encourage you to check out <a href="https://reactjs.org/docs/getting-started.html" target="_blank" rel="noopener noreferrer">React’s official documentation</a>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="your-first-component"></a>Your first component<a class="hash-link" href="#your-first-component" title="Direct link to heading">#</a></h2><p>The rest of this introduction to React uses cats in its examples: friendly, approachable creatures that need names and a cafe to work in. Here is your very first Cat component:</p><div><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_2uuE tabs__item--active">Function Component</li><li role="tab" tabindex="0" aria-selected="false" class="tabs__item tabItem_2uuE">Class Component</li></ul><div class="margin-vert--md"><div role="tabpanel"><div class="snack-player" data-snack-name="Your Cat" data-snack-description="Example usage" data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%20%7D%20from%20'react-native'%3B%0A%0Aconst%20Cat%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CText%3EHello%2C%20I%20am%20your%20cat!%3C%2FText%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20Cat%3B" data-snack-dependencies="" data-snack-platform="web" data-snack-supported-platforms="ios,android,web" data-snack-theme="light" data-snack-preview="true" data-snack-loading="lazy"></div><p>Here is how you do it: To define your <code>Cat</code> component, first use JavaScript’s <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import" target="_blank" rel="noopener noreferrer"><code>import</code></a> to import React and React Native’s <a href="/docs/next/text"><code>Text</code></a> Core Component:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-jsx codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">import</span><span class="token plain"> React </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'react'</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> Text </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'react-native'</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><p>Your component starts as a function:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-jsx codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#79b6f2">Cat</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><p>You can think of components as blueprints. Whatever a function component returns is rendered as a <strong>React element.</strong> React elements let you describe what you want to see on the screen.</p><p>Here the <code>Cat</code> component will render a <code><Text></code> element:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-jsx codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#79b6f2">Cat</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain">Hello</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token constant" style="color:#5a9bcf">I</span><span class="token plain"> am your cat</span><span class="token operator" style="color:#fc929e">!</span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">export</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">default</span><span class="token plain"> Cat</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><p>You can export your function component with JavaScript’s <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export" target="_blank" rel="noopener noreferrer"><code>export default</code></a> for use throughout your app like so:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-jsx codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#79b6f2">Cat</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain">Hello</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token constant" style="color:#5a9bcf">I</span><span class="token plain"> am your cat</span><span class="token operator" style="color:#fc929e">!</span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">export</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">default</span><span class="token plain"> Cat</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div></div><div role="tabpanel" hidden=""><p>Class components tend to be a bit more verbose than function components.</p><div class="snack-player" data-snack-name="Your Cat" data-snack-description="Example usage" data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20'react'%3B%0Aimport%20%7B%20Text%20%7D%20from%20'react-native'%3B%0A%0Aclass%20Cat%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CText%3EHello%2C%20I%20am%20your%20cat!%3C%2FText%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20Cat%3B" data-snack-dependencies="" data-snack-platform="web" data-snack-supported-platforms="ios,android,web" data-snack-theme="light" data-snack-preview="true" data-snack-loading="lazy"></div><p>You additionally import <code>Component</code> from React:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-jsx codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">import</span><span class="token plain"> React</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> Component </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'react'</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><p>Your component starts as a class extending <code>Component</code> instead of as a function:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-jsx codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">class</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Cat</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">extends</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Component</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token punctuation" style="color:#657b83">}</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><p>Class components have a <code>render()</code> function. Whatever is returned inside it is rendered as a React element:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-jsx codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">class</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Cat</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">extends</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Component</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token function" style="color:#79b6f2">render</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain">Hello</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token constant" style="color:#5a9bcf">I</span><span class="token plain"> am your cat</span><span class="token operator" style="color:#fc929e">!</span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><p>And as with function components, you can export your class component:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-jsx codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">class</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Cat</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">extends</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Component</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token function" style="color:#79b6f2">render</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain">Hello</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token constant" style="color:#5a9bcf">I</span><span class="token plain"> am your cat</span><span class="token operator" style="color:#fc929e">!</span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">export</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">default</span><span class="token plain"> Cat</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div></div></div></div><blockquote><p>This is one of many ways to export your component. This kind of export works well with the Snack Player. However, depending on your app’s file structure, you might need to use a different convention. This <a href="https://medium.com/dailyjs/javascript-module-cheatsheet-7bd474f1d829" target="_blank" rel="noopener noreferrer">handy cheatsheet on JavaScript imports and exports</a> can help.</p></blockquote><p>Now take a closer look at that <code>return</code> statement. <code><Text>Hello, I am your cat!</Text></code> is using a kind of JavaScript syntax that makes writing elements convenient: JSX.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="jsx"></a>JSX<a class="hash-link" href="#jsx" title="Direct link to heading">#</a></h2><p>React and React Native use <strong>JSX,</strong> a syntax that lets you write elements inside JavaScript like so: <code><Text>Hello, I am your cat!</Text></code>. The React docs have <a href="https://reactjs.org/docs/jsx-in-depth.html" target="_blank" rel="noopener noreferrer">a comprehensive guide to JSX</a> you can reference to learn even more. Because JSX is JavaScript, you can use variables inside it. Here you are declaring a name for the cat, <code>name</code>, and embedding it with curly braces inside <code><Text></code>.</p><div class="snack-player" data-snack-name="Curly Braces" data-snack-description="Example usage" data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%20%7D%20from%20'react-native'%3B%0A%0Aconst%20Cat%20%3D%20()%20%3D%3E%20%7B%0A%20%20const%20name%20%3D%20%22Maru%22%3B%0A%20%20return%20(%0A%20%20%20%20%3CText%3EHello%2C%20I%20am%20%7Bname%7D!%3C%2FText%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20Cat%3B" data-snack-dependencies="" data-snack-platform="web" data-snack-supported-platforms="ios,android,web" data-snack-theme="light" data-snack-preview="true" data-snack-loading="lazy"></div><p>Any JavaScript expression will work between curly braces, including function calls like <code>{getFullName("Rum", "Tum", "Tugger")}</code>:</p><div class="snack-player" data-snack-name="Curly Braces" data-snack-description="Example usage" data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%20%7D%20from%20'react-native'%3B%0A%0Aconst%20getFullName%20%3D%20(firstName%2C%20secondName%2C%20thirdName)%20%3D%3E%20%7B%0A%20%20return%20firstName%20%2B%20%22%20%22%20%2B%20secondName%20%2B%20%22%20%22%20%2B%20thirdName%3B%0A%7D%0A%0Aconst%20Cat%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20Hello%2C%20I%20am%20%7BgetFullName(%22Rum%22%2C%20%22Tum%22%2C%20%22Tugger%22)%7D!%0A%20%20%20%20%3C%2FText%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20Cat%3B" data-snack-dependencies="" data-snack-platform="web" data-snack-supported-platforms="ios,android,web" data-snack-theme="light" data-snack-preview="true" data-snack-loading="lazy"></div><p>You can think of curly braces as creating a portal into JS functionality in your JSX!</p><blockquote><p>Because JSX is included in the React library, it won’t work if you don’t have <code>import React from 'react'</code> at the top of your file!</p></blockquote><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="custom-components"></a>Custom Components<a class="hash-link" href="#custom-components" title="Direct link to heading">#</a></h2><p>You’ve already met <a href="/docs/intro-react-native-components">React Native’s Core Components</a>. React lets you nest these components inside each other to create new components. These nestable, reusable components are at the heart of the React paradigm.</p><p>For example, you can nest <a href="/docs/text"><code>Text</code></a> and <a href="/docs/textinput"><code>TextInput</code></a> inside a <a href="/docs/view"><code>View</code></a> below, and React Native will render them together:</p><div class="snack-player" data-snack-name="Custom Components" data-snack-description="Example usage" data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20TextInput%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20Cat%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3EHello%2C%20I%20am...%3C%2FText%3E%0A%20%20%20%20%20%20%3CTextInput%0A%20%20%20%20%20%20%20%20style%3D%7B%7B%0A%20%20%20%20%20%20%20%20%20%20height%3A%2040%2C%0A%20%20%20%20%20%20%20%20%20%20borderColor%3A%20'gray'%2C%0A%20%20%20%20%20%20%20%20%20%20borderWidth%3A%201%0A%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20defaultValue%3D%22Name%20me!%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20Cat%3B" data-snack-dependencies="" data-snack-platform="web" data-snack-supported-platforms="ios,android,web" data-snack-theme="light" data-snack-preview="true" data-snack-loading="lazy"></div><div><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="false" class="tabs__item tabItem_2uuE">Android</li><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_2uuE tabs__item--active">Web</li></ul><div class="margin-vert--md"><div role="tabpanel"><blockquote><p>If you’re familiar with web development, <code><View></code> and <code><Text></code> might remind you of HTML! You can think of them as the <code><div></code> and <code><p></code> tags of application development.</p></blockquote></div><div role="tabpanel" hidden=""><blockquote><p>On Android, you usually put your views inside <code>LinearLayout</code>, <code>FrameLayout</code>, <code>RelativeLayout</code>, etc. to define how the view’s children will be arranged on the screen. In React Native, <code>View</code> uses Flexbox for its children’s layout. You can learn more in <a href="/docs/flexbox">our guide to layout with Flexbox</a>.</p></blockquote></div></div></div><p>You can render this component multiple times and multiple places without repeating your code by using <code><Cat></code>:</p><div class="snack-player" data-snack-name="Multiple Components" data-snack-description="Example usage" data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20TextInput%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20Cat%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3EI%20am%20also%20a%20cat!%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20Cafe%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3EWelcome!%3C%2FText%3E%0A%20%20%20%20%20%20%3CCat%20%2F%3E%0A%20%20%20%20%20%20%3CCat%20%2F%3E%0A%20%20%20%20%20%20%3CCat%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20Cafe%3B" data-snack-dependencies="" data-snack-platform="web" data-snack-supported-platforms="ios,android,web" data-snack-theme="light" data-snack-preview="true" data-snack-loading="lazy"></div><p>Any component that renders other components is a <strong>parent component.</strong> Here, <code>Cafe</code> is the parent component and each <code>Cat</code> is a <strong>child component.</strong></p><p>You can put as many cats in your cafe as you like. Each <code><Cat></code> renders a unique element—which you can customize with props.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="props"></a>Props<a class="hash-link" href="#props" title="Direct link to heading">#</a></h2><p><strong>Props</strong> is short for “properties.” Props let you customize React components. For example, here you pass each <code><Cat></code> a different <code>name</code> for <code>Cat</code> to render:</p><div class="snack-player" data-snack-name="Multiple Props" data-snack-description="Example usage" data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%20%7D%20from%20'react-native'%3B%0A%0Aconst%20Cat%20%3D%20(props)%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3EHello%2C%20I%20am%20%7Bprops.name%7D!%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20Cafe%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CCat%20name%3D%22Maru%22%20%2F%3E%0A%20%20%20%20%20%20%3CCat%20name%3D%22Jellylorum%22%20%2F%3E%0A%20%20%20%20%20%20%3CCat%20name%3D%22Spot%22%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20Cafe%3B" data-snack-dependencies="" data-snack-platform="web" data-snack-supported-platforms="ios,android,web" data-snack-theme="light" data-snack-preview="true" data-snack-loading="lazy"></div><p>Most of React Native’s Core Components can be customized with props, too. For example, when using <a href="/docs/image"><code>Image</code></a>, you pass it a prop named <a href="/docs/image#source"><code>source</code></a> to define what image it shows:</p><div class="snack-player" data-snack-name="Props" data-snack-description="Example usage" data-snack-code="import%20React%20from%20'react'%3B%0Aimport%20%7B%20Text%2C%20View%2C%20Image%20%7D%20from%20'react-native'%3B%0A%0Aconst%20CatApp%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CImage%0A%20%20%20%20%20%20%20%20source%3D%7B%7Buri%3A%20%22https%3A%2F%2Freactnative.dev%2Fdocs%2Fassets%2Fp_cat1.png%22%7D%7D%0A%20%20%20%20%20%20%20%20style%3D%7B%7Bwidth%3A%20200%2C%20height%3A%20200%7D%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3CText%3EHello%2C%20I%20am%20your%20cat!%3C%2FText%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20CatApp%3B" data-snack-dependencies="" data-snack-platform="web" data-snack-supported-platforms="ios,android,web" data-snack-theme="light" data-snack-preview="true" data-snack-loading="lazy"></div><p><code>Image</code> has <a href="/docs/image#props">many different props</a>, including <a href="/docs/image#style"><code>style</code></a>, which accepts a JS object of design and layout related property-value pairs.</p><blockquote><p>Notice the double curly braces <code>{{ }}</code> surrounding <code>style</code>‘s width and height. In JSX, JavaScript values are referenced with <code>{}</code>. This is handy if you are passing something other than a string as props, like an array or number: <code><Cat food={["fish", "kibble"]} age={2} /></code>. However, JS objects are <strong><em>also</em></strong> denoted with curly braces: <code>{width: 200, height: 200}</code>. Therefore, to pass a JS object in JSX, you must wrap the object in <strong>another pair</strong> of curly braces: <code>{{width: 200, height: 200}}</code></p></blockquote><p>You can build many things with props and the Core Components <a href="/docs/text"><code>Text</code></a>, <a href="/docs/image"><code>Image</code></a>, and <a href="/docs/view"><code>View</code></a>! But to build something interactive, you’ll need state.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_E4oP" id="state"></a>State<a class="hash-link" href="#state" title="Direct link to heading">#</a></h2><p>While you can think of props as arguments you use to configure how components render, <strong>state</strong> is like a component’s personal data storage. State is useful for handling data that changes over time or that comes from user interaction. State gives your components memory!</p><blockquote><p>As a general rule, use props to configure a component when it renders. Use state to keep track of any component data that you expect to change over time.</p></blockquote><p>The following example takes place in a cat cafe where two hungry cats are waiting to be fed. Their hunger, which we expect to change over time (unlike their names), is stored as state. To feed the cats, press their buttons—which will update their state.</p><div><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_2uuE tabs__item--active">Function Component</li><li role="tab" tabindex="0" aria-selected="false" class="tabs__item tabItem_2uuE">Class Component</li></ul><div class="margin-vert--md"><div role="tabpanel"><p>You can add state to a component by calling <a href="https://reactjs.org/docs/hooks-state.html" target="_blank" rel="noopener noreferrer">React’s <code>useState</code> Hook</a>. A Hook is a kind of function that lets you “hook into” React features. For example, <code>useState</code> is a Hook that lets you add state to function components. You can learn more about <a href="https://reactjs.org/docs/hooks-intro.html" target="_blank" rel="noopener noreferrer">other kinds of Hooks in the React documentation.</a></p><div class="snack-player" data-snack-name="State" data-snack-description="Example usage" data-snack-code="import%20React%2C%20%7B%20useState%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Button%2C%20Text%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aconst%20Cat%20%3D%20(props)%20%3D%3E%20%7B%0A%20%20const%20%5BisHungry%2C%20setIsHungry%5D%20%3D%20useState(true)%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20%20%20I%20am%20%7Bprops.name%7D%2C%20and%20I%20am%20%7BisHungry%20%3F%20%22hungry%22%20%3A%20%22full%22%7D!%0A%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20setIsHungry(false)%3B%0A%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20disabled%3D%7B!isHungry%7D%0A%20%20%20%20%20%20%20%20title%3D%7BisHungry%20%3F%20%22Pour%20me%20some%20milk%2C%20please!%22%20%3A%20%22Thank%20you!%22%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20Cafe%20%3D%20()%20%3D%3E%20%7B%0A%20%20return%20(%0A%20%20%20%20%3C%3E%0A%20%20%20%20%20%20%3CCat%20name%3D%22Munkustrap%22%20%2F%3E%0A%20%20%20%20%20%20%3CCat%20name%3D%22Spot%22%20%2F%3E%0A%20%20%20%20%3C%2F%3E%0A%20%20)%3B%0A%7D%0A%0Aexport%20default%20Cafe%3B" data-snack-dependencies="" data-snack-platform="web" data-snack-supported-platforms="ios,android,web" data-snack-theme="light" data-snack-preview="true" data-snack-loading="lazy"></div><p>First, you will want to import <code>useState</code> from React like so:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-jsx codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">import</span><span class="token plain"> React</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> useState </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'react'</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><p>Then you declare the component’s state by calling <code>useState</code> inside its function. In this example, <code>useState</code> creates an <code>isHungry</code> state variable:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-jsx codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#79b6f2">Cat</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">props</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token plain">isHungry</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> setIsHungry</span><span class="token punctuation" style="color:#657b83">]</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">useState</span><span class="token punctuation" style="color:#657b83">(</span><span class="token boolean" style="color:#ff8b50">true</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// ...</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><blockquote><p>You can use <code>useState</code> to track any kind of data: strings, numbers, Booleans, arrays, objects. For example, you can track the number of times a cat has been petted with <code>const [timesPetted, setTimesPetted] = useState(0)</code>!</p></blockquote><p>Calling <code>useState</code> does two things:</p><ul><li>it creates a “state variable” with an initial value—in this case the state variable is <code>isHungry</code> and its initial value is <code>true</code></li><li>it creates a function to set that state variable’s value—<code>setIsHungry</code></li></ul><p>It doesn’t matter what names you use. But it can be handy to think of the pattern as <code>[<getter>, <setter>] = useState(<initialValue>)</code>.</p><p>Next you add the <a href="/docs/button"><code>Button</code></a> Core Component and give it an <code>onPress</code> prop:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-jsx codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token operator" style="color:#fc929e"><</span><span class="token plain">Button</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> onPress</span><span class="token operator" style="color:#fc929e">=</span><span class="token punctuation" style="color:#657b83">{</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token function" style="color:#79b6f2">setIsHungry</span><span class="token punctuation" style="color:#657b83">(</span><span class="token boolean" style="color:#ff8b50">false</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">//..</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token operator" style="color:#fc929e">/</span><span class="token operator" style="color:#fc929e">></span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><p>Now, when someone presses the button, <code>onPress</code> will fire, calling the <code>setIsHungry(false)</code>. This sets the state variable <code>isHungry</code> to <code>false</code>. When <code>isHungry</code> is false, the <code>Button</code>’s <code>disabled</code> prop is set to <code>true</code> and its <code>title</code> also changes:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-jsx codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token operator" style="color:#fc929e"><</span><span class="token plain">Button</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">//..</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> disabled</span><span class="token operator" style="color:#fc929e">=</span><span class="token punctuation" style="color:#657b83">{</span><span class="token operator" style="color:#fc929e">!</span><span class="token plain">isHungry</span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> title</span><span class="token operator" style="color:#fc929e">=</span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain">isHungry </span><span class="token operator" style="color:#fc929e">?</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'Pour me some milk, please!'</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">:</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'Thank you!'</span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token operator" style="color:#fc929e">/</span><span class="token operator" style="color:#fc929e">></span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><blockquote><p>You might’ve noticed that although <code>isHungry</code> is a <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/const" target="_blank" rel="noopener noreferrer">const</a>, it is seemingly reassignable! What is happening is when a state-setting function like <code>setIsHungry</code> is called, its component will re-render. In this case the <code>Cat</code> function will run again—and this time, <code>useState</code> will give us the next value of <code>isHungry</code>.</p></blockquote><p>Finally, put your cats inside a <code>Cafe</code> component:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-jsx codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#79b6f2">Cafe</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Cat</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">name</span><span class="token tag attr-value punctuation attr-equals" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag attr-value" style="color:#8dc891">Munkustrap</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag punctuation" style="color:#657b83">/></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Cat</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">name</span><span class="token tag attr-value punctuation attr-equals" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag attr-value" style="color:#8dc891">Spot</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag punctuation" style="color:#657b83">/></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div></div><div role="tabpanel" hidden=""><p>The older class components approach is a little different when it comes to state.</p><div class="snack-player" data-snack-name="State and Class Components" data-snack-description="Example usage" data-snack-code="import%20React%2C%20%7B%20Component%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Button%2C%20Text%2C%20View%20%7D%20from%20%22react-native%22%3B%0A%0Aclass%20Cat%20extends%20Component%20%7B%0A%20%20state%20%3D%20%7B%20isHungry%3A%20true%20%7D%3B%0A%0A%20%20render(props)%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%3E%0A%20%20%20%20%20%20%20%20%3CText%3E%0A%20%20%20%20%20%20%20%20%20%20I%20am%20%7Bthis.props.name%7D%2C%20and%20I%20am%0A%20%20%20%20%20%20%20%20%20%20%7Bthis.state.isHungry%20%3F%20%22%20hungry%22%20%3A%20%22%20full%22%7D!%0A%20%20%20%20%20%20%20%20%3C%2FText%3E%0A%20%20%20%20%20%20%20%20%3CButton%0A%20%20%20%20%20%20%20%20%20%20onPress%3D%7B()%20%3D%3E%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20this.setState(%7B%20isHungry%3A%20false%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D%7D%0A%20%20%20%20%20%20%20%20%20%20disabled%3D%7B!this.state.isHungry%7D%0A%20%20%20%20%20%20%20%20%20%20title%3D%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20this.state.isHungry%20%3F%20%22Pour%20me%20some%20milk%2C%20please!%22%20%3A%20%22Thank%20you!%22%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aclass%20Cafe%20extends%20Component%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3C%3E%0A%20%20%20%20%20%20%20%20%3CCat%20name%3D%22Munkustrap%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CCat%20name%3D%22Spot%22%20%2F%3E%0A%20%20%20%20%20%20%3C%2F%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aexport%20default%20%20Cafe%3B" data-snack-dependencies="" data-snack-platform="web" data-snack-supported-platforms="ios,android,web" data-snack-theme="light" data-snack-preview="true" data-snack-loading="lazy"></div><p>As always with class components, you must import the <code>Component</code> class from React:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-jsx codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">import</span><span class="token plain"> React</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> Component </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'react'</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><p>In class components, state is stored in a state object:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-jsx codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">export</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">class</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Cat</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">extends</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Component</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> state </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> isHungry</span><span class="token operator" style="color:#fc929e">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ff8b50">true</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">//..</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><p>As with accessing props with <code>this.props</code>, you access this object inside your component with <code>this.state</code>:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-jsx codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token constant" style="color:#5a9bcf">I</span><span class="token plain"> am </span><span class="token punctuation" style="color:#657b83">{</span><span class="token keyword" style="color:#c5a5c5">this</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">props</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">name</span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> and </span><span class="token constant" style="color:#5a9bcf">I</span><span class="token plain"> am</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token keyword" style="color:#c5a5c5">this</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">state</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">isHungry </span><span class="token operator" style="color:#fc929e">?</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">' hungry'</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">:</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">' full'</span><span class="token punctuation" style="color:#657b83">}</span><span class="token operator" style="color:#fc929e">!</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><p>And you set individual values inside the state object by passing an object with the key value pair for state and its new value to <code>this.setState()</code>:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-jsx codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token operator" style="color:#fc929e"><</span><span class="token plain">Button</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> onPress</span><span class="token operator" style="color:#fc929e">=</span><span class="token punctuation" style="color:#657b83">{</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">this</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">setState</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> isHungry</span><span class="token operator" style="color:#fc929e">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ff8b50">false</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// ..</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Button</span><span class="token tag punctuation" style="color:#657b83">></span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><blockquote><p>Do not change your component's state directly by assigning it a new value with <code>this.state.hunger = false</code>. Calling <code>this.setState()</code> allows React to track changes made to state that trigger rerendering. Setting state directly can break your app's reactivity!</p></blockquote><p>When <code>this.state.isHungry</code> is false, the <code>Button</code>’s <code>disabled</code> prop is set to <code>false</code> and its <code>title</code> also changes:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-jsx codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token operator" style="color:#fc929e"><</span><span class="token plain">Button</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// ..</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> disabled</span><span class="token operator" style="color:#fc929e">=</span><span class="token punctuation" style="color:#657b83">{</span><span class="token operator" style="color:#fc929e">!</span><span class="token keyword" style="color:#c5a5c5">this</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">state</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">isHungry</span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> title</span><span class="token operator" style="color:#fc929e">=</span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">this</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">state</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">isHungry</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token operator" style="color:#fc929e">?</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'Pour me some milk, please!'</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token operator" style="color:#fc929e">:</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'Thank you!'</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token operator" style="color:#fc929e">/</span><span class="token operator" style="color:#fc929e">></span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div><p>Finally, put your cats inside a <code>Cafe</code> component:</p><div class="mdxCodeBlock_1daz"><div class="codeBlockContent_2es_"><div tabindex="0" class="prism-code language-jsx codeBlock_27aQ thin-scrollbar"><div class="codeBlockLines_2rCb" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">class</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Cafe</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">extends</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Component</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token function" style="color:#79b6f2">render</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Cat</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">name</span><span class="token tag attr-value punctuation attr-equals" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag attr-value" style="color:#8dc891">Munkustrap</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag punctuation" style="color:#657b83">/></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Cat</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">name</span><span class="token tag attr-value punctuation attr-equals" style="color:#657b83">=</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag attr-value" style="color:#8dc891">Spot</span><span class="token tag attr-value punctuation" style="color:#657b83">"</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag punctuation" style="color:#657b83">/></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
||
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">export</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">default</span><span class="token plain"> Cafe</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div><button type="button" aria-label="Copy code to clipboard" class="copyButton_2bml">Copy</button></div></div></div></div></div><blockquote><p>See the <code><></code> and <code></></code> above? These bits of JSX are <a href="https://reactjs.org/docs/fragments.html" target="_blank" rel="noopener noreferrer">fragments</a>. Adjacent JSX elements must be wrapped in an enclosing tag. Fragments let you do that without nesting an extra, unnecessary wrapping element like <code>View</code>.</p></blockquote><hr><p>Now that you’ve covered both React and React Native’s Core Components, let’s dive deeper on some of these core components by looking at <a href="/docs/handling-text-input">handling <code><TextInput></code></a>.</p></div></article><div class="docMetadata margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/facebook/react-native-website/blob/master/website/versioned_docs/version-0.63/intro-react.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" role="img" viewBox="0 0 40 40" class="iconEdit_2Hwv"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col text--right"><em><small class="docMetadata-updated">Last updated on <time datetime="2021-01-07T14:11:59.000Z" class="docLastUpdatedAt_1gIo">1/7/2021</time></small></em></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/intro-react-native-components"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Core Components and Native Components</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/handling-text-input"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Handling Text Input »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_1zTD thin-scrollbar"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#your-first-component" class="table-of-contents__link">Your first component</a></li><li><a href="#jsx" class="table-of-contents__link">JSX</a></li><li><a href="#custom-components" class="table-of-contents__link">Custom Components</a></li><li><a href="#props" class="table-of-contents__link">Props</a></li><li><a href="#state" class="table-of-contents__link">State</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/tutorial">Tutorial</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/components-and-apis">Components and APIs</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/more-resources">More Resources</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/help">The React Native Community</a></li><li class="footer__item"><a class="footer__link-item" href="/showcase">Who's using React Native?</a></li><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">Ask Questions on Stack Overflow</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" class="footer__link-item">Contributor Guide</a></li><li class="footer__item"><a href="https://dev.to/t/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">DEV Community</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Find us</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://twitter.com/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/privacy" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy Policy</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/terms" target="_blank" rel="noopener noreferrer" class="footer__link-item">Terms of Service</a></li></ul></div></div><div class="footer__bottom text--center"><div class="margin-bottom--sm"><a href="https://opensource.facebook.com" target="_blank" rel="noopener noreferrer" class="footerLogoLink_3cAK"><img class="footer__logo" alt="Facebook Open Source Logo" src="/img/oss_logo.png"></a></div><div class="footer__copyright">Copyright © 2021 Facebook, Inc.</div></div></div></footer></div>
|
||
<script src="/styles.69e4b76b.js"></script>
|
||
<script src="/runtime~main.a7562795.js"></script>
|
||
<script src="/main.b86b035f.js"></script>
|
||
<script src="/1.de054a96.js"></script>
|
||
<script src="/2.d28ff3f3.js"></script>
|
||
<script src="/929.d078dd2b.js"></script>
|
||
<script src="/ee5b3385.efdac311.js"></script>
|
||
<script src="/17896441.a6fe599d.js"></script>
|
||
<script src="/0a17ef92.d704545d.js"></script>
|
||
</body>
|
||
</html> |