React JS Tutorial #4: Props

Props are an important concept in React JS. They are used to pass data from one component to another. In this tutorial, we will learn how to use props in our React applications.

First, let’s create a simple React component that takes in a prop:

    
class Greeting extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

ReactDOM.render(, document.getElementById('root'));
    
  

In this example, we have created a Greeting component that takes in a prop called “name”. We then render the component and pass in a value for the “name” prop.

Now, let’s look at how we can access props inside a component:

    
class Greeting extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}
    
  

Inside the Greeting component, we can access the value of the “name” prop using “this.props.name”. This allows us to dynamically display the value of the prop in our component.

Props are also useful for passing down data from a parent component to a child component. This allows us to create reusable components that can be customized with different data.

In summary, props are an important concept in React JS that allow us to pass data from one component to another. They are used to customize and configure components, and are essential for building flexible and reusable applications.