{"id":3662860,"date":"2024-07-24T08:00:14","date_gmt":"2024-07-24T12:00:14","guid":{"rendered":"https:\/\/spin.atomicobject.com\/?p=3662860"},"modified":"2024-07-23T15:37:08","modified_gmt":"2024-07-23T19:37:08","slug":"angular-vs-react","status":"publish","type":"post","link":"https:\/\/spin.atomicobject.com\/angular-vs-react\/","title":{"rendered":"Angular vs. React: Learning React as an Angular Developer"},"content":{"rendered":"

For the past two years, I\u2019ve been chugging along in the Angular world<\/a>. I\u2019ve become very familiar with Angular concepts, best practices, and how to resolve the infamous circular dependencies error. But as things go at Atomic, I had the opportunity to switch projects and be thrust into an entirely different tech stack. Here, I talk about my journey learning React, the main differences between Angular and React, and some helpful tips to learn React<\/a> when you\u2019ve primarily been working with Angular.<\/p>\n

Angular vs. React<\/h2>\n

One of the main differences between Angular and React is that Angular is a full model-view framework, while React is a JavaScript library that just focuses on the view layer. Frameworks come packaged with everything you need to create a full-fledged application. When using React, you must import other libraries to accomplish data fetching, routing, and state management.<\/p>\n

You can think of a framework as being a full-service restaurant and libraries as grocery stores. When going to a restaurant, you are given a menu (well-defined structure), and the staff (built-in tools and services) guide and serve you throughout the meal. The restaurant has a specific way of doing things, from seating you at a table, taking your order, cooking your food according to their recipes, and serving it to you.<\/p>\n

Now, consider going to a grocery store. Here, you’re free to choose any ingredients you like and cook your meal at home. You can experiment with different recipes (customization), and you have complete control over every step of the process. However, you’re also responsible for knowing how to use these ingredients and cook the meal.<\/p>\n

Components<\/h2>\n

React only has components. There are no directives, pipes, or modules like there are in Angular. As a result, this means less boilerplate. React components can be class-based or functional. Function components with the use of hooks are the preferred approach.<\/p>\n

import React from 'react';\n\nconst HelloWorld = () => {\n    return (\n      <div>\n        <h1>Hello, World!<\/h1>\n      <\/div>\n    );\n}\n\nexport default HelloWorld;\n<\/code><\/pre>\n
In contrast, Angular components are strictly class-based, using the @Component decorator to define the component. Angular also uses modules to register components.<\/p>\n
app.component.ts\n\nimport { Component } from '@angular\/core';\n\n@Component({\nselector: 'app-hello-world',\ntemplateUrl: '.\/hello-world.component.html',\nstyleUrls: ['.\/hello-world.component.css']\n})\nexport class HelloWorldComponent {\n}\n<\/code><\/pre>\n
app.module.ts\nimport { BrowserModule } from '@angular\/platform-browser';\nimport { NgModule } from '@angular\/core';\n\nimport { AppComponent } from '.\/app.component';\nimport { HelloWorldComponent } from '.\/hello-world\/hello-world.component';\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    HelloWorldComponent\n  ],\n  imports: [\n    BrowserModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }<\/code><\/pre>\n
The DOM<\/h2>\n
The DOM is a hierarchical representation of the structure of a web document, most commonly HTML. Angular uses change detection to track changes and update the DOM. React, instead, uses a virtual DOM. The virtual DOM is an in-memory representation of actual DOM elements. When changes are made, React compares the virtual DOM with the actual DOM and only updates the parts that have changed. This process is known as reconciliation. Angular uses zone.js to detect changes. When changes occur, Angular runs a change detection algorithm to update the view. While this happens automatically, reducing the cognitive load of the developer, it is also less efficient.<\/p>\n
Data Binding<\/h2>\n
When working in Angular for so long, getting used to how data is passed between a parent component and a child component can be a little intimidating. React uses unidirectional data binding, meaning that data is only passed down from a parent to a child component. Angular has a way to easily bind data in both directions using the @Input() and @Output() decorators.<\/p>\n
parent.component.ts\n\nimport { Component } from '@angular\/core';\n\n@Component({\nselector: 'app-root',\ntemplateUrl: '.\/app.component.html',\nstyleUrls: ['.\/app.component.css']\n})\nexport class AppComponent {\n  parentData = 'Hello from Parent';\n\n  handleDataChange(newData: string) {\n   this.parentData = newData;\n }\n}\n<\/code><\/pre>\n
parent.component.html\n\n<app-child [childData]=\"parentData\" (childDataChange)=\"handleDataChange($event)\"><\/app-child>\n<\/code><\/pre>\n
child.component.ts\n\nimport { Component, Input, Output, EventEmitter } from '@angular\/core';\n\n@Component({\nselector: 'app-child',\ntemplateUrl: '.\/child.component.html',\nstyleUrls: ['.\/child.component.css']\n})\nexport class ChildComponent {\n  @Input() childData: string;\n  @Output() childDataChange = new EventEmitter<string>();\n\n  handleChange(event: Event) {\n   const newData = (event.target as HTMLInputElement).value;\n   this.childDataChange.emit(newData);\n  }\n}\n<\/code><\/pre>\n
child.component.html\n\n<input [value]=\"childData\" (input)=\"handleChange($event)\" \/>\n<p>{{ childData }}<\/p>\n<\/code><\/pre>\n
While two-way data binding in React is possible, I would argue that it\u2019s not as straightforward as in Angular. To have the child component update the parent component’s state, you must pass a function from the parent to the child to handle the updates.<\/p>\n
Parent Component<\/strong><\/h3>\n
import React, { useState } from 'react';\nimport ChildComponent from '.\/ChildComponent';\n\nconst App = () => {\nconst [data, setData] = useState('Hello from Parent');\n\nconst handleDataChange = (newData) => {\n  setData(newData);\n};\n\nreturn (\n  <div>\n   <ChildComponent data={data} onDataChange={handleDataChange} \/>\n  <\/div>\n );\n}\n\nexport default App;\n<\/code><\/pre>\n
Child Component<\/strong><\/h3>\n
import React from 'react';\n\nconst ChildComponent = ({ data, onDataChange }) => {\nconst handleChange = (event) => {\n  onDataChange(event.target.value);\n};\n\nreturn (\n  <div>\n   <input type=\"text\" value={data} onChange={handleChange} \/>\n   <p>{data}<\/p>\n  <\/div>\n );\n}\n\nexport default ChildComponent;\n<\/code><\/pre>\n
*ngFor and *ngIf<\/h2>\n
Another key difference is how React and Angular iterate over an array to render multiple elements. Angular uses the *ngFor structural directive within the component\u2019s template.<\/p>\n
<ul>\n   <li *ngFor=\"let user of users\">{{ user.name }}<\/li>\n<\/ul>\n<\/code><\/pre>\n
React uses the Javascript map() method within the component\u2019s return statement. To track each element in React, you should include a unique key prop. Achieve this in Angular by using a trackBy function.<\/p>\n
fucntion UserList ({ users }) {\n  return (\n    <ul>\n      {users.map(user => (\n        <li key=(user.id)>{user.name}<\/li>\n      ))}\n    <\/ul>\n  );\n}\n<\/code><\/pre>\n
This can be achieved in Angular by using a trackBy function.<\/p>\n
app.component.html\n<ul>\n   <li *ngFor=\"let user of users; trackBy: trackById\">{{ user.name }}<\/li>\n<\/ul>\n\n<\/code><\/pre>\n
app.component.ts\ntrackById(index: number, user: any): number {\n   return user.id;\n}\n<\/code><\/pre>\n
I think Angular simplifies the process by embedding the logic directly in the HTML. Similarly, Angular uses the *ngIf directive within the component\u2019s template. Whereas, you would achieve the same functionality in React by using an if statement within the return statement of the component.<\/p>\n
While there may be many differences between Angular and React, both have their places depending on the project. Angular is an opinionated, robust framework but may require too much boilerplate, while React is lightweight and extremely customizable. Angular has a \u201cdefault\u201d way of doing things, whereas there are many ways to accomplish the same thing in React. Choose wisely and happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"
For the past two years, I\u2019ve been chugging along in the Angular world. I\u2019ve become very familiar with Angular concepts, best practices, and how to resolve the infamous circular dependencies error. But as things go at Atomic, I had the opportunity to switch projects and be thrust into an entirely different tech stack. Here, I […]<\/p>\n","protected":false},"author":613,"featured_media":3663067,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7005],"tags":[2340,23012,23440],"series":[],"class_list":["post-3662860","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-redux","tag-react","tag-angular","tag-components"],"acf":[],"yoast_head":"\nAngular vs. React: Learning React as an Angular Developer<\/title>\n<meta name=\"description\" content=\"Angular vs. React? Here are some helpful tips to learn React when you\u2019ve primarily been working with Angular.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/spin.atomicobject.com\/angular-vs-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Angular vs. React: Learning React as an Angular Developer\" \/>\n<meta property=\"og:description\" content=\"Angular vs. React? Here are some helpful tips to learn React when you\u2019ve primarily been working with Angular.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/spin.atomicobject.com\/angular-vs-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Atomic Spin\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/atomicobject\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-24T12:00:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/JDP-AO2023-490-1-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1707\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Rebecca Rayford\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@atomicobject\" \/>\n<meta name=\"twitter:site\" content=\"@atomicobject\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rebecca Rayford\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/angular-vs-react\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/angular-vs-react\\\/\"},\"author\":{\"name\":\"Rebecca Rayford\",\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/#\\\/schema\\\/person\\\/4d0fdc8c2dfa52c539e745536262138c\"},\"headline\":\"Angular vs. React: Learning React as an Angular Developer\",\"datePublished\":\"2024-07-24T12:00:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/angular-vs-react\\\/\"},\"wordCount\":755,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/atomicobject.com\\\/\"},\"image\":{\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/angular-vs-react\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/spin.atomicobject.com\\\/wp-content\\\/uploads\\\/JDP-AO2023-490-1-scaled.jpg\",\"keywords\":[\"react\",\"angular\",\"components\"],\"articleSection\":[\"React \\\/ Redux\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/spin.atomicobject.com\\\/angular-vs-react\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/angular-vs-react\\\/\",\"url\":\"https:\\\/\\\/spin.atomicobject.com\\\/angular-vs-react\\\/\",\"name\":\"Angular vs. React: Learning React as an Angular Developer\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/angular-vs-react\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/angular-vs-react\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/spin.atomicobject.com\\\/wp-content\\\/uploads\\\/JDP-AO2023-490-1-scaled.jpg\",\"datePublished\":\"2024-07-24T12:00:14+00:00\",\"description\":\"Angular vs. React? Here are some helpful tips to learn React when you\u2019ve primarily been working with Angular.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/spin.atomicobject.com\\\/angular-vs-react\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/angular-vs-react\\\/#primaryimage\",\"url\":\"https:\\\/\\\/spin.atomicobject.com\\\/wp-content\\\/uploads\\\/JDP-AO2023-490-1-scaled.jpg\",\"contentUrl\":\"https:\\\/\\\/spin.atomicobject.com\\\/wp-content\\\/uploads\\\/JDP-AO2023-490-1-scaled.jpg\",\"width\":2560,\"height\":1707,\"caption\":\"Angular vs. React: Learning React as an Angular Developer\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/#website\",\"url\":\"https:\\\/\\\/spin.atomicobject.com\\\/\",\"name\":\"Atomic Spin\",\"description\":\"Atomic Object\u2019s blog on everything we find fascinating.\",\"publisher\":{\"@id\":\"https:\\\/\\\/atomicobject.com\\\/\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/spin.atomicobject.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/#organization\",\"name\":\"Atomic Object\",\"url\":\"https:\\\/\\\/spin.atomicobject.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/spin.atomicobject.com\\\/wp-content\\\/uploads\\\/AO-Logo-Emblem-Color.png\",\"contentUrl\":\"https:\\\/\\\/spin.atomicobject.com\\\/wp-content\\\/uploads\\\/AO-Logo-Emblem-Color.png\",\"width\":258,\"height\":244,\"caption\":\"Atomic Object\"},\"image\":{\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/atomicobject\",\"https:\\\/\\\/x.com\\\/atomicobject\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/spin.atomicobject.com\\\/#\\\/schema\\\/person\\\/4d0fdc8c2dfa52c539e745536262138c\",\"name\":\"Rebecca Rayford\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7290b258ef127d737c263e98125ec3cc12c6e075fde0dd30ed2d552b0e63da28?s=96&d=blank&r=pg\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7290b258ef127d737c263e98125ec3cc12c6e075fde0dd30ed2d552b0e63da28?s=96&d=blank&r=pg\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7290b258ef127d737c263e98125ec3cc12c6e075fde0dd30ed2d552b0e63da28?s=96&d=blank&r=pg\",\"caption\":\"Rebecca Rayford\"},\"description\":\"Rebecca Rayford, Software Consultant & Developer who approaches each problem with logic and creative intuition.\",\"url\":\"https:\\\/\\\/spin.atomicobject.com\\\/author\\\/rebecca-rayford\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Angular vs. React: Learning React as an Angular Developer","description":"Angular vs. React? Here are some helpful tips to learn React when you\u2019ve primarily been working with Angular.","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:\/\/spin.atomicobject.com\/angular-vs-react\/","og_locale":"en_US","og_type":"article","og_title":"Angular vs. React: Learning React as an Angular Developer","og_description":"Angular vs. React? Here are some helpful tips to learn React when you\u2019ve primarily been working with Angular.","og_url":"https:\/\/spin.atomicobject.com\/angular-vs-react\/","og_site_name":"Atomic Spin","article_publisher":"https:\/\/www.facebook.com\/atomicobject","article_published_time":"2024-07-24T12:00:14+00:00","og_image":[{"width":2560,"height":1707,"url":"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/JDP-AO2023-490-1-scaled.jpg","type":"image\/jpeg"}],"author":"Rebecca Rayford","twitter_card":"summary_large_image","twitter_creator":"@atomicobject","twitter_site":"@atomicobject","twitter_misc":{"Written by":"Rebecca Rayford","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/spin.atomicobject.com\/angular-vs-react\/#article","isPartOf":{"@id":"https:\/\/spin.atomicobject.com\/angular-vs-react\/"},"author":{"name":"Rebecca Rayford","@id":"https:\/\/spin.atomicobject.com\/#\/schema\/person\/4d0fdc8c2dfa52c539e745536262138c"},"headline":"Angular vs. React: Learning React as an Angular Developer","datePublished":"2024-07-24T12:00:14+00:00","mainEntityOfPage":{"@id":"https:\/\/spin.atomicobject.com\/angular-vs-react\/"},"wordCount":755,"commentCount":0,"publisher":{"@id":"https:\/\/atomicobject.com\/"},"image":{"@id":"https:\/\/spin.atomicobject.com\/angular-vs-react\/#primaryimage"},"thumbnailUrl":"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/JDP-AO2023-490-1-scaled.jpg","keywords":["react","angular","components"],"articleSection":["React \/ Redux"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/spin.atomicobject.com\/angular-vs-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/spin.atomicobject.com\/angular-vs-react\/","url":"https:\/\/spin.atomicobject.com\/angular-vs-react\/","name":"Angular vs. React: Learning React as an Angular Developer","isPartOf":{"@id":"https:\/\/spin.atomicobject.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/spin.atomicobject.com\/angular-vs-react\/#primaryimage"},"image":{"@id":"https:\/\/spin.atomicobject.com\/angular-vs-react\/#primaryimage"},"thumbnailUrl":"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/JDP-AO2023-490-1-scaled.jpg","datePublished":"2024-07-24T12:00:14+00:00","description":"Angular vs. React? Here are some helpful tips to learn React when you\u2019ve primarily been working with Angular.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/spin.atomicobject.com\/angular-vs-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/spin.atomicobject.com\/angular-vs-react\/#primaryimage","url":"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/JDP-AO2023-490-1-scaled.jpg","contentUrl":"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/JDP-AO2023-490-1-scaled.jpg","width":2560,"height":1707,"caption":"Angular vs. React: Learning React as an Angular Developer"},{"@type":"WebSite","@id":"https:\/\/spin.atomicobject.com\/#website","url":"https:\/\/spin.atomicobject.com\/","name":"Atomic Spin","description":"Atomic Object\u2019s blog on everything we find fascinating.","publisher":{"@id":"https:\/\/atomicobject.com\/"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/spin.atomicobject.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/spin.atomicobject.com\/#organization","name":"Atomic Object","url":"https:\/\/spin.atomicobject.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/spin.atomicobject.com\/#\/schema\/logo\/image\/","url":"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/AO-Logo-Emblem-Color.png","contentUrl":"https:\/\/spin.atomicobject.com\/wp-content\/uploads\/AO-Logo-Emblem-Color.png","width":258,"height":244,"caption":"Atomic Object"},"image":{"@id":"https:\/\/spin.atomicobject.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/atomicobject","https:\/\/x.com\/atomicobject"]},{"@type":"Person","@id":"https:\/\/spin.atomicobject.com\/#\/schema\/person\/4d0fdc8c2dfa52c539e745536262138c","name":"Rebecca Rayford","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/7290b258ef127d737c263e98125ec3cc12c6e075fde0dd30ed2d552b0e63da28?s=96&d=blank&r=pg","url":"https:\/\/secure.gravatar.com\/avatar\/7290b258ef127d737c263e98125ec3cc12c6e075fde0dd30ed2d552b0e63da28?s=96&d=blank&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7290b258ef127d737c263e98125ec3cc12c6e075fde0dd30ed2d552b0e63da28?s=96&d=blank&r=pg","caption":"Rebecca Rayford"},"description":"Rebecca Rayford, Software Consultant & Developer who approaches each problem with logic and creative intuition.","url":"https:\/\/spin.atomicobject.com\/author\/rebecca-rayford\/"}]}},"_links":{"self":[{"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/posts\/3662860","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/users\/613"}],"replies":[{"embeddable":true,"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/comments?post=3662860"}],"version-history":[{"count":0,"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/posts\/3662860\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/media\/3663067"}],"wp:attachment":[{"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/media?parent=3662860"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/categories?post=3662860"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/tags?post=3662860"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/spin.atomicobject.com\/wp-json\/wp\/v2\/series?post=3662860"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}