React Fundamental 4: Creating custom components

Just like in regular JavaScript, when you want to reuse code, you write functions. If you want to share JSX, you can do that as well. In React we call these functions “components” and they have some special properties.

Components are functions which accept an object called “props” and return something that is renderable (more React elements, strings, null, numbers, etc.). To be clear, this is the definition of a React component. That’s all it is. So I’ll say it

Components are functions which accept an object called “props” and return something that is renderable

Here’s an example of that:

function Greeting(props) {
    return <h1>Hello, {props.name}</h1>
}

Then that component can be used like this:

<Greeting name="World" />