Welcome Guest! (App Version 5.16)

websitnero logo name

Components

What are Components?

Component is an "ES6 Class" in react. It takes some input (most often props or properties) and then returns a React Element that describes how a section of UI should apprear on user screen or how this part should look like.

Types of Components

There are 2 kinds of component in React:

  • Class Components
  • Functional Components

Functional Components

Functional Component is easy to make, with minimum haslte. It has no complexity. There is no concept of state in a Functional Component.

Example of it will be:

function Home(props){
  return (
    <div>{props.name}</div>
  )
}

Class Component

Class component is more complex, it is mostly used in React and has the right to create and use "state" in React.

Example of it will be:

class Home extends Component{
  state = {
    name: "Peter Martin",
    age: 29,
    country: "USA"
  }

  render(){
    return(
      <div>
        {/* has access to state */}
        {this.state.name}
        {this.state.age}
        {this.state.country}
				
        {/* has also access to props object (passed from parent) */}
        {this.props.color}
        {this.props.fruit}
        {this.props.vegetable}
      </div>
    )
  }
}
WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.