How does props program flow work in react js?

App.js:


import React from 'react'

import Helloworld from './components/HelloWorld';

import Users from "./components/Users";

const App = () => {

return (

<div>

<h1>List of Users</h1>

<Users name="Zino Emi" job="Developer" />

<Users name="Lionel Messi" job="Web Developer" />

<Users name="Cristiano Ronaldo" job="Software Engineer" />

</div>

);

};

export default App;

src/components/Users.js:

import React from 'react'

const Users = (props) => {

return (

<div>

<div className="user">

<h2>Name: {props.name}</h2>

<h3>Job:{props.job}</h3>

</div>

</div>

)

}

export default Users

I’m not understanding the program flow here. What happens first then what?

Can anyone help me build a mental model of it?

Output:

I’m not sure what you mean.

What is your level of React knowledge? I’m assuming that someone that has reached this level of React would understand this, but…

This:

<Users name="Zino Emi" job="Developer" />

Feeds that data (name and job) into the component User and it gets rendered inside the JSX of App.js, that gets returned and gets rendered in the HTML.

Maybe we just need clarification on what you are asking.

Idk if this would help, but you can imagine writting components into JSX as calling a function. For example <Users name="Zino Emi" job="Developer" /> could be imagined as Users({ name: "Zino Emi", job: "Developer" }). Notice react components always have this first argument, which is an object and holds various data we wanna pass to use. Its common convention to call this argument props, but you can give it any name. Whatever attributes you pass to the “HTML-like” code will be parsed as keys to that object, so they can be accessed within the component/function declaration.
In the code snippet you provide, it can be imagined as you called the Users function 3 times, which would render that said component 3 times, with the data provided. For react, we just use different jargon and slightly different syntax, so we can distinguish the specific purpose of the code, but association to standard JS can be made(important to note, under the hood, the real JS behind component looks slightly different, if JSX is stripped).