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.

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.

Find our ReactJS Development Services

Posted On 09 February 2017 By MicroPyramid


Need any Help in your Project?Let's Talk

Latest Comments
Related Articles
React Component Lifecycle methods

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...
React-router for navigation

React router is a React package which helps in navigation.
React router is divided to three packages: react-router, react-router-dom and react-router-native.
As we are building ...

Continue Reading...
open source packages

Subscribe To our news letter

Subscribe and Stay Updated about our Webinars, 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