[React] Creating a stateless functional Component

The most of the components of this you write would be stateless, meaning that they take in props and return what do you want to be di Splayed. In React 0.14, a simpler syntax for writing these kinds of the components were introduced, and we began calling these component S "Stateless functional Components". In this lesson, let's take a look at what define a stateless function component, and how to integrate useful React Featu Res like Prop Type validation and using this new component syntax.

Compnents with state:

class Title extends React.component {  render () {    return  (       .props.value}    )  }}class App extends React.component {  render () {      Return  (      <title value= "Hello world!"/>    )  }}reactdom.render (  <app/>,  document.queryselector ("#root"))

Conver Title component to stateless component:

Const TITLE =  (props) = (  ) class App extends react.component {  render () {    return  (      <title value= "Hello world!"/>     )  }} Reactdom.render (  <app/>,  document.queryselector ("#root"))

So are cannot access lifecycle hooks, anyway a dump compoennt doesn ' t need to handle those lifecycle hooks.

But if you want to set Defaultprops and Proptypes, it's still possible:

 /*  class Title extends React.component { Render () {return ( */ Span style= "color: #000000;" >const Title  = (props) => ( ) title.proptypes  = {value:React.PropTypes.string.isRequired} Title.defaultprops  = {value:  "Egghead.io is awson!!" }class App extends React.component {render () {   ( <title value= "Hello world!"/>"}}reactdom.render ( <app/>, Document.queryselector ("#root"  

Statless compoennt rendering much fast than extends one.

[React] Creating a stateless functional Component