{"id":3189,"date":"2018-01-03T13:10:59","date_gmt":"2018-01-03T07:40:59","guid":{"rendered":"https:\/\/code4developers.com\/?p=3189"},"modified":"2018-01-03T13:44:38","modified_gmt":"2018-01-03T08:14:38","slug":"what-react-is-and-how-it-is-different","status":"publish","type":"post","link":"https:\/\/code4developers.com\/what-react-is-and-how-it-is-different\/","title":{"rendered":"What React is, and how it is different."},"content":{"rendered":"<div class=\"blogroll-item__content\">\n<p>We often compare React, Angular and Vue. I get why. But it isn\u2019t the best. Because both Vue and Angular are more complete solutions for building web apps, while React are just a library for dealing with the user interface part of it.<\/p>\n<p><!--more--><\/p>\n<p>And leave other things like communicating with API\u2019s, routing and global state to others.<\/p>\n<p>The bad thing about this approach is that you need to learn more, and there are no \u201cstandards\u201d. But the good thing about this is that you can choose the best option for what you are building, and only increase the complexity as you need it.<\/p>\n<p>React is based on components instead of a variant<\/p>\n<p>of the well-known MVC model. In a MVC model you have the model (data), the interface (view) and the controller; the controller is the one that controls everything and are doing the work. A component based system on the other hand is based on the idea that you make many small components that are fully independent and combine them to build what every you are building, They can be pure UI components or pure wrapper components; or a combination. A wrapper component is a component with just logic.<\/p>\n<p>The biggest difference between the two from a practical stand point is the structure. A MVC system does a lot of the organization for you, but makes it harder to re-organize everything. When you use React you typically start with a single file, then you divide it into different files and slowly make it more complex as you need it.<\/p>\n<p>That means that the structure rarely is more complicated than it has to be.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>We often compare React, Angular and Vue. I get why. But it isn\u2019t the best. Because both Vue and Angular are more complete solutions for building web apps, while React&hellip;<\/p>\n","protected":false},"author":7,"featured_media":3183,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[93],"tags":[29,94,96],"powerkit_post_featured":[],"class_list":{"0":"post-3189","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-react","8":"tag-angular","9":"tag-react","10":"tag-vue"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/12\/react_2.png?fit=375%2C375&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-Pr","jetpack-related-posts":[{"id":14480,"url":"https:\/\/code4developers.com\/angular-custom-elements\/","url_meta":{"origin":3189,"position":0},"title":"Angular Custom Elements: Creating Reusable Components with Angular","author":"Yatendrasinh Joddha","date":"April 19, 2023","format":false,"excerpt":"Angular Custom Elements allow you to create reusable components that can be used in non-Angular applications. Custom Elements are a powerful feature that can help you share code across multiple projects and platforms. In this article, we'll take a closer look at Angular Custom Elements and show you how to\u2026","rel":"","context":"In &quot;Angular&quot;","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"Angular Custom Elements","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/04\/Custom-elements.png?resize=1050%2C600&ssl=1 3x"},"classes":[]},{"id":3194,"url":"https:\/\/code4developers.com\/react-hello-world-and-jsx\/","url_meta":{"origin":3189,"position":1},"title":"React: Hello World and JSX","author":"Arif Khoja","date":"January 8, 2018","format":false,"excerpt":"This is a typical Hello World implementation in React in JSX file. It shows one of two ways you can write components, and how you pass data to a components. import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class App extends Component { render() { return (\u2026","rel":"","context":"In &quot;React&quot;","block_context":{"text":"React","link":"https:\/\/code4developers.com\/category\/react\/"},"img":{"alt_text":"react","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/12\/react_2.png?fit=375%2C375&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3182,"url":"https:\/\/code4developers.com\/react-blog-post-serieses-react-development\/","url_meta":{"origin":3189,"position":2},"title":"React: A blog post series about React development","author":"Arif Khoja","date":"December 30, 2017","format":false,"excerpt":"One of the first things I wrote down in my notebook as I was planning or trying to figure out if there was enough stuff to write about to do this site was a React introduction. I know React fairly well, and have been working full-time with it for quite\u2026","rel":"","context":"In &quot;React&quot;","block_context":{"text":"React","link":"https:\/\/code4developers.com\/category\/react\/"},"img":{"alt_text":"react","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/12\/react_2.png?fit=375%2C375&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":15211,"url":"https:\/\/code4developers.com\/react-hooks-guide-top-tips-for-optimizing-performance-in-your-react-applications\/","url_meta":{"origin":3189,"position":3},"title":"React Hooks Guide: Top Tips for Optimizing Performance in Your React Applications","author":"Arif Khoja","date":"April 2, 2024","format":false,"excerpt":"Boost the performance of your React applications with our top tips in the 'React Hooks Guide'.","rel":"","context":"Similar post","block_context":{"text":"Similar post","link":""},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2024\/04\/image-1.jpg?fit=940%2C627&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2024\/04\/image-1.jpg?fit=940%2C627&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2024\/04\/image-1.jpg?fit=940%2C627&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2024\/04\/image-1.jpg?fit=940%2C627&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":14686,"url":"https:\/\/code4developers.com\/unlocking-the-power-of-react-hooks\/","url_meta":{"origin":3189,"position":4},"title":"Unlocking the Power of React Hooks: A Comprehensive Guide with Examples","author":"Yatendrasinh Joddha","date":"October 15, 2023","format":false,"excerpt":"In the ever-evolving world of web development, React has been a game-changer. It simplifies building interactive and dynamic user interfaces. With React, you can create components, manage states, and handle side effects seamlessly. But as React evolves, so do the best practices and techniques for building applications. One significant improvement\u2026","rel":"","context":"In &quot;React&quot;","block_context":{"text":"React","link":"https:\/\/code4developers.com\/category\/react\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/10\/React-icon.svg_-1-e1697396875978.png?fit=250%2C217&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3165,"url":"https:\/\/code4developers.com\/pug\/","url_meta":{"origin":3189,"position":5},"title":"Pug","author":"Arif Khoja","date":"December 15, 2017","format":false,"excerpt":"Pug is a template language for Javascript that I have grown to enjoy a lot. My impression is that a lot of people use it, if they use a template engine for server side rendering using Node. The big question is if you need it or not in 2017. I\u2026","rel":"","context":"In \"Node\"","block_context":{"text":"Node","link":"https:\/\/code4developers.com\/tag\/node\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/12\/PugJs.png?fit=225%2C225&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=3189"}],"version-history":[{"count":1,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3189\/revisions"}],"predecessor-version":[{"id":3190,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3189\/revisions\/3190"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/3183"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=3189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=3189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=3189"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=3189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}