{"id":21189,"date":"2023-06-09T09:35:00","date_gmt":"2023-06-09T07:35:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=21189"},"modified":"2024-11-18T15:58:02","modified_gmt":"2024-11-18T14:58:02","slug":"a-complete-introduction-to-the-react-library","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/languages\/a-complete-introduction-to-the-react-library\/","title":{"rendered":"A Complete Introduction to the React Library"},"content":{"rendered":"\n<p>Welcome to the exciting world of React! Whether you&#8217;re new to <a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/\">web development<\/a> or looking to expand your skills, this article is tailored just for you. We\u2019ll start with a clear introduction to what React is, its purpose, and how its unique approach stands out from traditional JavaScript. From there, we\u2019ll guide you through installing React, launching your first project, and creating a React component.<\/p>\n\n\n\n<p>As we progress, we\u2019ll break down key concepts and terminology essential to mastering React, giving you a strong foundation for building powerful, efficient applications. We\u2019ll also dive into the role of Redux in managing state in React apps and explore how React Native extends the library to mobile app development.<\/p>\n\n\n\t\t\t\t<div class=\"wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-63d9e95d      \"\n\t\t\t\t\tdata-scroll= \"1\"\n\t\t\t\t\tdata-offset= \"30\"\n\t\t\t\t\tstyle=\"\"\n\t\t\t\t>\n\t\t\t\t<div class=\"uagb-toc__wrap\">\n\t\t\t\t\t\t<div class=\"uagb-toc__title\">\n\t\t\t\t\t\t\tTable Of Contents\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"uagb-toc__list-wrap \">\n\t\t\t\t\t\t<ol class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#what-is-react\" class=\"uagb-toc-link__trigger\">What is React?<\/a><li class=\"uagb-toc__list\"><a href=\"#who-created-the-react-library\" class=\"uagb-toc-link__trigger\">Who created the React Library?<\/a><li class=\"uagb-toc__list\"><a href=\"#how-long-does-it-take-to-learn-react\" class=\"uagb-toc-link__trigger\">How long does it take to learn React?<\/a><li class=\"uagb-toc__list\"><a href=\"#reacts-strategy-and-advantages-over-traditional-javascript\" class=\"uagb-toc-link__trigger\">React&#039;s Strategy and Advantages Over Traditional JavaScript<\/a><li class=\"uagb-toc__list\"><a href=\"#how-to-install-react-library\" class=\"uagb-toc-link__trigger\">How to Install React Library<\/a><li class=\"uagb-toc__list\"><a href=\"#how-to-create-a-react-component\" class=\"uagb-toc-link__trigger\">How to Create a React Component<\/a><li class=\"uagb-toc__list\"><a href=\"#react-library-key-concepts\" class=\"uagb-toc-link__trigger\">React Library: Key Concepts<\/a><li class=\"uagb-toc__list\"><a href=\"#react-ecosystem-redux-and-react-native\" class=\"uagb-toc-link__trigger\">React Ecosystem: Redux and React Native<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#what-is-redux-and-why-is-it-important-in-react-applications\" class=\"uagb-toc-link__trigger\">What is Redux, and why is it important in React applications?<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#what-is-react-native\" class=\"uagb-toc-link__trigger\">What is React Native?<\/a><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#conclusion-we-love-react-library\" class=\"uagb-toc-link__trigger\">Conclusion: We Love React Library!<\/a><\/ul><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n<h2 class=\"gb-headline gb-headline-94742f16 gb-headline-text\">What is React?<\/h2>\n\n\n\n<p>React is a <a aria-label=\"JavaScript library  (opens in a new tab)\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/javascript\/5-javascript-frameworks-to-use-in-2022\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">JavaScript library <\/a>designed to facilitate the creation of interactive and scalable user interfaces (UI). It was developed by Facebook and is used by many large companies, such as Instagram and Airbnb, to build complex and <a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/why-is-web-performance-more-important-than-ever\/\" target=\"_blank\" aria-label=\"high-performance web applications (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">high-performance web applications<\/a>. Thanks to its component-based architecture and declarative approach, React promotes code reusability, simplifying the management and maintenance of complex UIs. Moreover, the extensive developer community offers ongoing support, providing resources, documentation, and tools to ease the learning process and development with React.<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-984618a0 gb-headline-text\">Who created the React Library?<\/h2>\n\n\n\n<p>React was created by a team of Facebook developers led by <strong>Jordan Walke<\/strong>. Walke&#8217;s main goal was to create a tool that simplified the development of complex user interfaces, reducing complexity and improving performance. His work was published in 2013, and since then, React has gained popularity in the developer community.<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-d544ba0c gb-headline-text\">How long does it take to learn React?<\/h2>\n\n\n\n<p>The time it takes to learn React depends on various factors, such as your programming experience level, your familiarity with JavaScript, and the time you can dedicate to studying and practicing. However, with the necessary commitment and dedication, you can acquire a solid basic knowledge of React in a relatively short period. To begin, having a solid understanding of JavaScript is helpful, as React is written and based on this programming language. <\/p>\n\n\n\n<p>If you already have a solid grasp of JavaScript fundamentals, you&#8217;ll find it much easier to get started with React. If not, it&#8217;s worth dedicating some time to strengthening your JavaScript skills before diving into React, as a strong foundation will make your learning journey smoother.<\/p>\n\n\n\n<p>A critical part of mastering React is consistent practice. Building small projects or implementing sample code is a great way to solidify your understanding of core concepts like components, state, props, and the component lifecycle. These hands-on experiences help bridge the gap between theory and practical application.<\/p>\n\n\n\n<p>Keep in mind that learning React is not a one-time event\u2014it&#8217;s an ongoing process. The library evolves continuously, with new features and updates being introduced regularly. To stay ahead, make it a habit to keep up with the latest React versions, explore new tools and techniques, and take on projects that challenge you. By doing so, you&#8217;ll not only improve your skills but also become more adaptable to the ever-changing tech landscape.<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-d7998c35 gb-headline-text\">React&#8217;s Strategy and Advantages Over Traditional JavaScript<\/h2>\n\n\n\n<p>React&#8217;s development strategy is based on a fundamental concept called &#8220;Virtual DOM&#8221; (Document Object Model). The traditional <strong>Document Object Model<\/strong> (DOM) is a hierarchically structured representation of an HTML or XML document that allows the browser to interact with the elements present on the web page. The DOM considers the document as a tree of objects, where each element, attribute, and text is represented as a node within the tree.<\/p>\n\n\n\n<p>Unlike traditional JavaScript, which directly manipulates the native components of the DOM (HTML elements and nodes, CSS styles, texts) whenever there are changes, <strong>React creates a virtual representation of them<\/strong>. This representation is compared with the actual version of the DOM and applies only the necessary changes. This approach allows React to optimize update operations and improve the overall performance of the application, as well as offering a more fluid and modern development experience.<\/p>\n\n\n\n<p>The main advantages of React include:<\/p>\n\n\n\n<p><strong>Efficiency<\/strong>: Thanks to the use of the Virtual DOM, React can make updating the user interface more efficient and faster compared to traditional JavaScript. Changes are applied only where necessary, minimizing the computational load.<\/p>\n\n\n\n<p><strong>Code Reusability<\/strong>: React promotes strong modularity through its component-based approach. Components can be reused in different parts of the application, thus reducing code duplication and simplifying maintenance.<\/p>\n\n\n\n<p><strong>Active Community<\/strong>: React has a large and active community of developers, which means you can find many resources, documentation, and online support. This makes it easier for new developers to learn React and get help when needed.<\/p>\n\n\n\n<p><strong>Scalability<\/strong>: React is designed to create scalable applications. Its modular architecture and efficient management of user interface updates make it easy to handle large-scale projects without sacrificing performance.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"gb-headline gb-headline-91b1bc61 gb-headline-text\">How to Install React Library<\/h2>\n\n\n\n<p>To start developing with React, the first thing to do is to install the correct development environment. Here are the steps to follow to install React:<strong>Prerequisites<\/strong>: Make sure you have Node.js installed on your computer. You can download it for free from the official Node.js website and follow the appropriate installation instructions for your operating system.<\/p>\n\n\n\n<p><strong>Project Initialization<\/strong>: Open the terminal and navigate to the directory where you want to create your React project. Once inside the directory, run the following command to initialize a new React project using Create React App:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npx create-react-app project-name<\/code><\/span><\/pre>\n\n\n<p>This command will create a new folder with the name of your project and install all the necessary dependencies to start developing with React.<\/p>\n\n\n\n<p><strong>Starting the Development Server<\/strong>: Once you have successfully completed the previous step, navigate to your React project folder using the command:<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">cd project-name \n<\/code><\/span><\/pre>\n\n\n<p>Once inside the project folder, run the following command to start the React development server: <\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npm start <\/code><\/span><\/pre>\n\n\n<p>This will launch the development server and automatically open your React project in your default browser. Now you are ready to start developing your React application!<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-fe63dd29 gb-headline-text\">How to Create a React Component<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/UX-Security-e1660034130388-1024x576.jpg\" alt=\"javascript, typescript release\" class=\"wp-image-17988\" srcset=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/UX-Security-e1660034130388-1024x576.jpg 1024w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/UX-Security-e1660034130388-300x169.jpg 300w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/UX-Security-e1660034130388-768x432.jpg 768w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/UX-Security-e1660034130388-1536x864.jpg 1536w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/UX-Security-e1660034130388-896x504.jpg 896w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/UX-Security-e1660034130388-400x225.jpg 400w, https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/06\/UX-Security-e1660034130388.jpg 1921w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">React is a JavaScript Library, not technically a Framework.<\/figcaption><\/figure>\n\n\n\n<p>Creating components is a fundamental aspect of development with React. Follow these steps to create your first React component: In your React project folder, find the &#8220;src&#8221; directory and create a new folder inside called &#8220;components&#8221;. This will be the location where you store your components. Inside the &#8220;components&#8221; folder, create a new file with the &#8220;.js&#8221; extension and give your component a meaningful name. For example, you could call it &#8220;MyComponent.js&#8221;. Open the &#8220;MyComponent.js&#8221; file with your preferred code editor and start defining your React component. Here&#8217;s an example of what it might look like:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> React <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\n<span class=\"hljs-keyword\">const<\/span> MyComponent= <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>Hello, I am your React component!<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>This is my first creation with a React Component.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n};\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> MyComponent;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Once you have defined your component, <strong>you can use it within other components or in the main application<\/strong>. For example, you can add your component to the &#8220;App.js&#8221; file so that it is displayed in your application.<\/p>\n\n\n\n<p>At the beginning of the file, import the component you created in step 3. <strong>Be sure to specify the correct file path if it is located in a subdirectory.<\/strong> For example, if your component&#8217;s file is in the components folder, the import will be:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">import<\/span> MyComponent <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/components\/MyComponent'<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Now you can use the MyComponent component within the App function and render it. Replace the existing code inside the App function with the following:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">App<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"App\"<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>My React application <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">MioComponente<\/span> \/&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\n  );\n}\n\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> App;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>Now, when you view your application in the browser, you will see your MyComponent component rendered inside the div element with the App class.<\/p>\n\n\n\n<p>Remember that you can use the components created in App.js or in any other component within your React application. You can compose the user interface by combining different components and defining the desired structure.<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-8d26219a gb-headline-text\">React Library: Key Concepts<\/h2>\n\n\n\n<p>During development with React library, you will encounter some fundamental key terms that are important to understand. These terms define the core concepts of React and will help you create more effective applications. Let&#8217;s look at them in detail:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Components<\/strong>: Components are the building blocks of React. They can be thought of as modular bricks that make up the user interface. Components represent self-contained parts of the application and can be reused flexibly. They are written as JavaScript functions or classes and can have state and properties.<\/li>\n\n\n\n<li><strong>State<\/strong>: State represents the data managed internally by a component. It is one of the key aspects that make React powerful. The component can access and modify its own state, and when the state changes, React automatically handles updating the user interface to reflect those changes.<\/li>\n\n\n\n<li><strong>Props<\/strong>: Props, short for &#8220;properties,&#8221; are mechanisms used to pass data from a parent component to a child component. Props are immutable and allow you to configure the behavior and appearance of components.<\/li>\n\n\n\n<li><strong>Component Lifecycle<\/strong>: Components in React have a lifecycle that includes various key moments, such as mounting, updating, and unmounting. During these stages, you can perform specific operations, such as initializing data or cleaning up resources. Understanding the component lifecycle is essential for effectively managing operations.<\/li>\n\n\n\n<li><strong>JSX<\/strong>: JSX is a JavaScript extension syntax that allows you to define the user interface structure in a declarative way. With JSX, you can write HTML-like code within React components, making the creation of the user interface more intuitive and readable.<\/li>\n\n\n\n<li><strong>Events<\/strong>: Events in React allow you to handle user interactions, such as clicking a button or entering text in an input field. You can listen for events using specific attributes within React components and define actions to be performed when the event occurs.<\/li>\n\n\n\n<li><strong>Conditional Rendering<\/strong>: Conditional rendering refers to the ability to render different elements or components based on specific conditions. You can use control structures, such as if statements or ternary operators, to determine what to display in the user interface based on certain conditions.<\/li>\n<\/ul>\n\n\n\n<p>Understanding these fundamental key terms will give you a <strong>solid foundation for working with React more effectively<\/strong>. As you gain experience in development with React, you can fully leverage the potential of these features to create dynamic and interactive applications.<\/p>\n\n\n\n<h2 class=\"gb-headline gb-headline-8e2b1e8c gb-headline-text\">React Ecosystem: Redux and React Native<\/h2>\n\n\n\n<p> The React ecosystem is quite comprehensive, providing you with many tools to enhance your applications and improve the development experience. Among these tools, Redux and React Native stand out.<\/p>\n\n\n\n<h3 class=\"gb-headline gb-headline-716641c2 gb-headline-text\">What is Redux, and why is it important in React applications? <\/h3>\n\n\n\n<p>Redux is a state management library often used alongside React for developing complex applications. While React takes care of managing the user interface, Redux focuses on managing the global state of the application. <strong>The need for Redux becomes evident when the React application becomes more complex and requires shared state across multiple components<\/strong>. By using Redux, you can centralize the application&#8217;s state in a single global &#8220;store,&#8221; which can be accessed and modified by any component within the application. The main advantages of using Redux include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Centralization of state<\/strong>: Redux allows for a centralized application state, simplifying state management and synchronization across components.<\/li>\n\n\n\n<li><strong>Ease of debugging<\/strong>: With Redux, you can log all actions performed in the application, making debugging and tracking state changes much easier.<\/li>\n\n\n\n<li><strong>Application scalability<\/strong>: Using Redux, you can easily manage complex applications with large amounts of data and components, thanks to its action and reducer-based architecture.<\/li>\n\n\n\n<li><strong>Reversible actions<\/strong>: Redux supports undoable and redoable actions, allowing for simple undo and redo operations within the application.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-is-react-native\">What is React Native?<\/h3>\n\n\n\n<p> <a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/react-native-alive-and-kicking-in-2022\/\" target=\"_blank\" aria-label=\"React Native (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">React Native<\/a> is a development framework that enables you to create mobile apps for iOS and Android using JavaScript and React. By using React Native, developers can share code between different platforms, thus reducing the time and effort needed to develop and maintain separate native apps for iOS and Android. The main features and benefits of React Native include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Cross-platform development<\/strong>: With React Native, you can <a href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/mobile-dev\/building-mobile-applications-in-javascript-with-react-native\/\" target=\"_blank\" aria-label=\"write a single codebase in JavaScript and share it across iOS and Android (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\">write a single codebase in JavaScript and share it across iOS and Android<\/a>, reducing development time and the need to maintain two separate codebases.<\/li>\n\n\n\n<li><strong>Native performance<\/strong>: React Native uses native components to render the user interface, providing performance similar to a native app. This allows developers to create fast and responsive apps.<\/li>\n\n\n\n<li><strong>Code reuse<\/strong>: Much of the code written for a React Native app can be reused for other apps, saving time and effort in developing new applications.<\/li>\n\n\n\n<li><strong>Extensive developer community<\/strong>: React Native has a large and active developer community, providing support, resources, and ready-to-use components, simplifying the development process. With React Native, developers can create native mobile apps while maintaining the flexibility and power of React and JavaScript. It is a popular choice for mobile app development, especially when rapid time-to-market and code sharing across platforms are required.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"gb-headline gb-headline-4806258d gb-headline-text\">Conclusion: We Love React Library!<\/h2>\n\n\n\n<p> In this article, we explored React, a JavaScript library that has revolutionized how we develop user interfaces. We discussed React&#8217;s fundamental concepts, the origin of the framework, and its development strategy. <strong>We also highlighted the advantages React offers compared to traditional JavaScript, such as efficiency, code reusability, an active community, and scalability<\/strong>. We hope this introduction to React has inspired you to dive deeper into this powerful development tool. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to the exciting world of React! Whether you&#8217;re new to web development or looking to expand your skills, this article is tailored just for you. We\u2019ll start with a clear introduction to what React is, its purpose, and how its unique approach stands out from traditional JavaScript. From there, we\u2019ll guide you through installing&#8230; <a class=\"more-link\" href=\"https:\/\/www.codemotion.com\/magazine\/languages\/a-complete-introduction-to-the-react-library\/\">Read more<\/a><\/p>\n","protected":false},"author":94,"featured_media":21192,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[20],"tags":[54,10430,10432],"collections":[],"class_list":{"0":"post-21189","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-languages","8":"tag-react","9":"tag-react-native","10":"tag-redux","11":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.9 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>A Complete Introduction to the React Library - Codemotion<\/title>\n<meta name=\"description\" content=\"React library: discover what it is, how to get started, its advantages, and how to get the most out of this JavaScript library.\" \/>\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.codemotion.com\/magazine\/languages\/a-complete-introduction-to-the-react-library\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Complete Introduction to the React Library\" \/>\n<meta property=\"og:description\" content=\"React library: discover what it is, how to get started, its advantages, and how to get the most out of this JavaScript library.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/languages\/a-complete-introduction-to-the-react-library\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-09T07:35:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-18T14:58:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/06\/React-Image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1196\" \/>\n\t<meta property=\"og:image:height\" content=\"876\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Riccardo Degni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Riccardo Degni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/languages\\\/a-complete-introduction-to-the-react-library\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/languages\\\/a-complete-introduction-to-the-react-library\\\/\"},\"author\":{\"name\":\"Riccardo Degni\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/6912e00a94efa41fb20e92ba1bb050fb\"},\"headline\":\"A Complete Introduction to the React Library\",\"datePublished\":\"2023-06-09T07:35:00+00:00\",\"dateModified\":\"2024-11-18T14:58:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/languages\\\/a-complete-introduction-to-the-react-library\\\/\"},\"wordCount\":2140,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/languages\\\/a-complete-introduction-to-the-react-library\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/React-Image.jpg\",\"keywords\":[\"React\",\"React Native\",\"Redux\"],\"articleSection\":[\"Languages and frameworks\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/languages\\\/a-complete-introduction-to-the-react-library\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/languages\\\/a-complete-introduction-to-the-react-library\\\/\",\"name\":\"A Complete Introduction to the React Library - Codemotion\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/languages\\\/a-complete-introduction-to-the-react-library\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/languages\\\/a-complete-introduction-to-the-react-library\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/React-Image.jpg\",\"datePublished\":\"2023-06-09T07:35:00+00:00\",\"dateModified\":\"2024-11-18T14:58:02+00:00\",\"description\":\"React library: discover what it is, how to get started, its advantages, and how to get the most out of this JavaScript library.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/languages\\\/a-complete-introduction-to-the-react-library\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/languages\\\/a-complete-introduction-to-the-react-library\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/languages\\\/a-complete-introduction-to-the-react-library\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/React-Image.jpg\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/06\\\/React-Image.jpg\",\"width\":1196,\"height\":876,\"caption\":\"React native mobile app abstract concept vector illustration. Cross-platform native mobile app development framework, JavaScript library, user interface, operating system abstract metaphor.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/languages\\\/a-complete-introduction-to-the-react-library\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Languages and frameworks\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/languages\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"A Complete Introduction to the React Library\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Codemotion.Italy\\\/\",\"https:\\\/\\\/x.com\\\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/6912e00a94efa41fb20e92ba1bb050fb\",\"name\":\"Riccardo Degni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/rd-image-book-pic-e1697717445644-150x150.jpg\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/rd-image-book-pic-e1697717445644-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/rd-image-book-pic-e1697717445644-150x150.jpg\",\"caption\":\"Riccardo Degni\"},\"description\":\"I am a senior web developer, active both on front-end and back-end, a teacher focused on modern programming, a Research Consultant for IT research, and a writer who creates programming articles and guides. I am both a developer with a strong foundation in new technologies such as full Javascript-based environments and object-oriented programming on the server-side (PHP, Node, and Java), and a designer who makes powerful, modern, fully-responsive, and WordPress-free templates.\",\"sameAs\":[\"http:\\\/\\\/www.riccardodegni.com\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/riccardodegni\\\/\"],\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/author\\\/riccardo-degni\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Complete Introduction to the React Library - Codemotion","description":"React library: discover what it is, how to get started, its advantages, and how to get the most out of this JavaScript library.","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.codemotion.com\/magazine\/languages\/a-complete-introduction-to-the-react-library\/","og_locale":"en_US","og_type":"article","og_title":"A Complete Introduction to the React Library","og_description":"React library: discover what it is, how to get started, its advantages, and how to get the most out of this JavaScript library.","og_url":"https:\/\/www.codemotion.com\/magazine\/languages\/a-complete-introduction-to-the-react-library\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2023-06-09T07:35:00+00:00","article_modified_time":"2024-11-18T14:58:02+00:00","og_image":[{"width":1196,"height":876,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/06\/React-Image.jpg","type":"image\/jpeg"}],"author":"Riccardo Degni","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Riccardo Degni","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/languages\/a-complete-introduction-to-the-react-library\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/languages\/a-complete-introduction-to-the-react-library\/"},"author":{"name":"Riccardo Degni","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/6912e00a94efa41fb20e92ba1bb050fb"},"headline":"A Complete Introduction to the React Library","datePublished":"2023-06-09T07:35:00+00:00","dateModified":"2024-11-18T14:58:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/languages\/a-complete-introduction-to-the-react-library\/"},"wordCount":2140,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/languages\/a-complete-introduction-to-the-react-library\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/06\/React-Image.jpg","keywords":["React","React Native","Redux"],"articleSection":["Languages and frameworks"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/languages\/a-complete-introduction-to-the-react-library\/","url":"https:\/\/www.codemotion.com\/magazine\/languages\/a-complete-introduction-to-the-react-library\/","name":"A Complete Introduction to the React Library - Codemotion","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/languages\/a-complete-introduction-to-the-react-library\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/languages\/a-complete-introduction-to-the-react-library\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/06\/React-Image.jpg","datePublished":"2023-06-09T07:35:00+00:00","dateModified":"2024-11-18T14:58:02+00:00","description":"React library: discover what it is, how to get started, its advantages, and how to get the most out of this JavaScript library.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/languages\/a-complete-introduction-to-the-react-library\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/languages\/a-complete-introduction-to-the-react-library\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/languages\/a-complete-introduction-to-the-react-library\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/06\/React-Image.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/06\/React-Image.jpg","width":1196,"height":876,"caption":"React native mobile app abstract concept vector illustration. Cross-platform native mobile app development framework, JavaScript library, user interface, operating system abstract metaphor."},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/languages\/a-complete-introduction-to-the-react-library\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Languages and frameworks","item":"https:\/\/www.codemotion.com\/magazine\/languages\/"},{"@type":"ListItem","position":3,"name":"A Complete Introduction to the React Library"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/6912e00a94efa41fb20e92ba1bb050fb","name":"Riccardo Degni","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/rd-image-book-pic-e1697717445644-150x150.jpg","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/rd-image-book-pic-e1697717445644-150x150.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/rd-image-book-pic-e1697717445644-150x150.jpg","caption":"Riccardo Degni"},"description":"I am a senior web developer, active both on front-end and back-end, a teacher focused on modern programming, a Research Consultant for IT research, and a writer who creates programming articles and guides. I am both a developer with a strong foundation in new technologies such as full Javascript-based environments and object-oriented programming on the server-side (PHP, Node, and Java), and a designer who makes powerful, modern, fully-responsive, and WordPress-free templates.","sameAs":["http:\/\/www.riccardodegni.com\/","https:\/\/www.linkedin.com\/in\/riccardodegni\/"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/riccardo-degni\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/06\/React-Image-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/06\/React-Image-600x600.jpg","author_info":{"display_name":"Riccardo Degni","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/riccardo-degni\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/06\/React-Image.jpg",1196,876,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/06\/React-Image-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/06\/React-Image-300x220.jpg",300,220,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/06\/React-Image-768x563.jpg",768,563,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/06\/React-Image-1024x750.jpg",1024,750,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/06\/React-Image.jpg",1196,876,false],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/06\/React-Image.jpg",1196,876,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/06\/React-Image.jpg",100,73,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/06\/React-Image-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/06\/React-Image-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/06\/React-Image-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/06\/React-Image-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/06\/React-Image-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Riccardo Degni","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/riccardo-degni\/"},"uagb_comment_info":0,"uagb_excerpt":"Welcome to the exciting world of React! Whether you&#8217;re new to web development or looking to expand your skills, this article is tailored just for you. We\u2019ll start with a clear introduction to what React is, its purpose, and how its unique approach stands out from traditional JavaScript. From there, we\u2019ll guide you through installing&#8230;&hellip;","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/21189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/94"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=21189"}],"version-history":[{"count":3,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/21189\/revisions"}],"predecessor-version":[{"id":30682,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/21189\/revisions\/30682"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/21192"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=21189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=21189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=21189"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=21189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}