{"id":19640,"date":"2020-07-16T19:42:27","date_gmt":"2020-07-17T02:42:27","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=19640"},"modified":"2020-07-21T13:06:13","modified_gmt":"2020-07-21T20:06:13","slug":"react-components","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/react-components\/","title":{"rendered":"React Components – Functional vs. Class"},"content":{"rendered":"\n

React-js<\/em><\/a> is a JavaScript framework that allows us as developers to encapsulate code to make it more reusable. These encapsulated code snippets are called <\/em>components<\/em><\/strong>. They can hold their own logic and state without interfering with what\u2019s going on in the <\/em>Document Object Model (DOM)<\/em><\/a>. <\/em>
<\/p>\n\n\n\n

Abstracting portions of your website into these smaller bite-size components to pass data around allows your code to become reusable and more DRY (<\/em>D<\/em><\/strong>on\u2019t <\/em>R<\/em><\/strong>epeat <\/em>Y<\/em><\/strong>ourself). There are two main types of components that you will encounter in React:  Functional and Class Components.<\/em><\/p>\n\n\n\n

\n\n\n\n

At a very high level, React components are basically JavaScript functions that accept props<\/em> as a parameter and return some React elements <\/em>that basically describe what should be on the screen: 
<\/p>\n\n\n\n

import React from 'react';\nimport ReactDOM from 'react-dom';\n \nconst Greeting = (props) => {\n   return (\n       <div>\n           Hello, {props.name}\n       <\/div>\n   );\n};\n \nconst element = <Greeting name="Yolanda" \/>;\n \nReactDOM.render(\n   element, document.getElementById('root')\n)<\/pre><\/div>\n\n\n\n
The React element in this case here is a <div> <\/code>with some text in it. That text uses a props object that has been passed into the component. That props object will pass data down to children components from their parents. 
<\/p>\n\n\n\n
In this instance, the prop that has been passed down is name.<\/em> Element<\/em> represents the parent. 
<\/p>\n\n\n\n
Any property you pass into the <Greeting<\/code> \/><\/code><\/em> <\/code>component will make it to the props object and be available to use inside Greeting. This makes Greeting super reusable since we can pass in any name we would like into the component. <\/p>\n\n\n\n
Functional Components<\/h2>\n\n\n\n
Functional components, as we mentioned earlier, are basically JavaScript functions. You can use EcmaScript 5 (ES5) or EcmaScript a6 (ES6) syntax when creating React components. As a rule of thumb, React components must be Capitalized to indicate they are indeed components. 
<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n   <meta charset="UTF-8">\n   <meta name="viewport" content="width=device-width, initial-scale=1.0">\n   <title>Basic React Component<\/title>\n  \n<\/head>\n<body>\n   <!-- App is inserted at thr root node -->\n   <div id="root"><\/div>\n  \n   <!-- React CDN -->\n   <script src="https:\/\/unpkg.com\/react@16\/umd\/react.development.js" crossorigin><\/script>\n   <!-- React-DOM CDN -->\n   <script src="https:\/\/unpkg.com\/react-dom@16\/umd\/react-dom.development.js" crossorigin><\/script>\n  \n   <!-- React Components can be rendered here -->\n   <script async>\n       'use strict';\n \n       const element = React.createElement;\n \n       function Greeting() {\n           return element('h4', null , `Hello, World!`);\n       };\n \nfunction App() {\n           return element(Greeting);\n       };\n \n \n       const domContainer = document.querySelector('#root');\n           ReactDOM.render(element(App), domContainer);\n   <\/script>\n<\/body>\n<\/html><\/pre><\/div>\n\n\n\n
This is a mocked, working example of what an ES5 functional component looks like when we are not using JSX, but plain vanilla JavaScript. Don\u2019t worry too much about what\u2019s going on in the HTML. Focus on the JavaScript logic: we have an element that\u2019s being created, a function that\u2019s returning something and then that function is being rendered to some sort of ReactDOM. 
<\/p>\n\n\n\n
What JSX \u2013 short for JavaScript XML Extension \u2013 basically allows us to do is to write HTML in our JavaScript to make it more akin to what we are used to seeing in HTML. In the code example above, we are purely using JavaScript to create our HTML element and then using React\u2019s createElement method to insert an <h4><\/code> into the DOM at the <div id=\u201droot \/>. <\/code>
<\/p>\n\n\n\n
If we were to scale our application \u2013 make our application much bigger than it is \u2013 this type of writing would become cumbersome fairly quickly. JSX was created basically as syntactic sugar for the React.createElement method and allows us to scale our apps much quicker. <\/p>\n\n\n\n
<\/p>\n\n\n\n
Functional components can be written ES5 or ES6. This is an example of what both an ES5 and an ES6 functional component looks like using JSX: 
<\/p>\n\n\n\n
ES5 Functional Component<\/h4>\n\n\n\n
import React from 'react';\nimport ReactDOM from 'react-dom';\n \nfunction Animal(props) {\n           const element = <h1>My cat's name is {props.name}<\/h1>;\n           return element;\n      }\n       function App() {\n               return <Animal name="Marshmallow"\/>\n       };\n      const domContainer = document.querySelector('#root');\n          ReactDOM.render(<App\/>, domContainer);<\/pre><\/div>\n\n\n\n
ES6 Functional Component<\/h4>\n\n\n\n
const Animal = (props) => {\n           const element = <h1>My cat's name is {props.name}<\/h1>;\n           return element;\n      }\n       const App = () => {\n               return <Animal name="Marshmallow"\/>\n       };\n      const domContainer = document.querySelector('#root');\n          ReactDOM.render(<App\/>, domContainer);<\/pre><\/div>\n\n\n\n
Prior to React v.16, functional components were known as stateless<\/em> components. This means that the main purpose of the component was to be presentational \u2013 to look good on the page. Quite often, data was passed to these functional components so that they could display something on the user interface.
<\/p>\n\n\n\n
With the advent of React v.16 that all changed. We will get into that in a little bit. For right now, just know that functional components exist to receive some sort of data from a parent or from some global object to present something to the client. <\/p>\n\n\n\n
Class Components<\/h2>\n\n\n\n
Class components are a little more complicated than \u201cjust\u201d a JavaScript function. Class components in React borrow the concept of the ES6 JavaScript class. The structure of a class in JavaScript is pretty much an object that has attributes and methods associated with it. We use the this<\/code> keyword to access an instance of that object and interact with it.
<\/p>\n\n\n\n
In React, for the most part, the structure is the same. React class components are an instance of an object and this object has what we call state.<\/em> At a high level, state is just data that the component holds \u2013 think of it just as another way to set up attributes and bind it to the class. As a developer you can then do whatever you would like with that data: present it on screen, pass it around to other components, use it to do other logic, etc. 
<\/p>\n\n\n\n
An ES6 class component is always capitalized, just like with functional components \u2013 that is a React rule so that the transpiler knows it\u2019s a component. Because we are inheriting the component structure from React itself, we have to extend<\/em> React\u2019s Component<\/code> class. Inside that block of code is where we will put our state:
<\/p>\n\n\n\n
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Name from '.\/Name';\n \n   \/\/ the 'this' keyword needs to be used when we are talking about an instance of a class. So it will go in front of your methods and state when referring to it in your render method.\nclass Animal extends React.Component {\n   constructor(props) {\n       super(props);\n       this.state = {\n           species: ['fox', 'tiger', 'bear', 'kangaroo', 'fish', 'cat', 'dog', 'squirrel']\n       }\n   }\n  \n \n   render() {\n       return (\n           <div>\n               {this.state.species.map(animal => {\n                   return <Name animal={animal}\/>\n               })}\n           <\/div>\n       )\n   }\n}\nReactDOM.render(<Animal \/>, document.getElementById('root'));<\/pre><\/div>\n\n\n\n
State is an object full of properties and values. Our state here has a property of species and its value is an array full of animals. To refer to or interact with this array at all, we use this.state.species.<\/code>
<\/p>\n\n\n\n
The purpose of the class component above is to pass the name of the animal down to the <Name \/><\/code> component. The <Name \/><\/code> component\u2019s job is to do something with that data when it gets it. The Animal\u2019s state will become part of a props object when it is passed to a functional or other class component. It will be able to be accessed in child components as long as it keeps getting passed down. 
<\/p>\n\n\n\n
Just remember that in React, data flows down from parent component to child component only one level. <\/em>You must pass it down another level if you need the data in the parent\u2019s grandchild component. 
<\/p>\n\n\n\n
Another feature of class components in React is that we have access to and use lifecycle methods to keep track of our state. React lifecycles typically have three phases: They are created (Mounting), they live (Update) and they die (Unmounting). There are methods to access and\/or change state at each of the stages of the lifecycle method:
<\/p>\n\n\n\n
  1. ComponentDidMount() \u2013 this is the lifecycle method where we would make AJAX requests\/network requests to initialize state. Use this.setState() to load your retrieved data into state. <\/li>
  2. ComponentDidUpdate() \u2013 any updates to state occur here after a user has interacted with the application. <\/li>
  3. ComponentDidUnmount() \u2013 this is a cleanup function that occurs when the component unmounts. It\u2019ll take care of timers, AJAX requests, etc. <\/li><\/ol>\n\n\n\n
    There are more lifecycle methods than these \u2013 those listed are just the main ones. Please see React documentation for more information about these methods. 
    <\/p>\n\n\n\n
    Finally, in contrast to the functional component\u2019s return statement, class components use a render()<\/code> method. This method is invoked after ReactDOM.render() passes the Animal component and React calls its constructor. State is then initialized and then the render method is called to actually put content on the screen.\u00a0
    <\/p>\n\n\n\n
    Whew! That\u2019s a lot of information. 
    <\/p>\n\n\n\n
    Just remember that functional components prior to React v. 16<\/em><\/strong> were primarily presentational \u2013 they didn\u2019t handle state \u2013 they just displayed it. Class components detailed all the state logic for us and passed the information down to other components as props.
    <\/p>\n\n\n\n
    Functional Components and useState()<\/h2>\n\n\n\n
    In 2018, React introduced the idea of React Hooks<\/em><\/strong>. Hooks are a clean and concise way of utilizing lifecycle methods and state inside a Functional Component. 
    <\/p>\n\n\n\n
    Most everything is very similar to everything we have covered so far. We have some state, we need to do stuff with it, and we need to pass it somewhere else. The main objectives are the same. The syntax is much cleaner \u2013 it just requires a little bit of getting used to. <\/p>\n\n\n\n
    What I would do is bookmark this site, practice, and get some repetitions in for class components, really understand<\/strong> how the data flow works in React, and then come back here to finish learning about stateful functional components<\/strong>. 
    <\/p>\n\n\n\n
    Let\u2019s start out with the code that we had before: 
    <\/p>\n\n\n\n
    import React from 'react';\nimport ReactDOM from 'react-dom';\n \nconst Animal = (props) => {\n           const element = <h1>My cat's name is {props.name}<\/h1>;\n           return element;\n      }\n       const App = () => {\n\t\tconst [ state, setState ] = useState('Marshmallow');\n               return <Animal name={state}\/>\n \n       };\n      const domContainer = document.querySelector('#root');\n          ReactDOM.render(<App\/>, domContainer);<\/pre><\/div>\n\n\n\n
    We have two components, one Animal and one App. It looks like App is returning Animal and passing in a prop called name with a value of \u201cMarshmallow\u201d. 
    <\/p>\n\n\n\n
    Believe it or not, there isn\u2019t much we have to do to convert this into some stateful logic. Let\u2019s take a look at the <App> component. We\u2019re are going to follow these steps: 
    <\/p>\n\n\n\n
    import React, {useState} from 'react';<\/pre><\/div>\n\n\n\n
    \t— this line will import our hook, useState.<\/p>\n\n\n\n
    const [ state, setState ] = useState('Marshmallow');<\/pre><\/div>\n\n\n\n
    \u2013 this line initializes our state. State and setState here are arbitrary words. You can name these whatever you\u2019d like. It\u2019s customary to name them after what the value is. <\/p>\n\n\n\n
    \u2013 state is our actual state. The initial state is inside the parentheses in useState(). <\/p>\n\n\n\n
    \u2013 setState is similar to this.setState(). This is the method that will change our state as we journey through our application. <\/p>\n\n\n\n
                   return <Animal name={state}\/><\/pre><\/div>\n\n\n\n
    \u2013 replace \u201cMarshmallow\u201d with {state}. When we need to write JavaScript in JSX, we use curly braces. Curly braces here allows us to pass in our variable.
    <\/p>\n\n\n\n
    One of the features that defined class components, the React Lifecycle, with its various methods, is skimmed down to one basic hook that encapsulates all the methods! The useEffect() hook can mount, update and unmount the React component it\u2019s in. <\/p>\n\n\n\n
    Conclusion<\/h2>\n\n\n\n
    Prior to React v. 16, functional components were purely used as a presentational view layer with no use of state except as props that were passed down from class components. Class components held all of the state of the application and passed the data around. Class components utilized life cycle methods that mounted, updated and unmounted our React component. We also found that React Hooks, a new pattern released by React in version 16, allows for functional components to be stateful and have it\u2019s own version of lifecycle methods. 
    <\/p>\n\n\n\n
    It\u2019ll be important to be familiar with all of the different types of components even though React Hooks is becoming more popular \u2013 legacy code will probably use class components for a while and will still need to be understood so you can work with it! <\/p>\n","protected":false},"excerpt":{"rendered":"React-js is a JavaScript framework that allows us as developers to encapsulate code to make it more reusable. These encapsulated code snippets are called components. They can hold their own logic and state without interfering with what\u2019s going on in the Document Object Model (DOM).  Abstracting portions of your website into these smaller bite-size components…","protected":false},"author":77,"featured_media":19330,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[],"class_list":{"0":"post-19640","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":[],"is_guest_post":[]},"yoast_head":"\nReact Components - Functional vs. Class %<\/title>\n<meta name=\"description\" content=\"Learning your first JavaScript framework can be a daunting task. #CareerKarma sets out to make it a little easier with this React tutorial on functional and class 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:\/\/careerkarma.com\/blog\/react-components\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Components - Functional vs. Class\" \/>\n<meta property=\"og:description\" content=\"Learning your first JavaScript framework can be a daunting task. #CareerKarma sets out to make it a little easier with this React tutorial on functional and class components.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/react-components\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-17T02:42:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-07-21T20:06:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/artem-sapegin-b18TRXc8UPQ-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Kopecky\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christina Kopecky\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/react-components\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/react-components\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"React Components – Functional vs. Class\",\"datePublished\":\"2020-07-17T02:42:27+00:00\",\"dateModified\":\"2020-07-21T20:06:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/react-components\/\"},\"wordCount\":1665,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/react-components\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/artem-sapegin-b18TRXc8UPQ-unsplash.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/react-components\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/react-components\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/react-components\/\",\"name\":\"React Components - Functional vs. Class %\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/react-components\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/react-components\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/artem-sapegin-b18TRXc8UPQ-unsplash.jpg\",\"datePublished\":\"2020-07-17T02:42:27+00:00\",\"dateModified\":\"2020-07-21T20:06:13+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"Learning your first JavaScript framework can be a daunting task. #CareerKarma sets out to make it a little easier with this React tutorial on functional and class components.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/react-components\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/react-components\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/react-components\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/artem-sapegin-b18TRXc8UPQ-unsplash.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/artem-sapegin-b18TRXc8UPQ-unsplash.jpg\",\"width\":1020,\"height\":680,\"caption\":\"Lines of React Code on light background\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/react-components\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/careerkarma.com\/blog\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"React Components – Functional vs. Class\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\",\"name\":\"Christina Kopecky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg\",\"caption\":\"Christina Kopecky\"},\"description\":\"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.\",\"sameAs\":[\"http:\/\/www.linkedin.com\/in\/cmvnk\"],\"url\":\"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React Components - Functional vs. Class %","description":"Learning your first JavaScript framework can be a daunting task. #CareerKarma sets out to make it a little easier with this React tutorial on functional and class 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:\/\/careerkarma.com\/blog\/react-components\/","og_locale":"en_US","og_type":"article","og_title":"React Components - Functional vs. Class","og_description":"Learning your first JavaScript framework can be a daunting task. #CareerKarma sets out to make it a little easier with this React tutorial on functional and class components.","og_url":"https:\/\/careerkarma.com\/blog\/react-components\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-07-17T02:42:27+00:00","article_modified_time":"2020-07-21T20:06:13+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/artem-sapegin-b18TRXc8UPQ-unsplash.jpg","type":"image\/jpeg"}],"author":"Christina Kopecky","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Christina Kopecky","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/react-components\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/react-components\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"React Components – Functional vs. Class","datePublished":"2020-07-17T02:42:27+00:00","dateModified":"2020-07-21T20:06:13+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/react-components\/"},"wordCount":1665,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/react-components\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/artem-sapegin-b18TRXc8UPQ-unsplash.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/react-components\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/react-components\/","url":"https:\/\/careerkarma.com\/blog\/react-components\/","name":"React Components - Functional vs. Class %","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/react-components\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/react-components\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/artem-sapegin-b18TRXc8UPQ-unsplash.jpg","datePublished":"2020-07-17T02:42:27+00:00","dateModified":"2020-07-21T20:06:13+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"Learning your first JavaScript framework can be a daunting task. #CareerKarma sets out to make it a little easier with this React tutorial on functional and class components.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/react-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/react-components\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/react-components\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/artem-sapegin-b18TRXc8UPQ-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/artem-sapegin-b18TRXc8UPQ-unsplash.jpg","width":1020,"height":680,"caption":"Lines of React Code on light background"},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/react-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/careerkarma.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"React Components – Functional vs. Class"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e","name":"Christina Kopecky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","caption":"Christina Kopecky"},"description":"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.","sameAs":["http:\/\/www.linkedin.com\/in\/cmvnk"],"url":"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/19640","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=19640"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/19640\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/19330"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=19640"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=19640"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=19640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}