Understanding ReactJs Component, State and Props

Reading Time : ~ .

ReactJs is populer JS script library for building User Interface. It's components are reusable and efficiently manages the data that changes over time.

In this article i am discussing Component, State, Props.

Component:

React Component is a independent, reusable code and it contains HTML  + Javascript. Components data will be stored in component's State. This state can be modified based on user action or other action. when component state is changed React will re-render the component to the browser. you must impliment render method when creating component.

    var HelloWorld = React.createClass({

      render: function() {

        return <h1>Hello World</h1>;

      }

    });

    ReactDOM.render(

      <HelloWorld />,

      document.getElementById('container')

    ); 

Above is a simple component which display HelloWorld heading to the Browser.

Props:

Props are simmiler to arguments for pure functions argument. Props of component are passed from parent component which invokes component. Props in a component cannot be modified(Immutable). Consider below example we are sending name prop to HelloWorld Component. all props can be accessible with this.props.

var HelloWorld = React.createClass({

  render: function() {

    return <div>Hello {this.props.name}</div>;

  }

});
ReactDOM.render(

  <Hello name="World" />,

  document.getElementById('container')

);

State

Component state can be modified over time in response to user actions, network responses, and anything. We have to impliment class based components by extending React.Component to get state features. Add a class constructor to add initial state.
below is a simple counter example which changes its state every time for user button click.

class Counter from React.Component {

   constructor(props) {

    super(props);

    this.state = {count: 0 };

  }

  onClick() {

    this.setState({count: this.state.count + 1});

  }

  render() {

    return (

      <div>

        <div>count:{this.state.count}</div>

        <button onClick={this.onClick}>click!</button>

      </div>

    );

  }

};

ReactDOM.render(<Counter />, document.getElementById("container"));

use setState to change the state of react Component. whenever state changes the react will re-render the component.

    By Posted On
SENIOR DEVELOPER at MICROPYRAMID

Need any Help in your Project?Let's Talk

Latest Comments
Related Articles
React Component Lifecycle methods Ravi Kumar Gadila

React provides some specific methods which are executed when specific condition triggered in component. basically these methods are divided into 3 parts mounting component, updating ...

Continue Reading...

Subscribe To our news letter

Subscribe to our news letter to receive latest blog posts into your inbox. Please fill your email address in the below form.
*We don't provide your email contact details to any third parties