Understanding ReactJs Component, State and Props

ReactJs is populer Javascript library for building User Interface. It's components are reusable and efficiently manages the data that changes over time. If require any support then contact our ReactJS consulting

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

Component:

React Component is an 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 a component state is changed React will re-render the component to the browser. you must implement render method when creating a 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 similar 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 implement 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.