to Components and Props in React

Understand the concepts in less than 5 minute

I don’t have a background in development, so for me, starting to learn React while still being a beginner in JavaScript was as pleasant as putting freshly cut garlic on an open wound. And I’m one of the few humans who actually love garlic.

The biggest frustration in the beginning was that I just couldn’t understand what the hell props are. And why we’re using such an annoying term, can we not just call them … whatever they are?

So in this article I’ll explain props in the simplest way possible, for all beginners out there who can’t wrap their brain around this concept. I’ll also clarify what elements and components are, because this was also annoying in the beginning.

Element vs. component in React

React is based on JavaScript and uses JSX (JavaScript XML) instead of HTML. JSX allows you to write HTML elements in .js files, and translates those HTML tags into React elements.

For example, a plain <h1> Title </h1>in HTML will look like this in JSX:

// This is a React element, not a componentconst title = <h1> Title </h1>;

A React element is the smallest building block, and more elements put together form a component. So it’s element > component.

An element is basically what you want to see on the screen. In HTML, you would see the element displayed as soon as you write it in your .html file and hit save. This happens because you’re adding the node to the DOM.

In React you need to do the same thing, but you’re not affecting the actual DOM. Instead, you’re using the ReactDOM, which is a virtual DOM. A virtual DOM is a “copy” of the actual DOM, which holds updates made by the user, as they happen.

So if you want to add something to the ReactDOM, you need to use a specific method, called render().

Let’s say you want to render the title element from above. You call the method as follows:

ReactDOM.render(element, document.getElementById('id'));

The first parameter is the element, so what needs to be rendered. The second parameter is the container, so where it should be rendered in the DOM.

Moving to components. A React component is a JS function which also returns the markup that we want to see (so the elements), but through classical function syntax.

function Component() {
return <h1>This is the Heading</h1>;
}

When the component is created as a JS function, it is referred to as functional component.

A React component is rendered in the same way as an element, by using the render() method of the ReactDOM. However, instead of calling the function name, like we do in JS, we call the React component.

So we don’t write:

ReactDOM.render(Component(), document.getElementById('id'));

Instead, we write:

ReactDOM.render(<Component />, document.getElementById('id'));

So a React element uses regular HTML tags, while in a React component, the function name gives the name of the tag.

All React components must start with upper case letters.

What are props and who uses them, the elements or the components?

When you want to pass some attributes to an HTML element, you do it like this:

// The text "Title attribute" will be displayed as tooltip by the browser<p title="Title attribute"> Title </p>

In a JS function, when you want to pass parameters as input, you use this syntax:

function fctName(parameter) {
return parameter;
}

When we call this function, the valuesthat we pass as parameters are referred to as arguments. So the value of a parameter is an argument. Inside the function, the parameters behave like local variables.

In React, props are properties that serve as arguments or input for React components, in the same way that parameters passed to a regular JS function serve as arguments.

// React component with propsfunction Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

When we render this component, we can pass it a specific value for the name property. This value will be passed as an argument, in the same way that we pass attributes to HTML elements:

const el = <Welcome name="Saki" />;ReactDOM.render(el, document.getElementById('id'));

So this is how the code looks like:

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}const el = <Welcome name="Saki" />;ReactDOM.render(el, document.getElementById('id'));

props is an object, so in the code above, when you pass props, you’re actually passing {name: “value”}.

It’s as if you had an extra line that defines the object, like this:

const props = { name: “Saki” }

To access the name, it’s now obvious that you need to write props.name.

I hope this helped!