{"id":721,"date":"2021-08-05T08:52:00","date_gmt":"2021-08-05T08:52:00","guid":{"rendered":"https:\/\/devtrust.biz\/resources\/?p=721"},"modified":"2025-07-17T08:39:10","modified_gmt":"2025-07-17T08:39:10","slug":"the-react-way-of-thinking","status":"publish","type":"post","link":"https:\/\/devtrust.biz\/resources\/blog\/the-react-way-of-thinking\/","title":{"rendered":"The React way of thinking"},"content":{"rendered":"\n
The React way of thinking<\/h2>\n\n\n\n
We believe that React is the foremost tool for building fast, big web applications. Our Facebook and Instagram pages have benefited greatly from it.<\/p>\n\n\n\n
When building an app with React, you have to think of the app as a whole. We will cover the steps involved in building a searchable product data table using React in this document.<\/p>\n\n\n\n
Start With A Mock<\/strong><\/h2>\n\n\n\n
Assume we already have a JSON API and a mock from our designer. An example of a mockup is this:<\/p>\n\n\n\n
Mockup<\/strong><\/h2>\n\n\n\n
Our JSON API returns the following data:<\/p>\n\n\n\n
Step 1: Structuring The UI Through Component Hierarchies<\/strong><\/h2>\n\n\n\n
The first thing you\u2019ll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you\u2019re working with a designer, they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components!<\/p>\n\n\n\n
But how do you know what should be its own component? Use the same techniques for deciding if you should create a new function or object. One such technique is the single responsibility principle, that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents.<\/p>\n\n\n\n
Since you\u2019re often displaying a JSON data model to a user, you\u2019ll find that if your model was built correctly, your UI (and therefore your component structure) will map nicely. That\u2019s because UI and data models tend to adhere to the same information architecture. Separate your UI into components, where each component matches one piece of your data model.<\/p>\n\n\n\n
Component diagram<\/strong><\/h2>\n\n\n\n
Our app has five components, as you can see here. Each component\u2019s data has been italicized.<\/p>\n\n\n\n
FilterableProductTable (orange): contains the entirety of the example<\/p>\n\n\n\n
SearchBar (blue): receives all user input<\/p>\n\n\n\n
ProductTable (green): displays and filters the data collection based on user input<\/p>\n\n\n\n
ProductCategoryRow (turquoise): displays a heading for each category<\/p>\n\n\n\n
ProductRow (red): displays a row for each product<\/p>\n\n\n\n
If you look at ProductTable, you\u2019ll see that the table header (containing the \u201cName\u201d and \u201cPrice\u201d labels) isn\u2019t its own component. This is a matter of preference, and there\u2019s an argument to be made either way. For this example, we left it as part of ProductTable because it is part of rendering the data collection which is Product Tables responsibility. However, if this header grows to be complex (e.g., if we were to add affordances for sorting), it would certainly make sense to make this its own ProductTableHeader component.<\/p>\n\n\n\n
Now that we\u2019ve identified the components in our mock, let\u2019s arrange them into a hierarchy. Components that appear within another component in the mock should appear as a child in the hierarchy:<\/p>\n\n\n\n
\n
FilterableProductTable<\/em><\/p>\n\n\n\n
SearchBar<\/em><\/p>\n\n\n\n
ProductTable<\/em><\/p>\n\n\n\n
ProductCategoryRow<\/em><\/p>\n\n\n\n
ProductRow<\/em><\/p>\n<\/blockquote>\n\n\n\n
Step 2: Create a static variant in React<\/strong><\/h2>\n\n\n\n
Your component hierarchy is now ready for implementation. To build a version that renders your data model but does not have interactivity, you can build a version that takes your data model and renders the UI. Adding interactivity requires a lot of thinking while creating a static version requires a lot of typing. Let\u2019s find out why.<\/p>\n\n\n\n
You will want to create components that reuse other components and pass data via props to build a static app that renders your data model. Props are a means of passing data between children and parents. You shouldn\u2019t use the state to build this static version if you\u2019re familiar with the concept of state. Data that changes over time is considered state and is reserved for interactive data. You do not need this version of the app since it is static.<\/p>\n\n\n\n
It is possible to build top-down or bottom-up. You can either start with the components higher in the hierarchical structure (such as FilterableProductTable, for instance) or lower in the hierarchy (ProductRow). If your project is simpler, you can go top-down; if it is more complex, you will need to build bottom-up and test as you go.<\/p>\n\n\n\n
Your data model will be rendered using reusable components after this step. As this is a static version of the app, all of the components will have render() methods. Data models are props for the topmost component (FilterableProductTable). In this situation, the UI will be updated if you call ReactDOM.render() again after changing your underlying data model. This enables you to see where to make changes to your UI. One-way data flow (also known as one-way binding) keeps everything modular and fast in React.<\/p>\n\n\n\n
Putting Props vs. State into Context<\/strong> <\/h2>\n\n\n\n
React has two types of \u201cmodel\u201d data: props and state. As part of React, props are variables that are passed to the component from its parent component. The state, on the other hand, is a variable, but it is directly initialized and managed by the component. Initializing the state can be done via props.<\/p>\n\n\n\n
Step 3: Find a minimal (but complete) representation of UI state<\/strong><\/h2>\n\n\n\n
It\u2019s crucial that you can trigger changes to your underlying data model so that your UI can be interactive. The state allows React to achieve this.<\/p>\n\n\n\n
First, you need to figure out what minimal set of mutable state your app requires. In this case, the key is DRY: Don\u2019t Repeat Yourself. Calculate everything else you need based on the state your application needs, and then find the minimum representation of that state you need. As an example, if you\u2019re building a task list, you should keep an array of all the items; do not store a separate variable for the number of items. You should instead take the length of the task items array when rendering the task count.<\/p>\n\n\n\n
Just imagine all the information that our example application has to offer. What we have is:<\/p>\n\n\n\n
A list of the original products<\/p>\n\n\n\n
User-inputted search text<\/p>\n\n\n\n
Checkbox value<\/p>\n\n\n\n
Products sorted by the filter<\/p>\n\n\n\n
As we go through each, let\u2019s identify which is the state. Consider the following three questions for each piece of data:<\/p>\n\n\n\n
Are props passed in from a parent? Then it is probably not a state.<\/p>\n\n\n\n
Is it unchanged over time? Then it is probably not a state.<\/p>\n\n\n\n
Is it possible to compute it based on any other state or prop in your component? Therefore, it does not fall under the state umbrella.<\/p>\n\n\n\n
Originally, a list of products is passed in as a prop, so that is not a state. There are no algorithms that can compute the search text and the checkbox as they change over time. Last but not least, the filtered list of products doesn\u2019t constitute a state because it is simply the result of combining the original list of products with the search text and value of the checkbox.<\/p>\n\n\n\n
So finally, our state is:<\/p>\n\n\n\n
The search text the user has entered<\/p>\n\n\n\n
The value of the checkbox<\/p>\n\n\n\n<\/figure>\n\n\n\n
Step 4: Decide where your state should reside<\/strong><\/h2>\n\n\n\n
OK, so we\u2019ve identified what the minimal set of app state is. Next, we need to identify which component mutates, or owns, this state.<\/p>\n\n\n\n
React is all about one-way data flow down the hierarchy of components. Identifying which component owns which state may not be obvious at first. The most challenging part of this is often figuring this out, so know these steps:<\/p>\n\n\n\n
As you develop your application, keep the following state in mind:<\/p>\n\n\n\n
Determine which components render something based on that state.<\/p>\n\n\n\n
In your hierarchy, find the component with the most common owner (the component one component above the others).<\/p>\n\n\n\n
Ownership of the state should either be assigned to the common owner or to another higher component.<\/p>\n\n\n\n
When a component doesn\u2019t make sense to own the state, you can create a new component that holds the state exclusively and add it somewhere in the hierarchy above the common owner component.<\/p>\n\n\n\n
The following strategy will help us with our application:<\/p>\n\n\n\n
ProductsTable should filter product lists according to their states and SearchBar should display the search text and the checked status.<\/p>\n\n\n\n
FilterableProductTable is the common component owner.<\/p>\n\n\n\n
The filter text and checked value should reside in FilterableProductTable conceptually.<\/p>\n\n\n\n
We have decided to put state within our FilterableProductTable. Add the following property to the instance: this.state = {filterText: \u201d, inStockOnly: false} in the constructor of FilterableProductTable to reflect the initial state of the application. After that, pass filterText and inStockOnly as parameters to ProductTable and SearchBar. Additionally, set the values of the form fields in SearchBar using the props for ProductTable and SearchBar.<\/p>\n\n\n\n
Setting filterText to \u201cball\u201d will give you a preview of how your application will behave. Upon opening the data table, you will see that the update has been made correctly.<\/p>\n\n\n\n
Step 5: Create a reverse data flow<\/strong><\/h2>\n\n\n\n
Currently, we have built a renderer that works when props and state flow down the hierarchy. Likewise, data must flow the other way: deep in the hierarchy, the form components have to know how to update the FilterableProductTable.<\/p>\n\n\n\n
Data flow in React is explicit to help you understand how your program works, but it does require a bit more typing than traditional two-way data binding.<\/p>\n\n\n\n
You will see that React ignores your input if you attempt to type or check the box in the current version of the example. Keeping the value prop of the input constant, we have set the value prop to reflect the state passed in from FilterableProductTable.<\/p>\n\n\n\n
Here are a few things we should consider. Our goal is to update the form state every time the user makes a change. In order to ensure that each component updates its own state independently, FilterableProductTable passed callbacks to SearchBar that fire whenever the state change occurred. By using the onChange event on the inputs, we can be notified of the change. Upon receiving calls from FilterableProductTable, the app will update its state using setState().<\/p>\n\n\n\n
This concludes the idea<\/strong><\/h2>\n\n\n\n
This should give you an idea of how to think about building components and applications with React. This may seem like an extra step, but remember that code is read much more than it\u2019s written, and it\u2019s easier to read this modular, explicit code. With this explicitness and modularity developing within your components library, your lines of code will get smaller and smaller as you start to develop large libraries of components.<\/p>\n","protected":false},"excerpt":{"rendered":"
The React way of thinking We believe that React is the foremost tool for building fast, big web applications. Our Facebook and Instagram pages have benefited greatly from it. When building an app with React, you have to think of the app as a whole. We will cover the steps involved in building a searchable […]<\/p>\n","protected":false},"author":1,"featured_media":722,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-721","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-custom-software-development"],"acf":[],"yoast_head":"\n
The React Way of Thinking \u2013 DEVtrust Guide<\/title>\n<meta name=\"description\" content=\"Master React mindset with DEVtrust: component-based architecture, state management, reusable UI, and modern web best practices.\" \/>\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\/the-react-way-of-thinking\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The React Way of Thinking \u2013 DEVtrust Guide\" \/>\n<meta property=\"og:description\" content=\"Master React mindset with DEVtrust: component-based architecture, state management, reusable UI, and modern web best practices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devtrust.biz\/resources\/blog\/the-react-way-of-thinking\/\" \/>\n<meta property=\"og:site_name\" content=\"DEVtrust | Custom Software & IT Solutions for Businesses in USA & Worldwide \u2013 AI\/ML\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DEVtrustllc\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-05T08:52:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-17T08:39:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/devtrust.biz\/resources\/wp-content\/uploads\/2025\/07\/Thinking-in-React2.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=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/the-react-way-of-thinking\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/the-react-way-of-thinking\\\/\"},\"author\":{\"name\":\"DEVtrust\",\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/#\\\/schema\\\/person\\\/27b2cf2d868a3335414f04cc5ee9fc8c\"},\"headline\":\"The React way of thinking\",\"datePublished\":\"2021-08-05T08:52:00+00:00\",\"dateModified\":\"2025-07-17T08:39:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/the-react-way-of-thinking\\\/\"},\"wordCount\":1718,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/the-react-way-of-thinking\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/Thinking-in-React2.jpg\",\"articleSection\":[\"Custom Software Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/the-react-way-of-thinking\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/the-react-way-of-thinking\\\/\",\"url\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/the-react-way-of-thinking\\\/\",\"name\":\"The React Way of Thinking \u2013 DEVtrust Guide\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/the-react-way-of-thinking\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/the-react-way-of-thinking\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/Thinking-in-React2.jpg\",\"datePublished\":\"2021-08-05T08:52:00+00:00\",\"dateModified\":\"2025-07-17T08:39:10+00:00\",\"description\":\"Master React mindset with DEVtrust: component-based architecture, state management, reusable UI, and modern web best practices.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/the-react-way-of-thinking\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/the-react-way-of-thinking\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/the-react-way-of-thinking\\\/#primaryimage\",\"url\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/Thinking-in-React2.jpg\",\"contentUrl\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/Thinking-in-React2.jpg\",\"width\":900,\"height\":550},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/blog\\\/the-react-way-of-thinking\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/devtrust.biz\\\/resources\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The React way of thinking\"}]},{\"@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":"The React Way of Thinking \u2013 DEVtrust Guide","description":"Master React mindset with DEVtrust: component-based architecture, state management, reusable UI, and modern web best practices.","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\/the-react-way-of-thinking\/","og_locale":"en_US","og_type":"article","og_title":"The React Way of Thinking \u2013 DEVtrust Guide","og_description":"Master React mindset with DEVtrust: component-based architecture, state management, reusable UI, and modern web best practices.","og_url":"https:\/\/devtrust.biz\/resources\/blog\/the-react-way-of-thinking\/","og_site_name":"DEVtrust | Custom Software & IT Solutions for Businesses in USA & Worldwide \u2013 AI\/ML","article_publisher":"https:\/\/www.facebook.com\/DEVtrustllc\/","article_published_time":"2021-08-05T08:52:00+00:00","article_modified_time":"2025-07-17T08:39:10+00:00","og_image":[{"width":900,"height":550,"url":"https:\/\/devtrust.biz\/resources\/wp-content\/uploads\/2025\/07\/Thinking-in-React2.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":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/devtrust.biz\/resources\/blog\/the-react-way-of-thinking\/#article","isPartOf":{"@id":"https:\/\/devtrust.biz\/resources\/blog\/the-react-way-of-thinking\/"},"author":{"name":"DEVtrust","@id":"https:\/\/devtrust.biz\/resources\/#\/schema\/person\/27b2cf2d868a3335414f04cc5ee9fc8c"},"headline":"The React way of thinking","datePublished":"2021-08-05T08:52:00+00:00","dateModified":"2025-07-17T08:39:10+00:00","mainEntityOfPage":{"@id":"https:\/\/devtrust.biz\/resources\/blog\/the-react-way-of-thinking\/"},"wordCount":1718,"commentCount":0,"publisher":{"@id":"https:\/\/devtrust.biz\/resources\/#organization"},"image":{"@id":"https:\/\/devtrust.biz\/resources\/blog\/the-react-way-of-thinking\/#primaryimage"},"thumbnailUrl":"https:\/\/devtrust.biz\/resources\/wp-content\/uploads\/2025\/07\/Thinking-in-React2.jpg","articleSection":["Custom Software Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/devtrust.biz\/resources\/blog\/the-react-way-of-thinking\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/devtrust.biz\/resources\/blog\/the-react-way-of-thinking\/","url":"https:\/\/devtrust.biz\/resources\/blog\/the-react-way-of-thinking\/","name":"The React Way of Thinking \u2013 DEVtrust Guide","isPartOf":{"@id":"https:\/\/devtrust.biz\/resources\/#website"},"primaryImageOfPage":{"@id":"https:\/\/devtrust.biz\/resources\/blog\/the-react-way-of-thinking\/#primaryimage"},"image":{"@id":"https:\/\/devtrust.biz\/resources\/blog\/the-react-way-of-thinking\/#primaryimage"},"thumbnailUrl":"https:\/\/devtrust.biz\/resources\/wp-content\/uploads\/2025\/07\/Thinking-in-React2.jpg","datePublished":"2021-08-05T08:52:00+00:00","dateModified":"2025-07-17T08:39:10+00:00","description":"Master React mindset with DEVtrust: component-based architecture, state management, reusable UI, and modern web best practices.","breadcrumb":{"@id":"https:\/\/devtrust.biz\/resources\/blog\/the-react-way-of-thinking\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devtrust.biz\/resources\/blog\/the-react-way-of-thinking\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/devtrust.biz\/resources\/blog\/the-react-way-of-thinking\/#primaryimage","url":"https:\/\/devtrust.biz\/resources\/wp-content\/uploads\/2025\/07\/Thinking-in-React2.jpg","contentUrl":"https:\/\/devtrust.biz\/resources\/wp-content\/uploads\/2025\/07\/Thinking-in-React2.jpg","width":900,"height":550},{"@type":"BreadcrumbList","@id":"https:\/\/devtrust.biz\/resources\/blog\/the-react-way-of-thinking\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/devtrust.biz\/resources\/"},{"@type":"ListItem","position":2,"name":"The React way of thinking"}]},{"@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\/Thinking-in-React2.jpg","_links":{"self":[{"href":"https:\/\/devtrust.biz\/resources\/wp-json\/wp\/v2\/posts\/721","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=721"}],"version-history":[{"count":3,"href":"https:\/\/devtrust.biz\/resources\/wp-json\/wp\/v2\/posts\/721\/revisions"}],"predecessor-version":[{"id":1088,"href":"https:\/\/devtrust.biz\/resources\/wp-json\/wp\/v2\/posts\/721\/revisions\/1088"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devtrust.biz\/resources\/wp-json\/wp\/v2\/media\/722"}],"wp:attachment":[{"href":"https:\/\/devtrust.biz\/resources\/wp-json\/wp\/v2\/media?parent=721"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devtrust.biz\/resources\/wp-json\/wp\/v2\/categories?post=721"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devtrust.biz\/resources\/wp-json\/wp\/v2\/tags?post=721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/devtrust.biz\/resources\/wp-content\/uploads\/2025\/07\/Thinking-in-React-1.jpg\")
<\/figure>\n\n\n\n