The most important concepts to understand React are components, props, state and hooks.
I will explain 'props', short for 'properties' here. Props are accessed as parameters in the Component function. Often times, they are destructured to keep the code cleaner.
I will assume that you know how to import and export the components in your project hierarchy but if not, you can check out the create-react-app docs
//in the App.js file you would render the prop:
<Hello person={benjamin} />
//and in the Hello.js file, the person prop would be passed down:
function Hello(props) {
return <h1>Hello, {props.person}</h1>
}
//which would ouput:
<h1>Hello, benjamin</h1>
//alternatively, you could destructure the prop for cleaner code:
function Hello({props}) {
return <h1> Hello,{person}</h1>
}
You can have as many props as needed. For example:
function Weather ({temperature, day} {
return <h2> It will be {temperature} degrees on {day}</h2>
}
<Weather temperature='84' day='Tuesday' />
//Which results in:
<h2> It will be 84 degrees on Tuesday </h2>
Class components
It seems that developers are moving away from class-based components as it's unnecessarily verbose. However, if you are still using class components, the process is very similar, but you need to add a this.props
instead of just props
For example:
import { Component } from 'react'
class Greeting extends Component {
render() {
return <p>Hello, {this.props.who}!</p>;
}
}
Prop Types
A prop can have any value including strings, numbers, objects, arrays, booleans, variable, function references.
- String literal:
<Component prop='this is a string'>
- Template literal:
<Component prop={`this is a string with a ${variable}`}
- Number literal:
<Component prop={14} />
- Boolean literal:
<Component prop={true} /}
- Object literal:
<Component pro={{property : 'value'}} />
- Array literal:
<Component prop={['item 1','item 2']} />
- JSX
<Component prop={Message who='Batman' />} />
- Variables or function references
<Component prop={functionReference} />
Top comments (0)