{"id":725,"date":"2021-07-21T09:02:00","date_gmt":"2021-07-21T09:02:00","guid":{"rendered":"https:\/\/devtrust.biz\/resources\/?p=725"},"modified":"2025-07-17T08:39:16","modified_gmt":"2025-07-17T08:39:16","slug":"react-fundamentals","status":"publish","type":"post","link":"https:\/\/devtrust.biz\/resources\/blog\/react-fundamentals\/","title":{"rendered":"React Fundamentals"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">React Fundamentals<\/h2>\n\n\n\n<p>React Native is built on top of React, a popular JavaScript library for building user interfaces. React Native can be most effectively used by understanding React.<\/p>\n\n\n\n<p>React consists of three core concepts: components, JSX, and the property state. If you want to learn more, see React\u2019s official documentation.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>This is your First Component<\/strong><\/h2>\n\n\n\n<p>To illustrate this principle, we will use \u2018Pet\u2019 as an example: friendly, approachable animals that need a name and a home. Here\u2019s your first \u2018Pet\u2019 component:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from \u2018react\u2019;\nimport { Text } from \u2018react-native;\nconst Pet = () =&gt; {\nreturn (\n&lt;Text&gt;Hello, I am your pet!&lt;\/Text&gt;\n);\n}\nexport default Pet;\n\nOutput: Hello, I am your pet!\n\nUsing JavaScript\u2019s import function, import the Text Core Component from React and React Native to define your Pet component:\n\nimport React from \u2018react\u2019;\nimport { Text } from \u2018react-native\u2019;\n\nInitially, your component will be a function:\n\nconst Pet = () =&gt; {};\n\nComponents are like blueprints. The function component\u2019s output is rendered as a React element. Using React elements, you can specify what you want to display on the screen.\n\nIn this case, the Pet component will display a &lt;Text&gt; element:\n\nconst Pet = () =&gt; {\nreturn &lt;Text&gt;Hello, I am your pet!&lt;\/Text&gt;;\n};\n\nJavaScript\u2019s export default allows you to export your function component for use throughout your entire app, like this:\n\nconst Pet = () =&gt; {\nreturn &lt;Text&gt;Hello, I am your pet!&lt;\/Text&gt;;\n};\nexport default Pet;<\/code><\/pre>\n\n\n\n<p>Exporting your component in this way is just one of many options.<\/p>\n\n\n\n<p>Let\u2019s look closely at that return statement.&nbsp;<em>&lt;Text&gt;Hello, I am your pet!<\/em>&nbsp;is using JSX, a JavaScript syntax that facilitates writing elements.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>JSX<\/strong><\/h2>\n\n\n\n<p>React and React Native use an element syntax known as JSX, which lets you write texts within JavaScript like this:&nbsp;<em>&lt;Text&gt;Hello, I\u2019m your pet!&lt;\/Text&gt;<\/em>. The JSX syntax allows you to use variables since it is JavaScript. You are declaring a name for the pet, name, and embedding it inside of the curly braces of&nbsp;<em>&lt;Text&gt;<\/em>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Curly Braces<\/strong><br><\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>Example:\n\nimport React from \u2018react\u2019;\nimport { Text } from \u2018react-native\u2019;\nconst Pet = () =&gt; {\nconst name = \u201cAndrew\u201d;\nreturn (\n&lt;Text&gt;Hello, I am {name}!&lt;\/Text&gt;\n);\n}\nexport default Pet;\n\nOutput: Hello, I am Andrew!\n\n \n\nimport React from \u2018react\u2019;\nimport { Text } from \u2018react-native\u2019;\nconst getFullName = (firstName, secondName, thirdName) =&gt; {\nreturn firstName + \u201d \u201d + secondName + \u201d \u201d + thirdName;\n}\nconst Pet = () =&gt; {\nreturn (\n&lt;Text&gt; Hello, I am {getFullName(\u201cAndrew\u201d, \u201cMichel\u201d, \u201cWatson\u201d)} &lt;\/Text&gt;\n);\n}\nexport default Pet;\n\nOutput: Hello, I am Andrew Michel Watson!<\/code><\/pre>\n\n\n\n<p><em>Curly braces<\/em>&nbsp;function as a portal to JS functionality in your JSX!<br>React includes JSX, so if you don\u2019t import React from \u2018react\u2019 at the top of your file, it won\u2019t work!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Custom Components<\/strong><\/h2>\n\n\n\n<p>You can nest these components inside each other in React to create new components. Nestable, reusable components are at the heart of the React paradigm.<\/p>\n\n\n\n<p>For example, you can mix Text and TextInput together, and React Native will render them together:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from \u2018react\u2019;\nimport { Text, TextInput, View } from \u2018react-native\u2019;\nconst Pet = () =&gt; {\nreturn (\n&lt;View&gt;\n&lt;Text&gt;Hello\u2026&lt;\/Text&gt;\n&lt;TextInput\nstyle={{\nheight: 40,\nborderColor: \u2018gray\u2019,\nborderWidth: 1\n}}\ndefaultValue=\u201d Hi there!\u201d\/&gt;\n&lt;\/View&gt;\n);\n}\nexport default Pet;\n\nOutput: Hello\u2026\nHi there!<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Props<\/strong><\/h2>\n\n\n\n<p>Props, short for \u201cproperties,\u201d let you customize React components.<br>Props can also be used to customize React Native\u2019s Core Components. The following is an example of how you specify the image to be displayed when using Image:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from \u2018react\u2019;\nimport { Text, View, Image } from \u2018react-native\u2019;\nConst PetApp = () =&gt; {\nreturn (\n&lt;View&gt;\n&lt;Image\nsource={{uri: \u201chttps:\/\/reactnative.sample\/docs\/assets\/d_pet.png\u201d}}\nstyle={{width: 200, height: 200}}\n\/&gt;\n&lt;Text&gt;Hello, I am your pet!&lt;\/Text&gt;\n&lt;\/View&gt;\n);\n}\nexport default PetApp;\n\nOutput: (Image rendered)\nHello, I am your pet!<\/code><\/pre>\n\n\n\n<p><em>Props<\/em>&nbsp;and the Core Components Text, Image, and View allow you to build many things! However, if you want to build something interactive, you\u2019ll need state.<\/p>\n\n\n\n<p>A component should generally be configured through props when it renders. If you expect component data to change over time, keep track of it using state.<\/p>\n\n\n\n<p>React\u2019s use state hook allows you to add state to a component. Hooks let you access the features of React. For instance, useState adds state to functions.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React, { useState } from \u201creact\u201d;\nimport { Button, Text, View } from \u201creact-native\u201d;\nconst Cat = (props) =&gt; {\nconst &#91;isHungry, setIsHungry] = useState(true);\nreturn (\n&lt;View&gt;\n&lt;Text&gt;\nI am {props.name}, and I am {isHungry ? \u201chungry\u201d : \u201cfull\u201d}!\n&lt;\/Text&gt;\n&lt;Button\nonPress={() =&gt; {\nsetIsHungry(false);\n}}\ndisabled={!isHungry}\ntitle={isHungry ? \u201cPour me some milk, please!\u201d : \u201cThank you!\u201d}\n\/&gt;\n&lt;\/View&gt;\n);\n}\nconst Cafe = () =&gt; {\nreturn (\n&lt;&gt;\n&lt;Cat name=\u201dZeeva\u201d \/&gt;\n&lt;Cat name=\u201dZoe\u201d \/&gt;\n&lt;\/&gt;\n);\n}\nexport default Cafe;\n\nOutput: I am Zeeva, and I am hungry!\nPOUR ME SOME MILK, PLEASE!\nI am Zoe, and I am hungry!\nPOUR ME SOME MILK, PLEASE!<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>React Fundamentals React Native is built on top of React, a popular JavaScript library for building user interfaces. React Native can be most effectively used by understanding React. React consists of three core concepts: components, JSX, and the property state. If you want to learn more, see React\u2019s official documentation. This is your First Component [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":726,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-725","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-custom-software-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>React Fundamentals \u2013 DEVtrust Development Training<\/title>\n<meta name=\"description\" content=\"Cover React fundamentals with DEVtrust: JSX, props, state, hooks, and component lifecycles for building robust interfaces.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/devtrust.biz\/resources\/blog\/react-fundamentals\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Fundamentals \u2013 DEVtrust Development Training\" \/>\n<meta property=\"og:description\" content=\"Cover React fundamentals with DEVtrust: JSX, props, state, hooks, and component lifecycles for building robust interfaces.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devtrust.biz\/resources\/blog\/react-fundamentals\/\" \/>\n<meta property=\"og:site_name\" content=\"DEVtrust | Custom Software &amp; IT Solutions for Businesses in USA &amp; Worldwide \u2013 AI\/ML\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DEVtrustllc\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-21T09:02:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-17T08:39:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/devtrust.biz\/resources\/wp-content\/uploads\/2025\/07\/React-Fundamentals11.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"550\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DEVtrust\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@devtrustinc\" \/>\n<meta name=\"twitter:site\" content=\"@devtrustinc\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DEVtrust\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/react-fundamentals\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/react-fundamentals\\\/\"},\"author\":{\"name\":\"DEVtrust\",\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/#\\\/schema\\\/person\\\/27b2cf2d868a3335414f04cc5ee9fc8c\"},\"headline\":\"React Fundamentals\",\"datePublished\":\"2021-07-21T09:02:00+00:00\",\"dateModified\":\"2025-07-17T08:39:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/react-fundamentals\\\/\"},\"wordCount\":393,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/react-fundamentals\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/React-Fundamentals11.jpg\",\"articleSection\":[\"Custom Software Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/react-fundamentals\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/react-fundamentals\\\/\",\"url\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/react-fundamentals\\\/\",\"name\":\"React Fundamentals \u2013 DEVtrust Development Training\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/react-fundamentals\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/react-fundamentals\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/React-Fundamentals11.jpg\",\"datePublished\":\"2021-07-21T09:02:00+00:00\",\"dateModified\":\"2025-07-17T08:39:16+00:00\",\"description\":\"Cover React fundamentals with DEVtrust: JSX, props, state, hooks, and component lifecycles for building robust interfaces.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/react-fundamentals\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/react-fundamentals\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/react-fundamentals\\\/#primaryimage\",\"url\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/React-Fundamentals11.jpg\",\"contentUrl\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/React-Fundamentals11.jpg\",\"width\":900,\"height\":550},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/react-fundamentals\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Fundamentals\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/#website\",\"url\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/\",\"name\":\"DEVtrust | Custom Software & IT Solutions for Businesses in USA & Worldwide \u2013 AI, ML\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/#organization\",\"name\":\"DEVtrust\",\"url\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/devtrust-logo.svg\",\"contentUrl\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/devtrust-logo.svg\",\"width\":214,\"height\":50,\"caption\":\"DEVtrust\"},\"image\":{\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/DEVtrustllc\\\/\",\"https:\\\/\\\/x.com\\\/devtrustinc\",\"https:\\\/\\\/www.instagram.com\\\/devtrustllc\\\/\",\"https:\\\/\\\/in.linkedin.com\\\/company\\\/devtrust\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/#\\\/schema\\\/person\\\/27b2cf2d868a3335414f04cc5ee9fc8c\",\"name\":\"DEVtrust\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f40109a7d2fad36d63865cc7b740b86e169c69a6aa94ea036b4623d3c8501314?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f40109a7d2fad36d63865cc7b740b86e169c69a6aa94ea036b4623d3c8501314?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f40109a7d2fad36d63865cc7b740b86e169c69a6aa94ea036b4623d3c8501314?s=96&d=mm&r=g\",\"caption\":\"DEVtrust\"},\"sameAs\":[\"https:\\\/\\\/devtrustwp.devtrust.tech\"],\"url\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/author\\\/devtrust-admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Fundamentals \u2013 DEVtrust Development Training","description":"Cover React fundamentals with DEVtrust: JSX, props, state, hooks, and component lifecycles for building robust interfaces.","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:\/\/devtrust.biz\/resources\/blog\/react-fundamentals\/","og_locale":"en_US","og_type":"article","og_title":"React Fundamentals \u2013 DEVtrust Development Training","og_description":"Cover React fundamentals with DEVtrust: JSX, props, state, hooks, and component lifecycles for building robust interfaces.","og_url":"https:\/\/devtrust.biz\/resources\/blog\/react-fundamentals\/","og_site_name":"DEVtrust | Custom Software &amp; IT Solutions for Businesses in USA &amp; Worldwide \u2013 AI\/ML","article_publisher":"https:\/\/www.facebook.com\/DEVtrustllc\/","article_published_time":"2021-07-21T09:02:00+00:00","article_modified_time":"2025-07-17T08:39:16+00:00","og_image":[{"width":900,"height":550,"url":"https:\/\/devtrust.biz\/resources\/wp-content\/uploads\/2025\/07\/React-Fundamentals11.jpg","type":"image\/jpeg"}],"author":"DEVtrust","twitter_card":"summary_large_image","twitter_creator":"@devtrustinc","twitter_site":"@devtrustinc","twitter_misc":{"Written by":"DEVtrust","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/devtrust.biz\/resources\/blog\/react-fundamentals\/#article","isPartOf":{"@id":"https:\/\/devtrust.biz\/resources\/blog\/react-fundamentals\/"},"author":{"name":"DEVtrust","@id":"https:\/\/devtrust.biz\/resources\/#\/schema\/person\/27b2cf2d868a3335414f04cc5ee9fc8c"},"headline":"React Fundamentals","datePublished":"2021-07-21T09:02:00+00:00","dateModified":"2025-07-17T08:39:16+00:00","mainEntityOfPage":{"@id":"https:\/\/devtrust.biz\/resources\/blog\/react-fundamentals\/"},"wordCount":393,"commentCount":0,"publisher":{"@id":"https:\/\/devtrust.biz\/resources\/#organization"},"image":{"@id":"https:\/\/devtrust.biz\/resources\/blog\/react-fundamentals\/#primaryimage"},"thumbnailUrl":"https:\/\/devtrust.biz\/resources\/wp-content\/uploads\/2025\/07\/React-Fundamentals11.jpg","articleSection":["Custom Software Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/devtrust.biz\/resources\/blog\/react-fundamentals\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/devtrust.biz\/resources\/blog\/react-fundamentals\/","url":"https:\/\/devtrust.biz\/resources\/blog\/react-fundamentals\/","name":"React Fundamentals \u2013 DEVtrust Development Training","isPartOf":{"@id":"https:\/\/devtrust.biz\/resources\/#website"},"primaryImageOfPage":{"@id":"https:\/\/devtrust.biz\/resources\/blog\/react-fundamentals\/#primaryimage"},"image":{"@id":"https:\/\/devtrust.biz\/resources\/blog\/react-fundamentals\/#primaryimage"},"thumbnailUrl":"https:\/\/devtrust.biz\/resources\/wp-content\/uploads\/2025\/07\/React-Fundamentals11.jpg","datePublished":"2021-07-21T09:02:00+00:00","dateModified":"2025-07-17T08:39:16+00:00","description":"Cover React fundamentals with DEVtrust: JSX, props, state, hooks, and component lifecycles for building robust interfaces.","breadcrumb":{"@id":"https:\/\/devtrust.biz\/resources\/blog\/react-fundamentals\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devtrust.biz\/resources\/blog\/react-fundamentals\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/devtrust.biz\/resources\/blog\/react-fundamentals\/#primaryimage","url":"https:\/\/devtrust.biz\/resources\/wp-content\/uploads\/2025\/07\/React-Fundamentals11.jpg","contentUrl":"https:\/\/devtrust.biz\/resources\/wp-content\/uploads\/2025\/07\/React-Fundamentals11.jpg","width":900,"height":550},{"@type":"BreadcrumbList","@id":"https:\/\/devtrust.biz\/resources\/blog\/react-fundamentals\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/devtrust.biz\/resources\/"},{"@type":"ListItem","position":2,"name":"React Fundamentals"}]},{"@type":"WebSite","@id":"https:\/\/devtrust.biz\/resources\/#website","url":"https:\/\/devtrust.biz\/resources\/","name":"DEVtrust | Custom Software & IT Solutions for Businesses in USA & Worldwide \u2013 AI, ML","description":"","publisher":{"@id":"https:\/\/devtrust.biz\/resources\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/devtrust.biz\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/devtrust.biz\/resources\/#organization","name":"DEVtrust","url":"https:\/\/devtrust.biz\/resources\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/devtrust.biz\/resources\/#\/schema\/logo\/image\/","url":"https:\/\/devtrust.biz\/resources\/wp-content\/uploads\/2025\/07\/devtrust-logo.svg","contentUrl":"https:\/\/devtrust.biz\/resources\/wp-content\/uploads\/2025\/07\/devtrust-logo.svg","width":214,"height":50,"caption":"DEVtrust"},"image":{"@id":"https:\/\/devtrust.biz\/resources\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DEVtrustllc\/","https:\/\/x.com\/devtrustinc","https:\/\/www.instagram.com\/devtrustllc\/","https:\/\/in.linkedin.com\/company\/devtrust"]},{"@type":"Person","@id":"https:\/\/devtrust.biz\/resources\/#\/schema\/person\/27b2cf2d868a3335414f04cc5ee9fc8c","name":"DEVtrust","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/f40109a7d2fad36d63865cc7b740b86e169c69a6aa94ea036b4623d3c8501314?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f40109a7d2fad36d63865cc7b740b86e169c69a6aa94ea036b4623d3c8501314?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f40109a7d2fad36d63865cc7b740b86e169c69a6aa94ea036b4623d3c8501314?s=96&d=mm&r=g","caption":"DEVtrust"},"sameAs":["https:\/\/devtrustwp.devtrust.tech"],"url":"https:\/\/devtrust.biz\/resources\/blog\/author\/devtrust-admin\/"}]}},"feature_img_url":"https:\/\/devtrust.biz\/resources\/wp-content\/uploads\/2025\/07\/React-Fundamentals11.jpg","_links":{"self":[{"href":"https:\/\/devtrust.biz\/resources\/wp-json\/wp\/v2\/posts\/725","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devtrust.biz\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devtrust.biz\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devtrust.biz\/resources\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devtrust.biz\/resources\/wp-json\/wp\/v2\/comments?post=725"}],"version-history":[{"count":3,"href":"https:\/\/devtrust.biz\/resources\/wp-json\/wp\/v2\/posts\/725\/revisions"}],"predecessor-version":[{"id":1089,"href":"https:\/\/devtrust.biz\/resources\/wp-json\/wp\/v2\/posts\/725\/revisions\/1089"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devtrust.biz\/resources\/wp-json\/wp\/v2\/media\/726"}],"wp:attachment":[{"href":"https:\/\/devtrust.biz\/resources\/wp-json\/wp\/v2\/media?parent=725"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devtrust.biz\/resources\/wp-json\/wp\/v2\/categories?post=725"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devtrust.biz\/resources\/wp-json\/wp\/v2\/tags?post=725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}