In React, elements are building blocks of components. The simplest way to define a React component is to define a function:

function Greeter(props) { 
  return <h3>Hello, {props.name}!</h3>; 
}  

However, you can also use ECMAScript 6 class to define a component:

class Greeter extends React.Component { 
  render () {
     return <h3>Hello, {this.props.name}!</h3>;
   } 
}  

In React, React elements can represent DOM elements or React components:

const helloElement = <Greeter name="{user.name}"/>; 

Also, real React apps are in fact composed of reusable components and elements, which are then rendered in a specific DOM element. This component model is very powerful and has some similarity to the notion of nested custom controls in ASP.NET, but is entirely implemented on the client side:

class Hello extends React.Component { 
  render () {
     return <h3>Hello, {this.props.name}!</h3>;
   } 
}  
 
class HelloMakers() extends React.Component { 
  render () { 
    return ( 
      <div> 
        <Hello name="Patrick"/> 
        <Hello name="Vesa"/> 
      </div> 
    ); 
  } 
} 
 
ReactDOM.render( 
  <HelloMakers />, 
  document.getElementById('root') 
); 

As you saw in the previous examples, React components have properties called props. There is one very important rule in React when it comes to props, that is from the standpoint of the component, they are read-only. So, you can't modify props inside a component.

Components aren't static, however, since state allows React components to change their input over time without violating this rule. You don't have to use state--if you do, your React component is stateful, and if you don't, it is stateless:

class StatelessHello extends React.Component {  render () {
     return <h3>Hello, {this.props.name}!</h3>;
   } 
}  
 
class StatefulHello extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      fullName: props.firstName + " " props.lastName 
    }; 
  } 
  render () {
     return <h3>Hello, {this.state.fullName}!</h3>;
   } 
}  

If you are building stateful React components, you can only set the state directly in the constructor. After that, you will need to use the setState function, as follows:

// Wrong 
this.state.fullName = "Mr " + this.state.fullName; 
// Right 
this.setState({ 
  fullName: "Mr " + this.state.fullName  
}); 

From the component architecture point of view, a state is something that is internal to the component. Only the component knows whether it is stateful or stateless; a component can set the props for the child components but never the state. For the most part, this makes the solutions clear and easy to understand. However, there are situations where the state of a component needs to be available to other components--for example, if you are building a custom people picker and have a component that is holding the information about the selected user, you need to be able to communicate the information to other components. In React, this is called lifting the state up.

We lift the state by binding controls together with functions. Consider the following simple component with the input and button elements. When the value of input changes, the changed value is handled by the handleChange function, which in turn saves the new value in the component's state. When a button is clicked, the saveClick event occurs, and a function called saveValue is called, but that function is in the props of the component:

class SimpleComponent extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { value: ''}; 
    this.saveClick = this.saveClick.bind(this); 
    this.handleChange = this.handleChange.bind(this);     
  } 
  handleChange(e) { 
    this.setState({ value: e.target.value }); 
  } 
  saveClick(e) { 
    this.props.saveValue(this.state.value);     
  } 
  render() { 
    return ( 
      <div> 
        <input type="text" 
           onChange={this.handleChange} />        <button type="button" 
           onClick={this.saveClick}>Save</button> 
      </div> 
    ); 
  } 
}  

So, when we declare the component that is using this SimpleComponent, we are binding that component's function in the props of its child component so that property saveValue is, in fact, a function of the parent component, and the state value is communicated to the parent component:

class ParentComponent extends React.Component { 
  constructor(props) { 
    super(props); 
    this.simpleComponentDone = 
       this.simpleComponentDone.bind(this); 
  } 
  simpleComponentDone(valueFromSimpleComponent) { 
    alert(valueFromSimpleComponent); 
  } 
  render() { 
    return ( 
      <div> 
        <SimpleComponent 
           saveValue={this.simpleComponentDone} /> 
      </div> 
    ); 
  } 
}