{"id":5224,"date":"2021-10-26T04:34:09","date_gmt":"2021-10-26T04:34:09","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=5224"},"modified":"2021-10-26T05:19:07","modified_gmt":"2021-10-26T05:19:07","slug":"what-are-react-js-components","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/what-are-react-js-components\/","title":{"rendered":"What are React JS Components?"},"content":{"rendered":"

In this tutorial, we will know about components in react js. A component is the building block of React application. Every application we develop using react js is made up of small pieces called components. <\/p>\n

Components are helpful in making complex UI. for an illustration purpose, In the below screenshot you can see that the UI can be broken into smaller pieces these are known as components
\n\"React\"<\/p>\n

    \n
  1. The search bar can be seen as individual components<\/li>\n
  2. The navigation bar can be seen as another component<\/li>\n
  3. Menu links can be another component and so on.<\/li>\n<\/ol>\n

    There are many different types of components in react Js<\/h2>\n
      \n
    1. Functional components<\/li>\n
    2. Class components<\/li>\n<\/ol>\n
        \n
      1. Functional components<\/strong> – Any javascript functions can be simply known as functional components. We can create a functional component by just creating a javascript function. They may or may not be received parameters for example.
        \nconst helloworld = () =>{
        \n\tReturn \u201c<h1>Hello world<\/h1>\u201d;
        \n}
        \n<\/code>\n<\/li>\n
      2. Class components<\/strong> – class components are complex than functional components
        \nFunctional components do not know about other functional components but class components<\/a> may work with each other. We can use javascript ES6 classes to create class components. For example
        \nClass menu extends React.Component{
        \nrender() {
        \n\tReturn \u201c<h1>hello world<\/h1>\u201d;
        \n}
        \n}<\/code>\n<\/li>\n<\/ol>\n

        Rendering components – <\/h3>\n

        We need to render a component to use. We can render a component by initializing an element with a user-defined component as the first parameter ReactDOM.render(). For example:<\/p>\n

        Const element = <ComponentName \/>;<\/code><\/p>\n

        In the above example component name is the name of the user-defined component
        \nOpen index.js and make the below changes<\/strong>
        \nimport React from 'react';
        \nimport ReactDOM from 'react-dom';
        \n\/\/ This is a functional component
        \nconst Welcome=()=>
        \n{
        \nreturn <h1>Hello World!<\/h1>
        \n}<\/p>\n

        ReactDOM.render(
        \n\t<Welcome \/>,
        \n\tdocument.getElementById(\"root\")
        \n);<\/code><\/p>\n

        Knowledge of .NET is quite rewarding in the IT industry. If you have got some skills in the .NET framework then a .NET certification<\/a> from StudySection can prove to be a good attachment with your resume. You can go for a foundation level certificate as well as an advanced level certificate in the .NET framework.<\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

        In this tutorial, we will know about components in react js. A component is the building block of React application.<\/p>\n","protected":false},"author":1,"featured_media":5225,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[713,347],"acf":[],"yoast_head":"\nWhat are React JS Components - StudySection Blog<\/title>\n<meta name=\"description\" content=\"In this tutorial, we will know about components in react js. Every application developed in react js is made up of pieces called components.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/what-are-react-js-components\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What are React JS Components - StudySection Blog\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, we will know about components in react js. Every application developed in react js is made up of pieces called components.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/what-are-react-js-components\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-26T04:34:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-10-26T05:19:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/React-JS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\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:\/\/studysection.com\/blog\/what-are-react-js-components\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/what-are-react-js-components\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"What are React JS Components?\",\"datePublished\":\"2021-10-26T04:34:09+00:00\",\"dateModified\":\"2021-10-26T05:19:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/what-are-react-js-components\/\"},\"wordCount\":295,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"js\",\"React\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/what-are-react-js-components\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/what-are-react-js-components\/\",\"url\":\"https:\/\/studysection.com\/blog\/what-are-react-js-components\/\",\"name\":\"What are React JS Components - StudySection Blog\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2021-10-26T04:34:09+00:00\",\"dateModified\":\"2021-10-26T05:19:07+00:00\",\"description\":\"In this tutorial, we will know about components in react js. Every application developed in react js is made up of pieces called components.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/what-are-react-js-components\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/what-are-react-js-components\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/what-are-react-js-components\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What are React JS Components?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What are React JS Components - StudySection Blog","description":"In this tutorial, we will know about components in react js. Every application developed in react js is made up of pieces called components.","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:\/\/studysection.com\/blog\/what-are-react-js-components\/","og_locale":"en_US","og_type":"article","og_title":"What are React JS Components - StudySection Blog","og_description":"In this tutorial, we will know about components in react js. Every application developed in react js is made up of pieces called components.","og_url":"https:\/\/studysection.com\/blog\/what-are-react-js-components\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2021-10-26T04:34:09+00:00","article_modified_time":"2021-10-26T05:19:07+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/React-JS.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/what-are-react-js-components\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/what-are-react-js-components\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"What are React JS Components?","datePublished":"2021-10-26T04:34:09+00:00","dateModified":"2021-10-26T05:19:07+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/what-are-react-js-components\/"},"wordCount":295,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["js","React"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/what-are-react-js-components\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/what-are-react-js-components\/","url":"https:\/\/studysection.com\/blog\/what-are-react-js-components\/","name":"What are React JS Components - StudySection Blog","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2021-10-26T04:34:09+00:00","dateModified":"2021-10-26T05:19:07+00:00","description":"In this tutorial, we will know about components in react js. Every application developed in react js is made up of pieces called components.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/what-are-react-js-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/what-are-react-js-components\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/what-are-react-js-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"What are React JS Components?"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":371,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5224"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=5224"}],"version-history":[{"count":4,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5224\/revisions"}],"predecessor-version":[{"id":5230,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/5224\/revisions\/5230"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/5225"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=5224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=5224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=5224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}