A major advantage of React is that it facilitates the overall process of writing components which can then in turn be reused. It can become challenging to track the flow of information from one component to another, especially when one wants to keep track of the props. Having a flow chart to be used as an available reference would allow a person to easily view the progression of information among the components. In this example, an actual React project will be utilized.
One would start in the parent component (which many times is App.js) and look at the components that are rendered within it. These components probably have props which are included to pass down. Here is an example:
src/componentsApp.js
Login, Signup, and Medications are rendered. We therefore start with the following connections:
App → Login
App → Signup
App → Medications
src/components/Login.js
LoginForm is rendered. The flow chart is updated to the following.
App → Login → LoginForm(End)
App → Signup
App → Medications
LoginForm is opened and looking at the code reveals that it does not have any children so that line is complete. Any component without children are not shown in this post. We now go to Signup. When there are no children, (End) is entered to clarify that no component was left out of that progression.
src/components/Signup.js
SignupForm is rendered and therefore added to the list.
App → Login → LoginForm(End)
App → Signup → SignupForm(End)
App → Medications
SignupForm does not have any children so that line is complete. We now go to back to Medications. For the remainder of this posting, the logic will be continued. A progression will be followed and when a new progression is advanced, that will be an indication that the previous progression's last component had no children. If a branching occurs, every component up to that branching will be repeated.
src/components/Medications.js
App → Login → LoginForm(End)
App → Signup → SignupForm(End)
App → Medications → MedicationList
App → Medications → CreateMedication
src/lists/MedicationList.js
App → Login → LoginForm(End)
App → Signup → SignupForm(End)
App → Medications → MedicationList → Medication(End)
App → Medications → MedicationList → ComplicationList
App → Medications → CreateMedication
src/lists/ComplicationList.js
App → Login → LoginForm(End)
App → Signup → SignupForm(End)
App → Medications → MedicationList → Medication(End)
App → Medications → MedicationList → ComplicationList → Complication
App → Medications → MedicationList → ComplicationList → CreateComplication
App → Medications → CreateMedication
src/components/Complication.js
App → Login → LoginForm(End)
App → Signup → SignupForm(End)
App → Medications → MedicationList → Medication(End)
App → Medications → MedicationList → ComplicationList → Complication → EditComplicationForm(End)
App → Medications → MedicationList → ComplicationList → CreateComplication
App → Medications → CreateMedication
src/components/CreateComplication.js
App → Login → LoginForm(End)
App → Signup → SignupForm(End)
App → Medications → MedicationList → Medication(End)
App → Medications → MedicationList → ComplicationList → Complication → EditComplicationForm(End)
App → Medications → MedicationList → ComplicationList → CreateComplication → ComplicationForm(End)
App → Medications → CreateMedication
src/components/CreateMedication.js
App → Login → LoginForm(End)
App → Signup → SignupForm(End)
App → Medications → MedicationList → Medication(End)
App → Medications → MedicationList → ComplicationList → Complication → EditComplicationForm(End)
App → Medications → MedicationList → ComplicationList → CreateComplication → ComplicationForm(End)
App → Medications → CreateMedication → MedicationForm(End)
There is now a complete list of the progression of information which can be referenced during the building or usage of React.js programming.
Top comments (0)