Monday, March 12, 2018

ReactJS - State






Image result for ReactJS - Environment Setup
Image result for ReactJS - Environment SetupImage result for ReactJS - state Image result for ReactJS - state

State is the place where the data comes from. We should always try to make our state as simple as possible and minimize the number of stateful components. If we have, for example, ten components that need data from the state, we should create one container component that will keep the state for all of them.

Using Props

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

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));
This will produce the following result.
React State Simple
Previous Post
Next Post

0 Comments: