# Lesson3-4: State Management: Functional Components
###### tags: `Recat`

{%youtube ySW7t8X5jyQ%}

> 💡 Template Literals 💡
In the following video, you'll see us using back-ticks (` `) in the "style" attribute's value. Recall that these [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) allow for embedded expressions. Using template literals, you can interpolate expressions as normal strings through your app.

> For further reading, feel free to check out [ES6 - JavaScript](https://www.udacity.com/course/es6-javascript-improved--ud356) Improved to explore the latest features and improvements to the language.

{%youtube b05Cd0nkmfE%}
[Here's the commit with the changes made in this video.](https://github.com/udacity/reactnd-contacts-app/commit/b7b51c961edd507582974c60cd0c3635be66e8bb)
# Class Components vs. Stateless Functional Components
## Class Component

## Stateless Functional Component



# Stateless Functional Components Recap
If your component does not keep track of internal state (i.e., all it really has is just a `render()` method), you can declare the component as a Stateless Functional Component.

Remember that at the end of the day, React components are really just JavaScript functions that return HTML for rendering. As such, the following two examples of a simple Email component are equivalent:

class Email extends React.Component {
 render() {
   return (
     <div>
       {this.props.text}
     </div>
   );
 }
}

const Email = (props) => (
 <div>
   {props.text}
 </div>
);

In the latter example (written as an ES6 function with an implicit return), rather than accessing `props` from `this.props`, we can pass in props directly as an argument to the function itself. In turn, this regular JavaScript function can serve as the Email component's `render()` method.

# Further Research
- [Functional Components vs. Stateless Functional Components vs. Stateless Components](https://tylermcginnis.com/functional-components-vs-stateless-functional-components-vs-stateless-components/) from Tyler