Scribd
Upload
56 views

React Js

The document discusses state in React components. It recommends minimizing stateful components and keeping state in a single container component when multiple components need the same state data. It then provides an example of a simple stateful component class called App that defines state properties for a header and content and renders them. The state is initialized in the constructor and accessed via this.state in the render method.

Uploaded by

Mohamed Nazeer
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
56 views

React Js

The document discusses state in React components. It recommends minimizing stateful components and keeping state in a single container component when multiple components need the same state data. It then provides an example of a simple stateful component class called App that defines state properties for a header and content and renders them. The state is initialized in the constructor and accessed via this.state in the render method.

Uploaded by

Mohamed Nazeer
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

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 State
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.

You might also like