Day 6 of #100daysofcode

Today we’ll look at how to create a simple reusable react component.

Our initial code will be :

Assume we want to have multiple instances of the same div within our “container” div, such as :

Instead, we can make use of a reusable react component :

Here we have an inline function that returns a div into which we can enter our message.

Let us now write a message utilizing the react component :

If you use reactdom to render this, you will get :

Now utilizing JSX syntax :

If you render this element, you will obtain :

It states that “if you meant to render a react component, start its name with an uppercase letter,” hence we must update our message to Message.

Now render this, and the result will be :

You might even try something like :

If we change msg to children, the result will be the same since in JSX, children is also a prop that allows us to insert stuff in our div.

That’s all there is to toady.