Organized Chaos: React and the Montessori Classroom
React is a JavaScript library used for building single page web applications that can change data without the the need to reload. Components are the building blocks of React. They are independent, reusable pieces of the UI that allow developers to think of each piece in isolation. How data moves between these components is crucial to React developers, a concept that is critical for beginners, like me, to grasp. The app component is at the top of an imaginary tree. All components must fit together like branches. . The parent app can have many children, but children can only have one Parent component. I think of this as a Montessori classroom. The teacher is like the parent component. There is one teacher but, there are many children that need to be kept track of, they are the children components.
The Parent holds data in state when there is a need to keep track of and remember information. A component cannot receive data from children or siblings, it is the parent that passes down the data as a prop, or property. The parent sends state to the child component inside of the function setState, which in turn in nested inside another function. The child then updates state in the parent by sending data to the function that holds setState. This was a difficult concept for me to grasp. Thinking back to My Montessori classroom was the best way for me to wrap my head around how data is passed around components.
Going back to the analogy of the classroom it works like this:
The teacher is state, tasked with holding all saved information — both the students themselves and all the work each is doing. At the beginning of the day the whole classroom is set to 0. All of the material is ready for the students to work with and learn from. The classroom is clean and organized. The students come in for the day and the teacher assigns them tasks. The students disperse with their own agendas and begin to work. As they work information comes back to the teacher. A student completing a lesson, a spill near the snack table, a missing piece from a lesson and so on. The children are not aware of what the other children are doing as they are busy with their own tasks, but the teacher is keeping track of them all. This may not be the very best analogy, but it helped me visualize how components pass information and how the parent component uses state, and setState to send and receive updated information.
Resources:
https://dev.to/alexmercedcoder/react-data-flow-understanding-state-and-props-2759
