How does props program flow work in react js?

[polaryeti]

 

 

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? React is really confusing man. 

 

Can anyone help me build a mental model of it? 

 

Output:

[polaryeti]

1) Start with App.js

2) It returns Users component.

3) Inside Users component we pass properties name and job.

4) Inside Users.js we access it using props.name and props.job.

A figure that helped me.

 

Edited December 29, 2022 by polaryeti