Understanding ReactJs Component, State and Props

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.


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>;




      <HelloWorld />,



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


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>;



  <Hello name="World" />,




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) {


    this.state = {count: 0 };


  onClick() {

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


  render() {

    return (



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





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.

To know more Information about ReactJS Development Services

    By Posted On

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

Free news and articles on Django, Python, Machine Learning, Amazon Web Services, DevOps, Salesforce, ReactJS, AngularJS, React Native.
*We don't provide your email contact details to any third parties