How does props program flow work in react js?

[shivajikobardan]

TL;DR

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

Can anyone help me build a mental model of it?

Output:

 

[shivajikobardan]

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

 

[Mark44]

I'll take a shot at this, although it's been a long time since I've done anything in JavaScript and I don't know React.js at all.

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.

Your analysis looks more-or-less correct to me. What I would add is to describe App and Users as function objects, AKA lambdas.
The => notation in your code suggests to me that these are function objects.

const App = () => { <snip>

const Users = (props) => { <snip>

App.js imports a function object named Users, and defines a function object named App. The App function object takes no parameters and returns an HTML div.

Inside the div that is returned are calls to the Users function object. This function object takes one parameter, a list or tuple whose members are name and job. This function object also returns an HTML div. The HTML div that App returns lists Users three times, with each instance being a call to this function object, passing the relevant tuple/list in the call.