{"id":5116,"date":"2018-11-30T15:01:29","date_gmt":"2018-11-30T09:31:29","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=5116"},"modified":"2018-11-30T15:01:52","modified_gmt":"2018-11-30T09:31:52","slug":"basic-fundamental-of-reactjs","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/basic-fundamental-of-reactjs\/","title":{"rendered":"Basic Fundamental of ReactJS"},"content":{"rendered":"

Origin of ReactJS<\/b><\/h3>\n

ReactJS or more popularly known as React was developed in the year 2011 by Jordan Walke, a software engineer at Facebook. It was created to cater to the need of updating a particular section of the Facebook page without refreshing it.<\/span><\/p>\n

What is React<\/b><\/h3>\n

React is a JavaScript library which is used to build user interfaces for web applications. Initially, it was maintained and developed by Facebook but now it is an open source technology.<\/span> React controls the View part of MVC(Model View Controller) architecture.<\/span><\/p>\n

Need of creating React<\/b><\/p>\n

In 2011, the Facebook team is confronted with a problem which was that, to update the news feed section a user have to refresh the site again and again which make the overall flow of Facebook slow, so to tackle this problem Jordan Walke comes with a solution to divide the entire web page into small components which can be updated individually without refreshing the entire page. <\/span><\/p>\n

Fundamentals of React<\/b><\/p>\n

    \n
  • Component:- <\/b>
    \n<\/span><\/span><\/p>\n

    In React a component is nothing but just a part of a complete web page which serves a specific purpose. For example:- The news feed section of Facebook is nothing but just a component in the entire Facebook page which serves a specific purpose of displaying continuously updating news. Similarly, a web page can consist of many such components. So, when we create a web page in react it is nothing but a collection of components.<\/p>\n

    One more advantage of these components is their re-usability that means we can use the same component in different web pages. For example:- Title and Footer of a web page.<\/span><\/span><\/li>\n<\/ul>\n

    \"\"<\/p>\n

      \n
    • Props:- <\/b>
      \n<\/span><\/span><\/p>\n

      In React one component can call other components, the component which calls another component is known as Parent component and the component which is called is known as Child component. When parent component calls child component, it can pass properties while calling and the child component can use these properties according to its requirements.<\/p>\n<\/li>\n<\/ul>\n

      \"\"<\/p>\n

        \n
      • State:-<\/b>
        \n<\/span><\/span><\/span><\/span><\/p>\n

        State is nothing but just a Javascript object which may contain other key-value pairs. A state is always private to a particular component that means state of one component is not accessible to other components. In React state divides components into two types namely Stateless or Functional components and Stateful or Class components.<\/p>\n\n\n\n\n\n\n
        \n

        Stateless<\/b><\/p>\n<\/td>\n

        		\n

        Stateful<\/b><\/p>\n<\/td>\n<\/tr>\n

        1. This component is represented as a function.<\/span><\/td>\n1. This component is represented as a class.<\/span><\/td>\n<\/tr>\n
        2. This component doesn\u2019t maintain any state.<\/span><\/td>\n2. This component can maintain its state.<\/span><\/td>\n<\/tr>\n
        3. This component doesn\u2019t have any lifecycle methods.<\/span><\/td>\n3. This component does have life methods.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n
      • Virtual DOM:-
        \n<\/span><\/b><\/b><\/p>\n

        To improve the performance, in React changes are first made in a Virtual DOM which is created and maintained by React in the background. This Virtual DOM reflect changes on the Real DOM only when the last update in Virtual DOM has differences with the Real DOM present state. This process improves the performance exponentially and in React terminology this entire process is known as Reconciliatory Algorithm.<\/p>\n

        \"\"<\/li>\n<\/ul>\n

         <\/p>\n

         <\/p>\n","protected":false},"excerpt":{"rendered":"

        Origin of ReactJS ReactJS or more popularly known as React was developed in the year 2011 by Jordan Walke, a software engineer at Facebook. It was created to cater to the need of updating a particular section of the Facebook page without refreshing it. What is React React is a JavaScript library which is used […]<\/p>\n","protected":false},"author":1,"featured_media":5125,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[257,102],"tags":[317,318,314,319,320],"class_list":["post-5116","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react","category-web-service","tag-components","tag-props","tag-reactjs","tag-state","tag-virtual-dom"],"yoast_head":"\nBasic Fundamental of ReactJS - InnovationM - Blog<\/title>\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.innovationm.com\/blog\/basic-fundamental-of-reactjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Basic Fundamental of ReactJS - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"Origin of ReactJS ReactJS or more popularly known as React was developed in the year 2011 by Jordan Walke, a software engineer at Facebook. It was created to cater to the need of updating a particular section of the Facebook page without refreshing it. What is React React is a JavaScript library which is used […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/basic-fundamental-of-reactjs\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-30T09:31:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-11-30T09:31:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2018\/11\/REACT-TITLE-8.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1145\" \/>\n\t<meta property=\"og:image:height\" content=\"636\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/basic-fundamental-of-reactjs\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/basic-fundamental-of-reactjs\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Basic Fundamental of ReactJS\",\"datePublished\":\"2018-11-30T09:31:29+00:00\",\"dateModified\":\"2018-11-30T09:31:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/basic-fundamental-of-reactjs\\\/\"},\"wordCount\":501,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/basic-fundamental-of-reactjs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/REACT-TITLE-8.png\",\"keywords\":[\"Components\",\"props\",\"Reactjs\",\"state\",\"Virtual DOM\"],\"articleSection\":[\"React\",\"Web service\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/basic-fundamental-of-reactjs\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/basic-fundamental-of-reactjs\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/basic-fundamental-of-reactjs\\\/\",\"name\":\"Basic Fundamental of ReactJS - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/basic-fundamental-of-reactjs\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/basic-fundamental-of-reactjs\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/REACT-TITLE-8.png\",\"datePublished\":\"2018-11-30T09:31:29+00:00\",\"dateModified\":\"2018-11-30T09:31:52+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/basic-fundamental-of-reactjs\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/basic-fundamental-of-reactjs\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/basic-fundamental-of-reactjs\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/REACT-TITLE-8.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/11\\\/REACT-TITLE-8.png\",\"width\":1145,\"height\":636},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/basic-fundamental-of-reactjs\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Basic Fundamental of ReactJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Basic Fundamental of ReactJS - InnovationM - Blog","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.innovationm.com\/blog\/basic-fundamental-of-reactjs\/","og_locale":"en_US","og_type":"article","og_title":"Basic Fundamental of ReactJS - InnovationM - Blog","og_description":"Origin of ReactJS ReactJS or more popularly known as React was developed in the year 2011 by Jordan Walke, a software engineer at Facebook. It was created to cater to the need of updating a particular section of the Facebook page without refreshing it. What is React React is a JavaScript library which is used […]","og_url":"https:\/\/www.innovationm.com\/blog\/basic-fundamental-of-reactjs\/","og_site_name":"InnovationM - Blog","article_published_time":"2018-11-30T09:31:29+00:00","article_modified_time":"2018-11-30T09:31:52+00:00","og_image":[{"width":1145,"height":636,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2018\/11\/REACT-TITLE-8.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/basic-fundamental-of-reactjs\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/basic-fundamental-of-reactjs\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Basic Fundamental of ReactJS","datePublished":"2018-11-30T09:31:29+00:00","dateModified":"2018-11-30T09:31:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/basic-fundamental-of-reactjs\/"},"wordCount":501,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/basic-fundamental-of-reactjs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2018\/11\/REACT-TITLE-8.png","keywords":["Components","props","Reactjs","state","Virtual DOM"],"articleSection":["React","Web service"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/basic-fundamental-of-reactjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/basic-fundamental-of-reactjs\/","url":"https:\/\/www.innovationm.com\/blog\/basic-fundamental-of-reactjs\/","name":"Basic Fundamental of ReactJS - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/basic-fundamental-of-reactjs\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/basic-fundamental-of-reactjs\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2018\/11\/REACT-TITLE-8.png","datePublished":"2018-11-30T09:31:29+00:00","dateModified":"2018-11-30T09:31:52+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/basic-fundamental-of-reactjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/basic-fundamental-of-reactjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/basic-fundamental-of-reactjs\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2018\/11\/REACT-TITLE-8.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2018\/11\/REACT-TITLE-8.png","width":1145,"height":636},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/basic-fundamental-of-reactjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Basic Fundamental of ReactJS"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/5116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=5116"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/5116\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/5125"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=5116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=5116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=5116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}