{"id":275,"date":"2021-01-04T04:13:58","date_gmt":"2021-01-04T04:13:58","guid":{"rendered":"https:\/\/codeflarelimited.com\/blog\/?p=275"},"modified":"2021-04-21T03:11:03","modified_gmt":"2021-04-21T02:11:03","slug":"getting-started-with-react-native-create-a-class-component","status":"publish","type":"post","link":"https:\/\/codeflarelimited.com\/blog\/getting-started-with-react-native-create-a-class-component\/","title":{"rendered":"Getting Started With React Native: Create a Class Component"},"content":{"rendered":"\n

The React <\/a>Library allows you to define components either as classes or functions. These components allow you to split your UI into independent, reusable pieces, and help you think about each piece in isolation.<\/p>\n\n\n\n

You could think of these components as functions in JavaScript<\/a>. These functions<\/em><\/strong> usually have arbitrary inputs (called \u201cprops\u201d) and return React elements and describes what should appear on the screen.<\/p>\n\n\n\n

In order to invoke a React lifecycle method, you will need to define a component<\/strong> either as a function<\/em><\/strong> or as a class<\/strong><\/em>. For the sake of this tutorial, we are going to define our components as a class.<\/p>\n\n\n\n

Defining a Class Component<\/h3>\n\n\n\n

To define a class component in React, your class needs to extend React Component<\/a>. See example below:<\/p>\n\n\n\n

import React, {Component} from 'react';\n\nclass YourClassName extends Component {\n \/\/do actions here\n}<\/code><\/pre>\n\n\n\n
Now, notice the import statement at the top of our code. That line is necessary for our extended class to work properly.<\/p>\n\n\n\n
“YourClassName<\/strong>” is typically the name of your file in which you are creating the component. This could be App.js<\/em><\/strong>, Home.js<\/strong><\/em>, or whatever class name you decide to use.<\/p>\n\n\n\n
Next, we need to export this our newly created component so that it can be available globally to the our application. If you fail or forget export it, your application will throw an error when you try to use that component.<\/p>\n\n\n\n
import React, {Component} from 'react';\n\nclass YourClassName extends Component {\n \/\/do actions here\n}\n\nexport default YourClassName;<\/code><\/pre>\n\n\n\n
Mounting a Component<\/h3>\n\n\n\n
To make a component available and inserted into the DOM, we need to render it and return some texts.<\/p>\n\n\n\n
import React, {Component} from 'react';\nimport { View, Text } from 'react-native';\n\nclass YourClassName extends Component {\n render(){\n return(\n <View>\n <Text>This is a component<\/Text>\n <\/View>\n)\n}\n}\n\nexport default YourClassName;<\/code><\/pre>\n\n\n\n
When we run this code, we will get the result on the screen:<\/p>\n\n\n\n
This is a component<\/code><\/pre>\n\n\n\n
\n
BEGIN YOUR REACT NATIVE JOURNEY<\/a><\/div>\n<\/div>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
The React Library allows you to define components either as classes or functions. These components allow you to<\/p>\n","protected":false},"author":1,"featured_media":123,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[31],"tags":[],"class_list":["post-275","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native"],"yoast_head":"\nGetting Started With React Native: Create a Class Component<\/title>\n<meta name=\"description\" content=\"The React Library allows you to define components either as classes or functions. These components allows you to split your UI into ...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codeflarelimited.com\/blog\/getting-started-with-react-native-create-a-class-component\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Getting Started With React Native: Create a Class Component\" \/>\n<meta property=\"og:description\" content=\"The React Library allows you to define components either as classes or functions. These components allows you to split your UI into ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codeflarelimited.com\/blog\/getting-started-with-react-native-create-a-class-component\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/facebook.com\/codeflretech\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-04T04:13:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-04-21T02:11:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/react-native.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"631\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"codeflare\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codeflaretech\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/getting-started-with-react-native-create-a-class-component\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/getting-started-with-react-native-create-a-class-component\\\/\"},\"author\":{\"name\":\"codeflare\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/person\\\/7e65653d49add95629f8c1053c5cd76a\"},\"headline\":\"Getting Started With React Native: Create a Class Component\",\"datePublished\":\"2021-01-04T04:13:58+00:00\",\"dateModified\":\"2021-04-21T02:11:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/getting-started-with-react-native-create-a-class-component\\\/\"},\"wordCount\":266,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/getting-started-with-react-native-create-a-class-component\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/react-native.png\",\"articleSection\":[\"react native\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/getting-started-with-react-native-create-a-class-component\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/getting-started-with-react-native-create-a-class-component\\\/\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/getting-started-with-react-native-create-a-class-component\\\/\",\"name\":\"Getting Started With React Native: Create a Class Component\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/getting-started-with-react-native-create-a-class-component\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/getting-started-with-react-native-create-a-class-component\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/react-native.png\",\"datePublished\":\"2021-01-04T04:13:58+00:00\",\"dateModified\":\"2021-04-21T02:11:03+00:00\",\"description\":\"The React Library allows you to define components either as classes or functions. These components allows you to split your UI into ...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/getting-started-with-react-native-create-a-class-component\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/getting-started-with-react-native-create-a-class-component\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/getting-started-with-react-native-create-a-class-component\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/react-native.png\",\"contentUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/react-native.png\",\"width\":1024,\"height\":631,\"caption\":\"Getting started with react native\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/getting-started-with-react-native-create-a-class-component\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"react native\",\"item\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Getting Started With React Native: Create a Class Component\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\",\"name\":\"\",\"description\":\"Sustainable solutions\",\"publisher\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\",\"name\":\"Codeflare Limited\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/codeflare.png\",\"contentUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/codeflare.png\",\"width\":1040,\"height\":263,\"caption\":\"Codeflare Limited\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/person\\\/7e65653d49add95629f8c1053c5cd76a\",\"name\":\"codeflare\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"caption\":\"codeflare\"},\"description\":\"Latest tech news and coding tips.\",\"sameAs\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\",\"https:\\\/\\\/facebook.com\\\/codeflretech\",\"https:\\\/\\\/instagram.com\\\/codeflaretech\",\"https:\\\/\\\/x.com\\\/codeflaretech\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCuBLtiYqsajHdqw0uyt7Ofw?sub_confirmation=1\"],\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/author\\\/watcher\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Getting Started With React Native: Create a Class Component","description":"The React Library allows you to define components either as classes or functions. These components allows you to split your UI into ...","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:\/\/codeflarelimited.com\/blog\/getting-started-with-react-native-create-a-class-component\/","og_locale":"en_US","og_type":"article","og_title":"Getting Started With React Native: Create a Class Component","og_description":"The React Library allows you to define components either as classes or functions. These components allows you to split your UI into ...","og_url":"https:\/\/codeflarelimited.com\/blog\/getting-started-with-react-native-create-a-class-component\/","article_author":"https:\/\/facebook.com\/codeflretech","article_published_time":"2021-01-04T04:13:58+00:00","article_modified_time":"2021-04-21T02:11:03+00:00","og_image":[{"width":1024,"height":631,"url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/react-native.png","type":"image\/png"}],"author":"codeflare","twitter_card":"summary_large_image","twitter_creator":"@codeflaretech","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/codeflarelimited.com\/blog\/getting-started-with-react-native-create-a-class-component\/#article","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/getting-started-with-react-native-create-a-class-component\/"},"author":{"name":"codeflare","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/person\/7e65653d49add95629f8c1053c5cd76a"},"headline":"Getting Started With React Native: Create a Class Component","datePublished":"2021-01-04T04:13:58+00:00","dateModified":"2021-04-21T02:11:03+00:00","mainEntityOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/getting-started-with-react-native-create-a-class-component\/"},"wordCount":266,"commentCount":2,"publisher":{"@id":"https:\/\/codeflarelimited.com\/blog\/#organization"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/getting-started-with-react-native-create-a-class-component\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/react-native.png","articleSection":["react native"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codeflarelimited.com\/blog\/getting-started-with-react-native-create-a-class-component\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codeflarelimited.com\/blog\/getting-started-with-react-native-create-a-class-component\/","url":"https:\/\/codeflarelimited.com\/blog\/getting-started-with-react-native-create-a-class-component\/","name":"Getting Started With React Native: Create a Class Component","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/getting-started-with-react-native-create-a-class-component\/#primaryimage"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/getting-started-with-react-native-create-a-class-component\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/react-native.png","datePublished":"2021-01-04T04:13:58+00:00","dateModified":"2021-04-21T02:11:03+00:00","description":"The React Library allows you to define components either as classes or functions. These components allows you to split your UI into ...","breadcrumb":{"@id":"https:\/\/codeflarelimited.com\/blog\/getting-started-with-react-native-create-a-class-component\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codeflarelimited.com\/blog\/getting-started-with-react-native-create-a-class-component\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeflarelimited.com\/blog\/getting-started-with-react-native-create-a-class-component\/#primaryimage","url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/react-native.png","contentUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/react-native.png","width":1024,"height":631,"caption":"Getting started with react native"},{"@type":"BreadcrumbList","@id":"https:\/\/codeflarelimited.com\/blog\/getting-started-with-react-native-create-a-class-component\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codeflarelimited.com\/blog\/"},{"@type":"ListItem","position":2,"name":"react native","item":"https:\/\/codeflarelimited.com\/blog\/react-native\/"},{"@type":"ListItem","position":3,"name":"Getting Started With React Native: Create a Class Component"}]},{"@type":"WebSite","@id":"https:\/\/codeflarelimited.com\/blog\/#website","url":"https:\/\/codeflarelimited.com\/blog\/","name":"","description":"Sustainable solutions","publisher":{"@id":"https:\/\/codeflarelimited.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codeflarelimited.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codeflarelimited.com\/blog\/#organization","name":"Codeflare Limited","url":"https:\/\/codeflarelimited.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/codeflare.png","contentUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/codeflare.png","width":1040,"height":263,"caption":"Codeflare Limited"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/person\/7e65653d49add95629f8c1053c5cd76a","name":"codeflare","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","caption":"codeflare"},"description":"Latest tech news and coding tips.","sameAs":["https:\/\/codeflarelimited.com\/blog","https:\/\/facebook.com\/codeflretech","https:\/\/instagram.com\/codeflaretech","https:\/\/x.com\/codeflaretech","https:\/\/www.youtube.com\/channel\/UCuBLtiYqsajHdqw0uyt7Ofw?sub_confirmation=1"],"url":"https:\/\/codeflarelimited.com\/blog\/author\/watcher\/"}]}},"jetpack_featured_media_url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/react-native.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/comments?post=275"}],"version-history":[{"count":5,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/275\/revisions"}],"predecessor-version":[{"id":478,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/275\/revisions\/478"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/media\/123"}],"wp:attachment":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/media?parent=275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/categories?post=275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/tags?post=275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}