{"id":2342,"date":"2020-07-30T09:04:55","date_gmt":"2020-07-30T07:04:55","guid":{"rendered":"https:\/\/www.thecodecampus.de\/blog\/?p=2342"},"modified":"2025-04-22T10:18:21","modified_gmt":"2025-04-22T08:18:21","slug":"introduction-to-react-for-angular-developers-part-1","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/introduction-to-react-for-angular-developers-part-1\/","title":{"rendered":"Introduction to react for angular developers Part 1"},"content":{"rendered":"

You are an angular developer, but now you are getting a little bit confused, because everyone is talking about something called react<\/em>? So take a look at this short practical comparison of these two big Frameworks and get an impression of the differences and similarities. Following, we will create the same app in both of these frameworks to work out the differences. What kind of app could be better to show that? Exactly it\u2019s going to be a classical todo-app :).<\/p>\n

We will focus on functional components in react and we will not discuss the old-fashioned react class approach.<\/a><\/p>\n

 <\/p>\n

Another Todo-App<\/h1>\n

Create a new App<\/h3>\n

The angular way:<\/strong> we need the angular cli installed globally. To create a new app we would use something like ng new my-todo-app<\/em><\/strong>.<\/em><\/p>\n

The react way<\/strong>: there is no special react cli, we just need node to create our app. npx create-react-app my-todo-app<\/em><\/strong>. If we want to use react with typescript as default language, we have to add a flag: npx create-react-app my-todo-app –template typescript<\/em><\/strong>.<\/em><\/p>\n

Run the app locally<\/h3>\n

The angular way: ng serve<\/em><\/strong><\/p>\n

The react way: react-scripts start<\/em><\/strong><\/p>\n

In both applications the default command is stored as npm start\u00a0<\/strong><\/em>in the package.json.<\/p>\n

Create a component:<\/h3>\n

Both of these frameworks generally have a component based approach of structuring the web application. The idea is to organise the view in small, decapsulated parts that can be reused without having confusing dependencies. Of course there are different ways to create a component.<\/p>\n

The angular way:<\/strong> ng generate component my-card.<\/strong><\/em><\/p>\n

The react way:\u00a0<\/strong>Create a file named my-card.tsx<\/strong><\/em> manually. Then code your component:<\/p>\n

import React from 'react';\r\n\r\nexport default function MyCard() {\r\n    return (<div> My Card <\/div>);\r\n}\r\n<\/pre>\n
As mentioned before, we are using functional components. That means our component is actually just a function. We return our html (it is no real html, it is jsx<\/a>, but at first glance it looks like html).<\/p>\n
If you are not familiar with default\u00a0<\/em>take a look here<\/a>. It is not mandatory to use,\u00a0<\/em>but this will make the code clearer.<\/p>\n
\n\"Angular\n<\/picture>\n<\/a><\/p>\n
The module system:<\/strong><\/h3>\n
The angular way:\u00a0<\/strong>Register the component on the associated module.<\/p>\n
The react way:\u00a0<\/strong>There is no complex module system. Just import and use the component whereever you need it.<\/p>\n
import React from 'react';\r\nimport '.\/App.css';\r\nimport MyCard from '.\/my-card';\r\n\r\nfunction App() {\r\n    return (\r\n        <MyCard><\/MyCard>\r\n    );\r\n}\r\n\r\nexport default App;\r\n<\/pre>\n
Store data in the component<\/h3>\n
In our todo-app we want to create an add-button, for adding todos. Each todo is represented by a my-card component. A todo has a checkbox and a description.\u00a0 We want to save all todo informations in the parent component.<\/p>\n
The angular way: <\/strong>First of all we create a todo array like todos: Todos = []<\/strong><\/em>. \u00a0To get access to the data of the input and the checkbox field we use either a formcontrol<\/em> <\/strong>or the ngModel<\/em><\/strong>. By clicking on the add button we push the new todo object in our todos <\/em><\/strong>a<\/em>rray.<\/strong><\/p>\n
The react way:\u00a0<\/strong>In react we make use of the useState<\/em> Hook<\/a>.<\/strong> We save the data in the state of our App.tsx <\/strong><\/em>component.\u00a0This applies for the data of a new todo and for the array of all todos.<\/p>\n
 <\/p>\n
export interface Todo {\r\n    text: string;\r\n    checked: boolean;\r\n}\r\n\r\nexport interface TodosState {\r\n    newTodo: Todo;\r\n    todos: Todo[];\r\n}\r\n\r\nfunction App() {\r\n    const [todoState, setTodoState] = useState<TodosState>(\r\n        {\r\n            newTodo: {\r\n                text: '',\r\n                checked: false,\r\n            }, todos: []\r\n        }\r\n    );\r\n\r\n    function inputChanged(evt: SyntheticEvent) {\r\n        setTodoState({\r\n            ...todoState,\r\n            newTodo: {...todoState.newTodo, text: (evt.target as HTMLInputElement).value}\r\n        });\r\n    }\r\n\r\n    function checkboxChanged(evt: SyntheticEvent) {\r\n        setTodoState({\r\n            ...todoState,\r\n            newTodo: {...todoState.newTodo, checked: (evt.target as HTMLInputElement).checked}\r\n        });\r\n    }\r\n\r\n    function addTodo() {\r\n        setTodoState({newTodo: {text: '', checked: false}, todos: [...todoState.todos, todoState.newTodo]})\r\n    }\r\n\r\n    return (\r\n        <div>\r\n            <input type=\"text\" onChange={inputChanged} value={todoState.newTodo.text}\/>\r\n            <input type='checkbox' onChange={checkboxChanged} checked={todoState.newTodo.checked}\/>\r\n            <button onClick={addTodo}> Add todo<\/button>\r\n        <\/div>\r\n\r\n    )\r\n}\r\n\r\nexport default App;\r\n<\/pre>\n
The whole state of the componentent consists of a new todo (the current value of the input and checkbox) and of all existing todos. Changes within the input leads to changes in the state of the component. Clicking the add button also chaning the state of the component.<\/p>\n
Passing data from parent to child:<\/h3>\n
To make clear how to pass data from a parent component to a child component, let’s create an easy example. By default lets show an example todo card.<\/p>\n
The angular way:\u00a0<\/strong> In our child component we create an Input() todo: Todo<\/strong><\/em> variable. In our parent component we pass a todo object to our child component like <my-card [todo]=”{text: ‘example’, checked: false}”><\/my-card><\/strong><\/em><\/p>\n
The react way:\u00a0<\/strong>In our parent component we pass the example todo to the child component:<\/p>\n
<MyCard todo={{text:'', checked: false}}><\/MyCard><\/pre>\n
In our child component we handle the example todo as props<\/a> and just display them on our site for the moment.<\/p>\n
import React from 'react';\r\n\r\nexport default function MyCard(props: any) {\r\n\r\n    return (<div>\r\n        {props.todo.text}\r\n        {props.todo.checked}\r\n    <\/div>);\r\n}\r\n<\/pre>\n
 <\/p>\n
Directives:<\/h3>\n
React does not know the system of directives. Let’s look at a specific problem to see how react solves such “directive-problems”. We want to display all todos from the array. Furthermore\u00a0we only want to show todos, that are not checked yet. So we need a way to hide all done todos.<\/p>\n
The angular way: <\/strong>We can iterate via *ngFor\u00a0<\/strong><\/em>(in our html code) over the array and display the todos. We would use a *<\/strong>ngIf <\/strong><\/em>to show or hide a todo, depending on the status of the checkbox.<\/p>\n
The react way:\u00a0<\/strong>Our return statement of the App.tsx<\/strong><\/em> looks like this:<\/p>\n
    return (\r\n        <div>\r\n            <input type=\"text\" onChange={inputChanged} value={todoState.newTodo.text}\/>\r\n            <input type='checkbox' onChange={checkboxChanged} checked={todoState.newTodo.checked}\/>\r\n            <button onClick={addTodo}> Add todo<\/button>\r\n            <MyCard todo={{text:'example', checked: false}}><\/MyCard>\r\n            {todoState.todos.map((todo, index) => !todo.checked && <MyCard todo={todo} key={index}><\/MyCard>)}\r\n        <\/div>\r\n    )<\/pre>\n
We loop with the java script map function over all todos and we use the logic &&-operator to only display the cards with “checked == false”. We need to add the key property<\/a> to avoid console warnings.<\/p>\n
 <\/p>\n
Conclusion<\/h3>\n
You can see that both frameworks have a similar component-based approach. The communication between parent and child component is syntactically different, but in principle there are obvious parallels. To store data in react you have to use the state or the props of a component. In Angular you can create variables where ever you want in the component. In general angular has the stricter structure with the .ts, .html and .css file.<\/p>\n
It seems like react is bringing the html in javascript, in the opposite angular is bringing the javascript into html.<\/p>\n
For more differences and similarities take a look at Part 2<\/strong> of this introduction. We will discuss the differences in the Lifecycle, styling, and much more. (Coming soon)<\/strong><\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
You are an angular developer, but now you are getting a little bit confused, because everyone is talking about something called react? So take a look at this short practical comparison of these two big Frameworks and get an impression of the differences and similarities. Following, we will create the same app in both of […]
 READ MORE<\/a><\/p>\n","protected":false},"author":21,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73,132],"tags":[],"class_list":["post-2342","post","type-post","status-publish","format-standard","hentry","category-angular","category-react"],"yoast_head":"\nIntroduction to react for angular developers Part 1 - Web Development Blog<\/title>\n<meta name=\"description\" content=\"Discover React for Angular devs in Part 1. Unveil concepts, bridge skills, elevate your coding journey. Dive in!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.thecodecampus.de\/blog\/introduction-to-react-for-angular-developers-part-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introduction to react for angular developers Part 1 - Web Development Blog\" \/>\n<meta property=\"og:description\" content=\"Discover React for Angular devs in Part 1. Unveil concepts, bridge skills, elevate your coding journey. Dive in!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thecodecampus.de\/blog\/introduction-to-react-for-angular-developers-part-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development tips and tricks - theCodeCampus Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-30T07:04:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-22T08:18:21+00:00\" \/>\n<meta name=\"author\" content=\"Lino Fischer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lino Fischer\" \/>\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:\\\/\\\/www.thecodecampus.de\\\/blog\\\/introduction-to-react-for-angular-developers-part-1\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/introduction-to-react-for-angular-developers-part-1\\\/\"},\"author\":{\"name\":\"Lino Fischer\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/7c63243aee686ce9d41a044ec967b3ad\"},\"headline\":\"Introduction to react for angular developers Part 1\",\"datePublished\":\"2020-07-30T07:04:55+00:00\",\"dateModified\":\"2025-04-22T08:18:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/introduction-to-react-for-angular-developers-part-1\\\/\"},\"wordCount\":928,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/introduction-to-react-for-angular-developers-part-1\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/weiter-entwickeln_frieder_WP_small.png\",\"articleSection\":[\"Angular\",\"React\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/introduction-to-react-for-angular-developers-part-1\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/introduction-to-react-for-angular-developers-part-1\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/introduction-to-react-for-angular-developers-part-1\\\/\",\"name\":\"Introduction to react for angular developers Part 1 - Web Development Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/introduction-to-react-for-angular-developers-part-1\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/introduction-to-react-for-angular-developers-part-1\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/weiter-entwickeln_frieder_WP_small.png\",\"datePublished\":\"2020-07-30T07:04:55+00:00\",\"dateModified\":\"2025-04-22T08:18:21+00:00\",\"description\":\"Discover React for Angular devs in Part 1. Unveil concepts, bridge skills, elevate your coding journey. Dive in!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/introduction-to-react-for-angular-developers-part-1\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/introduction-to-react-for-angular-developers-part-1\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/introduction-to-react-for-angular-developers-part-1\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/weiter-entwickeln_frieder_WP_small.png\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/weiter-entwickeln_frieder_WP_small.png\",\"width\":720,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/introduction-to-react-for-angular-developers-part-1\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introduction to react for angular developers Part 1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"name\":\"Web Development tips and tricks - theCodeCampus Blog\",\"description\":\"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\",\"name\":\"theCodeCampus\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"width\":156,\"height\":156,\"caption\":\"theCodeCampus\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/7c63243aee686ce9d41a044ec967b3ad\",\"name\":\"Lino Fischer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/lino-fischer-tcc-auhor-scaled-96x96.webp\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/lino-fischer-tcc-auhor-scaled-96x96.webp\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/lino-fischer-tcc-auhor-scaled-96x96.webp\",\"caption\":\"Lino Fischer\"},\"description\":\"Lino is a fullstack developer specializing in Single Page Applications (SPA), with a strong focus on Angular for building dynamic and responsive web solutions. He also works as a trainer in web technologies, sharing his expertise with aspiring developers.\",\"sameAs\":[\"https:\\\/\\\/thecodecampus.de\\\/ueber-uns\\\/trainer\\\/lino-fischer\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/lino-fischer-94643533a\\\/\"],\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/author\\\/lfischer\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introduction to react for angular developers Part 1 - Web Development Blog","description":"Discover React for Angular devs in Part 1. Unveil concepts, bridge skills, elevate your coding journey. Dive in!","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:\/\/www.thecodecampus.de\/blog\/introduction-to-react-for-angular-developers-part-1\/","og_locale":"en_US","og_type":"article","og_title":"Introduction to react for angular developers Part 1 - Web Development Blog","og_description":"Discover React for Angular devs in Part 1. Unveil concepts, bridge skills, elevate your coding journey. Dive in!","og_url":"https:\/\/www.thecodecampus.de\/blog\/introduction-to-react-for-angular-developers-part-1\/","og_site_name":"Web Development tips and tricks - theCodeCampus Blog","article_published_time":"2020-07-30T07:04:55+00:00","article_modified_time":"2025-04-22T08:18:21+00:00","author":"Lino Fischer","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Lino Fischer","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.thecodecampus.de\/blog\/introduction-to-react-for-angular-developers-part-1\/#article","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/introduction-to-react-for-angular-developers-part-1\/"},"author":{"name":"Lino Fischer","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/7c63243aee686ce9d41a044ec967b3ad"},"headline":"Introduction to react for angular developers Part 1","datePublished":"2020-07-30T07:04:55+00:00","dateModified":"2025-04-22T08:18:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/introduction-to-react-for-angular-developers-part-1\/"},"wordCount":928,"commentCount":0,"publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/introduction-to-react-for-angular-developers-part-1\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/weiter-entwickeln_frieder_WP_small.png","articleSection":["Angular","React"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.thecodecampus.de\/blog\/introduction-to-react-for-angular-developers-part-1\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.thecodecampus.de\/blog\/introduction-to-react-for-angular-developers-part-1\/","url":"https:\/\/www.thecodecampus.de\/blog\/introduction-to-react-for-angular-developers-part-1\/","name":"Introduction to react for angular developers Part 1 - Web Development Blog","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/introduction-to-react-for-angular-developers-part-1\/#primaryimage"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/introduction-to-react-for-angular-developers-part-1\/#primaryimage"},"thumbnailUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/weiter-entwickeln_frieder_WP_small.png","datePublished":"2020-07-30T07:04:55+00:00","dateModified":"2025-04-22T08:18:21+00:00","description":"Discover React for Angular devs in Part 1. Unveil concepts, bridge skills, elevate your coding journey. Dive in!","breadcrumb":{"@id":"https:\/\/www.thecodecampus.de\/blog\/introduction-to-react-for-angular-developers-part-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thecodecampus.de\/blog\/introduction-to-react-for-angular-developers-part-1\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/introduction-to-react-for-angular-developers-part-1\/#primaryimage","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/weiter-entwickeln_frieder_WP_small.png","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2025\/04\/weiter-entwickeln_frieder_WP_small.png","width":720,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/www.thecodecampus.de\/blog\/introduction-to-react-for-angular-developers-part-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.thecodecampus.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Introduction to react for angular developers Part 1"}]},{"@type":"WebSite","@id":"https:\/\/www.thecodecampus.de\/blog\/#website","url":"https:\/\/www.thecodecampus.de\/blog\/","name":"Web Development tips and tricks - theCodeCampus Blog","description":"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.","publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.thecodecampus.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.thecodecampus.de\/blog\/#organization","name":"theCodeCampus","url":"https:\/\/www.thecodecampus.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","width":156,"height":156,"caption":"theCodeCampus"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/7c63243aee686ce9d41a044ec967b3ad","name":"Lino Fischer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/11\/lino-fischer-tcc-auhor-scaled-96x96.webp","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/11\/lino-fischer-tcc-auhor-scaled-96x96.webp","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/11\/lino-fischer-tcc-auhor-scaled-96x96.webp","caption":"Lino Fischer"},"description":"Lino is a fullstack developer specializing in Single Page Applications (SPA), with a strong focus on Angular for building dynamic and responsive web solutions. He also works as a trainer in web technologies, sharing his expertise with aspiring developers.","sameAs":["https:\/\/thecodecampus.de\/ueber-uns\/trainer\/lino-fischer","https:\/\/www.linkedin.com\/in\/lino-fischer-94643533a\/"],"url":"https:\/\/www.thecodecampus.de\/blog\/author\/lfischer\/"}]}},"_links":{"self":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/2342","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/comments?post=2342"}],"version-history":[{"count":71,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/2342\/revisions"}],"predecessor-version":[{"id":3419,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/2342\/revisions\/3419"}],"wp:attachment":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/media?parent=2342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/categories?post=2342"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/tags?post=2342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}