{"id":5423,"date":"2024-04-17T11:30:57","date_gmt":"2024-04-17T11:30:57","guid":{"rendered":"https:\/\/hirereactnativedeveloper.com\/blog\/?p=5423"},"modified":"2024-04-17T11:30:57","modified_gmt":"2024-04-17T11:30:57","slug":"react-fundamentals-components-jsx-props-state","status":"publish","type":"post","link":"https:\/\/hirereactnativedeveloper.com\/blog\/react-fundamentals-components-jsx-props-state\/","title":{"rendered":"React Fundamentals: components, JSX, props, state"},"content":{"rendered":"\n<p>React Native runs on React, 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>\n\n\n\n<p>We\u2019re going to cover the core concepts behind React:<\/p>\n\n\n\n<p>components<br>JSX<br>props<br>state<br>If you want to dig deeper, we encourage you to check out React\u2019s official documentation.<\/p>\n\n\n\n<p>component<br>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>\n\n\n\n<div data-snack-id=\"@kishan.mehta\/5d168a\" data-snack-platform=\"web\" data-snack-preview=\"true\" data-snack-theme=\"light\" style=\"overflow:hidden;background:#fbfcfd;border:1px solid var(--color-border);border-radius:4px;height:505px;width:100%\"><\/div>\n<script async src=\"https:\/\/snack.expo.dev\/embed.js\"><\/script>\n","protected":false},"excerpt":{"rendered":"<p>React Native runs on React, a popular open source library for building&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5423","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Fundamentals: components, JSX, props, state -<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hirereactnativedeveloper.com\/blog\/react-fundamentals-components-jsx-props-state\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Fundamentals: components, JSX, props, state -\" \/>\n<meta property=\"og:description\" content=\"React Native runs on React, a popular open source library for building&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hirereactnativedeveloper.com\/blog\/react-fundamentals-components-jsx-props-state\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hirereactnativedeveloper\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-17T11:30:57+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@reactdevelopers\" \/>\n<meta name=\"twitter:site\" content=\"@reactdevelopers\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/hirereactnativedeveloper.com\/blog\/react-fundamentals-components-jsx-props-state\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/hirereactnativedeveloper.com\/blog\/react-fundamentals-components-jsx-props-state\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\/\/hirereactnativedeveloper.com\/blog\/#\/schema\/person\/9c736f3e965f14b303ecd3876e213fdf\"},\"headline\":\"React Fundamentals: components, JSX, props, state\",\"datePublished\":\"2024-04-17T11:30:57+00:00\",\"dateModified\":\"2024-04-17T11:30:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hirereactnativedeveloper.com\/blog\/react-fundamentals-components-jsx-props-state\/\"},\"wordCount\":105,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/hirereactnativedeveloper.com\/blog\/#organization\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/hirereactnativedeveloper.com\/blog\/react-fundamentals-components-jsx-props-state\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hirereactnativedeveloper.com\/blog\/react-fundamentals-components-jsx-props-state\/\",\"url\":\"https:\/\/hirereactnativedeveloper.com\/blog\/react-fundamentals-components-jsx-props-state\/\",\"name\":\"React Fundamentals: components, JSX, props, state -\",\"isPartOf\":{\"@id\":\"https:\/\/hirereactnativedeveloper.com\/blog\/#website\"},\"datePublished\":\"2024-04-17T11:30:57+00:00\",\"dateModified\":\"2024-04-17T11:30:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/hirereactnativedeveloper.com\/blog\/react-fundamentals-components-jsx-props-state\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hirereactnativedeveloper.com\/blog\/react-fundamentals-components-jsx-props-state\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hirereactnativedeveloper.com\/blog\/react-fundamentals-components-jsx-props-state\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hirereactnativedeveloper.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Fundamentals: components, JSX, props, state\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hirereactnativedeveloper.com\/blog\/#website\",\"url\":\"https:\/\/hirereactnativedeveloper.com\/blog\/\",\"name\":\"Latest React Native Blog & News\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/hirereactnativedeveloper.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hirereactnativedeveloper.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/hirereactnativedeveloper.com\/blog\/#organization\",\"name\":\"Hire React Native Developer\",\"url\":\"https:\/\/hirereactnativedeveloper.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hirereactnativedeveloper.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/hirereactnativedeveloper.com\/blog\/wp-content\/uploads\/2023\/11\/cropped-Hire-React-Native-Developers.png\",\"contentUrl\":\"https:\/\/hirereactnativedeveloper.com\/blog\/wp-content\/uploads\/2023\/11\/cropped-Hire-React-Native-Developers.png\",\"width\":632,\"height\":111,\"caption\":\"Hire React Native Developer\"},\"image\":{\"@id\":\"https:\/\/hirereactnativedeveloper.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/hirereactnativedeveloper\",\"https:\/\/twitter.com\/reactdevelopers\",\"https:\/\/www.instagram.com\/hirereactnativedeveloper\",\"https:\/\/www.linkedin.com\/showcase\/hire-react-native-developers\",\"https:\/\/in.pinterest.com\/reactnativedevelopers\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/hirereactnativedeveloper.com\/blog\/#\/schema\/person\/9c736f3e965f14b303ecd3876e213fdf\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hirereactnativedeveloper.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7be732e155eac6e2fb51f509850bd050476d4a8b82aa891e8da4df16f5d80077?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7be732e155eac6e2fb51f509850bd050476d4a8b82aa891e8da4df16f5d80077?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/hirereactnativedeveloper.com\/blog\"],\"url\":\"https:\/\/hirereactnativedeveloper.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Fundamentals: components, JSX, props, state -","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hirereactnativedeveloper.com\/blog\/react-fundamentals-components-jsx-props-state\/","og_locale":"en_US","og_type":"article","og_title":"React Fundamentals: components, JSX, props, state -","og_description":"React Native runs on React, a popular open source library for building&hellip;","og_url":"https:\/\/hirereactnativedeveloper.com\/blog\/react-fundamentals-components-jsx-props-state\/","article_publisher":"https:\/\/www.facebook.com\/hirereactnativedeveloper","article_published_time":"2024-04-17T11:30:57+00:00","author":"admin","twitter_card":"summary_large_image","twitter_creator":"@reactdevelopers","twitter_site":"@reactdevelopers","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hirereactnativedeveloper.com\/blog\/react-fundamentals-components-jsx-props-state\/#article","isPartOf":{"@id":"https:\/\/hirereactnativedeveloper.com\/blog\/react-fundamentals-components-jsx-props-state\/"},"author":{"name":"admin","@id":"https:\/\/hirereactnativedeveloper.com\/blog\/#\/schema\/person\/9c736f3e965f14b303ecd3876e213fdf"},"headline":"React Fundamentals: components, JSX, props, state","datePublished":"2024-04-17T11:30:57+00:00","dateModified":"2024-04-17T11:30:57+00:00","mainEntityOfPage":{"@id":"https:\/\/hirereactnativedeveloper.com\/blog\/react-fundamentals-components-jsx-props-state\/"},"wordCount":105,"commentCount":0,"publisher":{"@id":"https:\/\/hirereactnativedeveloper.com\/blog\/#organization"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hirereactnativedeveloper.com\/blog\/react-fundamentals-components-jsx-props-state\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hirereactnativedeveloper.com\/blog\/react-fundamentals-components-jsx-props-state\/","url":"https:\/\/hirereactnativedeveloper.com\/blog\/react-fundamentals-components-jsx-props-state\/","name":"React Fundamentals: components, JSX, props, state -","isPartOf":{"@id":"https:\/\/hirereactnativedeveloper.com\/blog\/#website"},"datePublished":"2024-04-17T11:30:57+00:00","dateModified":"2024-04-17T11:30:57+00:00","breadcrumb":{"@id":"https:\/\/hirereactnativedeveloper.com\/blog\/react-fundamentals-components-jsx-props-state\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hirereactnativedeveloper.com\/blog\/react-fundamentals-components-jsx-props-state\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/hirereactnativedeveloper.com\/blog\/react-fundamentals-components-jsx-props-state\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hirereactnativedeveloper.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React Fundamentals: components, JSX, props, state"}]},{"@type":"WebSite","@id":"https:\/\/hirereactnativedeveloper.com\/blog\/#website","url":"https:\/\/hirereactnativedeveloper.com\/blog\/","name":"Latest React Native Blog & News","description":"","publisher":{"@id":"https:\/\/hirereactnativedeveloper.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hirereactnativedeveloper.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hirereactnativedeveloper.com\/blog\/#organization","name":"Hire React Native Developer","url":"https:\/\/hirereactnativedeveloper.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hirereactnativedeveloper.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/hirereactnativedeveloper.com\/blog\/wp-content\/uploads\/2023\/11\/cropped-Hire-React-Native-Developers.png","contentUrl":"https:\/\/hirereactnativedeveloper.com\/blog\/wp-content\/uploads\/2023\/11\/cropped-Hire-React-Native-Developers.png","width":632,"height":111,"caption":"Hire React Native Developer"},"image":{"@id":"https:\/\/hirereactnativedeveloper.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hirereactnativedeveloper","https:\/\/twitter.com\/reactdevelopers","https:\/\/www.instagram.com\/hirereactnativedeveloper","https:\/\/www.linkedin.com\/showcase\/hire-react-native-developers","https:\/\/in.pinterest.com\/reactnativedevelopers"]},{"@type":"Person","@id":"https:\/\/hirereactnativedeveloper.com\/blog\/#\/schema\/person\/9c736f3e965f14b303ecd3876e213fdf","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hirereactnativedeveloper.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7be732e155eac6e2fb51f509850bd050476d4a8b82aa891e8da4df16f5d80077?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7be732e155eac6e2fb51f509850bd050476d4a8b82aa891e8da4df16f5d80077?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/hirereactnativedeveloper.com\/blog"],"url":"https:\/\/hirereactnativedeveloper.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/hirereactnativedeveloper.com\/blog\/wp-json\/wp\/v2\/posts\/5423","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hirereactnativedeveloper.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hirereactnativedeveloper.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hirereactnativedeveloper.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hirereactnativedeveloper.com\/blog\/wp-json\/wp\/v2\/comments?post=5423"}],"version-history":[{"count":1,"href":"https:\/\/hirereactnativedeveloper.com\/blog\/wp-json\/wp\/v2\/posts\/5423\/revisions"}],"predecessor-version":[{"id":5424,"href":"https:\/\/hirereactnativedeveloper.com\/blog\/wp-json\/wp\/v2\/posts\/5423\/revisions\/5424"}],"wp:attachment":[{"href":"https:\/\/hirereactnativedeveloper.com\/blog\/wp-json\/wp\/v2\/media?parent=5423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hirereactnativedeveloper.com\/blog\/wp-json\/wp\/v2\/categories?post=5423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hirereactnativedeveloper.com\/blog\/wp-json\/wp\/v2\/tags?post=5423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}