The following sample code shows how to create a stateful component using EcmaScript2016 syntax.<\/p>\n
App.jsx<\/p>\n
import React from ‘react’;<\/p>\n
class App extends React.Component {<\/p>\n
constructor(props) {<\/p>\n
super(props);<\/p>\n
this.state = {<\/p>\n
header: “Header from state…”,<\/p>\n
content: “Content from state…”<\/p>\n
}<\/p>\n
}<\/p>\n
render() {<\/p>\n
return (<\/p>\n
<div><\/p>\n
<h1>{this.state.header}<\/h1><\/p>\n
<h2>{this.state.content}<\/h2><\/p>\n
<\/div><\/p>\n
);<\/p>\n
}<\/p>\n
}<\/p>\n
export default App;<\/p>\n
main.js<\/p>\n
import React from ‘react’;<\/p>\n
import ReactDOM from ‘react-dom’;<\/p>\n
import App from ‘.\/App.jsx’;<\/p>\n
ReactDOM.render(<App \/>, document.getElementById(‘app’));<\/p>\n","protected":false},"excerpt":{"rendered":"
The following sample code shows how to create a stateful component using EcmaScript2016 syntax. App.jsx import React from ‘react’; class App extends React.Component { constructor(props) { super(props); this.state = { header: “Header from state…”, content: “Content from state…” } } render() { return ( <div> <h1>{this.state.header}<\/h1> <h2>{this.state.content}<\/h2> <\/div> ); } } export default App; main.js…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8528],"tags":[8563],"class_list":["post-73443","page","type-page","status-publish","hentry","category-reactjs","tag-using-state"],"acf":[],"yoast_head":"\n