How does props program flow work in react js?

programming web dev
1

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:

1600×584 40.6 KB

2

I dont really know React as I dont use it, it confuses me to but later on, this stuff is still easy.
The main thing you need to know is that “props” in a stateless component come from its parent component through the attributes.

Or, lets ask ChatGPT to have a go at explaining whats happening for you…

ME: If I have the following two files for a React app in javascript, could you explain the flow of operation here and tell me whats happening?
[I wont include the two files to keep this short, you know whats in them. I only removed the HelloWorld bit because its not used]

Chat:
The file App.js is the root component of your React app. It is responsible for rendering the main content of your app to the DOM (Document Object Model).

The App function is a React component that returns a JSX element. JSX is a syntax extension for JavaScript that allows you to write HTML-like code in your JavaScript files. The JSX element returned by the App component is a div element that contains an h1 element and three instances of the Users component.

The Users component is a functional component that takes in two props: name and job. It is a stateless component, which means that it does not have its own state and only receives data from its parent component via props. The Users component returns a JSX element that displays the name and job of a user in a div element.

When the app is run, the App component will be rendered to the DOM and, in turn, render the Users components with the specified name and job props. This will result in the following HTML being rendered to the DOM:

<div>
  <h1>List of Users</h1>
  <div>
    <h2>Name: Zino Emi</h2>
    <h3>Job: Developer</h3>
  </div>
  <div>
    <h2>Name: Lionel Messi</h2>
    <h3>Job: Web Developer</h3>
  </div>
  <div>
    <h2>Name: Cristiano Ronaldo</h2>
    <h3>Job: Software Engineer</h3>
  </div>
</div>

This HTML will be displayed in the browser and the user will see a list of users with their names and jobs displayed.

ME:
could you further explain the flow of data through attributes and props

CHAT:
In a React app, components can pass data from one component to another through props. Props are short for “properties” and are a way for a component to receive data from its parent component.

In the example you provided, the App component is the parent component and the Users component is the child component. The App component passes data to the Users component through props.

Here’s how the flow of data works in this example:

  1. The App component receives data (in this case, the names and jobs of the users) as variables or constants within the component.
  2. The App component passes the data to the Users component through props. This is done by specifying the data as attributes in the JSX element for the Users component. For example: <Users name="Zino Emi" job="Developer" />
  3. The Users component receives the data passed from the App component through props. Props are received by the component as an argument to the component function. In the case of the Users component, the props are received as an argument called props.
  4. The Users component uses the data received through props to display the name and job of a user. It does this by using JSX expressions to access the values of the name and job props. For example: {props.name} and {props.job}.

So in this example, the data flows from the App component to the Users component through props. The App component is responsible for storing and managing the data, while the Users component is responsible for displaying the data to the user.