Need to understand the flow of the react project

I am new to react.js and I am struggling with how should I go about understating the flow of the react project. What will be the next step the compiler will run? If someone can help me out with brief or detailed explanation on this, that would be very helpful for me.

For example, below is the App component of one react project.

1. So I am not understanding which line will be the first to run?
2. What will be the flow after that?
3. What line of code calls the below code: let content = ( <p style={{ textAlign: 'center' }}>No goals found. Maybe add one?</p> );
4. What line of code calls the if statement.

import React, { useState } from 'react';

import CourseGoalList from './components/CourseGoals/CourseGoalList/CourseGoalList';
import CourseInput from './components/CourseGoals/CourseInput/CourseInput';
import './App.css';

const App = () => {
  const [courseGoals, setCourseGoals] = useState([
    { text: 'Grocery Shopping', id: 'g1' },
    { text: 'Finish Learning React!', id: 'g2' }
  ]);

  const addGoalHandler = enteredText => {
    setCourseGoals(prevGoals => {
      const updatedGoals = [...prevGoals];
      updatedGoals.unshift({ text: enteredText, id: Math.random().toString() });
      return updatedGoals;
    });
  };

  const deleteItemHandler = goalId => {
    setCourseGoals(prevGoals => {
      const updatedGoals = prevGoals.filter(goal => goal.id !== goalId);
      return updatedGoals;
    });
  };

  let content = (
    <p style={{ textAlign: 'center' }}>No goals found. Maybe add one?</p>
  );

  if (courseGoals.length > 0) {
    content = (
      <CourseGoalList items={courseGoals} onDeleteItem={deleteItemHandler} />
    );
  }

  return (
    <div>
      <section id="goal-form">
        <CourseInput onAddGoal={addGoalHandler} />
      </section>
      <section id="goals">
        {content}
      </section>
    </div>
  );
};

export default App;